import { notFound } from "next/navigation";
import Link from "next/link";
import { eq, desc } from "drizzle-orm";
import { db, schema } from "@/lib/db";
import { services } from "@/lib/services";
import type { FormField, DocumentRequest } from "@/lib/forms/types";
import { FIELD_TYPE_LABELS } from "@/lib/forms/types";
import Icon from "@/components/Icon";
import DossierActions from "./DossierActions";
import MarkPaidButton from "./MarkPaidButton";

export const metadata = { title: "Dossier" };

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

const docStatusLabels: Record<string, string> = {
  demande: "Demandé",
  uploade: "Reçu, à valider",
  valide: "Validé",
  rejete: "Rejeté",
};

const invoiceStatusLabels: Record<string, string> = {
  brouillon: "Brouillon",
  envoyee: "Envoyée",
  payee: "Payée",
  annulee: "Annulée",
};

export default async function DossierDetailPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;

  const dossier = (
    await db
      .select()
      .from(schema.dossier)
      .where(eq(schema.dossier.id, id))
      .limit(1)
  )[0];
  if (!dossier) notFound();

  const client = (
    await db
      .select()
      .from(schema.user)
      .where(eq(schema.user.id, dossier.clientId))
      .limit(1)
  )[0];

  const documents = await db
    .select()
    .from(schema.document)
    .where(eq(schema.document.dossierId, id))
    .orderBy(desc(schema.document.requestedAt));

  const invoices = await db
    .select()
    .from(schema.invoice)
    .where(eq(schema.invoice.dossierId, id))
    .orderBy(desc(schema.invoice.issuedAt));

  // Récupère le template du formulaire pour résoudre les labels des champs.
  const tpl = (
    await db
      .select()
      .from(schema.formTemplate)
      .where(eq(schema.formTemplate.serviceSlug, dossier.serviceSlug))
      .limit(1)
  )[0];

  const service = services.find((s) => s.slug === dossier.serviceSlug);
  const fields = (tpl?.fields as FormField[]) ?? [];
  const formData = (dossier.formData ?? {}) as Record<string, unknown>;

  // Activity log (audit trail)
  const activity = await db
    .select()
    .from(schema.activityLog)
    .where(eq(schema.activityLog.dossierId, id))
    .orderBy(desc(schema.activityLog.createdAt))
    .limit(20);

  return (
    <div className="space-y-12 max-w-5xl">
      <Link
        href="/socialexadmin/dossiers/en-cours"
        className="inline-flex items-center gap-2 text-xs uppercase tracking-widest text-on-surface-variant hover:text-primary transition-colors font-serif"
      >
        <Icon name="arrow_back" className="!text-base" />
        Retour aux dossiers
      </Link>

      {/* En-tête */}
      <header className="border-b border-outline-variant pb-8 space-y-3">
        <div className="flex items-center gap-4 flex-wrap">
          <span className="font-mono text-xs text-on-surface-variant">
            {dossier.reference}
          </span>
          <StatusBadge status={dossier.status} />
        </div>
        <h1 className="display-lg !text-4xl text-primary">{dossier.title}</h1>
        <div className="flex items-center gap-6 text-sm text-on-surface-variant flex-wrap">
          {client && (
            <Link
              href={`/socialexadmin/clients/${client.id}`}
              className="inline-flex items-center gap-2 hover:text-primary transition-colors"
            >
              <Icon name="person" className="!text-sm" />
              {client.name} · {client.email}
            </Link>
          )}
          <span>
            <Icon name="event" className="!text-sm align-middle mr-1" />
            Créé le{" "}
            {new Date(dossier.createdAt).toLocaleDateString("fr-FR", {
              day: "numeric",
              month: "long",
              year: "numeric",
            })}
          </span>
          {service && (
            <span className="font-mono text-xs">
              {service.category}/{service.slug}
            </span>
          )}
        </div>
      </header>

      <DossierActions
        dossierId={dossier.id}
        currentStatus={dossier.status}
      />

      {/* Réponses au formulaire */}
      <section className="space-y-6">
        <header>
          <h2 className="font-serif text-2xl text-primary">
            Réponses du client
          </h2>
          <p className="text-sm text-on-surface-variant mt-1">
            Soumis le{" "}
            {new Date(dossier.createdAt).toLocaleDateString("fr-FR", {
              day: "numeric",
              month: "long",
              year: "numeric",
              hour: "2-digit",
              minute: "2-digit",
            })}
          </p>
        </header>

        {fields.length === 0 ? (
          <div className="bg-white border border-outline-variant p-8">
            <pre className="text-xs font-mono text-on-surface-variant overflow-auto">
              {JSON.stringify(formData, null, 2)}
            </pre>
          </div>
        ) : (
          <div className="bg-white border border-outline-variant divide-y divide-outline-variant/40">
            {fields
              .filter((f) => f.type !== "file")
              .map((f) => {
                const v = formData[f.id];
                return (
                  <div
                    key={f.id}
                    className="grid grid-cols-1 md:grid-cols-3 gap-4 p-5"
                  >
                    <div>
                      <p className="eyebrow !text-on-surface-variant">
                        {f.label}
                      </p>
                      <p className="text-xs font-mono text-outline mt-1">
                        {FIELD_TYPE_LABELS[f.type]} · {f.id}
                      </p>
                    </div>
                    <div className="md:col-span-2">
                      <FormValue field={f} value={v} />
                    </div>
                  </div>
                );
              })}
          </div>
        )}
      </section>

      {/* Documents */}
      <section className="space-y-6">
        <header>
          <h2 className="font-serif text-2xl text-primary">
            Documents ({documents.length})
          </h2>
          <p className="text-sm text-on-surface-variant mt-1">
            Pièces fournies par le client + documents demandés.
          </p>
        </header>

        {documents.length === 0 ? (
          <div className="bg-white border border-outline-variant p-8 text-center">
            <p className="text-sm text-on-surface-variant italic">
              Aucun document.
            </p>
          </div>
        ) : (
          <div className="bg-white border border-outline-variant divide-y divide-outline-variant/40">
            {documents.map((d) => (
              <div
                key={d.id}
                className="flex items-center justify-between gap-4 p-5 flex-wrap"
              >
                <div className="min-w-0 flex items-start gap-3">
                  <Icon
                    name={d.fileName ? "description" : "schedule"}
                    className="!text-xl text-secondary mt-0.5"
                  />
                  <div className="min-w-0">
                    <p className="font-serif text-base text-primary">
                      {d.label}
                    </p>
                    {d.description && (
                      <p className="text-xs text-on-surface-variant mt-0.5">
                        {d.description}
                      </p>
                    )}
                    {d.fileName && (
                      <p className="text-xs font-mono text-on-surface-variant mt-1 truncate">
                        {d.fileName}
                        {d.fileSizeBytes
                          ? ` · ${(d.fileSizeBytes / 1024 / 1024).toFixed(2)} Mo`
                          : ""}
                      </p>
                    )}
                  </div>
                </div>
                <div className="flex items-center gap-3 flex-wrap">
                  <span className="text-[10px] uppercase tracking-widest font-serif px-2.5 py-1 bg-surface-container text-on-surface-variant">
                    {docStatusLabels[d.status] ?? d.status}
                  </span>
                  {d.fileName && (
                    <a
                      href={`/api/admin/documents/${d.id}/download`}
                      className="inline-flex items-center gap-1 text-xs uppercase tracking-widest font-serif text-secondary hover:text-primary transition-colors"
                    >
                      <Icon name="download" className="!text-base" />
                      Télécharger
                    </a>
                  )}
                </div>
              </div>
            ))}
          </div>
        )}
      </section>

      {/* Factures */}
      <section className="space-y-6">
        <header>
          <h2 className="font-serif text-2xl text-primary">Factures</h2>
        </header>

        {invoices.length === 0 ? (
          <div className="bg-white border border-outline-variant p-8 text-center">
            <p className="text-sm text-on-surface-variant italic">
              Aucune facture.
            </p>
          </div>
        ) : (
          <div className="bg-white border border-outline-variant divide-y divide-outline-variant/40">
            {invoices.map((inv) => {
              const amount = new Intl.NumberFormat("fr-FR", {
                style: "currency",
                currency: "EUR",
              }).format(inv.amountCents / 100);
              return (
                <div
                  key={inv.id}
                  className="grid grid-cols-1 md:grid-cols-4 gap-4 p-5 items-center"
                >
                  <div>
                    <p className="font-mono text-sm text-primary">
                      {inv.number}
                    </p>
                    <p className="text-xs text-on-surface-variant mt-1">
                      Émise le{" "}
                      {inv.issuedAt
                        ? new Date(inv.issuedAt).toLocaleDateString("fr-FR")
                        : "—"}
                    </p>
                  </div>
                  <div>
                    <p className="font-serif text-2xl text-secondary">
                      {amount}
                    </p>
                  </div>
                  <div>
                    <span className="text-[10px] uppercase tracking-widest font-serif px-2.5 py-1 bg-surface-container text-on-surface-variant">
                      {invoiceStatusLabels[inv.status] ?? inv.status}
                    </span>
                  </div>
                  <div className="md:text-right">
                    <MarkPaidButton
                      invoiceId={inv.id}
                      dossierId={dossier.id}
                      status={inv.status}
                    />
                  </div>
                </div>
              );
            })}
          </div>
        )}
      </section>

      {/* Activity log */}
      {activity.length > 0 && (
        <section className="space-y-6">
          <header>
            <h2 className="font-serif text-2xl text-primary">Activité</h2>
          </header>
          <div className="bg-white border border-outline-variant divide-y divide-outline-variant/40">
            {activity.map((a) => (
              <div key={a.id} className="p-4 text-sm">
                <span className="font-mono text-xs text-on-surface-variant mr-3">
                  {new Date(a.createdAt).toLocaleString("fr-FR", {
                    day: "2-digit",
                    month: "short",
                    hour: "2-digit",
                    minute: "2-digit",
                  })}
                </span>
                <span className="text-on-surface">
                  {a.action.replace(/_/g, " ")}
                </span>
              </div>
            ))}
          </div>
        </section>
      )}
    </div>
  );
}

