"use client"

import Link from "next/link"
import { useEffect, useMemo, useState } from "react"
import { useLocale, useTranslations } from "next-intl"
import { listCustomerCases, CaseLite, CaseStatus } from "@/src/lib/api/customer-portal"
import { RefreshCw, Search, Filter, ArrowRight, FileText, AlertTriangle, Plus } from "lucide-react"

const STATUSES: { value: "" | CaseStatus; labelKey: string }[] = [
  { value: "", labelKey: "cases.filters.all" },
  { value: "open", labelKey: "cases.status.open" },
  { value: "in_progress", labelKey: "cases.status.in_progress" },
  { value: "on_hold", labelKey: "cases.status.on_hold" },
  { value: "closed", labelKey: "cases.status.closed" },
]

function statusBadgeClass(status: CaseStatus) {
  switch (status) {
    case "open":
      return "bg-emerald-50 text-emerald-700 border-emerald-200"
    case "in_progress":
      return "bg-green-50 text-green-700 border-green-200"
    case "on_hold":
      return "bg-amber-50 text-amber-700 border-amber-200"
    case "closed":
      return "bg-slate-50 text-slate-700 border-slate-200"
    default:
      return "bg-slate-50 text-slate-700 border-slate-200"
  }
}

export default function ClientCasesPage() {
  const t = useTranslations("clientPortal")
  const locale = useLocale()

  const [q, setQ] = useState("")
  const [status, setStatus] = useState<"" | CaseStatus>("")
  const [rows, setRows] = useState<CaseLite[]>([])
  const [loading, setLoading] = useState(false)
  const [err, setErr] = useState<string | null>(null)

  const statusLabelKey = useMemo(
    () => STATUSES.find((s) => s.value === status)?.labelKey || "cases.filters.all",
    [status]
  )

  async function load() {
    setLoading(true)
    setErr(null)
    try {
      const data = await listCustomerCases({
        q: q.trim() || undefined,
        status: status || undefined,
      })
      setRows(data)
    } catch (e: any) {
      setErr(e?.message || "Error")
    } finally {
      setLoading(false)
    }
  }

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

  function onSubmit(e: React.FormEvent) {
    e.preventDefault()
    load()
  }

  return (
    <div className="space-y-4">
      {/* Header */}
      <div className="flex items-start justify-between gap-3">
        <div className="space-y-1">
          <h1 className="text-xl font-semibold">{t("cases.title")}</h1>
          <div className="text-sm text-muted-foreground">
            {t("cases.filters.statusLabel")} : <span className="font-medium">{t(statusLabelKey)}</span>
          </div>
        </div>

        <div className="flex items-center gap-2">
          <Link
            href={`/${locale}/client/cases/new`}
            className="inline-flex items-center gap-2 rounded-xl bg-emerald-600 px-3 py-2 text-sm font-medium text-white hover:bg-emerald-700"
          >
            <Plus className="h-4 w-4" />
            {t("cases.actions.new")}
          </Link>

          <button
            onClick={load}
            className="inline-flex items-center gap-2 rounded-xl border px-3 py-2 text-sm hover:bg-black/5"
            type="button"
          >
            <RefreshCw className="h-4 w-4" />
            {t("common.refresh")}
          </button>
        </div>
      </div>

      {/* Filters */}
      <form
        onSubmit={onSubmit}
        className="rounded-xl border p-3 flex flex-col gap-3 md:flex-row md:items-center"
      >
        <div className="relative w-full md:max-w-sm">
          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
          <input
            value={q}
            onChange={(e) => setQ(e.target.value)}
            placeholder={t("cases.filters.searchPlaceholder")}
            className="w-full rounded-xl border px-9 py-2 text-sm outline-none focus:ring-2 focus:ring-emerald-200"
          />
        </div>

        <div className="relative w-full md:max-w-xs">
          <Filter className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
          <select
            value={status}
            onChange={(e) => setStatus(e.target.value as any)}
            className="w-full rounded-xl border px-9 py-2 text-sm outline-none focus:ring-2 focus:ring-emerald-200"
          >
            {STATUSES.map((s) => (
              <option key={s.value} value={s.value}>
                {t(s.labelKey)}
              </option>
            ))}
          </select>
        </div>

        <button
          className="inline-flex items-center justify-center gap-2 rounded-xl bg-emerald-600 px-4 py-2 text-sm font-medium text-white hover:bg-emerald-700"
          type="submit"
        >
          <Search className="h-4 w-4" />
          {t("cases.filters.search")}
        </button>
      </form>

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

      {loading ? (
        <div className="rounded-xl border p-3 text-sm">{t("common.loading")}</div>
      ) : (
        <div className="rounded-xl border overflow-hidden">
          <div className="grid grid-cols-12 gap-2 border-b bg-black/[0.02] px-3 py-2 text-xs font-medium">
            <div className="col-span-3">{t("cases.table.reference")}</div>
            <div className="col-span-5">{t("cases.table.title")}</div>
            <div className="col-span-2">{t("cases.table.status")}</div>
            <div className="col-span-2 text-right">{t("cases.table.balance")}</div>
          </div>

          {rows.length === 0 ? (
            <div className="px-3 py-8 text-sm text-muted-foreground flex items-center gap-2">
              <FileText className="h-4 w-4" />
              {t("cases.empty")}
            </div>
          ) : (
            rows.map((c) => (
              <Link
                key={c.id}
                href={`/${locale}/client/cases/${c.id}`}
                className="grid grid-cols-12 gap-2 px-3 py-3 text-sm border-b hover:bg-emerald-50/40 transition-colors"
              >
                <div className="col-span-3 font-medium flex items-center gap-2">
                  <span>{c.reference}</span>
                  <ArrowRight className="h-4 w-4 text-emerald-600" />
                </div>

                <div className="col-span-5 truncate">{c.title}</div>

                <div className="col-span-2">
                  <span
                    className={`inline-flex items-center rounded-full border px-2 py-0.5 text-xs ${statusBadgeClass(
                      c.status
                    )}`}
                    title={c.status}
                  >
                    {/* On utilise la trad si elle existe */}
                    {t(`cases.status.${c.status}`)}
                  </span>
                </div>

                <div className="col-span-2 text-right tabular-nums">{c.balance_amount}</div>
              </Link>
            ))
          )}
        </div>
      )}
    </div>
  )
}