"use client";

import Link from "next/link";
import { useEffect, useMemo, useRef, useState } from "react";
import { useLocale } from "next-intl";
import { useRouter } from "next/navigation";
import { useMe } from "@/src/lib/hooks/useMe";

import { COUNTRIES } from "@/src/lib/constants/countries";
import { CURRENCIES } from "@/src/lib/constants/currencies";
import { CITIES } from "@/src/lib/constants/cities";

import { listPortfolios, type Portfolio } from "@/src/lib/api/portfolios";
import { listDebtors, createDebtor, type Debtor, type DebtorType } from "@/src/lib/api/debtors";
import { listTenantUsers, type TenantUser } from "@/src/lib/api/tenant-users";
import { listCustomers, createCustomer, type Customer } from "@/src/lib/api/customers";
import { listCreditors, type Creditor } from "@/src/lib/api/creditors";
import { createCase } from "@/src/lib/api/cases";

import {
  Check, ChevronDown, Plus, Search, X, ArrowLeft,
  Scale, Building2, Bell, User, Briefcase,
  DollarSign, Users,
} from "lucide-react";

// ── Palette ──────────────────────────────────────────────────────────────────
const C = {
  navy:   "#1a3578",
  navy2:  "#2655b0",
  teal:   "#4dba96",
  amber:  "#f59e0b",
  red:    "#ef4444",
  muted:  "#64748b",
  border: "rgba(15,23,42,.07)",
};

const inputCls  = "w-full rounded-xl border bg-white px-3 py-2.5 text-sm text-slate-800 outline-none placeholder:text-slate-400 transition focus:border-[#4dba96] focus:shadow-[0_0_0_3px_rgba(77,186,150,0.12)]";
const labelCls  = "block text-[11px] font-semibold uppercase tracking-widest text-slate-400 mb-1.5";
const cardCls   = "rounded-2xl border bg-white shadow-sm p-5 space-y-4";

function cx(...c: Array<string | false | null | undefined>) {
  return c.filter(Boolean).join(" ");
}

function yyyymm(d = new Date()) {
  return `${d.getFullYear()}${String(d.getMonth() + 1).padStart(2, "0")}`;
}
function tenantPrefix(name: string | undefined): string {
  if (!name) return "???";
  const clean = name.toUpperCase().replace(/[^A-Z0-9]/g, "");
  return clean.length >= 3 ? clean.slice(0, 3) : clean.padEnd(3, "X");
}
function countryLabel(locale: string, code: string) {
  const c = COUNTRIES.find((x) => x.code === code);
  return c ? (locale === "fr" ? c.fr : c.en) : code;
}
function defaultCurrencyForCountry(code: string): string {
  const CFA = ["SN","CI","ML","BF","NE","TG","BJ","GN","CM","CF","CG","GA","GQ","TD"];
  const EUR = ["FR","BE","DE","IT","ES","PT","NL","AT","GR","FI","IE","LU","SK","SI","EE","LV","LT","MT","CY"];
  const map: Record<string,string> = {
    MA:"MAD",DZ:"DZD",TN:"TND",EG:"EGP",NG:"NGN",GH:"GHS",KE:"KES",ZA:"ZAR",
    AE:"AED",SA:"SAR",CN:"CNY",JP:"JPY",IN:"INR",AU:"AUD",CA:"CAD",BR:"BRL",CH:"CHF",
  };
  if (CFA.includes(code)) return "XAF";
  if (EUR.includes(code)) return "EUR";
  if (code === "GB") return "GBP";
  if (code === "US") return "USD";
  return map[code] ?? "XAF";
}

// ── Section header ────────────────────────────────────────────────────────────
function SectionTitle({ label, icon: Icon }: { label: string; icon?: React.ElementType }) {
  return (
    <div className="flex items-center gap-2">
      {Icon && <Icon className="h-3.5 w-3.5 shrink-0" style={{ color: C.teal }} />}
      <span className="text-[10px] font-bold uppercase tracking-widest" style={{ color: C.muted }}>
        {label}
      </span>
      <div className="flex-1 h-px" style={{ background: C.border }} />
    </div>
  );
}

// ── Notification row ──────────────────────────────────────────────────────────
function NotifyRow({ label, email, checked, onChange, disabled }: {
  label: string; email?: string | null; checked: boolean;
  onChange: () => void; disabled?: boolean;
}) {
  return (
    <label className={cx("flex items-start gap-3 cursor-pointer group", disabled && "opacity-50 cursor-not-allowed")}>
      <div className="mt-0.5 shrink-0">
        <div
          onClick={disabled ? undefined : onChange}
          className="h-4 w-4 rounded border-2 flex items-center justify-center transition"
          style={{
            borderColor: checked ? C.teal : "rgba(15,23,42,.2)",
            background: checked ? C.teal : "white",
          }}
        >
          {checked && <Check className="h-2.5 w-2.5 text-white" strokeWidth={3} />}
        </div>
      </div>
      <div className="min-w-0">
        <div className="text-sm font-medium text-slate-700">{label}</div>
        {email ? (
          <div className="text-xs text-slate-400 truncate">{email}</div>
        ) : (
          <div className="text-[11px] italic" style={{ color: "rgba(15,23,42,.25)" }}>
            Aucun email renseigné
          </div>
        )}
      </div>
    </label>
  );
}

// ── ComboBox ──────────────────────────────────────────────────────────────────
type ComboItem = { id: string; label: string; search?: string };

