podcastdistributiona/app/(admin)/admin/ai-usage/page.tsx

import type { Metadata } from "next";
import { Wallet, Sparkles, AudioLines } from "lucide-react";
import { getCostBreakdown } from "@/lib/admin/cost";
import { getAiCostSeries } from "@/lib/admin/series";
import { parseRange } from "@/lib/admin/range";
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 } from "@/components/admin/ui/charts";
import { RangePicker } from "@/components/admin/ui/table-controls";
import { DataTable, type Column } from "@/components/admin/ui/data-table";
import { CHART } from "@/components/admin/ui/chart-theme";
import { requireAdmin } from "@/lib/auth/guards";

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

type Outlier = { userId: string; email: string; cost: number };

export default async function AdminAiUsagePage({
  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 [breakdown, series] = await Promise.all([getCostBreakdown(range), getAiCostSeries(range)]);
  const usd = (n: number) => `$${n.toFixed(2)}`;

  const outlierColumns: Column<Outlier>[] = [
    { key: "email", header: "User", cell: (o) => <span className="font-medium">{o.email}</span> },
    { key: "cost", header: "Spend", align: "right", cell: (o) => <span className="font-semibold">{usd(o.cost)}</span> },
  ];

  return (
    <>
      <PageHeader
        title="AI usage & cost"
        description="Spend across OpenAI and ElevenLabs."
        action={<RangePicker value={range} />}
      />

      <div className="grid gap-4 sm:grid-cols-3">
        <StatCard label="OpenAI" value={usd(breakdown.byProvider.openai)} icon={Sparkles} />
        <StatCard label="ElevenLabs" value={usd(breakdown.byProvider.elevenlabs)} icon={AudioLines} />
        <StatCard label="Total spend" value={usd(breakdown.total)} icon={Wallet} />
      </div>

      <div className="mt-6">
        <ChartCard title="Daily AI spend" description="Stacked by provider.">
          <BarSeries
            data={series}
            xKey="date"
            format={(v) => `$${v}`}
            series={[
              { key: "openai", name: "OpenAI", color: CHART.brand },
              { key: "elevenlabs", name: "ElevenLabs", color: CHART.success },
            ]}
          />
        </ChartCard>
      </div>

      <div className="mt-6 grid gap-6 lg:grid-cols-2">
        <ChartCard title="By operation" description="Where the spend goes.">
          <div className="grid grid-cols-2 gap-3 py-2">
            {(["script", "audio", "art", "repurpose"] as const).map((op) => (
              <div key={op} className="rounded-xl border border-border p-3">
                <p className="text-xs capitalize text-muted-foreground">{op}</p>
                <p className="mt-1 font-display text-lg font-bold">{usd(breakdown.byOperation[op] ?? 0)}</p>
              </div>
            ))}
          </div>
        </ChartCard>
        <ChartCard title="Top spenders" description="Highest AI cost per user this period.">
          <DataTable
            columns={outlierColumns}
            rows={breakdown.outliers}
            getRowKey={(o) => o.userId}
            empty="No usage in this period."
          />
        </ChartCard>
      </div>
    </>
  );
}