"use client";

import { useEffect, useMemo, useState } from "react";
import { useLocale, useTranslations } from "next-intl";

import {
  listDebtors,
  createDebtor,
  updateDebtor,
  deleteDebtor,
  type Debtor,
  type DebtorType,
} from "@/src/lib/api/debtors";

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

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

type Mode = "create" | "edit";

export default function DebtorsPage() {
  const t = useTranslations("debtors");
  const locale = useLocale();

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

  // Filters
  const [q, setQ] = useState("");
  const [typeFilter, setTypeFilter] = useState<"" | DebtorType>("");
  const [countryFilter, setCountryFilter] = useState<string>("");

  // Modal
  const [open, setOpen] = useState(false);
  const [mode, setMode] = useState<Mode>("create");
  const [editingId, setEditingId] = useState<number | null>(null);

  const [form, setForm] = useState({
    type: "individual" as DebtorType,
    full_name: "",
    phone: "",
    email: "",
    address: "",
    city: "",
    country: "TD",
    national_id: "",
    tax_id: "",
  });

  function resetForm() {
    setForm({
      type: "individual",
      full_name: "",
      phone: "",
      email: "",
      address: "",
      city: "",
      country: "TD",
      national_id: "",
      tax_id: "",
    });
    setEditingId(null);
  }

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

  async function load(initial = false) {
    if (initial) setLoading(true);
    setErr(null);
    try {
      const ds = await listDebtors({ q: q.trim() || undefined });
      setItems(ds);
    } catch (e: any) {
      setErr(e?.message || t("errors.load_failed"));
    } finally {
      if (initial) setLoading(false);
    }
  }

  useEffect(() => {
    load(true);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  useEffect(() => {
    const timer = setTimeout(() => load(false), 250);
    return () => clearTimeout(timer);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [q]);

  const filtered = useMemo(() => {
    return items
      .filter((d) => {
        if (typeFilter && d.type !== typeFilter) return false;
        if (countryFilter && (d.country || "") !== countryFilter) return false;
        return true;
      })
      .sort((a, b) => (a.full_name || "").localeCompare(b.full_name || ""));
  }, [items, typeFilter, countryFilter]);

  function openCreate() {
    setErr(null);
    resetForm();
    setMode("create");
    setOpen(true);
  }

  function openEdit(d: Debtor) {
    setErr(null);
    setMode("edit");
    setEditingId(d.id);
    setForm({
      type: d.type,
      full_name: d.full_name || "",
      phone: d.phone || "",
      email: d.email || "",
      address: d.address || "",
      city: d.city || "",
      country: (d.country || "TD") as any,
      national_id: d.national_id || "",
      tax_id: d.tax_id || "",
    });
    setOpen(true);
  }

  async function onSubmit() {
    setErr(null);

    if (!form.full_name.trim()) {
      setErr(t("errors.name_required"));
      return;
    }

    const payload = {
      type: form.type,
      full_name: form.full_name.trim(),
      phone: form.phone.trim() || null,
      email: form.email.trim() || null,
      address: form.address.trim() || null,
      city: form.city.trim() || null,
      country: form.country || null,
      national_id: form.national_id.trim() || null,
      tax_id: form.tax_id.trim() || null,
      metadata: null,
    };

    if (mode === "create") {
      setBusy("create");
      try {
        const created = await createDebtor(payload as any);
        setItems((prev) => [created, ...prev]);
        setOpen(false);
        resetForm();
      } catch (e: any) {
        setErr(e?.message || t("errors.create_failed"));
      } finally {
        setBusy(null);
      }
      return;
    }

    // edit
    if (!editingId) return;
    setBusy("edit");
    try {
      const updated = await updateDebtor(editingId, payload as any);
      setItems((prev) => prev.map((x) => (x.id === updated.id ? updated : x)));
      setOpen(false);
      resetForm();
    } catch (e: any) {
      setErr(e?.message || t("errors.update_failed"));
    } finally {
      setBusy(null);
    }
  }

  async function onDelete(d: Debtor) {
    const ok = window.confirm(t("confirm_delete", { name: d.full_name }));
    if (!ok) return;

    setErr(null);
    setBusy(`delete:${d.id}`);
    try {
      await deleteDebtor(d.id);
      setItems((prev) => prev.filter((x) => x.id !== d.id));
    } catch (e: any) {
      setErr(e?.message || t("errors.delete_failed"));
    } finally {
      setBusy(null);
    }
  }

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

        <button
          onClick={openCreate}
          className="px-4 py-2 text-sm font-medium text-white shadow-sm rounded-none"
          style={{ backgroundColor: "#42210b" }}
        >
          + {t("new")}
        </button>
      </div>

      {err && (
        <div className="border bg-white p-4 text-sm text-red-700 rounded-none">
          {err}
        </div>
      )}

      {/* Filters */}
      <div className="border bg-white shadow-sm p-4 space-y-3 rounded-none">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
          <input
            className="border px-3 py-2 text-sm rounded-none"
            placeholder={t("search_placeholder")}
            value={q}
            onChange={(e) => setQ(e.target.value)}
          />

          <select
            className="border px-3 py-2 text-sm bg-white rounded-none"
            value={typeFilter}
            onChange={(e) => setTypeFilter(e.target.value as any)}
          >
            <option value="">{t("type_all")}</option>
            <option value="individual">{t("type.individual")}</option>
            <option value="company">{t("type.company")}</option>
          </select>

          <select
            className="border px-3 py-2 text-sm bg-white rounded-none"
            value={countryFilter}
            onChange={(e) => setCountryFilter(e.target.value)}
          >
            <option value="">{t("country_all")}</option>
            {COUNTRIES.map((c) => (
              <option key={c.code} value={c.code}>
                {locale === "fr" ? c.fr : c.en} ({c.code})
              </option>
            ))}
          </select>

          <button
            onClick={() => {
              setQ("");
              setTypeFilter("");
              setCountryFilter("");
            }}
            className="border bg-white px-3 py-2 text-sm font-medium hover:bg-neutral-50 rounded-none"
            style={{ borderColor: "rgba(66,33,11,0.15)" }}
          >
            {t("reset")}
          </button>
        </div>
      </div>

      {/* List */}
      <div className="border bg-white shadow-sm rounded-none">
        <div className="px-4 py-3 border-b">
          <div className="text-sm font-semibold">
            {t("list_title")}{" "}
            <span className="text-neutral-500 font-normal">({filtered.length})</span>
          </div>
        </div>

        {loading ? (
          <div className="p-4 text-sm text-neutral-500">{t("loading")}</div>
        ) : filtered.length === 0 ? (
          <div className="p-6 text-sm text-neutral-500">{t("empty")}</div>
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead className="text-xs text-neutral-500">
                <tr className="border-b">
                  <th className="text-left font-medium px-4 py-3">{t("cols.name")}</th>
                  <th className="text-left font-medium px-4 py-3">{t("cols.type")}</th>
                  <th className="text-left font-medium px-4 py-3">{t("cols.phone")}</th>
                  <th className="text-left font-medium px-4 py-3">{t("cols.email")}</th>
                  <th className="text-left font-medium px-4 py-3">{t("cols.city")}</th>
                  <th className="text-left font-medium px-4 py-3">{t("cols.country")}</th>
                  <th className="text-right font-medium px-4 py-3">{t("cols.actions")}</th>
                </tr>
              </thead>
              <tbody>
                {filtered.map((d) => (
                  <tr key={d.id} className="border-b">
                    <td className="px-4 py-3">
                      <div className="font-medium">{d.full_name}</div>
                      <div className="text-xs text-neutral-500">#{d.id}</div>
                    </td>
                    <td className="px-4 py-3">{d.type === "company" ? t("type.company") : t("type.individual")}</td>
                    <td className="px-4 py-3">{d.phone || "—"}</td>
                    <td className="px-4 py-3">{d.email || "—"}</td>
                    <td className="px-4 py-3">{d.city || "—"}</td>
                    <td className="px-4 py-3">{countryLabel(d.country)}</td>
                    <td className="px-4 py-3">
                      <div className="flex justify-end gap-2">
                        <button
                          onClick={() => openEdit(d)}
                          className="border bg-white px-3 py-1.5 text-xs font-medium hover:bg-neutral-50 rounded-none"
                          style={{ borderColor: "rgba(66,33,11,0.15)" }}
                          disabled={busy !== null}
                        >
                          {t("actions.edit")}
                        </button>
                        <button
                          onClick={() => onDelete(d)}
                          className="border bg-white px-3 py-1.5 text-xs font-medium hover:bg-neutral-50 rounded-none"
                          style={{ borderColor: "rgba(239,68,68,0.25)", color: "rgb(185,28,28)" }}
                          disabled={busy !== null}
                        >
                          {busy === `delete:${d.id}` ? t("actions.deleting") : t("actions.delete")}
                        </button>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>

      {/* Modal (create/edit) */}
      {open && (
        <div className="fixed inset-0 z-50 bg-black/40 flex items-center justify-center p-4">
          <div className="w-full max-w-2xl bg-white shadow-xl border rounded-none">
            <div className="px-5 py-4 border-b flex items-start justify-between gap-3">
              <div>
                <div className="text-lg font-semibold">
                  {mode === "create" ? t("modal.create_title") : t("modal.edit_title")}
                </div>
                <div className="text-sm text-neutral-500">{t("modal.subtitle")}</div>
              </div>
              <button
                onClick={() => {
                  setOpen(false);
                  resetForm();
                }}
                className="text-sm text-neutral-500 hover:text-neutral-700"
                disabled={busy !== null}
              >
                {t("modal.close")}
              </button>
            </div>

            <div className="p-5 space-y-3">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                <select
                  className="border px-3 py-2 text-sm bg-white rounded-none"
                  value={form.type}
                  onChange={(e) => setForm((p) => ({ ...p, type: e.target.value as DebtorType }))}
                >
                  <option value="individual">{t("type.individual")}</option>
                  <option value="company">{t("type.company")}</option>
                </select>

                <select
                  className="border px-3 py-2 text-sm bg-white rounded-none"
                  value={form.country}
                  onChange={(e) => setForm((p) => ({ ...p, country: e.target.value }))}
                >
                  {COUNTRIES.map((c) => (
                    <option key={c.code} value={c.code}>
                      {locale === "fr" ? c.fr : c.en} ({c.code})
                    </option>
                  ))}
                </select>

                <input
                  className="border px-3 py-2 text-sm md:col-span-2 rounded-none"
                  placeholder={t("fields.full_name")}
                  value={form.full_name}
                  onChange={(e) => setForm((p) => ({ ...p, full_name: e.target.value }))}
                />

                <input
                  className="border px-3 py-2 text-sm rounded-none"
                  placeholder={t("fields.phone")}
                  value={form.phone}
                  onChange={(e) => setForm((p) => ({ ...p, phone: e.target.value }))}
                />

                <input
                  className="border px-3 py-2 text-sm rounded-none"
                  placeholder="Email"
                  value={form.email}
                  onChange={(e) => setForm((p) => ({ ...p, email: e.target.value }))}
                />

                <input
                  className="border px-3 py-2 text-sm rounded-none"
                  placeholder={t("fields.address")}
                  value={form.address}
                  onChange={(e) => setForm((p) => ({ ...p, address: e.target.value }))}
                />

                <input
                  className="border px-3 py-2 text-sm rounded-none"
                  placeholder={t("fields.city")}
                  value={form.city}
                  onChange={(e) => setForm((p) => ({ ...p, city: e.target.value }))}
                />

                <input
                  className="border px-3 py-2 text-sm rounded-none"
                  placeholder={t("fields.national_id")}
                  value={form.national_id}
                  onChange={(e) => setForm((p) => ({ ...p, national_id: e.target.value }))}
                />

                <input
                  className="border px-3 py-2 text-sm rounded-none"
                  placeholder={t("fields.tax_id")}
                  value={form.tax_id}
                  onChange={(e) => setForm((p) => ({ ...p, tax_id: e.target.value }))}
                />
              </div>

              <div className="flex justify-end gap-2 pt-2">
                <button
                  onClick={() => {
                    setOpen(false);
                    resetForm();
                  }}
                  className="border bg-white px-4 py-2 text-sm font-medium hover:bg-neutral-50 rounded-none"
                  style={{ borderColor: "rgba(66,33,11,0.15)" }}
                  disabled={busy !== null}
                >
                  {t("modal.cancel")}
                </button>

                <button
                  onClick={onSubmit}
                  className={cx(
                    "px-4 py-2 text-sm font-medium text-white shadow-sm rounded-none",
                    busy && "opacity-60"
                  )}
                  style={{ backgroundColor: "#42210b" }}
                  disabled={busy !== null}
                >
                  {mode === "create"
                    ? busy === "create"
                      ? t("modal.creating")
                      : t("modal.create")
                    : busy === "edit"
                      ? t("modal.saving")
                      : t("modal.save")}
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}