import type { Prisma } from "@prisma/client";
import clsx from "clsx";
import { Check } from "lucide-react";
import type { Metadata } from "next";
import Link from "next/link";
import { changerStatutTache } from "@/lib/actions/dossiers";
import { utilisateurCourant } from "@/lib/auth";
import { db } from "@/lib/db";
import { dateCourte } from "@/lib/format";
import { ajouterJours, debutJour } from "@/lib/procedure";
import { filtreDossiersActifs } from "@/lib/tableau-de-bord";
import { EnTetePage, PastilleSociete, Vide } from "@/components/ui";

export const metadata: Metadata = { title: "Tâches" };

const VUES = [
  { id: "retard", libelle: "En retard" },
  { id: "jour", libelle: "Aujourd'hui" },
  { id: "semaine", libelle: "7 prochains jours" },
  { id: "toutes", libelle: "Toutes à faire" },
];
const LIMITE = 300;

export default async function PageTaches({
  searchParams,
}: {
  searchParams: Promise<{ vue?: string; personne?: string; societe?: string }>;
}) {
  const moi = await utilisateurCourant();
  const f = await searchParams;
  const vue = f.vue ?? "retard";
  // Par défaut chacun voit ses tâches ; la direction voit tout le monde.
  const personne = f.personne ?? (["DIRECTEUR", "ADMIN"].includes(moi.role) ? "tous" : moi.id);
  const aujourdHui = debutJour();

  const echeance: Prisma.DateTimeNullableFilter | undefined = {
    retard: { lt: aujourdHui },
    jour: { equals: aujourdHui },
    semaine: { gte: aujourdHui, lt: ajouterJours(aujourdHui, 7) },
    toutes: undefined,
  }[vue];

  const where: Prisma.TacheDossierWhereInput = {
    statut: "A_FAIRE",
    dossier: filtreDossiersActifs(f.societe),
    ...(echeance && { echeance }),
    ...(personne !== "tous" && { assigneId: personne }),
  };

  const [taches, total, utilisateurs] = await Promise.all([
    db.tacheDossier.findMany({
      where,
      orderBy: [{ echeance: { sort: "asc", nulls: "last" } }, { numero: "asc" }],
      take: LIMITE,
      include: { dossier: { include: { societe: true } }, assigne: true },
    }),
    db.tacheDossier.count({ where }),
    db.utilisateur.findMany({ where: { actif: true }, orderBy: { nom: "asc" } }),
  ]);

  const lien = (modifs: Record<string, string | undefined>) => {
    const p = new URLSearchParams(Object.entries({ vue, personne, societe: f.societe, ...modifs }).filter(([, v]) => v) as [string, string][]);
    return `/taches?${p}`;
  };

  return (
    <div className="mx-auto max-w-6xl">
      <EnTetePage titre="Tâches" sousTitre={`${total} étape(s) de procédure${total > LIMITE ? ` — ${LIMITE} premières affichées` : ""}`} />

      <div className="mb-4 flex flex-wrap items-center gap-3">
        <div className="flex rounded-lg border border-bord bg-surface p-0.5 text-sm" role="group" aria-label="Période">
          {VUES.map((v) => (
            <Link key={v.id} href={lien({ vue: v.id })} className={clsx("rounded-md px-3 py-1.5 font-medium", vue === v.id ? "bg-accent text-white" : "text-encre-2")}>
              {v.libelle}
            </Link>
          ))}
        </div>
        <form method="get" className="flex items-center gap-2">
          <input type="hidden" name="vue" value={vue} />
          {f.societe && <input type="hidden" name="societe" value={f.societe} />}
          <label className="sr-only" htmlFor="personne">Personne</label>
          <select id="personne" name="personne" defaultValue={personne} className="champ w-auto">
            <option value="tous">Tout le monde</option>
            {utilisateurs.map((u) => <option key={u.id} value={u.id}>{u.id === moi.id ? `${u.nom} (moi)` : u.nom}</option>)}
          </select>
          <button className="bouton">Afficher</button>
        </form>
      </div>
      {personne !== "tous" && (
        <p className="mb-3 text-xs text-encre-2">
          Seules les étapes assignées nommément sont listées ; les étapes confiées à un rôle (PLANIF, STOCK…) apparaissent dans « Tout le monde ».
        </p>
      )}

      <div className="carte overflow-hidden">
        {taches.length === 0 ? (
          <Vide>Aucune étape dans cette vue.</Vide>
        ) : (
          <ul className="divide-y divide-bord">
            {taches.map((t) => {
              const late = t.echeance && t.echeance < aujourdHui;
              return (
                <li key={t.id} className="flex gap-3 px-4 py-3">
                  <form action={changerStatutTache.bind(null, t.id, "FAIT")}>
                    <button aria-label="Marquer comme fait" className="mt-0.5 flex h-6 w-6 items-center justify-center rounded-md border border-stone-300 bg-surface text-transparent hover:border-succes hover:text-succes">
                      <Check className="h-4 w-4" aria-hidden />
                    </button>
                  </form>
                  <div className="min-w-0 flex-1">
                    <p className="text-sm">
                      <span className="chiffres mr-1.5 text-xs text-encre-3">{t.numero}.</span>
                      {t.libelle}
                    </p>
                    <p className="mt-0.5 flex flex-wrap items-center gap-x-3 text-xs text-encre-2">
                      <Link href={`/dossiers/${t.dossierId}`} className="font-medium text-accent hover:underline">
                        N° {t.dossier.numero} · {t.dossier.intitule}
                      </Link>
                      <PastilleSociete code={t.dossier.societe.code} couleur={t.dossier.societe.couleur} />
                      <span>{t.assigne?.nom ?? t.responsable}</span>
                    </p>
                  </div>
                  <span className={clsx("chiffres shrink-0 text-xs", late ? "font-medium text-danger" : "text-encre-2")}>
                    {t.echeance ? dateCourte(t.echeance) : "—"}
                  </span>
                </li>
              );
            })}
          </ul>
        )}
      </div>
    </div>
  );
}