import Link from "next/link";
import { Download } from "lucide-react";
import { requireAdmin } from "@/lib/session";
import { getEconomics, parseRange, rangeLabel } from "@/lib/queries/admin";
import { formatBytes, formatNumber, formatPercent, formatUsd } from "@/lib/format";
import { PageHeader } from "@/components/ui/page-header";
import { Button } from "@/components/ui/button";
import { Table, TableBody, TableCell, TableEmpty, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { MarginText, NetworkBadge, Panel, PlanBadge, ProviderBadge, RangeTabs, numCell } from "@/components/admin/primitives";
import { EconomicsChart } from "@/components/admin/charts";
import type { EconRow } from "@/lib/queries/admin";

export const dynamic = "force-dynamic";

function EconTable({ rows, labelHead, renderLabel }: { rows: EconRow[]; labelHead: string; renderLabel: (r: EconRow) => React.ReactNode }) {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>{labelHead}</TableHead>
          <TableHead className="text-right">Requests</TableHead>
          <TableHead className="text-right">Success</TableHead>
          <TableHead className="text-right">Revenue</TableHead>
          <TableHead className="text-right">Upstream</TableHead>
          <TableHead className="text-right">Margin</TableHead>
          <TableHead className="text-right">GB</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {rows.length === 0 ? (
          <TableEmpty colSpan={7}>No data in this range.</TableEmpty>
        ) : (
          rows.map((r) => (
            <TableRow key={r.key}>
              <TableCell>{renderLabel(r)}</TableCell>
              <TableCell className={numCell}>{formatNumber(r.requests)}</TableCell>
              <TableCell className={numCell}>{formatPercent(r.requests ? (r.successes / r.requests) * 100 : null)}</TableCell>
              <TableCell className={numCell}>{formatUsd(r.revenue, true)}</TableCell>
              <TableCell className={numCell}>{formatUsd(r.cost, true)}</TableCell>
              <TableCell className="text-right">
                <MarginText value={r.margin} pct={r.marginPct} />
              </TableCell>
              <TableCell className={numCell}>{formatBytes(r.bytes)}</TableCell>
            </TableRow>
          ))
        )}
      </TableBody>
    </Table>
  );
}

