"use client"

import Link from "next/link"
import { useEffect, useMemo, useState } from "react"
import { useLocale, useTranslations } from "next-intl"
import {
  RefreshCcw, ArrowRight, TriangleAlert, CheckCircle2,
  Clock3, Briefcase, TrendingUp, MessageSquareText,
  FileCheck2, AlertCircle, ChevronRight, Inbox,
} from "lucide-react"
import {
  ResponsiveContainer, BarChart, Bar, XAxis, YAxis,
  CartesianGrid, Tooltip, LineChart, Line, AreaChart, Area,
  PieChart, Pie, Cell,
} from "recharts"

import { getCustomerPortalMe, listCustomerCases, type CustomerPortalMe, type CaseLite } from "@/src/lib/api/customer-portal"

// ── Palette portail client ─────────────────────────────────────────────────
const C = {
  green:  "#20B26B",
  green2: "#4FD18B",
  teal:   "#0d9488",
  navy:   "#1a3578",
  amber:  "#f59e0b",
  blue:   "#0ea5e9",
  red:    "#ef4444",
  muted:  "#64748b",
  border: "rgba(15,23,42,.08)",
  bg:     "#f4f9f6",
}

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

// ── Tooltip recharts ──────────────────────────────────────────────────────
function NiceTooltip({ active, payload, label }: any) {
  if (!active || !payload?.length) return null
  return (
    <div className="rounded-xl border bg-white px-3 py-2 shadow-lg text-xs" style={{ borderColor: C.border }}>
      {label && <div className="mb-1 font-semibold text-slate-700">{label}</div>}
      {payload.map((p: any, i: number) => (
        <div key={i} className="flex items-center justify-between gap-5">
          <span className="flex items-center gap-1.5 text-slate-500">
            <span className="h-2 w-2 rounded-full" style={{ background: p.color }} />
            {p.name}
          </span>
          <span className="font-semibold text-slate-900">{typeof p.value === "number" && p.value > 10000 ? new Intl.NumberFormat("fr-FR").format(p.value) : p.value}</span>
        </div>
      ))}
    </div>
  )
}

// ── KPI Card ──────────────────────────────────────────────────────────────
function KpiCard({
  icon, label, value, sub, tone = "green", loading,
}: {
  icon: React.ReactNode
  label: string
  value: string
  sub?: string
  tone?: "green" | "amber" | "blue" | "red" | "slate"
  loading?: boolean
}) {
  const t = {
    green: { bg: "rgba(32,178,107,.10)", ring: "rgba(32,178,107,.20)", color: C.green },
    amber: { bg: "rgba(245,158,11,.12)", ring: "rgba(245,158,11,.22)", color: C.amber },
    blue:  { bg: "rgba(14,165,233,.12)", ring: "rgba(14,165,233,.22)", color: C.blue },
    red:   { bg: "rgba(239,68,68,.10)",  ring: "rgba(239,68,68,.20)",  color: C.red },
    slate: { bg: "rgba(15,23,42,.06)",   ring: "rgba(15,23,42,.12)",   color: "#334155" },
  }[tone]

  return (
    <div className="rounded-2xl border bg-white p-4 shadow-sm flex flex-col gap-3" style={{ borderColor: C.border }}>
      <div className="flex items-center justify-between">
        <div
          className="h-10 w-10 rounded-xl flex items-center justify-center"
          style={{ background: t.bg, border: `1px solid ${t.ring}`, color: t.color }}
        >
          {icon}
        </div>
        <span className="text-[11px] font-semibold uppercase tracking-widest text-slate-400">{label}</span>
      </div>
      {loading ? (
        <div className="h-6 w-16 animate-pulse rounded-lg bg-slate-100" />
      ) : (
        <div>
          <div className="text-2xl font-bold text-slate-900 leading-none">{value}</div>
          {sub && <div className="mt-1 text-xs text-slate-400">{sub}</div>}
        </div>
      )}
    </div>
  )
}

// ── Card wrapper ──────────────────────────────────────────────────────────
function Card({ title, subtitle, right, children }: {
  title: string
  subtitle?: string
  right?: React.ReactNode
  children: React.ReactNode
}) {
  return (
    <div className="rounded-2xl border bg-white shadow-sm overflow-hidden" style={{ borderColor: C.border }}>
      <div className="flex items-start justify-between gap-3 px-5 pt-4 pb-3 border-b" style={{ borderColor: C.border }}>
        <div>
          <div className="text-sm font-semibold text-slate-900">{title}</div>
          {subtitle && <div className="text-xs text-slate-400 mt-0.5">{subtitle}</div>}
        </div>
        {right}
      </div>
      <div className="p-4">{children}</div>
    </div>
  )
}

