import type { Metadata } from "next";
import { DollarSign, TrendingUp, Users, CreditCard, UserPlus, Mic2, Wallet, CheckCircle2 } from "lucide-react";
import { getOverview } from "@/lib/admin/metrics";
import { getSignupSeries, getRevenueSeries } from "@/lib/admin/series";
import { parseRange } from "@/lib/admin/range";
import { PLANS, PLAN_ORDER } from "@/lib/billing/plans";
import { formatPrice } from "@/lib/utils";
import { PageHeader } from "@/components/app/page-header";
import { StatCard } from "@/components/admin/ui/stat-card";
import { ChartCard } from "@/components/admin/ui/chart-card";
import { BarSeries, Donut } from "@/components/admin/ui/charts";
import { RangePicker } from "@/components/admin/ui/table-controls";
import { CHART, TIER_COLORS } from "@/components/admin/ui/chart-theme";
import { requireAdmin } from "@/lib/auth/guards";

export const metadata: Metadata = { title: "Admin · Overview" };

export default async function AdminOverviewPage({
  searchParams,
}: {
  searchParams: Promise<{ range?: string }>;
}) {
  // Defence in depth: the (admin) layout also guards, but a layout is not an
  // authorization boundary — pages render concurrently with it, and a route moved
  // out of the group would silently lose its only check.
  await requireAdmin();

  const range = parseRange((await searchParams).range);
  const [m, signups, revenue] = await Promise.all([
    getOverview(range),
    getSignupSeries(range),
    getRevenueSeries(range),
  ]);

  const tierData = PLAN_ORDER.map((k) => ({
    name: PLANS[k].name,
    value: m.tierCounts[k] ?? 0,
    color: TIER_COLORS[k],
  })).filter((d) => d.value > 0);
  const usd = (n: number) => `$${n.toFixed(2)}`;

  return (
    <>
      <PageHeader
        title="Overview"
        description="Revenue, growth, and platform health at a glance."
        action={<RangePicker value={range} />}
      />

      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <StatCard label="MRR" value={formatPrice(m.mrr)} icon={DollarSign} hint={`${m.activeSubs} active subs`} />
        <StatCard label="ARR" value={formatPrice(m.arr)} icon={TrendingUp} />
        <StatCard label="Paying customers" value={String(m.paying)} icon={CreditCard} hint={`ARPU ${formatPrice(m.arpu)}`} />
        <StatCard label="Total users" value={String(m.totalUsers)} icon={Users} />
        <StatCard label="Signups" value={String(m.signups)} delta={m.signupsDelta} icon={UserPlus} />
        <StatCard label="Episodes" value={String(m.episodes)} delta={m.episodesDelta} icon={Mic2} />
        <StatCard label="AI spend" value={usd(m.aiSpend)} delta={m.aiSpendDelta} invertDelta icon={Wallet} />
        <StatCard label="Success rate" value={`${m.successRate}%`} icon={CheckCircle2} hint={`${m.failedEpisodes} failed · ${m.churned} churned`} />
      </div>

      <div className="mt-6 grid gap-6 lg:grid-cols-3">
        <ChartCard className="lg:col-span-2" title="Revenue movement" description="New vs churned MRR over the period.">
          <BarSeries
            data={revenue}
            xKey="date"
            stacked={false}
            format={(v) => `$${v}`}
            series={[
              { key: "newMrr", name: "New MRR", color: CHART.brand },
              { key: "churnedMrr", name: "Churned", color: CHART.warning },
            ]}
          />
        </ChartCard>
        <ChartCard title="Plan distribution" description="Active subscriptions by tier.">
          {tierData.length > 0 ? (
            <Donut data={tierData} colors={tierData.map((d) => d.color)} />
          ) : (
            <p className="py-16 text-center text-sm text-muted-foreground">No active subscriptions yet.</p>
          )}
        </ChartCard>
      </div>

      <div className="mt-6">
        <ChartCard title="New signups" description="Account creations per day.">
          <BarSeries
            data={signups}
            xKey="date"
            height={240}
            series={[{ key: "signups", name: "Signups", color: CHART.brand }]}
          />
        </ChartCard>
      </div>
    </>
  );
}