export default async function AdminUsagePage({ searchParams }: { searchParams: Promise<Record<string, string | string[] | undefined>> }) {
  await requireAdmin();
  const sp = await searchParams;
  const range = parseRange(sp.range);
  const e = await getEconomics(range);
  const totals = e.byBucket.reduce((acc, r) => ({ revenue: acc.revenue + r.revenue, cost: acc.cost + r.cost, requests: acc.requests + r.requests }), { revenue: 0, cost: 0, requests: 0 });

  return (
    <>
      <PageHeader
        eyebrow="Unit economics"
        title="Usage"
        description={`${rangeLabel(range)} · revenue is what customers are billed (price_usd); upstream cost is what providers charge us (cost_usd).`}
        actions={
          <>
            <RangeTabs current={range} basePath="/admin/usage" />
            <Button asChild variant="outline" size="sm">
              <Link href={`/admin/usage/export?range=${range}`} prefetch={false}>
                <Download className="size-3.5" /> Export CSV
              </Link>
            </Button>
          </>
        }
      />

      <Panel title={`Revenue vs upstream cost by ${e.unit}`} description={`Total: ${formatUsd(totals.revenue)} revenue · ${formatUsd(totals.cost)} cost · ${formatNumber(totals.requests)} requests`} bodyClassName="p-2 pt-3">
        <EconomicsChart data={e.byBucket} unit={e.unit as "hour" | "day"} />
      </Panel>

      <Panel title={`By ${e.unit}`} flush className="mt-6">
        <EconTable rows={e.byBucket} labelHead={e.unit === "hour" ? "Hour" : "Day"} renderLabel={(r) => <span className="font-mono text-[12.5px]">{e.unit === "hour" ? new Date(r.key).toLocaleString(undefined, { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" }) : new Date(r.key).toLocaleDateString(undefined, { month: "short", day: "numeric" })}</span>} />
      </Panel>

      <div className="mt-6 grid gap-6 xl:grid-cols-2">
        <Panel title="By plan" flush>
          <EconTable rows={e.byPlan} labelHead="Plan" renderLabel={(r) => <PlanBadge plan={r.key} />} />
        </Panel>
        <Panel title="By network" flush>
          <EconTable rows={e.byNetwork} labelHead="Network" renderLabel={(r) => <NetworkBadge network={r.key} />} />
        </Panel>
      </div>

      <Panel title="By provider" description="Attempt-level. Attributed revenue = price of requests whose successful attempt ran on this provider." flush className="mt-6">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Provider</TableHead>
              <TableHead className="text-right">Attempts</TableHead>
              <TableHead className="text-right">Successes</TableHead>
              <TableHead className="text-right">Success</TableHead>
              <TableHead className="text-right">Upstream cost</TableHead>
              <TableHead className="text-right">Attributed revenue</TableHead>
              <TableHead className="text-right">Margin</TableHead>
              <TableHead className="text-right">Cost / success</TableHead>
              <TableHead className="text-right">GB</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {e.byProvider.length === 0 ? (
              <TableEmpty colSpan={9}>No attempts in this range.</TableEmpty>
            ) : (
              e.byProvider.map((p) => (
                <TableRow key={p.provider}>
                  <TableCell>
                    <ProviderBadge id={p.provider} />
                  </TableCell>
                  <TableCell className={numCell}>{formatNumber(p.attempts)}</TableCell>
                  <TableCell className={numCell}>{formatNumber(p.successes)}</TableCell>
                  <TableCell className={numCell}>{formatPercent(p.attempts ? (p.successes / p.attempts) * 100 : null)}</TableCell>
                  <TableCell className={numCell}>{formatUsd(p.cost, true)}</TableCell>
                  <TableCell className={numCell}>{formatUsd(p.attributedRevenue, true)}</TableCell>
                  <TableCell className="text-right">
                    <MarginText value={p.attributedRevenue - p.cost} pct={p.attributedRevenue > 0 ? ((p.attributedRevenue - p.cost) / p.attributedRevenue) * 100 : null} />
                  </TableCell>
                  <TableCell className={`${numCell} font-semibold`}>{formatUsd(p.costPerSuccess, true)}</TableCell>
                  <TableCell className={numCell}>{formatBytes(p.bytes)}</TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </Panel>

      <Panel title="Top 20 customers" description="Ordered by revenue in the selected range." flush className="mt-6">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Organization</TableHead>
              <TableHead>Plan</TableHead>
              <TableHead className="text-right">Requests</TableHead>
              <TableHead className="text-right">Success</TableHead>
              <TableHead className="text-right">Revenue</TableHead>
              <TableHead className="text-right">Upstream</TableHead>
              <TableHead className="text-right">Margin</TableHead>
              <TableHead className="text-right">GB</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {e.topCustomers.length === 0 ? (
              <TableEmpty colSpan={8}>No customer activity in this range.</TableEmpty>
            ) : (
              e.topCustomers.map((c) => (
                <TableRow key={c.key}>
                  <TableCell>
                    <Link href={`/admin/organizations/${c.key}`} className="font-medium hover:underline">
                      {c.name}
                    </Link>
                  </TableCell>
                  <TableCell>
                    <PlanBadge plan={c.plan} />
                  </TableCell>
                  <TableCell className={numCell}>{formatNumber(c.requests)}</TableCell>
                  <TableCell className={numCell}>{formatPercent(c.requests ? (c.successes / c.requests) * 100 : null)}</TableCell>
                  <TableCell className={numCell}>{formatUsd(c.revenue, true)}</TableCell>
                  <TableCell className={numCell}>{formatUsd(c.cost, true)}</TableCell>
                  <TableCell className="text-right">
                    <MarginText value={c.margin} pct={c.marginPct} />
                  </TableCell>
                  <TableCell className={numCell}>{formatBytes(c.bytes)}</TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </Panel>
    </>
  );
}