import Link from "next/link";

export type DossierRow = {
  id: string;
  reference: string;
  title: string;
  serviceSlug: string;
  status: string;
  createdAt: Date;
  updatedAt: Date;
  clientName: string | null;
  clientEmail: string | null;
};

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

export default function DossierTable({
  rows,
  emptyLabel,
  hrefPrefix,
}: {
  rows: DossierRow[];
  emptyLabel: string;
  /** Préfixe de l'URL de la fiche dossier (ex: /socialexadmin/dossiers/fiches). */
  hrefPrefix?: string;
}) {
  if (rows.length === 0) {
    return (
      <div className="bg-white border border-outline-variant p-16 text-center">
        <p className="body-md text-on-surface-variant italic">{emptyLabel}</p>
      </div>
    );
  }

  return (
    <div className="bg-white border border-outline-variant overflow-x-auto">
      <table className="w-full text-sm">
        <thead>
          <tr className="border-b border-outline-variant/60 text-left">
            <th className="eyebrow !text-on-surface-variant p-4">Référence</th>
            <th className="eyebrow !text-on-surface-variant p-4">Titre</th>
            <th className="eyebrow !text-on-surface-variant p-4">Client</th>
            <th className="eyebrow !text-on-surface-variant p-4">Service</th>
            <th className="eyebrow !text-on-surface-variant p-4">Statut</th>
            <th className="eyebrow !text-on-surface-variant p-4">
              Mis à jour
            </th>
          </tr>
        </thead>
        <tbody>
          {rows.map((d) => {
            const RowWrap: React.ElementType = hrefPrefix ? Link : "tr";
            const props = hrefPrefix
              ? { href: `${hrefPrefix}/${d.id}`, className: "contents" }
              : {};
            return (
              <tr
                key={d.id}
                className="border-b border-outline-variant/40 last:border-b-0 hover:bg-surface-container-low transition-colors"
              >
                <td className="font-serif text-primary p-4">
                  {hrefPrefix ? (
                    <Link
                      href={`${hrefPrefix}/${d.id}`}
                      className="hover:text-secondary"
                    >
                      {d.reference}
                    </Link>
                  ) : (
                    d.reference
                  )}
                </td>
                <td className="text-on-surface p-4">{d.title}</td>
                <td className="text-on-surface-variant p-4">
                  {d.clientName ?? "—"}
                </td>
                <td className="text-on-surface-variant p-4 text-xs">
                  {d.serviceSlug}
                </td>
                <td className="p-4">
                  <span className="inline-block px-2.5 py-1 text-[10px] uppercase tracking-widest font-serif bg-surface-container text-on-surface-variant">
                    {statusLabels[d.status] ?? d.status}
                  </span>
                </td>
                <td className="text-on-surface-variant p-4 text-xs">
                  {new Date(d.updatedAt).toLocaleDateString("fr-FR", {
                    day: "numeric",
                    month: "short",
                    year: "numeric",
                  })}
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}