"use client";
import { useEffect, useState } from "react";
import Link from "next/link";
import {
  AreaChart, Area, XAxis, YAxis, Tooltip, ResponsiveContainer, CartesianGrid,
  PieChart, Pie, Cell,
} from "recharts";
import {
  Building2, IndianRupee, TrendingUp, Users, QrCode, ScanLine, ArrowRight,
} from "lucide-react";
import { api } from "@/lib/api";
import { inr } from "@/lib/utils";

const DONUT = ["#2563eb", "#10b981", "#f59e0b", "#8b5cf6", "#94a3b8"];

export default function AdminDashboard() {
  const [d, setD] = useState<any>(null);
  const [rev, setRev] = useState<any>(null);

  useEffect(() => {
    api("/admin/dashboard").then(setD).catch(() => {});
    api("/admin/revenue").then(setRev).catch(() => {});
  }, []);

  const trend = (d?.revenue_trend ?? []).map((t: any) => ({ label: t.month.slice(2), revenue: t.revenue }));

  return (
    <div className="space-y-5">
      <div>
        <h2 className="text-xl font-bold">Platform Overview</h2>
        <p className="text-sm text-slate-500">VerifyPack — all organizations at a glance.</p>
      </div>

      {/* KPI row 1 */}
      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
        <Kpi label="Total Organizations" value={d?.total_orgs ?? 0} sub={`${d?.active ?? 0} active`} icon={<Building2 className="h-5 w-5" />} tint="bg-blue-50 text-blue-600" />
        <Kpi label="MRR" value={inr(d?.mrr ?? 0)} sub={`ARR ${inr(d?.arr ?? 0)}`} icon={<IndianRupee className="h-5 w-5" />} tint="bg-emerald-50 text-emerald-600" />
        <Kpi label="Paying Orgs" value={d?.paying_orgs ?? 0} sub={`ARPO ${inr(d?.arpo ?? 0)}`} icon={<Users className="h-5 w-5" />} tint="bg-violet-50 text-violet-600" />
        <Kpi label="Total Revenue" value={inr(d?.total_revenue ?? 0)} sub="all time" icon={<TrendingUp className="h-5 w-5" />} tint="bg-amber-50 text-amber-500" />
      </div>

      {/* KPI row 2 — lifecycle + platform totals */}
      <div className="grid grid-cols-2 lg:grid-cols-5 gap-4">
        <Mini label="Active" value={d?.active ?? 0} color="text-emerald-600" />
        <Mini label="Grace" value={d?.grace ?? 0} color="text-amber-600" />
        <Mini label="Archived" value={d?.archived ?? 0} color="text-slate-500" />
        <Mini label="Total QRs" value={d?.total_qr ?? 0} color="text-blue-600" icon={<QrCode className="h-4 w-4" />} />
        <Mini label="Total Scans" value={d?.total_scans ?? 0} color="text-violet-600" icon={<ScanLine className="h-4 w-4" />} />
      </div>

      <div className="grid lg:grid-cols-3 gap-4">
        <div className="card p-5 lg:col-span-2">
          <h3 className="font-bold mb-2">Revenue Trend</h3>
          <ResponsiveContainer width="100%" height={230}>
            <AreaChart data={trend} margin={{ top: 10, right: 10, left: -10, bottom: 0 }}>
              <defs><linearGradient id="rev" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stopColor="#10b981" stopOpacity={0.35} /><stop offset="100%" stopColor="#10b981" stopOpacity={0} />
              </linearGradient></defs>
              <CartesianGrid strokeDasharray="3 3" stroke="#eef2f7" vertical={false} />
              <XAxis dataKey="label" tickLine={false} axisLine={false} tick={{ fontSize: 12, fill: "#94a3b8" }} />
              <YAxis tickLine={false} axisLine={false} tick={{ fontSize: 12, fill: "#94a3b8" }} />
              <Tooltip formatter={(v: any) => inr(v)} />
              <Area type="monotone" dataKey="revenue" stroke="#10b981" strokeWidth={2.5} fill="url(#rev)" />
            </AreaChart>
          </ResponsiveContainer>
        </div>
        <div className="card p-5">
          <h3 className="font-bold mb-2">Revenue by Plan</h3>
          <ResponsiveContainer width="100%" height={200}>
            <PieChart>
              <Pie data={rev?.plan_breakdown ?? []} dataKey="revenue" nameKey="plan" innerRadius={50} outerRadius={80} paddingAngle={2}>
                {(rev?.plan_breakdown ?? []).map((_: any, i: number) => <Cell key={i} fill={DONUT[i % DONUT.length]} />)}
              </Pie>
              <Tooltip formatter={(v: any) => inr(v)} />
            </PieChart>
          </ResponsiveContainer>
          <div className="flex flex-wrap gap-2 justify-center mt-2 text-xs">
            {(rev?.plan_breakdown ?? []).map((p: any, i: number) => (
              <span key={p.plan} className="flex items-center gap-1"><span className="h-2 w-2 rounded-full" style={{ background: DONUT[i % DONUT.length] }} />{p.plan}</span>
            ))}
          </div>
        </div>
      </div>

      <div className="grid sm:grid-cols-3 gap-4">
        <Quick href="/admin/organizations" label="View Organizations" />
        <Quick href="/admin/revenue" label="Revenue & Finance" />
        <Quick href="/admin/retention" label="Retention & Lifecycle" />
      </div>
    </div>
  );
}

function Kpi({ label, value, sub, icon, tint }: any) {
  return (
    <div className="card p-5">
      <div className="flex items-start gap-4">
        <div className={`h-12 w-12 rounded-xl grid place-items-center shrink-0 ${tint}`}>{icon}</div>
        <div className="min-w-0">
          <div className="text-sm text-slate-500">{label}</div>
          <div className="text-2xl font-extrabold text-slate-900 mt-0.5">{value}</div>
          <div className="text-xs text-slate-400 mt-1">{sub}</div>
        </div>
      </div>
    </div>
  );
}
function Mini({ label, value, color, icon }: any) {
  return (
    <div className="card p-4">
      <div className={`text-xl font-extrabold flex items-center gap-1 ${color}`}>{icon}{value.toLocaleString?.() ?? value}</div>
      <div className="text-xs text-slate-500">{label}</div>
    </div>
  );
}
function Quick({ href, label }: any) {
  return (
    <Link href={href} className="card p-4 flex items-center justify-between hover:shadow-sm transition">
      <span className="font-medium text-slate-700">{label}</span>
      <ArrowRight className="h-4 w-4 text-brand-600" />
    </Link>
  );
}