// ── Status badge ──────────────────────────────────────────────────────────
const STATUS_STYLE: Record<string, { label: string; bg: string; color: string }> = {
  open:        { label: "Ouvert",      bg: "rgba(14,165,233,.12)",   color: C.blue },
  in_progress: { label: "En cours",   bg: "rgba(32,178,107,.12)",   color: C.green },
  on_hold:     { label: "En attente", bg: "rgba(245,158,11,.12)",   color: C.amber },
  closed:      { label: "Clôturé",    bg: "rgba(15,23,42,.08)",     color: "#334155" },
}

function StatusBadge({ status }: { status: string }) {
  const s = STATUS_STYLE[status] ?? { label: status, bg: "rgba(15,23,42,.08)", color: "#334155" }
  return (
    <span className="inline-block rounded-full px-2.5 py-0.5 text-[11px] font-semibold" style={{ background: s.bg, color: s.color }}>
      {s.label}
    </span>
  )
}

// ── Priority dot ──────────────────────────────────────────────────────────
const PRIORITY_COLOR: Record<string, string> = {
  low: "#94a3b8", medium: C.blue, high: C.amber, urgent: C.red,
}

// ── Aging chart ───────────────────────────────────────────────────────────
function AgingChart({ cases }: { cases: CaseLite[] }) {
  const data = useMemo(() => {
    const buckets: Record<string, number> = { "0–29": 0, "30–59": 0, "60–89": 0, "90+": 0 }
    const now = Date.now()
    cases.forEach((c) => {
      if (c.status === "closed") return
      const due = c.due_date ? new Date(c.due_date).getTime() : null
      if (!due) return
      const days = Math.floor((now - due) / 86400000)
      if (days < 0) return
      if (days < 30) buckets["0–29"]++
      else if (days < 60) buckets["30–59"]++
      else if (days < 90) buckets["60–89"]++
      else buckets["90+"]++
    })
    return Object.entries(buckets).map(([bucket, count]) => ({ bucket, count }))
  }, [cases])

  return (
    <Card title="Aging des créances" subtitle="Dossiers en retard par tranche (jours)">
      <div className="h-[220px]">
        <ResponsiveContainer width="100%" height="100%">
          <BarChart data={data} barCategoryGap={20} margin={{ top: 8, right: 8, left: -20, bottom: 0 }}>
            <CartesianGrid strokeDasharray="3 6" vertical={false} stroke="rgba(15,23,42,.07)" />
            <XAxis dataKey="bucket" tickLine={false} axisLine={false} tick={{ fill: C.muted, fontSize: 11 }} />
            <YAxis tickLine={false} axisLine={false} tick={{ fill: C.muted, fontSize: 11 }} allowDecimals={false} />
            <Tooltip content={<NiceTooltip />} cursor={{ fill: "rgba(32,178,107,.06)" }} />
            <Bar name="Dossiers" dataKey="count" radius={[10, 10, 6, 6]} maxBarSize={52}>
              {data.map((_, i) => (
                <Cell key={i} fill={i === 3 ? C.red : i === 2 ? C.amber : C.green} />
              ))}
            </Bar>
          </BarChart>
        </ResponsiveContainer>
      </div>
    </Card>
  )
}

// ── Status donut ──────────────────────────────────────────────────────────
function StatusDonut({ cases }: { cases: CaseLite[] }) {
  const data = useMemo(() => {
    const counts: Record<string, number> = { open: 0, in_progress: 0, on_hold: 0, closed: 0 }
    cases.forEach((c) => { if (c.status in counts) counts[c.status]++ })
    return [
      { name: "Ouverts",     value: counts.open,        color: C.blue },
      { name: "En cours",    value: counts.in_progress, color: C.green },
      { name: "En attente",  value: counts.on_hold,     color: C.amber },
      { name: "Clôturés",    value: counts.closed,      color: "#1E293B" },
    ].filter((d) => d.value > 0)
  }, [cases])

  const total = data.reduce((s, d) => s + d.value, 0)

  return (
    <Card title="Répartition des dossiers" subtitle="Par statut">
      <div className="grid grid-cols-2 gap-3 items-center">
        <div className="h-[200px]">
          <ResponsiveContainer width="100%" height="100%">
            <PieChart>
              <Pie dataKey="value" nameKey="name" data={data}
                innerRadius={55} outerRadius={82} paddingAngle={3}
                cornerRadius={8} startAngle={90} endAngle={-270}>
                {data.map((d) => <Cell key={d.name} fill={d.color} />)}
              </Pie>
              <Tooltip content={<NiceTooltip />} />
            </PieChart>
          </ResponsiveContainer>
        </div>
        <div className="space-y-2.5">
          <div className="text-base font-bold text-slate-900">{total} dossiers</div>
          {data.map((d) => (
            <div key={d.name} className="flex items-center justify-between text-sm">
              <span className="flex items-center gap-2 text-slate-600">
                <span className="h-2.5 w-2.5 rounded-full" style={{ background: d.color }} />
                {d.name}
              </span>
              <span className="font-semibold text-slate-900">{d.value}</span>
            </div>
          ))}
        </div>
      </div>
    </Card>
  )
}

