"use client"

import Link from "next/link"
import { useEffect, useMemo, useRef, useState } from "react"
import { useLocale, useTranslations } from "next-intl"
import { useRouter } from "next/navigation"

import { COUNTRIES } from "@/src/lib/constants/countries"

import {
  createCustomerCase,
  type CasePriority,
  type CaseStatus,
  listCustomerPortalDebtors,
  createCustomerPortalDebtor,
  type CustomerPortalDebtor,
  type CustomerPortalDebtorType,
} from "@/src/lib/api/customer-portal"

import { customerPortalApi } from "@/src/lib/api/customer-portal-client"

import {
  Check,
  ChevronDown,
  Plus,
  Search,
  X,
  AlertTriangle,
  Loader2,
  UserCog,
  Save,
  UserRound,
  Building2,
} from "lucide-react"

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

function pad4(n: number) {
  return String(n).padStart(4, "0")
}

function yyyymm(d = new Date()) {
  const y = d.getFullYear()
  const m = String(d.getMonth() + 1).padStart(2, "0")
  return `${y}${m}`
}

function genRef(country: string) {
  const c = (country || "XX").toUpperCase()
  const suffix = pad4(Math.floor(Math.random() * 10000))
  return `ACX/${c}/${yyyymm()}/${suffix}`
}

function countryLabel(locale: string, code: string) {
  const c = COUNTRIES.find((x) => x.code === code)
  if (!c) return code
  return locale === "fr" ? c.fr : c.en
}

/** ---------- Premium ComboBox (no deps) ---------- */
type ComboItem = { id: string; label: string; search?: string }

function useOnClickOutside(ref: React.RefObject<HTMLElement | null>, handler: () => void) {
  useEffect(() => {
    function onDown(e: MouseEvent | TouchEvent) {
      const el = ref.current
      if (!el) return
      if (el.contains(e.target as Node)) return
      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 query = q.trim().toLowerCase()
    if (!query) return items
    return items.filter((it) => (it.search || it.label).toLowerCase().includes(query))
  }, [items, q])

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

  return (
    <div className="space-y-1" ref={wrapRef}>
      {label ? (
        <label className="block text-xs text-neutral-500">
          {label} {required ? "*" : ""}
        </label>
      ) : null}

      <div className="relative">
        <div className="flex items-stretch gap-2">
          <button
            type="button"
            disabled={disabled}
            onClick={() => {
              if (disabled) return
              setOpen((v) => !v)
              setTimeout(() => inputRef.current?.focus(), 0)
            }}
            className={cx(
              "flex-1 rounded-xl border bg-white px-3 py-2 text-sm text-left shadow-sm",
              "hover:bg-neutral-50",
              disabled && "opacity-60 cursor-not-allowed"
            )}
            style={{ borderColor: "rgba(16,185,129,0.25)" }}
          >
            <div className="flex items-center justify-between gap-2">
              <span className={cx("truncate", !selected && "text-neutral-400")}>
                {selected ? selected.label : placeholder}
              </span>
              <ChevronDown className="h-4 w-4 text-neutral-400" />
            </div>
          </button>

          {rightButton ? <div className="shrink-0">{rightButton}</div> : null}
        </div>

        {open && (
          <div
            className="absolute left-0 top-[calc(100%+8px)] z-50 w-full rounded-2xl border bg-white shadow-xl overflow-hidden"
            style={{ borderColor: "rgba(16,185,129,0.25)" }}
          >
            <div className="p-3 border-b" style={{ borderColor: "rgba(16,185,129,0.15)" }}>
              <div className="flex items-center gap-2 rounded-xl border bg-white px-3 py-2">
                <Search className="h-4 w-4 text-neutral-400" />
                <input
                  ref={inputRef}
                  className="w-full outline-none text-sm"
                  placeholder={searchPlaceholder}
                  value={q}
                  onChange={(e) => setQ(e.target.value)}
                />
                <span className="text-[11px] text-neutral-500">{filtered.length}</span>
              </div>
            </div>

            <div className="max-h-64 overflow-auto p-2">
              {emptyLabel && (
                <button
                  type="button"
                  className={cx(
                    "w-full text-left px-3 py-2 rounded-xl text-sm hover:bg-neutral-50 transition",
                    value === "" && "bg-neutral-50"
                  )}
                  onClick={() => pick("")}
                >
                  <div className="flex items-center justify-between">
                    <span className="text-neutral-600">{emptyLabel}</span>
                    {value === "" ? <Check className="h-4 w-4 text-emerald-600" /> : null}
                  </div>
                </button>
              )}

              {filtered.length === 0 ? (
                <div className="px-3 py-10 text-center text-sm text-neutral-500">No results</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-neutral-50 transition",
                        active && "bg-neutral-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 text-emerald-600" /> : null}
                      </div>
                    </button>
                  )
                })
              )}
            </div>
          </div>
        )}
      </div>
    </div>
  )
}