function StatusBadge({ status }: { status: string }) {
  return (
    <span className="text-xs uppercase tracking-widest font-serif px-3 py-1 bg-primary text-on-primary">
      {statusLabels[status] ?? status}
    </span>
  );
}

function FormValue({
  field,
  value,
}: {
  field: FormField;
  value: unknown;
}) {
  if (value == null || value === "") {
    return <span className="text-on-surface-variant italic text-sm">—</span>;
  }
  if (Array.isArray(value)) {
    // Champ de type fichier : noms uploadés
    return (
      <ul className="space-y-1 text-sm font-mono text-on-surface-variant">
        {value.map((v, i) => (
          <li key={i}>{String(v)}</li>
        ))}
      </ul>
    );
  }
  if (field.type === "checkbox") {
    return (
      <span className="text-sm">
        {value === true || value === "true" ? "Oui" : "Non"}
      </span>
    );
  }
  if (field.type === "select" || field.type === "radio") {
    const opt = field.options?.find((o) => o.value === value);
    return (
      <span className="body-md text-on-surface">
        {opt?.label ?? String(value)}
      </span>
    );
  }
  if (field.type === "textarea") {
    return (
      <p className="body-md text-on-surface whitespace-pre-wrap">
        {String(value)}
      </p>
    );
  }
  return <p className="body-md text-on-surface">{String(value)}</p>;
}