import { requireClient } from "@/lib/guards";
import { db, schema } from "@/lib/db";
import { desc, eq } from "drizzle-orm";
import Link from "next/link";

export const metadata = { title: "Mes dossiers" };

const statusLabels: Record<string, string> = {
  formulaire: "Formulaire soumis",
  en_attente_paiement: "En attente paiement",
  en_cours: "En cours",
  termine: "Terminé",
  annule: "Annulé",
};

export default async function DossiersClientPage() {
  const session = await requireClient();

  const dossiers = await db
    .select()
    .from(schema.dossier)
    .where(eq(schema.dossier.clientId, session.user.id))
    .orderBy(desc(schema.dossier.updatedAt));

  return (
    <div className="space-y-10 max-w-5xl">
      <header>
        <span className="eyebrow">Espace client</span>
        <h1 className="display-lg !text-4xl text-primary mt-2">Mes dossiers</h1>
      </header>

      {dossiers.length === 0 ? (
        <div className="bg-white border border-outline-variant p-16 text-center">
          <p className="body-md text-on-surface-variant italic">
            Aucun dossier pour l'instant.
          </p>
        </div>
      ) : (
        <ul className="space-y-4">
          {dossiers.map((d) => (
            <li
              key={d.id}
              className="bg-white border border-outline-variant hover:border-primary transition-colors"
            >
              <Link
                href={`/espace-client/dossiers/${d.id}`}
                className="block p-6 lg:p-8"
              >
                <div className="flex items-start justify-between gap-6 flex-wrap">
                  <div className="min-w-0">
                    <p className="text-xs text-on-surface-variant font-serif tracking-widest uppercase">
                      {d.reference}
                    </p>
                    <h2 className="font-serif text-xl text-primary mt-1">
                      {d.title}
                    </h2>
                    <p className="text-sm text-on-surface-variant mt-2">
                      Mis à jour le{" "}
                      {new Date(d.updatedAt).toLocaleDateString("fr-FR", {
                        day: "numeric",
                        month: "long",
                        year: "numeric",
                      })}
                    </p>
                  </div>
                  <span className="inline-block px-3 py-1.5 text-[10px] uppercase tracking-widest font-serif bg-surface-container text-on-surface-variant">
                    {statusLabels[d.status] ?? d.status}
                  </span>
                </div>
              </Link>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}