"use client";

import { useState, useTransition } from "react";
import Icon from "@/components/Icon";
import { useDialog } from "@/components/feedback/DialogProvider";
import {
  updateInvoiceAdmin,
  deleteInvoiceAdmin,
} from "../_actions";

type Status = "brouillon" | "envoyee" | "payee" | "annulee";

type Props = {
  invoiceId: string;
  initial: {
    number: string;
    description: string;
    amountEur: number;
    status: Status;
    paymentMethod: string;
    paymentReference: string;
    issuedAt: string; // YYYY-MM-DD ou ""
    dueAt: string;
    paidAt: string;
    clientLabel: string;
    dossierReference: string | null;
    dossierId: string | null;
  };
};

const STATUS_LABELS: Record<Status, string> = {
  brouillon: "Brouillon",
  envoyee: "Envoyée (à payer)",
  payee: "Payée",
  annulee: "Annulée",
};

export default function EditInvoiceForm({ invoiceId, initial }: Props) {
  const [description, setDescription] = useState(initial.description);
  const [amountEur, setAmountEur] = useState(String(initial.amountEur));
  const [status, setStatus] = useState<Status>(initial.status);
  const [paymentMethod, setPaymentMethod] = useState(initial.paymentMethod);
  const [paymentReference, setPaymentReference] = useState(
    initial.paymentReference
  );
  const [issuedAt, setIssuedAt] = useState(initial.issuedAt);
  const [dueAt, setDueAt] = useState(initial.dueAt);
  const [paidAt, setPaidAt] = useState(initial.paidAt);

  const [error, setError] = useState<string | null>(null);
  const [savedAt, setSavedAt] = useState<Date | null>(null);
  const [isSaving, startSaving] = useTransition();
  const [isDeleting, startDeleting] = useTransition();
  const { confirm, toast } = useDialog();

  function onSave() {
    setError(null);
    startSaving(async () => {
      const result = await updateInvoiceAdmin({
        invoiceId,
        description,
        amountEur: Number(amountEur),
        status,
        paymentMethod: paymentMethod || null,
        paymentReference: paymentReference || null,
        issuedAt: issuedAt || null,
        dueAt: dueAt || null,
        paidAt: paidAt || null,
      });
      if (result.ok) {
        setSavedAt(new Date());
        toast({
          message: `Facture ${initial.number} mise à jour.`,
          variant: "success",
        });
      } else {
        setError(result.error);
      }
    });
  }

  async function onDelete() {
    const ok = await confirm({
      title: `Supprimer la facture ${initial.number} ?`,
      body: "Cette action est irréversible. Les obligations comptables imposent normalement de conserver les factures émises 10 ans : ne supprimez que des brouillons ou doublons.",
      confirmLabel: "Supprimer définitivement",
      danger: true,
    });
    if (!ok) return;
    startDeleting(async () => {
      try {
        await deleteInvoiceAdmin(invoiceId);
      } catch (err) {
        const msg =
          err instanceof Error ? err.message : "Suppression impossible";
        setError(msg);
        toast({ message: msg, variant: "error" });
      }
    });
  }

  return (
    <div className="space-y-10">
      {/* En-tête actions */}
      <div className="flex items-center justify-between gap-4 flex-wrap">
        <div>
          <span className="eyebrow">Facture</span>
          <h1 className="display-lg !text-3xl text-primary mt-1 font-mono">
            {initial.number}
          </h1>
          <p className="text-sm text-on-surface-variant mt-2">
            {initial.clientLabel}
            {initial.dossierReference && (
              <>
                {" · "}
                <a
                  href={`/socialexadmin/dossiers/${initial.dossierId}`}
                  className="underline hover:text-primary"
                >
                  Dossier {initial.dossierReference}
                </a>
              </>
            )}
          </p>
        </div>

        <div className="flex items-center gap-2 flex-wrap">
          <a
            href={`/api/admin/invoices/${invoiceId}/print`}
            target="_blank"
            rel="noopener noreferrer"
            className="inline-flex items-center gap-2 text-xs uppercase tracking-widest font-serif px-3 py-2 border border-outline-variant text-on-surface-variant hover:text-primary hover:border-primary transition-colors"
          >
            <Icon name="print" className="!text-base" />
            PDF
          </a>
          <button
            type="button"
            onClick={onDelete}
            disabled={isDeleting}
            className="inline-flex items-center gap-2 text-xs uppercase tracking-widest font-serif px-3 py-2 border border-error/40 text-error hover:bg-error/5 transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
          >
            <Icon name="delete" className="!text-base" />
            {isDeleting ? "Suppression…" : "Supprimer"}
          </button>
        </div>
      </div>

      {error && (
        <div
          role="alert"
          className="border border-error/40 px-5 py-4"
          style={{ backgroundColor: "rgba(186, 26, 26, 0.06)" }}
        >
          <p className="body-md text-error">{error}</p>
        </div>
      )}
      {savedAt && !error && (
        <div className="border border-primary/30 bg-primary/[0.04] px-5 py-3">
          <p className="body-md text-primary">
            Modifications enregistrées à{" "}
            {savedAt.toLocaleTimeString("fr-FR", {
              hour: "2-digit",
              minute: "2-digit",
            })}
            .
          </p>
        </div>
      )}

      {/* Form */}
      <section className="bg-white border border-outline-variant p-8 lg:p-10 space-y-8">
        <Field label="Description">
          <textarea
            value={description}
            onChange={(e) => setDescription(e.target.value)}
            className="w-full bg-transparent border border-outline-variant focus:border-secondary p-3 outline-none body-md transition-colors min-h-[80px]"
            rows={3}
          />
        </Field>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <Field label="Montant TTC (€)">
            <input
              type="number"
              step="0.01"
              min="0"
              value={amountEur}
              onChange={(e) => setAmountEur(e.target.value)}
              className="w-full bg-transparent border-0 border-b border-outline-variant focus:border-secondary py-3 outline-none body-md transition-colors"
            />
          </Field>

          <Field label="Statut">
            <select
              value={status}
              onChange={(e) => setStatus(e.target.value as Status)}
              className="w-full bg-transparent border-0 border-b border-outline-variant focus:border-secondary py-3 outline-none body-md transition-colors"
            >
              {(Object.keys(STATUS_LABELS) as Status[]).map((s) => (
                <option key={s} value={s}>
                  {STATUS_LABELS[s]}
                </option>
              ))}
            </select>
          </Field>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <Field label="Date d'émission">
            <input
              type="date"
              value={issuedAt}
              onChange={(e) => setIssuedAt(e.target.value)}
              className="w-full bg-transparent border-0 border-b border-outline-variant focus:border-secondary py-3 outline-none body-md transition-colors"
            />
          </Field>
          <Field label="Échéance">
            <input
              type="date"
              value={dueAt}
              onChange={(e) => setDueAt(e.target.value)}
              className="w-full bg-transparent border-0 border-b border-outline-variant focus:border-secondary py-3 outline-none body-md transition-colors"
            />
          </Field>
          <Field label="Date de paiement">
            <input
              type="date"
              value={paidAt}
              onChange={(e) => setPaidAt(e.target.value)}
              className="w-full bg-transparent border-0 border-b border-outline-variant focus:border-secondary py-3 outline-none body-md transition-colors"
            />
          </Field>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <Field label="Mode de paiement (CB, virement, chèque…)">
            <input
              type="text"
              value={paymentMethod}
              onChange={(e) => setPaymentMethod(e.target.value)}
              placeholder="Virement"
              className="w-full bg-transparent border-0 border-b border-outline-variant focus:border-secondary py-3 outline-none body-md transition-colors"
            />
          </Field>
          <Field label="Référence paiement (Stripe, n° virement…)">
            <input
              type="text"
              value={paymentReference}
              onChange={(e) => setPaymentReference(e.target.value)}
              placeholder=""
              className="w-full bg-transparent border-0 border-b border-outline-variant focus:border-secondary py-3 outline-none body-md transition-colors"
            />
          </Field>
        </div>

        <div className="pt-4 border-t border-outline-variant/40 flex justify-end">
          <button
            type="button"
            onClick={onSave}
            disabled={isSaving}
            className="btn btn-primary disabled:opacity-50 disabled:cursor-not-allowed"
          >
            {isSaving ? "Enregistrement…" : "Enregistrer"}
          </button>
        </div>
      </section>
    </div>
  );
}

function Field({
  label,
  children,
}: {
  label: string;
  children: React.ReactNode;
}) {
  return (
    <div>
      <label className="eyebrow !text-on-surface-variant block mb-2">
        {label}
      </label>
      {children}
    </div>
  );
}