"use client";

import { useState, useTransition } from "react";
import Icon from "@/components/Icon";
import { useDialog } from "@/components/feedback/DialogProvider";
import { updateDossierStatus, deleteDossier } from "./actions";

const statusOptions: { value: "formulaire" | "en_attente_paiement" | "en_cours" | "termine" | "annule"; label: string }[] = [
  { value: "formulaire", label: "Formulaire soumis" },
  { value: "en_attente_paiement", label: "En attente paiement" },
  { value: "en_cours", label: "En cours" },
  { value: "termine", label: "Terminé" },
  { value: "annule", label: "Annulé" },
];

export default function DossierActions({
  dossierId,
  currentStatus,
}: {
  dossierId: string;
  currentStatus: string;
}) {
  const [status, setStatus] = useState(currentStatus);
  const [savedAt, setSavedAt] = useState<Date | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [isSaving, startSaving] = useTransition();
  const [isDeleting, startDeleting] = useTransition();
  const [deleteError, setDeleteError] = useState<string | null>(null);
  const { confirm, toast } = useDialog();

  const isDirty = status !== currentStatus;

  function onSave() {
    setError(null);
    startSaving(async () => {
      const res = await updateDossierStatus({
        dossierId,
        status: status as typeof statusOptions[number]["value"],
      });
      if (res.ok) {
        setSavedAt(new Date());
        toast({ message: "Statut mis à jour.", variant: "success" });
      } else {
        setError(res.error);
      }
    });
  }

  async function onDelete() {
    setDeleteError(null);
    const ok = await confirm({
      title: "Supprimer ce dossier ?",
      body: "Les documents et l'historique associés seront supprimés. Les factures émises seront détachées (conservées pour la comptabilité). Cette action est irréversible.",
      confirmLabel: "Supprimer le dossier",
      danger: true,
    });
    if (!ok) return;
    startDeleting(async () => {
      try {
        await deleteDossier(dossierId);
      } catch (err) {
        const msg =
          err instanceof Error ? err.message : "Erreur de suppression";
        setDeleteError(msg);
        toast({ message: msg, variant: "error" });
      }
    });
  }

  return (
    <section className="bg-surface-container-low border border-outline-variant p-6 space-y-4">
      <div className="flex items-center justify-between gap-4 flex-wrap">
        <div className="flex items-center gap-4 flex-wrap">
          <label className="eyebrow !text-on-surface-variant">
            Statut du dossier
          </label>
          <select
            value={status}
            onChange={(e) => {
              setStatus(e.target.value);
              setSavedAt(null);
            }}
            className="bg-white border border-outline-variant px-4 py-2 body-md focus:border-primary outline-none transition-colors min-w-[220px]"
          >
            {statusOptions.map((o) => (
              <option key={o.value} value={o.value}>
                {o.label}
              </option>
            ))}
          </select>
          <button
            type="button"
            onClick={onSave}
            disabled={!isDirty || isSaving}
            className="btn btn-primary !py-2.5 !px-6 text-xs disabled:opacity-30 disabled:cursor-not-allowed"
          >
            {isSaving ? "Sauvegarde…" : "Mettre à jour"}
          </button>
          {savedAt && !isDirty && (
            <span className="text-xs text-secondary inline-flex items-center gap-1">
              <Icon name="check_circle" className="!text-base" />
              Sauvegardé
            </span>
          )}
        </div>

        <button
          type="button"
          onClick={onDelete}
          disabled={isDeleting}
          className="inline-flex items-center gap-2 px-5 py-2.5 text-xs uppercase tracking-widest font-serif border border-error text-error hover:bg-error hover:text-white transition-colors disabled:opacity-30 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:text-error"
        >
          <Icon name="delete" className="!text-base" />
          {isDeleting ? "Suppression…" : "Supprimer le dossier"}
        </button>
      </div>

      {error && (
        <p className="text-error text-sm bg-error/5 border border-error/30 px-3 py-2">
          {error}
        </p>
      )}
      {deleteError && (
        <p className="text-error text-sm bg-error/5 border border-error/30 px-3 py-2">
          {deleteError}
        </p>
      )}
    </section>
  );
}