import { notFound } from "next/navigation";
import Link from "next/link";
import { eq, desc } from "drizzle-orm";
import { requireClient } from "@/lib/guards";
import { db, schema } from "@/lib/db";
import type { FormField } from "@/lib/forms/types";
import Icon from "@/components/Icon";
import { isStripeConfigured } from "@/lib/stripe";
import { payInvoiceAction } from "../../_actions/pay-invoice";

export const metadata = { title: "Mon dossier" };

const statusLabels: Record<string, string> = {
  formulaire: "Formulaire soumis",
  en_attente_paiement: "En attente de paiement",
  acompte_paye: "Acompte payé, en cours",
  en_cours: "En cours",
  solde_a_payer: "Solde à régler",
  termine: "Terminé",
  annule: "Annulé",
};

const docStatusLabels: Record<string, { label: string; cls: string }> = {
  demande: {
    label: "À fournir",
    cls: "bg-secondary-container text-on-secondary-container",
  },
  uploade: {
    label: "Reçu, en cours de validation",
    cls: "bg-surface-container text-on-surface-variant",
  },
  valide: { label: "Validé", cls: "bg-primary text-on-primary" },
  rejete: { label: "À reprendre", cls: "bg-error-container text-on-error-container" },
};

const invoiceStatusLabels: Record<string, { label: string; cls: string }> = {
  brouillon: {
    label: "Brouillon",
    cls: "bg-surface-container text-on-surface-variant",
  },
  envoyee: {
    label: "À régler",
    cls: "bg-secondary-container text-on-secondary-container",
  },
  payee: { label: "Payée", cls: "bg-primary text-on-primary" },
  annulee: { label: "Annulée", cls: "bg-error-container text-on-error-container" },
};

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

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

  // 404 si pas trouvé OU si le dossier n'appartient pas au client connecté
  // (anti-énumération + sécu).
  if (!dossier || dossier.clientId !== session.user.id) notFound();

  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));

  const tpl = (
    await db
      .select()
      .from(schema.formTemplate)
      .where(eq(schema.formTemplate.serviceSlug, dossier.serviceSlug))
      .limit(1)
  )[0];

  const fields = (tpl?.fields as FormField[]) ?? [];
  const formData = (dossier.formData ?? {}) as Record<string, unknown>;

  const stripeEnabled = isStripeConfigured();

  return (
    <div className="space-y-12 max-w-5xl">
      <Link
        href="/espace-client/dossiers"
        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 à mes 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>
          <span className="text-xs uppercase tracking-widest font-serif px-3 py-1 bg-primary text-on-primary">
            {statusLabels[dossier.status] ?? dossier.status}
          </span>
        </div>
        <h1 className="display-lg !text-3xl md:!text-4xl text-primary">
          {dossier.title}
        </h1>
        <p className="text-sm text-on-surface-variant">
          Créé le{" "}
          {new Date(dossier.createdAt).toLocaleDateString("fr-FR", {
            day: "numeric",
            month: "long",
            year: "numeric",
          })}
        </p>
      </header>

      {/* Factures (en haut : c'est ce qui appelle à l'action) */}
      <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 émise pour ce dossier.
            </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);
              const s = invoiceStatusLabels[inv.status] ?? {
                label: inv.status,
                cls: "",
              };
              const canPay = inv.status === "envoyee" && stripeEnabled;
              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">
                      {inv.description}
                    </p>
                  </div>
                  <div>
                    <p className="font-serif text-2xl text-secondary">
                      {amount}
                    </p>
                  </div>
                  <div>
                    <span
                      className={`inline-block text-[10px] uppercase tracking-widest font-serif px-2.5 py-1 ${s.cls}`}
                    >
                      {s.label}
                    </span>
                  </div>
                  <div className="md:text-right">
                    {canPay ? (
                      <form action={payInvoiceAction}>
                        <input
                          type="hidden"
                          name="invoiceId"
                          value={inv.id}
                        />
                        <button
                          type="submit"
                          className="text-xs uppercase tracking-widest font-serif text-secondary hover:text-primary underline underline-offset-4"
                        >
                          Payer par carte
                        </button>
                      </form>
                    ) : null}
                  </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 à la création + documents demandés par notre
            équipe en cours de dossier.
          </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) => {
              const s = docStatusLabels[d.status] ?? {
                label: d.status,
                cls: "",
              };
              return (
                <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>
                  <span
                    className={`inline-block text-[10px] uppercase tracking-widest font-serif px-2.5 py-1 ${s.cls}`}
                  >
                    {s.label}
                  </span>
                </div>
              );
            })}
          </div>
        )}
      </section>

      {/* Réponses au formulaire */}
      <section className="space-y-6">
        <header>
          <h2 className="font-serif text-2xl text-primary">
            Vos informations
          </h2>
          <p className="text-sm text-on-surface-variant mt-1">
            Récapitulatif des informations que vous avez transmises.
          </p>
        </header>

        {fields.length === 0 ? (
          <div className="bg-white border border-outline-variant p-8 text-center">
            <p className="text-sm text-on-surface-variant italic">
              Aucune information saisie.
            </p>
          </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>
                    </div>
                    <div className="md:col-span-2">
                      <FormValue field={f} value={v} />
                    </div>
                  </div>
                );
              })}
          </div>
        )}
      </section>

      <p className="text-center text-xs text-on-surface-variant uppercase tracking-widest font-serif pt-4">
        Une question sur ce dossier ?{" "}
        <a
          href="mailto:contact@socialex.pro"
          className="underline hover:text-primary transition-colors"
        >
          contact@socialex.pro
        </a>
      </p>
    </div>
  );
}

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)) {
    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>;
}