"use client"

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

import {
  LifeBuoy,
  Plus,
  Search,
  RefreshCw,
  Ticket,
  Shield,
  Clock,
  Mail,
  Phone,
  FileText,
  ChevronDown,
  ChevronRight,
  Loader2, // ✅ FIX: import manquant
} from "lucide-react"

import {
  listSupportTickets,
  type SupportTicket,
  type SupportStatus,
} from "@/src/lib/api/customer-portal-support"

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

function fmtDate(s?: string) {
  if (!s) return "—"
  const d = new Date(s)
  if (Number.isNaN(d.getTime())) return s
  return d.toLocaleString()
}

const STATUS_ORDER: SupportStatus[] = ["open", "in_progress", "waiting_customer", "resolved", "closed"]

function statusTone(s: SupportStatus) {
  switch (s) {
    case "open":
      return { bg: "rgba(16,185,129,0.10)", bd: "rgba(16,185,129,0.25)", tx: "#047857" }
    case "in_progress":
      return { bg: "rgba(59,130,246,0.10)", bd: "rgba(59,130,246,0.25)", tx: "#1d4ed8" }
    case "waiting_customer":
      return { bg: "rgba(245,158,11,0.12)", bd: "rgba(245,158,11,0.28)", tx: "#92400e" }
    case "resolved":
      return { bg: "rgba(100,116,139,0.10)", bd: "rgba(100,116,139,0.22)", tx: "#334155" }
    case "closed":
      return { bg: "rgba(148,163,184,0.10)", bd: "rgba(148,163,184,0.25)", tx: "#475569" }
  }
}

function priorityTone(p: "normal" | "urgent") {
  return p === "urgent"
    ? { bg: "rgba(239,68,68,0.10)", bd: "rgba(239,68,68,0.25)", tx: "#b91c1c" }
    : { bg: "rgba(16,185,129,0.08)", bd: "rgba(16,185,129,0.22)", tx: "#047857" }
}

function Badge({ label, tone }: { label: string; tone: { bg: string; bd: string; tx: string } }) {
  return (
    <span
      className="inline-flex items-center rounded-full border px-2 py-0.5 text-[11px] font-medium"
      style={{ background: tone.bg, borderColor: tone.bd, color: tone.tx }}
    >
      {label}
    </span>
  )
}

