"use client"

import { useEffect, useMemo, useState } from "react"
import Link from "next/link"
import { useTranslations } from "next-intl"
import { Search, Filter, Plus, AlertTriangle, ChevronRight } from "lucide-react"

import { listCollectionCases, type CollectionCase } from "@/src/lib/api/collections"

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

export default function CollectionCasesPage() {
  const t = useTranslations("collections")
  const tc = useTranslations("common")

  const [loading, setLoading] = useState(true)
  const [rows, setRows] = useState<CollectionCase[]>([])
  const [q, setQ] = useState("")
  const [status, setStatus] = useState<string>("")
  const [priority, setPriority] = useState<string>("")
  const [overdue, setOverdue] = useState<boolean>(false)

  async function load() {
    setLoading(true)
    try {
      const data = await listCollectionCases({
        q: q || undefined,
        status: status || undefined,
        priority: priority || undefined,
        ordering: "-updated_at",
      } as any)
      setRows(data)
    } finally {
      setLoading(false)
    }
  }

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

  const stats = useMemo(() => {
    const total = rows.length
    const overdueCount = rows.filter((r) => (r as any).is_overdue).length
    return { total, overdueCount }
  }, [rows])

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

        <button
          className="inline-flex items-center gap-2 rounded-xl px-3 py-2 text-sm font-medium text-white"
          style={{ backgroundColor: "#42210b" }}
          onClick={() => alert("UI create modal next step")}
        >
          <Plus className="h-4 w-4" />
          {t("actions.newCase")}
        </button>
      </div>

      <div className="grid gap-3 md:grid-cols-3">
        <div className="rounded-xl border bg-white p-3">
          <div className="text-xs text-slate-500">{t("kpis.totalCases")}</div>
          <div className="text-lg font-semibold">{stats.total}</div>
        </div>
        <div className="rounded-xl border bg-white p-3">
          <div className="text-xs text-slate-500">{t("kpis.overdue")}</div>
          <div className="text-lg font-semibold">{stats.overdueCount}</div>
        </div>
        <div className="rounded-xl border bg-white p-3">
          <div className="text-xs text-slate-500">{t("kpis.lastSync")}</div>
          <div className="text-lg font-semibold">—</div>
        </div>
      </div>

      <div className="rounded-xl border bg-white p-3">
        <div className="flex flex-col gap-2 md:flex-row md:items-center">
          <div className="flex items-center gap-2 rounded-xl border px-3 py-2">
            <Search className="h-4 w-4 text-slate-500" />
            <input
              className="w-full text-sm outline-none"
              placeholder={t("filters.search")}
              value={q}
              onChange={(e) => setQ(e.target.value)}
            />
          </div>

          <div className="flex gap-2">
            <select className="rounded-xl border px-3 py-2 text-sm" value={status} onChange={(e) => setStatus(e.target.value)}>
              <option value="">{t("filters.statusAll")}</option>
              <option value="preventive">{t("status.preventive")}</option>
              <option value="amicable">{t("status.amicable")}</option>
              <option value="legal">{t("status.legal")}</option>
              <option value="disputed">{t("status.disputed")}</option>
              <option value="settled">{t("status.settled")}</option>
              <option value="closed">{t("status.closed")}</option>
            </select>

            <select className="rounded-xl border px-3 py-2 text-sm" value={priority} onChange={(e) => setPriority(e.target.value)}>
              <option value="">{t("filters.priorityAll")}</option>
              <option value="low">{t("priority.low")}</option>
              <option value="medium">{t("priority.medium")}</option>
              <option value="high">{t("priority.high")}</option>
            </select>

            <label className="inline-flex items-center gap-2 rounded-xl border px-3 py-2 text-sm">
              <input type="checkbox" checked={overdue} onChange={(e) => setOverdue(e.target.checked)} />
              <span className="inline-flex items-center gap-2">
                <AlertTriangle className="h-4 w-4 text-slate-600" />
                {t("filters.overdue")}
              </span>
            </label>

            <button
              className="inline-flex items-center gap-2 rounded-xl px-3 py-2 text-sm font-medium text-white"
              style={{ backgroundColor: "#ea8c21" }}
              onClick={load}
            >
              <Filter className="h-4 w-4" />
              {tc("apply")}
            </button>
          </div>
        </div>
      </div>

      <div className="rounded-xl border bg-white">
        <div className="border-b p-3 text-sm font-medium">{t("cases.tableTitle")}</div>

        {loading ? (
          <div className="p-3 text-sm text-slate-600">{tc("loading")}…</div>
        ) : rows.length === 0 ? (
          <div className="p-6 text-center text-sm text-slate-600">{t("cases.empty")}</div>
        ) : (
          <div className="divide-y">
            {rows.map((r) => (
              <Link
                key={r.id}
                href={`./cases/${r.id}`}
                className="flex items-center justify-between gap-3 p-3 hover:bg-slate-50"
              >
                <div className="min-w-0">
                  <div className="flex items-center gap-2">
                    <span className="truncate text-sm font-semibold">{r.reference}</span>
                    {(r as any).is_overdue ? (
                      <span className="rounded-full bg-amber-50 px-2 py-0.5 text-xs font-medium text-amber-700">
                        {t("badges.overdue")}
                      </span>
                    ) : null}
                    <span className="rounded-full bg-slate-100 px-2 py-0.5 text-xs text-slate-700">
                      {t(`status.${r.status}` as any)}
                    </span>
                    <span className="rounded-full bg-slate-100 px-2 py-0.5 text-xs text-slate-700">
                      {t(`priority.${r.priority}` as any)}
                    </span>
                  </div>
                  <div className="truncate text-xs text-slate-600">
                    {t("fields.nextAction")}: {(r as any).next_action_date || "—"} • {t("fields.balance")}: {r.amount_due ?? "—"}
                  </div>
                </div>
                <ChevronRight className="h-4 w-4 text-slate-500" />
              </Link>
            ))}
          </div>
        )}
      </div>
    </div>
  )
}