/** ---------- Assignees (tu as déjà l’endpoint) ---------- */
type AssigneeCP = {
  id: number
  username: string
  first_name?: string | null
  last_name?: string | null
  email?: string | null
  role?: string | null
  status?: string | null
}

function displayUser(u: AssigneeCP) {
  const full = `${u.first_name ?? ""} ${u.last_name ?? ""}`.trim()
  return full ? `@${u.username} — ${full}` : `@${u.username}`
}

async function listCustomerPortalAssignees(): Promise<AssigneeCP[]> {
  return customerPortalApi.request("/customer-portal/assignees/", { method: "GET" })
}

/** ---------- Page ---------- */
export default function ClientNewCasePage() {
  const t = useTranslations("clientPortal")
  const locale = useLocale()
  const router = useRouter()

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

  // data
  const [debtors, setDebtors] = useState<CustomerPortalDebtor[]>([])
  const [assignees, setAssignees] = useState<AssigneeCP[]>([])

  // debtor modal
  const [debtorOpen, setDebtorOpen] = useState(false)
  const [debtorBusy, setDebtorBusy] = useState(false)
  const [debtorForm, setDebtorForm] = useState({
    type: "individual" as CustomerPortalDebtorType,
    full_name: "",
    phone: "",
    email: "",
    city: "",
    country: "TD",
  })

  const [refTouched, setRefTouched] = useState(false)

  const [form, setForm] = useState({
    reference: "",
    title: "",
    status: "open" as CaseStatus,
    priority: "medium" as CasePriority,

    debtor_id: "" as "" | string,

    currency: "XAF",
    original_amount: "0",
    balance_amount: "0",
    due_date: "",

    country: "TD",
    assigned_to_id: "" as "" | string,

    description: "",
  })

  // Load initial data
  useEffect(() => {
    ;(async () => {
      setLoading(true)
      setErr(null)
      try {
        const [ds, asg] = await Promise.all([
          listCustomerPortalDebtors(),
          listCustomerPortalAssignees(),
        ])
        setDebtors(ds)
        setAssignees(asg)
      } catch (e: any) {
        setErr(e?.message || (locale === "fr" ? "Erreur de chargement." : "Loading failed."))
      } finally {
        setLoading(false)
      }
    })()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  // Auto reference
  useEffect(() => {
    if (!refTouched) setForm((p) => ({ ...p, reference: genRef(p.country) }))
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [form.country])

  // Items
  const debtorItems: ComboItem[] = useMemo(() => {
    return debtors
      .slice()
      .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.type, d.phone || "", d.email || "", d.country || "", d.city || ""].join(" "),
      }))
  }, [debtors])

  const assigneeItems: ComboItem[] = useMemo(() => {
    return assignees
      .slice()
      .sort((a, b) => a.username.localeCompare(b.username))
      .map((u) => ({
        id: String(u.id),
        label: displayUser(u),
        search: [u.username, u.first_name || "", u.last_name || "", u.email || ""].join(" "),
      }))
  }, [assignees])

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

  const NewBtn = ({ onClick, label }: { onClick: () => void; label: string }) => (
    <button
      type="button"
      onClick={onClick}
      className="inline-flex items-center gap-2 rounded-xl px-3 py-2 text-sm font-medium border bg-white shadow-sm hover:bg-neutral-50"
      style={{ borderColor: "rgba(16,185,129,0.25)" }}
      disabled={busy}
    >
      <Plus className="h-4 w-4 text-emerald-600" />
      {label}
    </button>
  )

  async function onCreateDebtor() {
    setErr(null)

    if (!debtorForm.full_name.trim()) {
      setErr(t("debtors.new.errors.fullNameRequired"))
      return
    }

    setDebtorBusy(true)
    try {
      const created = await createCustomerPortalDebtor({
        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.trim() || null,
        address: null,
        metadata: null,
        national_id: null,
        tax_id: null,
      } as any)

      setDebtors((prev) => [created, ...prev])
      setForm((p) => ({ ...p, debtor_id: String(created.id) }))

      if (created.country && !refTouched) {
        setForm((p) => ({ ...p, country: created.country as any }))
      }

      setDebtorOpen(false)
      setDebtorForm({ type: "individual", full_name: "", phone: "", email: "", city: "", country: "TD" })
    } catch (e: any) {
      setErr(e?.message || (locale === "fr" ? "Erreur création débiteur." : "Debtor creation failed."))
    } finally {
      setDebtorBusy(false)
    }
  }

  async function onSubmit() {
    setErr(null)

    if (!form.reference.trim() || !form.title.trim() || !form.debtor_id) {
      setErr(
        locale === "fr"
          ? "Référence, titre et débiteur sont obligatoires."
          : "Reference, title and debtor are required."
      )
      return
    }

    setBusy(true)
    try {
      const created = await createCustomerCase({
        reference: form.reference.trim(),
        title: form.title.trim(),
        status: form.status,
        priority: form.priority,
        currency: form.currency || null,
        original_amount: form.original_amount || "0",
        balance_amount: form.balance_amount || "0",
        due_date: form.due_date || null,
        debtor_id: Number(form.debtor_id),
        assigned_to_id: form.assigned_to_id ? Number(form.assigned_to_id) : null,
        metadata: form.description?.trim() ? { description: form.description.trim() } : undefined,
      } as any)

      router.replace(`/${locale}/client/cases/${created.id}`)
    } catch (e: any) {
      setErr(e?.message || (locale === "fr" ? "Erreur création dossier." : "Case creation failed."))
    } finally {
      setBusy(false)
    }
  }

  const debtorIcon =
    debtorForm.type === "company" ? <Building2 className="h-4 w-4" /> : <UserRound className="h-4 w-4" />

  return (
    <div className="space-y-4">
      <div className="flex items-start justify-between gap-3">
        <div>
          <h1 className="text-xl font-semibold">{t("cases.new.title")}</h1>
          <p className="text-neutral-600">{t("cases.new.subtitle")}</p>
        </div>

        <Link
          href={`/${locale}/client/cases`}
          className="rounded-xl px-4 py-2 text-sm font-medium bg-white border shadow-sm hover:bg-neutral-50"
          style={{ borderColor: "rgba(16,185,129,0.25)" }}
        >
          ← {t("common.back")}
        </Link>
      </div>

      {err && (
        <div className="rounded-2xl border bg-white p-4 text-sm text-red-700 flex items-start gap-2">
          <AlertTriangle className="h-4 w-4 mt-0.5" />
          <span>{err}</span>
        </div>
      )}

      <div className="rounded-2xl border bg-white p-5" style={{ borderColor: "rgba(16,185,129,0.18)" }}>
        {loading ? (
          <div className="text-sm text-neutral-500 flex items-center gap-2">
            <Loader2 className="h-4 w-4 animate-spin" />
            {t("common.loading")}
          </div>
        ) : (
          <div className="space-y-4">
            {/* Debtor + Assignee */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <ComboBox
                label={t("cases.new.fields.debtor")}
                required
                value={form.debtor_id}
                onChange={(v) => setForm((p) => ({ ...p, debtor_id: v }))}
                items={debtorItems}
                placeholder={t("cases.new.placeholders.debtor")}
                searchPlaceholder={locale === "fr" ? "Rechercher un débiteur…" : "Search debtor…"}
                disabled={busy}
                rightButton={<NewBtn onClick={() => setDebtorOpen(true)} label={locale === "fr" ? "Nouveau" : "New"} />}
                emptyLabel={locale === "fr" ? "-- Aucun --" : "-- None --"}
              />

              <div className="space-y-1">
                <label className="block text-xs text-neutral-500">
                  <span className="inline-flex items-center gap-2">
                    <UserCog className="h-4 w-4 text-emerald-600" />
                    {t("cases.new.fields.assignedTo")}
                  </span>
                </label>

                <ComboBox
                  label={""}
                  value={form.assigned_to_id}
                  onChange={(v) => setForm((p) => ({ ...p, assigned_to_id: v }))}
                  items={assigneeItems}
                  placeholder={t("cases.new.placeholders.assignedTo")}
                  searchPlaceholder={locale === "fr" ? "Rechercher un employé…" : "Search employee…"}
                  disabled={busy}
                  emptyLabel={locale === "fr" ? "— Non assigné —" : "— Unassigned —"}
                />
              </div>
            </div>

            {/* Country + Reference */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <ComboBox
                label={locale === "fr" ? "Pays (pour la référence)" : "Country (for reference)"}
                value={form.country}
                onChange={(v) => setForm((p) => ({ ...p, country: v || "TD" }))}
                items={countryItems}
                placeholder={locale === "fr" ? "Choisir un pays…" : "Select country…"}
                searchPlaceholder={locale === "fr" ? "Rechercher un pays…" : "Search country…"}
                disabled={busy}
              />

              <div className="space-y-1">
                <label className="block text-xs text-neutral-500">{t("cases.new.fields.reference")} *</label>
                <div className="flex gap-2">
                  <input
                    className="flex-1 rounded-xl border px-3 py-2 text-sm"
                    style={{ borderColor: "rgba(16,185,129,0.25)" }}
                    placeholder={t("cases.new.placeholders.reference")}
                    value={form.reference}
                    onChange={(e) => {
                      setRefTouched(true)
                      setForm((p) => ({ ...p, reference: e.target.value }))
                    }}
                    disabled={busy}
                  />
                  <button
                    type="button"
                    onClick={() => {
                      setRefTouched(false)
                      setForm((p) => ({ ...p, reference: genRef(p.country) }))
                    }}
                    className="rounded-xl px-3 py-2 text-sm font-medium bg-white border shadow-sm hover:bg-neutral-50"
                    style={{ borderColor: "rgba(16,185,129,0.25)" }}
                    disabled={busy}
                    title={locale === "fr" ? "Générer" : "Generate"}
                  >
                    ↻
                  </button>
                </div>

                <div className="text-[11px] text-neutral-500">
                  Format: <span className="font-medium">ACX/{form.country}/{yyyymm()}/0000</span> ·{" "}
                  {locale === "fr" ? "Pays" : "Country"}:{" "}
                  <span className="font-medium">{countryLabel(locale, form.country)}</span>
                </div>
              </div>
            </div>

            {/* Title */}
            <div className="space-y-1">
              <label className="block text-xs text-neutral-500">{t("cases.new.fields.title")} *</label>
              <input
                className="w-full rounded-xl border px-3 py-2 text-sm"
                style={{ borderColor: "rgba(16,185,129,0.25)" }}
                value={form.title}
                onChange={(e) => setForm((p) => ({ ...p, title: e.target.value }))}
                disabled={busy}
                placeholder={t("cases.new.placeholders.title")}
              />
            </div>

            {/* Priority + Due date */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="space-y-1">
                <label className="block text-xs text-neutral-500">{t("cases.new.fields.priority")}</label>
                <select
                  className="w-full rounded-xl border px-3 py-2 text-sm bg-white"
                  style={{ borderColor: "rgba(16,185,129,0.25)" }}
                  value={form.priority}
                  onChange={(e) => setForm((p) => ({ ...p, priority: e.target.value as any }))}
                  disabled={busy}
                >
                  <option value="low">{locale === "fr" ? "Faible" : "Low"}</option>
                  <option value="medium">{locale === "fr" ? "Moyenne" : "Medium"}</option>
                  <option value="high">{locale === "fr" ? "Élevée" : "High"}</option>
                  <option value="urgent">{locale === "fr" ? "Urgent" : "Urgent"}</option>
                </select>
              </div>

              <div className="space-y-1">
                <label className="block text-xs text-neutral-500">{t("cases.new.fields.dueDate")}</label>
                <input
                  type="date"
                  className="w-full rounded-xl border px-3 py-2 text-sm"
                  style={{ borderColor: "rgba(16,185,129,0.25)" }}
                  value={form.due_date}
                  onChange={(e) => setForm((p) => ({ ...p, due_date: e.target.value }))}
                  disabled={busy}
                />
              </div>
            </div>

            {/* Amounts */}
            <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
              <div className="space-y-1">
                <label className="block text-xs text-neutral-500">{t("cases.new.fields.currency")}</label>
                <input
                  className="w-full rounded-xl border px-3 py-2 text-sm"
                  style={{ borderColor: "rgba(16,185,129,0.25)" }}
                  value={form.currency}
                  onChange={(e) => setForm((p) => ({ ...p, currency: e.target.value }))}
                  disabled={busy}
                />
              </div>

              <div className="space-y-1">
                <label className="block text-xs text-neutral-500">{t("cases.new.fields.amount")}</label>
                <input
                  className="w-full rounded-xl border px-3 py-2 text-sm"
                  style={{ borderColor: "rgba(16,185,129,0.25)" }}
                  value={form.original_amount}
                  onChange={(e) => setForm((p) => ({ ...p, original_amount: e.target.value }))}
                  disabled={busy}
                />
              </div>

              <div className="space-y-1">
                <label className="block text-xs text-neutral-500">{t("cases.new.fields.balance")}</label>
                <input
                  className="w-full rounded-xl border px-3 py-2 text-sm"
                  style={{ borderColor: "rgba(16,185,129,0.25)" }}
                  value={form.balance_amount}
                  onChange={(e) => setForm((p) => ({ ...p, balance_amount: e.target.value }))}
                  disabled={busy}
                />
              </div>

              <div className="space-y-1">
                <label className="block text-xs text-neutral-500">{t("cases.new.fields.status")}</label>
                <select
                  className="w-full rounded-xl border px-3 py-2 text-sm bg-white"
                  style={{ borderColor: "rgba(16,185,129,0.25)" }}
                  value={form.status}
                  onChange={(e) => setForm((p) => ({ ...p, status: e.target.value as any }))}
                  disabled={busy}
                >
                  <option value="open">{t("cases.status.open")}</option>
                  <option value="in_progress">{t("cases.status.in_progress")}</option>
                  <option value="on_hold">{t("cases.status.on_hold")}</option>
                  <option value="closed">{t("cases.status.closed")}</option>
                </select>
              </div>
            </div>

            {/* Description */}
            <div className="space-y-1">
              <label className="block text-xs text-neutral-500">{t("cases.new.fields.description")}</label>
              <textarea
                className="w-full min-h-[110px] rounded-xl border px-3 py-2 text-sm"
                style={{ borderColor: "rgba(16,185,129,0.25)" }}
                value={form.description}
                onChange={(e) => setForm((p) => ({ ...p, description: e.target.value }))}
                disabled={busy}
                placeholder={t("cases.new.placeholders.description")}
              />
            </div>

            {/* Action */}
            <div className="flex justify-end">
              <button
                onClick={onSubmit}
                className={cx(
                  "rounded-xl px-4 py-2 text-sm font-medium text-white inline-flex items-center gap-2",
                  busy && "opacity-60"
                )}
                style={{ backgroundColor: "#059669" }}
                disabled={busy}
              >
                {busy ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
                {busy ? (locale === "fr" ? "Création…" : "Creating…") : t("cases.new.actions.create")}
              </button>
            </div>
          </div>
        )}
      </div>

      {/* Modal: Create Debtor */}
      {debtorOpen && (
        <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">
              <div>
                <div className="text-lg font-semibold">{t("debtors.new.title")}</div>
                <div className="text-sm text-muted-foreground">{t("debtors.new.subtitle")}</div>
              </div>
              <button className="rounded-xl p-2 hover:bg-neutral-50" onClick={() => setDebtorOpen(false)} disabled={debtorBusy}>
                <X className="h-5 w-5 text-neutral-500" />
              </button>
            </div>

            <div className="p-5 space-y-3">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                <div className="space-y-1">
                  <label className="text-xs text-muted-foreground">{t("debtors.new.fields.type")}</label>
                  <button
                    type="button"
                    className="w-full rounded-xl border px-3 py-2 text-sm flex items-center justify-between hover:bg-neutral-50"
                    onClick={() => setDebtorForm((p) => ({ ...p, type: p.type === "company" ? "individual" : "company" }))}
                    disabled={debtorBusy}
                  >
                    <span className="inline-flex items-center gap-2">
                      {debtorIcon}
                      {t(`debtors.types.${debtorForm.type}`)}
                    </span>
                    <span className="text-xs text-muted-foreground">{t("debtors.new.actions.toggleType")}</span>
                  </button>
                </div>

                <div className="space-y-1">
                  <label className="text-xs text-muted-foreground">{t("debtors.new.fields.fullName")} *</label>
                  <input
                    className="w-full rounded-xl border px-3 py-2 text-sm"
                    value={debtorForm.full_name}
                    onChange={(e) => setDebtorForm((p) => ({ ...p, full_name: e.target.value }))}
                    disabled={debtorBusy}
                  />
                </div>

                <div className="space-y-1">
                  <label className="text-xs text-muted-foreground">{t("debtors.new.fields.phone")}</label>
                  <input
                    className="w-full rounded-xl border px-3 py-2 text-sm"
                    value={debtorForm.phone}
                    onChange={(e) => setDebtorForm((p) => ({ ...p, phone: e.target.value }))}
                    disabled={debtorBusy}
                  />
                </div>

                <div className="space-y-1">
                  <label className="text-xs text-muted-foreground">{t("debtors.new.fields.email")}</label>
                  <input
                    className="w-full rounded-xl border px-3 py-2 text-sm"
                    value={debtorForm.email}
                    onChange={(e) => setDebtorForm((p) => ({ ...p, email: e.target.value }))}
                    disabled={debtorBusy}
                  />
                </div>

                <div className="space-y-1">
                  <label className="text-xs text-muted-foreground">{t("debtors.new.fields.city")}</label>
                  <input
                    className="w-full rounded-xl border px-3 py-2 text-sm"
                    value={debtorForm.city}
                    onChange={(e) => setDebtorForm((p) => ({ ...p, city: e.target.value }))}
                    disabled={debtorBusy}
                  />
                </div>

                <div className="space-y-1">
                  <label className="text-xs text-muted-foreground">{t("debtors.new.fields.country")}</label>
                  <input
                    className="w-full rounded-xl border px-3 py-2 text-sm"
                    value={debtorForm.country}
                    onChange={(e) => setDebtorForm((p) => ({ ...p, country: e.target.value }))}
                    disabled={debtorBusy}
                  />
                </div>
              </div>

              <div className="flex justify-end gap-2 pt-2">
                <button
                  onClick={() => setDebtorOpen(false)}
                  className="rounded-xl px-4 py-2 text-sm border bg-white hover:bg-neutral-50"
                  disabled={debtorBusy}
                  type="button"
                >
                  {t("debtors.new.actions.cancel")}
                </button>

                <button
                  onClick={onCreateDebtor}
                  className="rounded-xl px-4 py-2 text-sm font-medium text-white bg-emerald-600 hover:bg-emerald-700 inline-flex items-center gap-2 disabled:opacity-60"
                  disabled={debtorBusy}
                  type="button"
                >
                  {debtorBusy ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
                  {t("debtors.new.actions.create")}
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}