function FAQItem({
  q,
  a,
  open,
  onToggle,
}: {
  q: string
  a: string
  open: boolean
  onToggle: () => void
}) {
  return (
    <button
      type="button"
      onClick={onToggle}
      className="w-full text-left rounded-2xl border bg-white p-4 hover:bg-black/5 transition"
      style={{ borderColor: "rgba(15,23,42,.08)" }}
    >
      <div className="flex items-start justify-between gap-3">
        <div className="min-w-0">
          <div className="text-sm font-semibold text-slate-900">{q}</div>
          {open ? <div className="mt-2 text-sm text-slate-600">{a}</div> : null}
        </div>
        {open ? (
          <ChevronDown className="h-4 w-4 text-slate-500" />
        ) : (
          <ChevronRight className="h-4 w-4 text-slate-500" />
        )}
      </div>
    </button>
  )
}

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

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

  const [faqOpen, setFaqOpen] = useState<string>("")

  const stats = useMemo(() => {
    const byStatus = new Map<SupportStatus, number>()
    for (const s of STATUS_ORDER) byStatus.set(s, 0)
    for (const r of rows) byStatus.set(r.status, (byStatus.get(r.status) || 0) + 1)

    return {
      total: rows.length,
      open: byStatus.get("open") || 0,
      in_progress: byStatus.get("in_progress") || 0,
      waiting: byStatus.get("waiting_customer") || 0,
    }
  }, [rows])

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

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

  const faqs = [
    { id: "access", q: t("support.faq.access.q"), a: t("support.faq.access.a") },
    { id: "docs", q: t("support.faq.docs.q"), a: t("support.faq.docs.a") },
    { id: "cases", q: t("support.faq.cases.q"), a: t("support.faq.cases.a") },
    { id: "session", q: t("support.faq.session.q"), a: t("support.faq.session.a") },
  ]

  return (
    <div className="space-y-5">
      {/* Header */}
      <div className="flex items-start justify-between gap-3">
        <div>
          <div className="flex items-center gap-2">
            <LifeBuoy className="h-5 w-5 text-emerald-600" />
            <h1 className="text-xl font-semibold">{t("support.title")}</h1>
          </div>
          <div className="text-sm text-muted-foreground">{t("support.subtitle")}</div>
        </div>

        <div className="flex items-center gap-2">
          <button
            type="button"
            onClick={load}
            className="inline-flex items-center gap-2 rounded-xl border bg-white px-3 py-2 text-sm hover:bg-black/5"
            style={{ borderColor: "rgba(15,23,42,.08)" }}
          >
            <RefreshCw className="h-4 w-4 text-slate-600" />
            {t("common.refresh")}
          </button>

          <Link
            href={`/${locale}/client/support/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("support.actions.newTicket")}
          </Link>
        </div>
      </div>

      {/* Quick cards */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
        <div
          className="rounded-2xl border bg-white p-4"
          style={{
            borderColor: "rgba(16,185,129,0.18)",
            background: "linear-gradient(180deg, rgba(16,185,129,0.08), rgba(255,255,255,1))",
          }}
        >
          <div className="flex items-start justify-between gap-3">
            <div>
              <div className="text-xs text-slate-500">{t("support.kpis.totalLabel")}</div>
              <div className="text-2xl font-semibold text-slate-900">{stats.total}</div>
              <div className="mt-1 text-xs text-slate-600">{t("support.kpis.totalHint")}</div>
            </div>
            <div
              className="h-10 w-10 rounded-2xl border flex items-center justify-center"
              style={{ borderColor: "rgba(16,185,129,0.25)", background: "rgba(16,185,129,0.10)" }}
            >
              <Ticket className="h-5 w-5 text-emerald-700" />
            </div>
          </div>
        </div>

        <div className="rounded-2xl border bg-white p-4" style={{ borderColor: "rgba(15,23,42,.08)" }}>
          <div className="flex items-start justify-between gap-3">
            <div>
              <div className="text-xs text-slate-500">{t("support.kpis.openLabel")}</div>
              <div className="text-2xl font-semibold text-slate-900">{stats.open}</div>
              <div className="mt-1 text-xs text-slate-600">{t("support.kpis.openHint")}</div>
            </div>
            <div
              className="h-10 w-10 rounded-2xl border flex items-center justify-center"
              style={{ borderColor: "rgba(16,185,129,0.25)", background: "rgba(16,185,129,0.10)" }}
            >
              <Clock className="h-5 w-5 text-emerald-700" />
            </div>
          </div>
        </div>

        <div className="rounded-2xl border bg-white p-4" style={{ borderColor: "rgba(15,23,42,.08)" }}>
          <div className="flex items-start justify-between gap-3">
            <div>
              <div className="text-xs text-slate-500">{t("support.kpis.inProgressLabel")}</div>
              <div className="text-2xl font-semibold text-slate-900">{stats.in_progress}</div>
              <div className="mt-1 text-xs text-slate-600">{t("support.kpis.inProgressHint")}</div>
            </div>
            <div
              className="h-10 w-10 rounded-2xl border flex items-center justify-center"
              style={{ borderColor: "rgba(59,130,246,0.25)", background: "rgba(59,130,246,0.10)" }}
            >
              <Shield className="h-5 w-5 text-blue-700" />
            </div>
          </div>
        </div>
      </div>

      {/* Contact + FAQ */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
        <div className="rounded-2xl border bg-white p-4 space-y-3" style={{ borderColor: "rgba(15,23,42,.08)" }}>
          <div className="flex items-center gap-2">
            <Mail className="h-4 w-4 text-emerald-700" />
            <div className="text-sm font-semibold">{t("support.contact.title")}</div>
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
            <div className="rounded-xl border p-3" style={{ borderColor: "rgba(15,23,42,.08)" }}>
              <div className="text-xs text-slate-500">{t("support.contact.emailLabel")}</div>
              <div className="text-sm font-medium">support@acx.local</div>
            </div>

            <div className="rounded-xl border p-3" style={{ borderColor: "rgba(15,23,42,.08)" }}>
              <div className="text-xs text-slate-500">{t("support.contact.phoneLabel")}</div>
              <div className="text-sm font-medium">+235 00 00 00 00</div>
            </div>
          </div>

          <div
            className="rounded-xl border p-3 flex items-start gap-3"
            style={{ borderColor: "rgba(245,158,11,0.30)", background: "rgba(245,158,11,0.10)" }}
          >
            <FileText className="h-5 w-5 text-amber-700" />
            <div className="min-w-0">
              <div className="text-sm font-semibold text-amber-900">{t("support.security.title")}</div>
              <div className="mt-1 text-sm text-amber-900/80">{t("support.security.body")}</div>
            </div>
          </div>
        </div>

        <div className="rounded-2xl border bg-white p-4 space-y-3" style={{ borderColor: "rgba(15,23,42,.08)" }}>
          <div className="text-sm font-semibold">{t("support.faq.title")}</div>
          <div className="space-y-2">
            {faqs.map((f) => (
              <FAQItem
                key={f.id}
                q={f.q}
                a={f.a}
                open={faqOpen === f.id}
                onToggle={() => setFaqOpen((prev) => (prev === f.id ? "" : f.id))}
              />
            ))}
          </div>
        </div>
      </div>

      {/* Filters + table */}
      <div className="rounded-2xl border bg-white p-4 space-y-3" style={{ borderColor: "rgba(15,23,42,.08)" }}>
        <div className="flex items-center justify-between gap-3">
          <div className="text-sm font-semibold">{t("support.myTickets")}</div>
          <Link
            href={`/${locale}/client/support/new`}
            className="inline-flex items-center gap-2 rounded-xl border bg-white px-3 py-2 text-sm hover:bg-black/5"
            style={{ borderColor: "rgba(15,23,42,.08)" }}
          >
            <Plus className="h-4 w-4 text-emerald-700" />
            {t("support.actions.newTicket")}
          </Link>
        </div>

        <div className="flex flex-col md:flex-row gap-3 md:items-center">
          <div
            className="flex-1 flex items-center gap-2 rounded-xl border bg-white px-3 py-2"
            style={{ borderColor: "rgba(15,23,42,.08)" }}
          >
            <Search className="h-4 w-4 text-slate-400" />
            <input
              value={q}
              onChange={(e) => setQ(e.target.value)}
              placeholder={t("support.filters.searchPlaceholder")}
              className="w-full outline-none text-sm"
            />
          </div>

          <select
            value={status}
            onChange={(e) => setStatus(e.target.value as any)}
            className="rounded-xl border bg-white px-3 py-2 text-sm"
            style={{ borderColor: "rgba(15,23,42,.08)" }}
          >
            <option value="">{t("support.filters.allStatuses")}</option>
            <option value="open">{t("support.status.open")}</option>
            <option value="in_progress">{t("support.status.in_progress")}</option>
            <option value="waiting_customer">{t("support.status.waiting_customer")}</option>
            <option value="resolved">{t("support.status.resolved")}</option>
            <option value="closed">{t("support.status.closed")}</option>
          </select>

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

        {err ? <div className="rounded-xl border border-red-200 bg-red-50 p-3 text-sm text-red-700">{err}</div> : null}

        {loading ? (
          <div
            className="rounded-xl border p-3 text-sm flex items-center gap-2"
            style={{ borderColor: "rgba(15,23,42,.08)" }}
          >
            <Loader2 className="h-4 w-4 animate-spin" />
            {t("common.loading")}
          </div>
        ) : (
          <div className="rounded-2xl border overflow-hidden" style={{ borderColor: "rgba(15,23,42,.08)" }}>
            <div
              className="grid grid-cols-12 gap-2 border-b px-4 py-2 text-xs font-medium text-slate-500"
              style={{ borderColor: "rgba(15,23,42,.08)" }}
            >
              <div className="col-span-2">{t("support.table.id")}</div>
              <div className="col-span-5">{t("support.table.subject")}</div>
              <div className="col-span-2">{t("support.table.status")}</div>
              <div className="col-span-2">{t("support.table.priority")}</div>
              <div className="col-span-1">{t("support.table.updated")}</div>
            </div>

            {rows.length === 0 ? (
              <div className="px-4 py-8 text-sm text-muted-foreground">{t("support.empty")}</div>
            ) : (
              rows.map((r) => {
                const st = statusTone(r.status)
                const pr = priorityTone(r.priority)
                return (
                  <Link
                    key={r.id}
                    href={`/${locale}/client/support/${r.id}`}
                    className="grid grid-cols-12 gap-2 px-4 py-3 text-sm border-b hover:bg-black/5 transition"
                    style={{ borderColor: "rgba(15,23,42,.06)" }}
                  >
                    <div className="col-span-2 font-medium">#{r.id}</div>
                    <div className="col-span-5 min-w-0">
                      <div className="font-medium truncate">{r.subject}</div>
                      {r.last_message?.body_preview ? (
                        <div className="text-xs text-muted-foreground truncate mt-0.5">
                          {r.last_message.body_preview}
                        </div>
                      ) : null}
                    </div>
                    <div className="col-span-2">
                      <Badge label={t(`support.status.${r.status}`)} tone={st} />
                    </div>
                    <div className="col-span-2">
                      <Badge label={t(`support.priority.${r.priority}`)} tone={pr} />
                    </div>
                    <div className="col-span-1 text-xs text-slate-500">{fmtDate(r.last_activity_at)}</div>
                  </Link>
                )
              })
            )}
          </div>
        )}
      </div>
    </div>
  )
}