// ── Recovery gauge ────────────────────────────────────────────────────────
function RecoveryGauge({ cases }: { cases: CaseLite[] }) {
  const { rate, recovered, total } = useMemo(() => {
    let sumTotal = 0, sumRecovered = 0
    cases.forEach((c) => {
      const orig = Number(c.original_amount) || 0
      const bal  = Number(c.balance_amount) || 0
      if (orig > 0) {
        sumTotal += orig
        sumRecovered += (orig - bal)
      }
    })
    const r = sumTotal > 0 ? Math.round((sumRecovered / sumTotal) * 100) : 0
    return { rate: r, recovered: sumRecovered, total: sumTotal }
  }, [cases])

  const v = Math.max(0, Math.min(100, rate))
  const gaugeData = [
    { name: "done", value: v,       color: v >= 70 ? C.green : v >= 40 ? C.amber : C.red },
    { name: "rest", value: 100 - v, color: "rgba(15,23,42,.08)" },
  ]

  const fmt = (n: number) => new Intl.NumberFormat("fr-FR", { notation: "compact", maximumFractionDigits: 1 }).format(n)

  return (
    <Card title="Performance de recouvrement" subtitle="Taux basé sur vos dossiers">
      <div className="flex flex-col items-center">
        <div className="relative h-[180px] w-full max-w-[280px]">
          <ResponsiveContainer width="100%" height="100%">
            <PieChart>
              <Pie dataKey="value" data={gaugeData}
                startAngle={180} endAngle={0}
                innerRadius={65} outerRadius={90}
                paddingAngle={0} cornerRadius={10}>
                {gaugeData.map((d) => <Cell key={d.name} fill={d.color} />)}
              </Pie>
            </PieChart>
          </ResponsiveContainer>
          <div className="absolute inset-0 flex flex-col items-center justify-center pt-12">
            <div className="text-4xl font-bold text-slate-900">{v}%</div>
            <div className="text-xs text-slate-400 mt-0.5">objectif 70 %</div>
          </div>
        </div>
        {total > 0 && (
          <div className="mt-1 flex gap-6 text-center text-xs text-slate-500">
            <div>
              <div className="font-semibold text-slate-900 text-sm">{fmt(total)} XAF</div>
              <div>Portefeuille total</div>
            </div>
            <div>
              <div className="font-semibold text-green-600 text-sm">{fmt(recovered)} XAF</div>
              <div>Récupéré</div>
            </div>
          </div>
        )}
      </div>
    </Card>
  )
}

