import { createFileRoute, Link } from "@tanstack/react-router";
import { useEffect, useState } from "react";
import { useServerFn } from "@tanstack/react-start";
import { ArrowLeft, BarChart3, Loader2 } from "lucide-react";
import { getAdminAnalytics, type AdminAnalyticsSummary } from "@/lib/admin-analytics.functions";
import { toast } from "sonner";

export const Route = createFileRoute("/_authenticated/admin/analytics")({
  head: () => ({ meta: [{ title: "Admin · Analytics" }] }),
  component: AdminAnalyticsPage,
});

function AdminAnalyticsPage() {
  const fn = useServerFn(getAdminAnalytics);
  const [data, setData] = useState<AdminAnalyticsSummary | null>(null);
  const [err, setErr] = useState<string | null>(null);

  useEffect(() => {
    fn().then(setData).catch((e) => {
      const msg = e instanceof Error ? e.message : "Failed to load";
      setErr(msg); toast.error(msg);
    });
  }, [fn]);

  if (err) {
    return (
      <div className="min-h-screen grid place-content-center px-6 text-center">
        <p className="text-sm text-muted-foreground">{err}</p>
        <Link to="/" className="mt-4 text-sm underline">Home</Link>
      </div>
    );
  }
  if (!data) {
    return <div className="min-h-screen grid place-content-center"><Loader2 className="h-6 w-6 animate-spin text-muted-foreground" /></div>;
  }

  const activationPct = Math.round(data.activationRate * 1000) / 10;

  return (
    <div className="min-h-screen bg-background">
      <header className="border-b border-border sticky top-0 z-30 bg-background/80 backdrop-blur">
        <div className="mx-auto max-w-7xl px-6 h-16 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <BarChart3 className="h-5 w-5 text-gold" />
            <span className="font-display text-lg font-semibold">Admin · Analytics</span>
          </div>
          <div className="flex items-center gap-4 text-sm text-muted-foreground">
            <Link to="/admin/prompts" className="hover:text-foreground">Prompts</Link>
            <Link to="/" className="hover:text-foreground inline-flex items-center gap-1.5">
              <ArrowLeft className="h-4 w-4" /> Home
            </Link>
          </div>
        </div>
      </header>

      <main className="mx-auto max-w-7xl px-6 py-10 space-y-10">
        <section>
          <h2 className="font-display text-2xl mb-4">Last 30 days</h2>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
            <Stat label="Signups" value={data.totals.signups} />
            <Stat label="Logins" value={data.totals.logins} />
            <Stat label="Plans generated" value={data.totals.plansGenerated} />
            <Stat label="Plans saved" value={data.totals.plansSaved} />
            <Stat label="PDFs exported" value={data.totals.pdfExports} />
            <Stat label="Upgrade clicks" value={data.totals.upgradeClicks} />
            <Stat label="Checkouts" value={data.totals.checkouts} />
            <Stat label="Activation rate" value={`${activationPct}%`} hint="signups → plan saved" />
          </div>
        </section>

        <section>
          <h2 className="font-display text-2xl mb-4">AI workflows</h2>
          <div className="rounded-2xl border border-border overflow-hidden">
            <table className="w-full text-sm">
              <thead className="bg-muted/50 text-xs uppercase tracking-[0.2em] text-muted-foreground">
                <tr>
                  <th className="text-left px-4 py-3">Kind</th>
                  <th className="text-right px-4 py-3">Total</th>
                  <th className="text-right px-4 py-3">OK</th>
                  <th className="text-right px-4 py-3">Errors</th>
                  <th className="text-right px-4 py-3">Rate limited</th>
                  <th className="text-right px-4 py-3">Validation fail</th>
                  <th className="text-right px-4 py-3">Avg latency</th>
                  <th className="text-right px-4 py-3">Tokens</th>
                </tr>
              </thead>
              <tbody>
                {data.ai.length === 0 ? (
                  <tr><td colSpan={8} className="text-center py-8 text-muted-foreground">No AI activity yet.</td></tr>
                ) : data.ai.map((r) => (
                  <tr key={r.kind} className="border-t border-border">
                    <td className="px-4 py-3 font-medium">{r.kind}</td>
                    <td className="px-4 py-3 text-right">{r.total}</td>
                    <td className="px-4 py-3 text-right text-emerald-600">{r.ok}</td>
                    <td className="px-4 py-3 text-right text-destructive">{r.errors}</td>
                    <td className="px-4 py-3 text-right">{r.rate_limited}</td>
                    <td className="px-4 py-3 text-right">{r.validation_failed}</td>
                    <td className="px-4 py-3 text-right">{r.avg_latency_ms !== null ? `${r.avg_latency_ms} ms` : "—"}</td>
                    <td className="px-4 py-3 text-right">{r.total_tokens?.toLocaleString() ?? "—"}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </section>

        <section>
          <h2 className="font-display text-2xl mb-4">Events by day</h2>
          <div className="rounded-2xl border border-border overflow-hidden max-h-[60vh] overflow-y-auto">
            <table className="w-full text-sm">
              <thead className="bg-muted/50 text-xs uppercase tracking-[0.2em] text-muted-foreground sticky top-0">
                <tr>
                  <th className="text-left px-4 py-3">Day</th>
                  <th className="text-left px-4 py-3">Event</th>
                  <th className="text-right px-4 py-3">Count</th>
                </tr>
              </thead>
              <tbody>
                {data.events.length === 0 ? (
                  <tr><td colSpan={3} className="text-center py-8 text-muted-foreground">No events yet.</td></tr>
                ) : data.events.map((r) => (
                  <tr key={`${r.day}-${r.event}`} className="border-t border-border">
                    <td className="px-4 py-3 font-mono text-xs">{r.day}</td>
                    <td className="px-4 py-3">{r.event}</td>
                    <td className="px-4 py-3 text-right">{r.count}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </section>
      </main>
    </div>
  );
}

function Stat({ label, value, hint }: { label: string; value: number | string; hint?: string }) {
  return (
    <div className="rounded-2xl border border-border bg-card p-5">
      <p className="text-[10px] uppercase tracking-[0.25em] text-muted-foreground">{label}</p>
      <p className="font-display text-3xl mt-1">{value}</p>
      {hint && <p className="text-xs text-muted-foreground mt-1">{hint}</p>}
    </div>
  );
}