function useOnClickOutside(ref: React.RefObject<HTMLElement | null>, handler: () => void) {
  useEffect(() => {
    function onDown(e: MouseEvent | TouchEvent) {
      if (!ref.current?.contains(e.target as Node)) handler();
    }
    document.addEventListener("mousedown", onDown);
    document.addEventListener("touchstart", onDown);
    return () => {
      document.removeEventListener("mousedown", onDown);
      document.removeEventListener("touchstart", onDown);
    };
  }, [ref, handler]);
}

function ComboBox({
  label, required, value, onChange, items, placeholder, searchPlaceholder,
  disabled, rightButton, emptyLabel,
}: {
  label: string; required?: boolean; value: string; onChange: (v: string) => void;
  items: ComboItem[]; placeholder: string; searchPlaceholder: string;
  disabled?: boolean; rightButton?: React.ReactNode; emptyLabel?: string;
}) {
  const wrapRef = useRef<HTMLDivElement>(null);
  const inputRef = useRef<HTMLInputElement>(null);
  const [open, setOpen] = useState(false);
  const [q, setQ] = useState("");
  useOnClickOutside(wrapRef, () => setOpen(false));

  const selected = useMemo(() => items.find((x) => x.id === value) || null, [items, value]);
  const filtered = useMemo(() => {
    const lq = q.trim().toLowerCase();
    return lq ? items.filter((it) => (it.search || it.label).toLowerCase().includes(lq)) : items;
  }, [items, q]);

  function pick(id: string) { onChange(id); setOpen(false); setQ(""); }

  return (
    <div className="space-y-1.5" ref={wrapRef}>
      <label className={labelCls}>{label}{required ? " *" : ""}</label>
      <div className="relative">
        <div className="flex items-stretch gap-2">
          <button
            type="button" disabled={disabled}
            onClick={() => { if (!disabled) { setOpen((v) => !v); setTimeout(() => inputRef.current?.focus(), 0); } }}
            className={cx(
              "flex-1 rounded-xl border bg-white px-3 py-2.5 text-sm text-left transition hover:bg-slate-50",
              disabled && "opacity-60 cursor-not-allowed"
            )}
            style={{ borderColor: C.border }}
          >
            <div className="flex items-center justify-between gap-2">
              <span className={cx("truncate", !selected && "text-slate-400")}>
                {selected ? selected.label : placeholder}
              </span>
              <ChevronDown className="h-4 w-4 text-slate-400 shrink-0" />
            </div>
          </button>
          {rightButton && <div className="shrink-0">{rightButton}</div>}
        </div>

        {open && (
          <div className="absolute left-0 top-[calc(100%+6px)] z-50 w-full rounded-2xl border bg-white shadow-xl overflow-hidden"
            style={{ borderColor: C.border }}>
            <div className="p-3 border-b" style={{ borderColor: C.border }}>
              <div className="flex items-center gap-2 rounded-xl border bg-slate-50 px-3 py-2" style={{ borderColor: C.border }}>
                <Search className="h-4 w-4 text-slate-400" />
                <input ref={inputRef} className="w-full outline-none text-sm bg-transparent"
                  placeholder={searchPlaceholder} value={q} onChange={(e) => setQ(e.target.value)} />
                <span className="text-[11px] text-slate-400">{filtered.length}</span>
              </div>
            </div>
            <div className="max-h-60 overflow-auto p-2">
              {emptyLabel && (
                <button type="button"
                  className={cx("w-full text-left px-3 py-2 rounded-xl text-sm hover:bg-slate-50 transition", value === "" && "bg-slate-50")}
                  onClick={() => pick("")}>
                  <div className="flex items-center justify-between">
                    <span className="text-slate-500">{emptyLabel}</span>
                    {value === "" && <Check className="h-4 w-4" style={{ color: C.teal }} />}
                  </div>
                </button>
              )}
              {filtered.length === 0 ? (
                <div className="px-3 py-10 text-center text-sm text-slate-400">
                  {q ? "Aucun résultat" : "Vide"}
                </div>
              ) : filtered.map((it) => {
                const active = it.id === value;
                return (
                  <button key={it.id} type="button"
                    className={cx("w-full text-left px-3 py-2 rounded-xl text-sm hover:bg-slate-50 transition", active && "bg-slate-50")}
                    onClick={() => pick(it.id)}>
                    <div className="flex items-center justify-between gap-2">
                      <span className="truncate">{it.label}</span>
                      {active && <Check className="h-4 w-4" style={{ color: C.teal }} />}
                    </div>
                  </button>
                );
              })}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

// ── CityField ─────────────────────────────────────────────────────────────────
function CityField({ label, value, onChange, countryCode, placeholder, disabled }: {
  label: string; value: string; onChange: (v: string) => void;
  countryCode: string; placeholder: string; disabled?: boolean;
}) {
  const cities = CITIES[countryCode] ?? [];
  const cityItems: ComboItem[] = useMemo(() => cities.map((c) => ({ id: c, label: c })), [cities]);
  if (cities.length === 0) {
    return (
      <div className="space-y-1.5">
        <label className={labelCls}>{label}</label>
        <input className={inputCls} placeholder={placeholder} value={value}
          onChange={(e) => onChange(e.target.value)} disabled={disabled} style={{ borderColor: C.border }} />
      </div>
    );
  }
  const allItems: ComboItem[] = value && !cities.includes(value) ? [{ id: value, label: value }, ...cityItems] : cityItems;
  return (
    <ComboBox label={label} value={value} onChange={onChange} items={allItems}
      placeholder={placeholder} searchPlaceholder={placeholder} disabled={disabled}
      emptyLabel="— Aucune ville —" />
  );
}

// ── Buttons ───────────────────────────────────────────────────────────────────
function PrimaryBtn({ onClick, label, disabled, icon: Icon }: {
  onClick: () => void; label: string; disabled?: boolean; icon?: React.ElementType;
}) {
  return (
    <button type="button" onClick={onClick} disabled={disabled}
      className="inline-flex items-center gap-2 rounded-xl px-5 py-2.5 text-sm font-semibold text-white shadow-sm transition active:scale-95 disabled:opacity-60"
      style={{ background: `linear-gradient(135deg, ${C.navy} 0%, ${C.navy2} 100%)` }}>
      {Icon && <Icon className="h-4 w-4" />}
      {label}
    </button>
  );
}

function AddBtn({ onClick, label, disabled }: { onClick: () => void; label: string; disabled?: boolean }) {
  return (
    <button type="button" onClick={onClick} disabled={disabled}
      className="inline-flex items-center gap-1.5 rounded-xl border bg-white px-3 py-2.5 text-sm font-medium text-slate-600 shadow-sm hover:bg-slate-50 transition disabled:opacity-50"
      style={{ borderColor: C.border }}>
      <Plus className="h-3.5 w-3.5" style={{ color: C.teal }} />
      {label}
    </button>
  );
}

// ── Page ──────────────────────────────────────────────────────────────────────
export default function NewCasePage() {
  const locale = useLocale();
  const router = useRouter();
  const fr = locale === "fr";

  const [customers,  setCustomers]  = useState<Customer[]>([]);
  const [creditors,  setCreditors]  = useState<Creditor[]>([]);
  const [portfolios, setPortfolios] = useState<Portfolio[]>([]);
  const [debtors,    setDebtors]    = useState<Debtor[]>([]);
  const [users,      setUsers]      = useState<TenantUser[]>([]);

  const me = useMe();

  const [loading, setLoading] = useState(true);
  const [busy,    setBusy]    = useState(false);
  const [err,     setErr]     = useState<string | null>(null);

  // ── Form state ────────────────────────────────────────────────────────────
  const [form, setForm] = useState({
    customer_id:     "" as string,
    creditor_id:     "" as string,
    sameCreditor:    true,
    title:           "",
    debtor_id:       "" as string,
    portfolio_id:    "" as string,
    currency:        "XAF",
    original_amount: "0",
    balance_amount:  "0",
    due_date:        "",
    assigned_to_id:  "" as string,
    _debtorCountry:  "TD",
    // Notifications
    notify_customer: true,
    notify_creditor: true,
    notify_debtor:   false,
  });

  // ── Modals ────────────────────────────────────────────────────────────────
  const [createDebtorOpen,   setCreateDebtorOpen]   = useState(false);
  const [createCustomerOpen, setCreateCustomerOpen] = useState(false);
  const [debtorForm,   setDebtorForm]   = useState({ type: "individual" as DebtorType, full_name: "", phone: "", email: "", city: "", country: "TD" });
  const [customerForm, setCustomerForm] = useState({ name: "", code: "", email: "", phone: "", country: "TD", city: "", address: "" });

  // ── Load data ─────────────────────────────────────────────────────────────
  useEffect(() => {
    (async () => {
      setLoading(true); setErr(null);
      try {
        const [cs, creds, ps, ds, us] = await Promise.all([
          listCustomers(), listCreditors(), listPortfolios(), listDebtors(), listTenantUsers(),
        ]);
        setCustomers(cs);
        setCreditors(creds);
        setPortfolios(ps);
        setDebtors(ds);
        setUsers(us);
      } catch (e: any) {
        setErr(e?.message || (fr ? "Erreur de chargement." : "Loading failed."));
      } finally {
        setLoading(false);
      }
    })();
  }, []); // eslint-disable-line

  useEffect(() => {
    if (form.sameCreditor) setForm((p) => ({ ...p, creditor_id: "" }));
  }, [form.sameCreditor]);

  // ── Derived ───────────────────────────────────────────────────────────────
  const selectedCustomer = useMemo(
    () => customers.find(c => String(c.id) === form.customer_id) ?? null,
    [customers, form.customer_id]
  );
  const selectedCreditor = useMemo(
    () => creditors.find(c => String(c.id) === form.creditor_id) ?? null,
    [creditors, form.creditor_id]
  );
  const selectedDebtor = useMemo(
    () => debtors.find(d => String(d.id) === form.debtor_id) ?? null,
    [debtors, form.debtor_id]
  );

  // Prévisualisation de la référence (le numéro séquentiel est assigné par le serveur)
  const refPreview = useMemo(() => {
    const prefix = tenantPrefix(me?.active_tenant?.name);
    const cc     = (form._debtorCountry || "??").toUpperCase();
    return `${prefix}/${cc}/${yyyymm()}/####`;
  }, [me?.active_tenant?.name, form._debtorCountry]);

  // ── ComboBox items ────────────────────────────────────────────────────────
  const customerItems: ComboItem[] = useMemo(() => customers
    .filter(c => c.status === "active")
    .sort((a, b) => a.name.localeCompare(b.name))
    .map(c => ({ id: String(c.id), label: c.code ? `${c.name} (${c.code})` : c.name, search: [c.name, c.code ?? "", c.email ?? ""].join(" ") })),
    [customers]);

  const creditorItems: ComboItem[] = useMemo(() => creditors
    .filter(c => c.is_active)
    .sort((a, b) => a.name.localeCompare(b.name))
    .map(c => ({ id: String(c.id), label: c.code ? `${c.name} (${c.code})` : c.name, search: [c.name, c.code ?? ""].join(" ") })),
    [creditors]);

  const debtorItems: ComboItem[] = useMemo(() => debtors
    .sort((a, b) => a.full_name.localeCompare(b.full_name))
    .map(d => ({ id: String(d.id), label: d.full_name, search: [d.full_name, d.phone ?? "", d.email ?? "", d.country ?? ""].join(" ") })),
    [debtors]);

  const userItems: ComboItem[] = useMemo(() => users
    .filter(u => u.is_active)
    .sort((a, b) => a.username.localeCompare(b.username))
    .map(u => {
      const full = `${u.first_name ?? ""} ${u.last_name ?? ""}`.trim();
      return { id: String(u.id), label: full ? `@${u.username} — ${full}` : `@${u.username}`, search: [u.username, u.email ?? ""].join(" ") };
    }),
    [users]);

  const portfolioItems: ComboItem[] = useMemo(() => portfolios
    .filter(p => p.is_active)
    .sort((a, b) => a.name.localeCompare(b.name))
    .map(p => ({ id: String(p.id), label: p.name })),
    [portfolios]);

  const countryItems: ComboItem[] = useMemo(() => COUNTRIES.map(c => ({
    id: c.code, label: `${fr ? c.fr : c.en} (${c.code})`, search: `${c.fr} ${c.en} ${c.code}`,
  })), [fr]);

  const currencyItems: ComboItem[] = useMemo(() => CURRENCIES.map(c => ({
    id: c.code, label: `${c.code} — ${fr ? c.fr : c.en}`, search: `${c.code} ${c.fr} ${c.en}`,
  })), [fr]);

  // ── Handlers ──────────────────────────────────────────────────────────────
  function onDebtorSelect(v: string) {
    setForm(p => ({ ...p, debtor_id: v }));
    const d = debtors.find(x => String(x.id) === v);
    if (d?.country) {
      const cur = defaultCurrencyForCountry(d.country);
      setForm(p => ({ ...p, _debtorCountry: d.country!, currency: p.currency === "XAF" || !p.currency ? cur : p.currency }));
    }
  }

  async function onCreateDebtor() {
    if (!debtorForm.full_name.trim()) { setErr(fr ? "Nom du débiteur obligatoire." : "Debtor name required."); return; }
    setBusy(true); setErr(null);
    try {
      const d = await createDebtor({
        type: debtorForm.type, full_name: debtorForm.full_name.trim(),
        phone: debtorForm.phone.trim() || null, email: debtorForm.email.trim() || null,
        city: debtorForm.city.trim() || null, country: debtorForm.country || null,
        address: null, national_id: null, tax_id: null, metadata: null,
      } as any);
      setDebtors(p => [d, ...p]);
      const cur = defaultCurrencyForCountry(debtorForm.country);
      setForm(p => ({ ...p, debtor_id: String(d.id), _debtorCountry: debtorForm.country, currency: p.currency === "XAF" || !p.currency ? cur : p.currency }));
      setCreateDebtorOpen(false);
      setDebtorForm({ type: "individual", full_name: "", phone: "", email: "", city: "", country: "TD" });
    } catch (e: any) {
      setErr(e?.message || (fr ? "Erreur création débiteur." : "Debtor creation failed."));
    } finally { setBusy(false); }
  }

  async function onCreateCustomer() {
    if (!customerForm.name.trim()) { setErr(fr ? "Nom du client obligatoire." : "Customer name required."); return; }
    setBusy(true); setErr(null);
    try {
      const c = await createCustomer({
        name: customerForm.name.trim(), code: customerForm.code.trim() || null,
        email: customerForm.email.trim() || null, phone: customerForm.phone.trim() || null,
        country: customerForm.country || null, city: customerForm.city.trim() || null,
        address: customerForm.address.trim() || null, status: "active", metadata: null,
      } as any);
      setCustomers(p => [c, ...p]);
      setForm(p => ({ ...p, customer_id: String(c.id) }));
      setCreateCustomerOpen(false);
      setCustomerForm({ name: "", code: "", email: "", phone: "", country: "TD", city: "", address: "" });
    } catch (e: any) {
      setErr(e?.message || (fr ? "Erreur création client." : "Customer creation failed."));
    } finally { setBusy(false); }
  }

  async function onSubmit() {
    setErr(null);
    if (!form.customer_id) { setErr(fr ? "Le client est obligatoire." : "Customer is required."); return; }
    if (!form.title.trim() || !form.debtor_id) {
      setErr(fr ? "Le titre et le débiteur sont obligatoires." : "Title and debtor are required.");
      return;
    }
    if (!form.sameCreditor && !form.creditor_id) {
      setErr(fr ? "Veuillez sélectionner un créancier ou cocher « même que le client »." : "Please select a creditor or check 'same as client'.");
      return;
    }
    setBusy(true);
    try {
      const created = await createCase({
        customer_id: Number(form.customer_id),
        creditor_id: !form.sameCreditor && form.creditor_id ? Number(form.creditor_id) : null,
        title: form.title.trim(),
        debtor_id: Number(form.debtor_id),
        portfolio_id: form.portfolio_id ? Number(form.portfolio_id) : null,
        currency: form.currency || null,
        original_amount: form.original_amount || "0",
        balance_amount: form.balance_amount || "0",
        due_date: form.due_date || null,
        assigned_to_id: form.assigned_to_id ? Number(form.assigned_to_id) : null,
        notify_customer: form.notify_customer,
        notify_creditor: form.notify_creditor,
        notify_debtor: form.notify_debtor,
      } as any);
      router.replace(`/${locale}/cases/${created.id}`);
    } catch (e: any) {
      setErr(e?.message || (fr ? "Erreur création dossier." : "Case creation failed."));
    } finally { setBusy(false); }
  }

  const debtorCountryLabel = countryLabel(locale, form._debtorCountry);

  // ── Render ────────────────────────────────────────────────────────────────
  return (
    <div className="space-y-5">

      {/* ── Header ── */}
      <div className="flex items-start justify-between gap-3">
        <div>
          <h1 className="text-xl font-bold text-slate-900">
            {fr ? "Nouveau dossier" : "New case"}
          </h1>
          <p className="text-sm text-slate-500 mt-0.5">
            {fr
              ? "Créer un dossier de recouvrement lié à un client, un créancier et un débiteur."
              : "Create a recovery case linked to a client, creditor and debtor."}
          </p>
        </div>
        <Link href={`/${locale}/cases`}
          className="inline-flex items-center gap-2 rounded-xl border bg-white px-4 py-2.5 text-sm font-medium text-slate-600 shadow-sm hover:bg-slate-50 transition"
          style={{ borderColor: C.border }}>
          <ArrowLeft className="h-4 w-4" />
          {fr ? "Retour" : "Back"}
        </Link>
      </div>

      {err && (
        <div className="rounded-2xl border border-red-100 bg-red-50 px-4 py-3 text-sm text-red-700">
          {err}
        </div>
      )}

      {loading ? (
        <div className={cardCls}>
          <div className="flex flex-col gap-3">
            {[1,2,3,4].map(i => <div key={i} className="h-10 rounded-xl animate-pulse bg-slate-100" />)}
          </div>
        </div>
      ) : (
        /* ── 2-column layout ── */
        <div className="grid grid-cols-1 xl:grid-cols-3 gap-5">

          {/* ══ LEFT — main form ══ */}
          <div className="xl:col-span-2 space-y-5">

            {/* Identification */}
            <div className={cardCls}>
              <SectionTitle label={fr ? "Identification du dossier" : "Case identification"} icon={Briefcase} />

              {/* Référence auto-générée */}
              <div className="space-y-1.5">
                <label className={labelCls}>{fr ? "Référence" : "Reference"}</label>
                <div
                  className="flex items-center gap-3 rounded-xl border px-4 py-3"
                  style={{ borderColor: "rgba(77,186,150,0.30)", background: "rgba(77,186,150,0.04)" }}
                >
                  <div className="flex-1 font-mono text-base font-semibold tracking-wider" style={{ color: C.navy }}>
                    {refPreview}
                  </div>
                  <span className="shrink-0 rounded-full px-2.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide"
                    style={{ background: "rgba(77,186,150,0.12)", color: C.teal }}>
                    {fr ? "Auto" : "Auto"}
                  </span>
                </div>
                <p className="text-[11px] text-slate-400">
                  {fr
                    ? <>La référence est assignée automatiquement à l'enregistrement.{" "}
                        {form.debtor_id
                          ? <span>Pays : <span className="font-medium text-slate-500">{debtorCountryLabel} ({form._debtorCountry})</span> — pays du débiteur.</span>
                          : <span>Le pays sera pris du débiteur sélectionné.</span>
                        }</>
                    : <>Reference is assigned automatically on save.{" "}
                        {form.debtor_id
                          ? <span>Country: <span className="font-medium text-slate-500">{debtorCountryLabel} ({form._debtorCountry})</span> — debtor's country.</span>
                          : <span>Country will be taken from the selected debtor.</span>
                        }</>
                  }
                </p>
              </div>

              {/* Titre */}
              <div className="space-y-1.5">
                <label className={labelCls}>{fr ? "Titre du dossier" : "Case title"} *</label>
                <input className={inputCls} style={{ borderColor: C.border }}
                  placeholder={fr ? "Ex : Recouvrement facture N°2025-001 — Société XYZ" : "e.g. Recovery of invoice #2025-001"}
                  value={form.title}
                  onChange={(e) => setForm(p => ({ ...p, title: e.target.value }))}
                  disabled={busy} />
              </div>
            </div>

            {/* Organisation */}
            <div className={cardCls}>
              <SectionTitle label={fr ? "Organisation" : "Organization"} icon={Users} />

              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <ComboBox
                  label={fr ? "Assigné à" : "Assigned to"}
                  value={form.assigned_to_id}
                  onChange={(v) => setForm(p => ({ ...p, assigned_to_id: v }))}
                  items={userItems}
                  placeholder={fr ? "Non assigné…" : "Unassigned…"}
                  searchPlaceholder={fr ? "Rechercher un utilisateur…" : "Search user…"}
                  disabled={busy}
                  emptyLabel={fr ? "— Non assigné —" : "— Unassigned —"}
                />
                <ComboBox
                  label={fr ? "Portefeuille" : "Portfolio"}
                  value={form.portfolio_id}
                  onChange={(v) => setForm(p => ({ ...p, portfolio_id: v }))}
                  items={portfolioItems}
                  placeholder={fr ? "Aucun portefeuille…" : "No portfolio…"}
                  searchPlaceholder={fr ? "Rechercher…" : "Search…"}
                  disabled={busy}
                  emptyLabel={fr ? "— Aucun —" : "— None —"}
                />
              </div>
            </div>

            {/* Données financières */}
            <div className={cardCls}>
              <SectionTitle label={fr ? "Données financières" : "Financial data"} icon={DollarSign} />

              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                <ComboBox
                  label={fr ? "Devise" : "Currency"}
                  value={form.currency}
                  onChange={(v) => setForm(p => ({ ...p, currency: v }))}
                  items={currencyItems}
                  placeholder={fr ? "Devise…" : "Currency…"}
                  searchPlaceholder={fr ? "Filtrer…" : "Filter…"}
                  disabled={busy}
                />
                <div className="space-y-1.5">
                  <label className={labelCls}>{fr ? "Montant initial" : "Original amount"}</label>
                  <input className={inputCls} style={{ borderColor: C.border }} type="number" min="0" step="0.01"
                    value={form.original_amount} onChange={(e) => setForm(p => ({ ...p, original_amount: e.target.value }))} disabled={busy} />
                </div>
                <div className="space-y-1.5">
                  <label className={labelCls}>{fr ? "Solde" : "Balance"}</label>
                  <input className={inputCls} style={{ borderColor: C.border }} type="number" min="0" step="0.01"
                    value={form.balance_amount} onChange={(e) => setForm(p => ({ ...p, balance_amount: e.target.value }))} disabled={busy} />
                </div>
                <div className="space-y-1.5">
                  <label className={labelCls}>{fr ? "Échéance" : "Due date"}</label>
                  <input type="date" className={inputCls} style={{ borderColor: C.border }}
                    value={form.due_date} onChange={(e) => setForm(p => ({ ...p, due_date: e.target.value }))} disabled={busy} />
                </div>
              </div>
            </div>

            {/* Actions */}
            <div className="flex items-center justify-end gap-3">
              <Link href={`/${locale}/cases`}
                className="rounded-xl border px-4 py-2.5 text-sm font-medium text-slate-600 bg-white hover:bg-slate-50 transition"
                style={{ borderColor: C.border }}>
                {fr ? "Annuler" : "Cancel"}
              </Link>
              <PrimaryBtn onClick={onSubmit} disabled={busy}
                label={busy ? (fr ? "Création…" : "Creating…") : (fr ? "Créer le dossier" : "Create case")} />
            </div>
          </div>

          {/* ══ RIGHT — parties + notifications ══ */}
          <div className="space-y-5">

            {/* Parties */}
            <div className={cardCls}>
              <SectionTitle label={fr ? "Parties au dossier" : "Case parties"} icon={Building2} />

              {/* Client */}
              <ComboBox
                label={fr ? "Client donneur d'ordre" : "Client (principal)"}
                required value={form.customer_id}
                onChange={(v) => setForm(p => ({ ...p, customer_id: v }))}
                items={customerItems}
                placeholder={fr ? "Choisir un client…" : "Select client…"}
                searchPlaceholder={fr ? "Rechercher un client…" : "Search client…"}
                disabled={busy}
                emptyLabel={fr ? "— Aucun —" : "— None —"}
                rightButton={<AddBtn onClick={() => setCreateCustomerOpen(true)} label={fr ? "Nouveau" : "New"} disabled={busy} />}
              />

              {/* Débiteur */}
              <ComboBox
                label={fr ? "Débiteur" : "Debtor"}
                required value={form.debtor_id}
                onChange={onDebtorSelect}
                items={debtorItems}
                placeholder={fr ? "Choisir un débiteur…" : "Select debtor…"}
                searchPlaceholder={fr ? "Rechercher un débiteur…" : "Search debtor…"}
                disabled={busy}
                emptyLabel={fr ? "— Aucun —" : "— None —"}
                rightButton={<AddBtn onClick={() => setCreateDebtorOpen(true)} label={fr ? "Nouveau" : "New"} disabled={busy} />}
              />

              {/* Créancier */}
              <div className="rounded-xl border p-3.5 space-y-3" style={{ borderColor: C.border, background: "rgba(15,23,42,.015)" }}>
                <div className="flex items-center gap-2">
                  <Scale className="h-3.5 w-3.5 shrink-0" style={{ color: C.teal }} />
                  <span className="text-[11px] font-bold uppercase tracking-widest" style={{ color: C.muted }}>
                    {fr ? "Créancier" : "Creditor"}
                  </span>
                </div>

                {/* Toggle */}
                <label className="flex items-center gap-3 cursor-pointer select-none w-fit">
                  <div
                    onClick={() => setForm(p => ({ ...p, sameCreditor: !p.sameCreditor }))}
                    className="relative h-5 w-9 rounded-full transition-colors"
                    style={{ background: form.sameCreditor ? C.teal : "rgba(15,23,42,.15)" }}>
                    <div className={cx(
                      "absolute top-0.5 h-4 w-4 rounded-full bg-white shadow transition-transform",
                      form.sameCreditor ? "translate-x-4" : "translate-x-0.5"
                    )} />
                  </div>
                  <span className="text-xs text-slate-600">
                    {fr ? "Identique au client" : "Same as client"}
                  </span>
                </label>

                {!form.sameCreditor && (
                  <ComboBox
                    label={fr ? "Sélectionner le créancier" : "Select creditor"}
                    required value={form.creditor_id}
                    onChange={(v) => setForm(p => ({ ...p, creditor_id: v }))}
                    items={creditorItems}
                    placeholder={fr ? "Choisir un créancier…" : "Select creditor…"}
                    searchPlaceholder={fr ? "Rechercher…" : "Search…"}
                    disabled={busy}
                    emptyLabel={fr ? "— Aucun —" : "— None —"}
                  />
                )}

                {form.sameCreditor && selectedCustomer && (
                  <p className="text-xs text-slate-500">
                    <span className="font-medium">{selectedCustomer.name}</span>
                  </p>
                )}

                {!form.sameCreditor && creditorItems.length === 0 && (
                  <p className="text-[11px] text-slate-400">
                    {fr ? "Aucun créancier. " : "No creditors. "}
                    <Link href={`/${locale}/creditors`} className="underline" style={{ color: C.teal }}>
                      {fr ? "Créer" : "Create one"}
                    </Link>
                  </p>
                )}
              </div>
            </div>

            {/* Notifications */}
            <div className={cardCls}>
              <SectionTitle label={fr ? "Notifications email" : "Email notifications"} icon={Bell} />
              <p className="text-[11px] text-slate-400 -mt-1">
                {fr
                  ? "Cochez les parties à notifier à chaque modification du dossier."
                  : "Check which parties to notify when the case is updated."}
              </p>

              <div className="space-y-3.5">
                <NotifyRow
                  label={fr ? "Client" : "Client"}
                  email={selectedCustomer?.email}
                  checked={form.notify_customer}
                  onChange={() => setForm(p => ({ ...p, notify_customer: !p.notify_customer }))}
                  disabled={busy}
                />

                {!form.sameCreditor && selectedCreditor && (
                  <NotifyRow
                    label={fr ? "Créancier" : "Creditor"}
                    email={selectedCreditor?.email}
                    checked={form.notify_creditor}
                    onChange={() => setForm(p => ({ ...p, notify_creditor: !p.notify_creditor }))}
                    disabled={busy}
                  />
                )}

                <NotifyRow
                  label={fr ? "Débiteur" : "Debtor"}
                  email={selectedDebtor?.email}
                  checked={form.notify_debtor}
                  onChange={() => setForm(p => ({ ...p, notify_debtor: !p.notify_debtor }))}
                  disabled={busy}
                />
              </div>

              {!selectedCustomer && !selectedDebtor && (
                <p className="text-[11px] italic" style={{ color: "rgba(15,23,42,.25)" }}>
                  {fr ? "Sélectionnez les parties pour voir leurs emails." : "Select parties to see their emails."}
                </p>
              )}
            </div>

          </div>
        </div>
      )}

      {/* ── Modal : Nouveau débiteur ── */}
      {createDebtorOpen && (
        <div className="fixed inset-0 z-50 bg-black/40 flex items-center justify-center p-4">
          <div className="w-full max-w-xl rounded-2xl bg-white shadow-xl overflow-hidden">
            <div className="px-5 py-4 border-b flex items-start justify-between gap-3" style={{ borderColor: C.border }}>
              <div>
                <div className="text-base font-semibold text-slate-900">{fr ? "Nouveau débiteur" : "New debtor"}</div>
                <div className="text-sm text-slate-500">{fr ? "Créer un débiteur rapidement." : "Create a debtor quickly."}</div>
              </div>
              <button className="rounded-xl p-2 hover:bg-slate-50 transition" onClick={() => setCreateDebtorOpen(false)}>
                <X className="h-4 w-4 text-slate-500" />
              </button>
            </div>
            <div className="p-5 space-y-4">
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-1.5">
                  <label className={labelCls}>{fr ? "Type" : "Type"}</label>
                  <select className={inputCls} style={{ borderColor: C.border }}
                    value={debtorForm.type} onChange={(e) => setDebtorForm(p => ({ ...p, type: e.target.value as any }))} disabled={busy}>
                    <option value="individual">{fr ? "Particulier" : "Individual"}</option>
                    <option value="company">{fr ? "Entreprise" : "Company"}</option>
                  </select>
                </div>
                <div className="space-y-1.5">
                  <label className={labelCls}>{fr ? "Nom complet" : "Full name"} *</label>
                  <input className={inputCls} style={{ borderColor: C.border }}
                    placeholder={fr ? "Nom complet" : "Full name"}
                    value={debtorForm.full_name} onChange={(e) => setDebtorForm(p => ({ ...p, full_name: e.target.value }))} disabled={busy} />
                </div>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-1.5">
                  <label className={labelCls}>{fr ? "Téléphone" : "Phone"}</label>
                  <input className={inputCls} style={{ borderColor: C.border }}
                    placeholder="+235 66 00 00 00" value={debtorForm.phone}
                    onChange={(e) => setDebtorForm(p => ({ ...p, phone: e.target.value }))} disabled={busy} />
                </div>
                <div className="space-y-1.5">
                  <label className={labelCls}>Email</label>
                  <input type="email" className={inputCls} style={{ borderColor: C.border }}
                    placeholder="contact@exemple.com" value={debtorForm.email}
                    onChange={(e) => setDebtorForm(p => ({ ...p, email: e.target.value }))} disabled={busy} />
                </div>
              </div>
              <ComboBox label={fr ? "Pays" : "Country"} value={debtorForm.country}
                onChange={(v) => setDebtorForm(p => ({ ...p, country: v || "TD", city: "" }))}
                items={countryItems} placeholder={fr ? "Choisir un pays…" : "Select country…"}
                searchPlaceholder={fr ? "Rechercher…" : "Search…"} disabled={busy} />
              <CityField label={fr ? "Ville" : "City"} value={debtorForm.city}
                onChange={(v) => setDebtorForm(p => ({ ...p, city: v }))}
                countryCode={debtorForm.country}
                placeholder={fr ? "Choisir ou saisir une ville…" : "Select or type a city…"} disabled={busy} />
              <div className="flex justify-end gap-2 pt-2">
                <button onClick={() => setCreateDebtorOpen(false)}
                  className="rounded-xl border px-4 py-2.5 text-sm font-medium text-slate-600 bg-white hover:bg-slate-50 transition"
                  style={{ borderColor: C.border }}>{fr ? "Annuler" : "Cancel"}</button>
                <PrimaryBtn onClick={onCreateDebtor} disabled={busy}
                  label={busy ? (fr ? "Création…" : "Creating…") : (fr ? "Créer le débiteur" : "Create debtor")} />
              </div>
            </div>
          </div>
        </div>
      )}

      {/* ── Modal : Nouveau client ── */}
      {createCustomerOpen && (
        <div className="fixed inset-0 z-50 bg-black/40 flex items-center justify-center p-4">
          <div className="w-full max-w-xl rounded-2xl bg-white shadow-xl overflow-hidden">
            <div className="px-5 py-4 border-b flex items-start justify-between gap-3" style={{ borderColor: C.border }}>
              <div>
                <div className="text-base font-semibold text-slate-900">{fr ? "Nouveau client" : "New client"}</div>
                <div className="text-sm text-slate-500">{fr ? "Créer un client rapidement." : "Create a client quickly."}</div>
              </div>
              <button className="rounded-xl p-2 hover:bg-slate-50 transition" onClick={() => setCreateCustomerOpen(false)}>
                <X className="h-4 w-4 text-slate-500" />
              </button>
            </div>
            <div className="p-5 space-y-4">
              <div className="space-y-1.5">
                <label className={labelCls}>{fr ? "Nom" : "Name"} *</label>
                <input className={inputCls} style={{ borderColor: C.border }}
                  placeholder={fr ? "Nom du client" : "Client name"}
                  value={customerForm.name} onChange={(e) => setCustomerForm(p => ({ ...p, name: e.target.value }))} disabled={busy} />
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-1.5">
                  <label className={labelCls}>Code</label>
                  <input className={inputCls} style={{ borderColor: C.border }}
                    placeholder="CLI-001" value={customerForm.code}
                    onChange={(e) => setCustomerForm(p => ({ ...p, code: e.target.value }))} disabled={busy} />
                </div>
                <div className="space-y-1.5">
                  <label className={labelCls}>Email</label>
                  <input type="email" className={inputCls} style={{ borderColor: C.border }}
                    placeholder="contact@client.com" value={customerForm.email}
                    onChange={(e) => setCustomerForm(p => ({ ...p, email: e.target.value }))} disabled={busy} />
                </div>
                <div className="space-y-1.5">
                  <label className={labelCls}>{fr ? "Téléphone" : "Phone"}</label>
                  <input className={inputCls} style={{ borderColor: C.border }}
                    placeholder="+235 66 00 00 00" value={customerForm.phone}
                    onChange={(e) => setCustomerForm(p => ({ ...p, phone: e.target.value }))} disabled={busy} />
                </div>
              </div>
              <ComboBox label={fr ? "Pays" : "Country"} value={customerForm.country}
                onChange={(v) => setCustomerForm(p => ({ ...p, country: v || "TD", city: "" }))}
                items={countryItems} placeholder={fr ? "Choisir un pays…" : "Select country…"}
                searchPlaceholder={fr ? "Rechercher…" : "Search…"} disabled={busy} />
              <CityField label={fr ? "Ville" : "City"} value={customerForm.city}
                onChange={(v) => setCustomerForm(p => ({ ...p, city: v }))}
                countryCode={customerForm.country}
                placeholder={fr ? "Choisir ou saisir une ville…" : "Select or type a city…"} disabled={busy} />
              <div className="space-y-1.5">
                <label className={labelCls}>{fr ? "Adresse" : "Address"}</label>
                <input className={inputCls} style={{ borderColor: C.border }}
                  value={customerForm.address} onChange={(e) => setCustomerForm(p => ({ ...p, address: e.target.value }))} disabled={busy} />
              </div>
              <div className="flex justify-end gap-2 pt-2">
                <button onClick={() => setCreateCustomerOpen(false)}
                  className="rounded-xl border px-4 py-2.5 text-sm font-medium text-slate-600 bg-white hover:bg-slate-50 transition"
                  style={{ borderColor: C.border }}>{fr ? "Annuler" : "Cancel"}</button>
                <PrimaryBtn onClick={onCreateCustomer} disabled={busy}
                  label={busy ? (fr ? "Création…" : "Creating…") : (fr ? "Créer le client" : "Create client")} />
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}