// ── Recent cases table ────────────────────────────────────────────────────
function RecentCases({ cases, locale }: { cases: CaseLite[]; locale: string }) {
  const recent = useMemo(() =>
    [...cases]
      .sort((a, b) => new Date(b.opened_at ?? 0).getTime() - new Date(a.opened_at ?? 0).getTime())
      .slice(0, 6),
    [cases]
  )

  return (
    <Card
      title="Dossiers récents"
      subtitle="Les 6 derniers dossiers de votre portefeuille"
      right={
        <Link href={`/${locale}/client/cases`}
          className="flex items-center gap-1 text-xs font-medium transition"
          style={{ color: C.green }}>
          Tous les dossiers <ChevronRight className="h-3.5 w-3.5" />
        </Link>
      }
    >
      {recent.length === 0 ? (
        <div className="flex flex-col items-center gap-2 py-8 text-slate-400">
          <Inbox className="h-8 w-8 opacity-40" />
          <p className="text-sm">Aucun dossier pour le moment</p>
        </div>
      ) : (
        <div className="overflow-x-auto -mx-4">
          <table className="w-full text-sm">
            <thead>
              <tr className="border-b" style={{ borderColor: C.border }}>
                {["Référence", "Débiteur", "Montant", "Statut", "Priorité", "Échéance"].map((h) => (
                  <th key={h} className="px-4 pb-2 text-left text-[10px] font-bold uppercase tracking-widest text-slate-400">{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {recent.map((c, i) => {
                const bal = Number(c.balance_amount) || 0
                const due = c.due_date ? new Date(c.due_date) : null
                const overdue = due && due < new Date() && c.status !== "closed"
                return (
                  <tr key={c.id}
                    className={cx("border-b transition hover:bg-slate-50", i === recent.length - 1 && "border-0")}
                    style={{ borderColor: C.border }}>
                    <td className="px-4 py-3">
                      <Link href={`/${locale}/client/cases/${c.id}`}
                        className="font-mono text-xs font-semibold transition hover:underline"
                        style={{ color: C.green }}>
                        {c.reference}
                      </Link>
                    </td>
                    <td className="px-4 py-3 max-w-[160px]">
                      <span className="truncate text-slate-700 text-xs">{c.debtor?.full_name ?? "—"}</span>
                    </td>
                    <td className="px-4 py-3 text-xs font-semibold text-slate-900 whitespace-nowrap">
                      {new Intl.NumberFormat("fr-FR").format(bal)} {c.currency ?? "XAF"}
                    </td>
                    <td className="px-4 py-3"><StatusBadge status={c.status} /></td>
                    <td className="px-4 py-3">
                      <span className="h-2.5 w-2.5 rounded-full inline-block"
                        style={{ background: PRIORITY_COLOR[c.priority] ?? C.muted }} />
                    </td>
                    <td className="px-4 py-3 text-xs whitespace-nowrap"
                      style={{ color: overdue ? C.red : C.muted }}>
                      {due ? due.toLocaleDateString("fr-FR") : "—"}
                    </td>
                  </tr>
                )
              })}
            </tbody>
          </table>
        </div>
      )}
    </Card>
  )
}

// ── Main page ─────────────────────────────────────────────────────────────
export default function ClientDashboardPage() {
  const locale = useLocale()
  const t = useTranslations("clientPortal")

  const [me,        setMe]        = useState<CustomerPortalMe | null>(null)
  const [cases,     setCases]     = useState<CaseLite[]>([])
  const [loading,   setLoading]   = useState(true)
  const [refreshing,setRefreshing]= useState(false)
  const [err,       setErr]       = useState<string | null>(null)

  async function load() {
    setErr(null)
    setRefreshing(true)
    try {
      const [meData, casesData] = await Promise.all([
        getCustomerPortalMe(),
        listCustomerCases(),
      ])
      setMe(meData)
      setCases(casesData)
    } catch (e: any) {
      setErr(e?.message || "Erreur de chargement")
    } finally {
      setLoading(false)
      setRefreshing(false)
    }
  }

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

  // KPIs calculés depuis les vraies données
  const kpi = useMemo(() => {
    const total     = cases.length
    const open      = cases.filter((c) => c.status === "open").length
    const inprog    = cases.filter((c) => c.status === "in_progress").length
    const onhold    = cases.filter((c) => c.status === "on_hold").length
    const closed    = cases.filter((c) => c.status === "closed").length
    const now       = new Date()
    const overdue   = cases.filter((c) => c.status !== "closed" && c.due_date && new Date(c.due_date) < now).length
    return { total, open, inprog, onhold, closed, overdue }
  }, [cases])

  const customerName = me?.customer?.name ?? "—"
  const firstName = me?.user?.first_name || me?.user?.username || "—"
  const hour = new Date().getHours()
  const greeting = hour < 12 ? "Bonjour" : hour < 18 ? "Bon après-midi" : "Bonsoir"

  return (
    <div className="w-full space-y-5">

      {/* ── Header ──────────────────────────────────────────────────────── */}
      <div
        className="rounded-2xl p-5 text-white relative overflow-hidden"
        style={{ background: `linear-gradient(135deg, #0f4c30 0%, ${C.green} 60%, ${C.green2} 100%)` }}
      >
        {/* Halos décoratifs */}
        <div className="pointer-events-none absolute inset-0">
          <div className="absolute -top-12 -right-12 h-48 w-48 rounded-full opacity-[0.12]"
            style={{ background: "radial-gradient(circle, #fff, transparent 70%)" }} />
          <div className="absolute -bottom-8 -left-8 h-36 w-36 rounded-full opacity-[0.08]"
            style={{ background: "radial-gradient(circle, #fff, transparent 70%)" }} />
        </div>

        <div className="relative flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
          <div>
            <p className="text-sm text-white/70">{greeting}, <span className="font-semibold text-white">{firstName}</span></p>
            <h1 className="mt-1 text-2xl font-bold leading-tight">{customerName}</h1>
            <p className="mt-1 text-sm text-white/60">Vue d&apos;ensemble de votre portefeuille de recouvrement</p>
          </div>

          <div className="flex items-center gap-2 shrink-0">
            <button
              type="button" onClick={load} disabled={refreshing}
              className="flex items-center gap-2 rounded-xl px-3 py-2 text-sm font-medium text-white/80 transition hover:bg-white/10 disabled:opacity-50"
            >
              <RefreshCcw className={cx("h-4 w-4", refreshing && "animate-spin")} />
              Actualiser
            </button>
            <Link
              href={`/${locale}/client/cases`}
              className="flex items-center gap-2 rounded-xl px-4 py-2 text-sm font-semibold text-white transition"
              style={{ background: "rgba(255,255,255,0.18)", backdropFilter: "blur(4px)" }}
            >
              Mes dossiers <ArrowRight className="h-4 w-4" />
            </Link>
          </div>
        </div>
      </div>

      {/* ── Erreur ──────────────────────────────────────────────────────── */}
      {err && (
        <div className="flex items-start gap-3 rounded-2xl border border-red-100 bg-red-50 px-4 py-3 text-sm text-red-700">
          <AlertCircle className="mt-0.5 h-4 w-4 shrink-0" /> {err}
        </div>
      )}

      {/* ── KPIs ────────────────────────────────────────────────────────── */}
      <div className="grid grid-cols-2 sm:grid-cols-3 xl:grid-cols-6 gap-3">
        <KpiCard icon={<Briefcase className="h-5 w-5" />}    label="Total"       value={`${kpi.total}`}   sub="Tous les dossiers" tone="slate"  loading={loading} />
        <KpiCard icon={<FileCheck2 className="h-5 w-5" />}   label="Ouverts"     value={`${kpi.open}`}    sub="À traiter"          tone="blue"   loading={loading} />
        <KpiCard icon={<TrendingUp className="h-5 w-5" />}   label="En cours"    value={`${kpi.inprog}`}  sub="En traitement"      tone="green"  loading={loading} />
        <KpiCard icon={<Clock3 className="h-5 w-5" />}       label="En attente"  value={`${kpi.onhold}`}  sub="Bloqués"            tone="amber"  loading={loading} />
        <KpiCard icon={<TriangleAlert className="h-5 w-5" />} label="En retard"  value={`${kpi.overdue}`} sub="Date dépassée"      tone="red"    loading={loading} />
        <KpiCard icon={<CheckCircle2 className="h-5 w-5" />} label="Clôturés"    value={`${kpi.closed}`}  sub="Terminés"           tone="green"  loading={loading} />
      </div>

      {/* ── Raccourcis rapides ────────────────────────────────────────────── */}
      <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
        {[
          { href: `/${locale}/client/cases`,    icon: Briefcase,        label: "Mes dossiers",  color: C.green },
          { href: `/${locale}/client/messages`, icon: MessageSquareText, label: "Messages",      color: C.teal },
          { href: `/${locale}/client/cases`,    icon: TriangleAlert,    label: "En retard",     color: C.amber,
            badge: kpi.overdue > 0 ? String(kpi.overdue) : undefined },
          { href: `/${locale}/client/support`,  icon: FileCheck2,       label: "Support",       color: C.blue },
        ].map(({ href, icon: Icon, label, color, badge }) => (
          <Link key={label} href={href}
            className="flex items-center gap-3 rounded-2xl border bg-white p-3.5 text-sm font-medium text-slate-700 shadow-sm transition hover:shadow-md hover:bg-slate-50"
            style={{ borderColor: C.border }}>
            <div className="h-9 w-9 rounded-xl flex items-center justify-center shrink-0"
              style={{ background: `${color}18`, color }}>
              <Icon className="h-4 w-4" />
            </div>
            <span className="flex-1 truncate">{label}</span>
            {badge && (
              <span className="rounded-full px-2 py-0.5 text-[11px] font-bold text-white"
                style={{ background: C.red }}>{badge}</span>
            )}
            <ChevronRight className="h-4 w-4 text-slate-300 shrink-0" />
          </Link>
        ))}
      </div>

      {/* ── Charts row 1 ─────────────────────────────────────────────────── */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
        <AgingChart cases={cases} />
        <StatusDonut cases={cases} />
      </div>

      {/* ── Charts + recent row ───────────────────────────────────────────── */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
        <div className="lg:col-span-1">
          <RecoveryGauge cases={cases} />
        </div>
        <div className="lg:col-span-2">
          <RecentCases cases={cases} locale={locale} />
        </div>
      </div>

    </div>
  )
}