"use client"

import { useEffect, useState } from "react"
import { useTranslations } from "next-intl"
import { RefreshCw, Building2, FolderKanban, Wallet, BadgePercent, AlertTriangle } from "lucide-react"
import {
  ResponsiveContainer,
  PieChart, Pie, Cell,
  AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip,
  BarChart, Bar,
  Legend,
} from "recharts"
import { api } from "@/src/lib/api/client"

const NAVY = "#1a3578"
const TEAL = "#4dba96"

const STATUS_COLORS: Record<string, string> = {
  new:        "#94a3b8",
  in_review:  "#60a5fa",
  preventive: "#38bdf8",
  amicable:   TEAL,
  pre_legal:  "#facc15",
  legal:      "#f97316",
  disputed:   "#f87171",
  settled:    "#34d399",
  closed:     NAVY,
  write_off:  "#475569",
}

type PlatformStats = {
  tenants: { total: number; active: number; suspended: number }
  cases: {
    total: number; overdue: number
    total_amount: number; total_paid: number; recovery_rate: number
    by_status: { status: string; count: number }[]
  }
  payments: {
    by_method: { method: string; count: number; amount: number }[]
    monthly_trend: { month: string; amount: number; count: number }[]
  }
  actions: { by_type: { type: string; count: number }[] }
  top_tenants: { name: string; count: number; total_paid: number }[]
}

function fmt(n: number) {
  return new Intl.NumberFormat("fr-FR", { maximumFractionDigits: 0 }).format(n)
}

function KpiCard({ icon: Icon, label, value, sub, color }: {
  icon: React.ElementType; label: string; value: string; sub?: string; color?: string
}) {
  return (
    <div className="rounded-2xl border bg-card p-5 flex items-start gap-4">
      <div className="h-10 w-10 rounded-xl flex items-center justify-center shrink-0" style={{ background: `${color || NAVY}18` }}>
        <Icon className="h-5 w-5" style={{ color: color || NAVY }} />
      </div>
      <div className="min-w-0">
        <p className="text-xs text-muted-foreground leading-tight">{label}</p>
        <p className="text-2xl font-bold tracking-tight mt-0.5">{value}</p>
        {sub && <p className="text-xs text-muted-foreground mt-0.5">{sub}</p>}
      </div>
    </div>
  )
}

function ChartCard({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <div className="rounded-2xl border bg-card p-5">
      <p className="text-sm font-semibold mb-4">{title}</p>
      {children}
    </div>
  )
}

export default function AdminReportingPage() {
  const t = useTranslations("admin.reporting")
  const tr = useTranslations("reports")
  const [stats, setStats] = useState<PlatformStats | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

  async function load(silent = false) {
    if (!silent) setLoading(true)
    setError(null)
    try {
      setStats(await api.request<PlatformStats>("platform-stats/"))
    } catch (e: any) {
      setError(e?.message ?? "Erreur")
    } finally {
      setLoading(false)
    }
  }

  useEffect(() => { load() }, [])

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-xl font-semibold">{t("title")}</h1>
          <p className="text-sm text-muted-foreground">{t("subtitle")}</p>
        </div>
        <button onClick={() => load(true)} disabled={loading} className="rounded-lg p-2 text-muted-foreground hover:bg-muted transition-colors">
          <RefreshCw className={`h-4 w-4 ${loading ? "animate-spin" : ""}`} />
        </button>
      </div>

      {error && (
        <div className="rounded-xl border border-destructive/30 bg-destructive/10 px-4 py-2 text-sm text-destructive">
          {error}
        </div>
      )}

      {loading && !stats ? (
        <p className="text-sm text-muted-foreground py-10 text-center">{tr("loading")}</p>
      ) : stats ? (
        <>
          {/* KPI Cards */}
          <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
            <KpiCard icon={Building2} label={t("kpi_tenants")} value={String(stats.tenants.total)}
              sub={`${stats.tenants.active} ${t("kpi_active")} · ${stats.tenants.suspended} ${t("kpi_suspended")}`} color={NAVY} />
            <KpiCard icon={FolderKanban} label={tr("kpi_total_cases")} value={fmt(stats.cases.total)}
              sub={`${stats.cases.overdue} ${tr("kpi_overdue")}`} color="#6366f1" />
            <KpiCard icon={Wallet} label={tr("kpi_recovered")} value={fmt(stats.cases.total_paid)} color={TEAL} />
            <KpiCard icon={BadgePercent} label={tr("kpi_recovery_rate")} value={`${stats.cases.recovery_rate} %`}
              color={stats.cases.recovery_rate >= 50 ? TEAL : "#f97316"} />
          </div>

          {/* Charts row 1 */}
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
            <ChartCard title={tr("chart_by_status")}>
              {stats.cases.by_status.length === 0 ? (
                <p className="text-sm text-muted-foreground text-center py-8">{tr("no_data")}</p>
              ) : (
                <ResponsiveContainer width="100%" height={240}>
                  <PieChart>
                    <Pie
                      data={stats.cases.by_status.map((s) => ({ name: tr(`status_${s.status}` as any), value: s.count, key: s.status }))}
                      dataKey="value" nameKey="name" cx="50%" cy="50%"
                      innerRadius={55} outerRadius={90} paddingAngle={2}
                    >
                      {stats.cases.by_status.map((s) => (
                        <Cell key={s.status} fill={STATUS_COLORS[s.status] ?? "#94a3b8"} />
                      ))}
                    </Pie>
                    <Tooltip formatter={(v: number | undefined) => [v ?? 0, tr("kpi_total_cases")]} />
                    <Legend iconSize={10} iconType="circle" />
                  </PieChart>
                </ResponsiveContainer>
              )}
            </ChartCard>

            <ChartCard title={tr("chart_monthly")}>
              {stats.payments.monthly_trend.length === 0 ? (
                <p className="text-sm text-muted-foreground text-center py-8">{tr("no_data")}</p>
              ) : (
                <ResponsiveContainer width="100%" height={240}>
                  <AreaChart data={stats.payments.monthly_trend} margin={{ top: 4, right: 8, left: 0, bottom: 0 }}>
                    <defs>
                      <linearGradient id="areaGrad2" x1="0" y1="0" x2="0" y2="1">
                        <stop offset="5%" stopColor={TEAL} stopOpacity={0.25} />
                        <stop offset="95%" stopColor={TEAL} stopOpacity={0} />
                      </linearGradient>
                    </defs>
                    <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
                    <XAxis dataKey="month" tick={{ fontSize: 11 }} />
                    <YAxis tick={{ fontSize: 11 }} width={56} tickFormatter={(v) => fmt(v)} />
                    <Tooltip formatter={(v: number | undefined) => [fmt(v ?? 0), tr("amount_label")]} />
                    <Area type="monotone" dataKey="amount" stroke={TEAL} strokeWidth={2} fill="url(#areaGrad2)" />
                  </AreaChart>
                </ResponsiveContainer>
              )}
            </ChartCard>
          </div>

          {/* Charts row 2 */}
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
            <ChartCard title={tr("chart_actions")}>
              {stats.actions.by_type.length === 0 ? (
                <p className="text-sm text-muted-foreground text-center py-8">{tr("no_data")}</p>
              ) : (
                <ResponsiveContainer width="100%" height={220}>
                  <BarChart
                    data={stats.actions.by_type.map((a) => ({ name: tr(`action_${a.type}` as any), count: a.count }))}
                    layout="vertical" margin={{ top: 0, right: 16, left: 8, bottom: 0 }}
                  >
                    <CartesianGrid strokeDasharray="3 3" horizontal={false} stroke="#e5e7eb" />
                    <XAxis type="number" tick={{ fontSize: 11 }} />
                    <YAxis type="category" dataKey="name" tick={{ fontSize: 11 }} width={90} />
                    <Tooltip />
                    <Bar dataKey="count" fill={NAVY} radius={[0, 4, 4, 0]} />
                  </BarChart>
                </ResponsiveContainer>
              )}
            </ChartCard>

            {/* Top tenants */}
            <ChartCard title={t("top_tenants")}>
              {stats.top_tenants.length === 0 ? (
                <p className="text-sm text-muted-foreground text-center py-8">{tr("no_data")}</p>
              ) : (
                <div className="space-y-2">
                  {stats.top_tenants.map((tn, i) => (
                    <div key={tn.name} className="flex items-center gap-3">
                      <span className="text-xs text-muted-foreground w-5 shrink-0">{i + 1}</span>
                      <div className="flex-1 min-w-0">
                        <div className="flex justify-between items-center mb-0.5">
                          <span className="text-sm font-medium truncate">{tn.name}</span>
                          <span className="text-xs text-muted-foreground shrink-0 ml-2">{tn.count} {tr("kpi_total_cases").toLowerCase()}</span>
                        </div>
                        <div className="h-1.5 rounded-full bg-muted overflow-hidden">
                          <div
                            className="h-full rounded-full transition-all"
                            style={{
                              width: `${Math.min(100, (tn.count / (stats.top_tenants[0]?.count || 1)) * 100)}%`,
                              background: TEAL,
                            }}
                          />
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </ChartCard>
          </div>
        </>
      ) : null}
    </div>
  )
}