import Link from "next/link";
import { requireAdmin } from "@/lib/session";
import { getPlatformKpis, getProviderStats, getRecentFailures, getRecentSignups, parseRange, rangeLabel, rangeStart } from "@/lib/queries/admin";
import { formatBytes, formatCompact, formatMs, formatNumber, formatPercent, formatUsd } from "@/lib/format";
import { PageHeader } from "@/components/ui/page-header";
import { Stat, StatGrid } from "@/components/ui/stat";
import { Table, TableBody, TableCell, TableEmpty, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Badge, StatusBadge } from "@/components/ui/badge";
import { DateCell, MarginText, Mono, Panel, ProviderBadge, RangeTabs, numCell } from "@/components/admin/primitives";

export const dynamic = "force-dynamic";

export default async function AdminOverview({ searchParams }: { searchParams: Promise<Record<string, string | string[] | undefined>> }) {
  await requireAdmin();
  const sp = await searchParams;
  const range = parseRange(sp.range);
  const since = rangeStart(range);
  const [kpi, providers, signups, failures] = await Promise.all([getPlatformKpis(since), getProviderStats(since), getRecentSignups(8), getRecentFailures(10)]);

  return (
    <>
      <PageHeader eyebrow="Platform" title="Overview" description={`${rangeLabel(range)} · all organizations. Costs shown here are upstream costs and must never leave this area.`} actions={<RangeTabs current={range} basePath="/admin" />} />

      <div className="space-y-4">
        <StatGrid cols={4}>
          <Stat label="Requests" value={formatNumber(kpi.requests)} hint={`${formatNumber(kpi.successes)} ok · ${formatNumber(kpi.failed)} failed`} />
          <Stat label="Success rate" value={formatPercent(kpi.successRate)} hint={`avg ${kpi.avgAttempts ? kpi.avgAttempts.toFixed(2) : "—"} attempts · ${formatMs(kpi.avgLatency)}`} />
          <Stat label="Active organizations" value={formatNumber(kpi.activeOrgs)} hint={`${kpi.newOrgs} new orgs · ${kpi.newUsers} new users`} />
          <Stat label="Bandwidth" value={formatBytes(kpi.bytes)} hint="in + out, all networks" />
        </StatGrid>
        <StatGrid cols={4}>
          <Stat label="Revenue (billed)" value={formatUsd(kpi.revenue)} hint="sum of price_usd" />
          <Stat label="Upstream cost" value={formatUsd(kpi.cost)} hint="sum of cost_usd" />
          <Stat label="Gross margin" value={<MarginText value={kpi.margin} pct={kpi.marginPct} />} hint="revenue − upstream cost" />
          <Stat label="Cost / successful request" value={formatUsd(kpi.costPerSuccess, true)} hint="key unit-economics metric" />
        </StatGrid>
      </div>

      <div className="mt-6 grid gap-6 xl:grid-cols-5">
        <Panel title="Providers" description="Attempt-level stats from request_attempts. Provider names are admin-only." right={<Link href="/admin/providers" className="text-[12.5px] text-accent hover:underline">Manage →</Link>} flush className="xl:col-span-3">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Provider</TableHead>
                <TableHead className="text-right">Attempts</TableHead>
                <TableHead className="text-right">Success</TableHead>
                <TableHead className="text-right">Blocked</TableHead>
                <TableHead className="text-right">Avg latency</TableHead>
                <TableHead className="text-right">Cost</TableHead>
                <TableHead className="text-right">Cost / success</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {providers.length === 0 ? (
                <TableEmpty colSpan={7}>No attempts in this range.</TableEmpty>
              ) : (
                providers.map((p) => (
                  <TableRow key={p.provider}>
                    <TableCell>
                      <ProviderBadge id={p.provider} />
                    </TableCell>
                    <TableCell className={numCell}>{formatNumber(p.requests)}</TableCell>
                    <TableCell className={numCell}>{formatPercent(p.successRate)}</TableCell>
                    <TableCell className={numCell}>{formatPercent(p.blockedRate)}</TableCell>
                    <TableCell className={numCell}>{formatMs(p.avgLatency)}</TableCell>
                    <TableCell className={numCell}>{formatUsd(p.cost, true)}</TableCell>
                    <TableCell className={`${numCell} font-semibold`}>{formatUsd(p.costPerSuccess, true)}</TableCell>
                  </TableRow>
                ))
              )}
            </TableBody>
          </Table>
        </Panel>

        <Panel title="Recent signups" right={<Link href="/admin/users" className="text-[12.5px] text-accent hover:underline">All users →</Link>} flush className="xl:col-span-2">
          <ul className="divide-y divide-border">
            {signups.length === 0 ? <li className="px-4 py-8 text-center text-[13px] text-fg-muted">No users yet.</li> : null}
            {signups.map((u) => (
              <li key={u.id} className="flex items-center gap-3 px-4 py-2.5 text-[13px]">
                <div className="min-w-0 flex-1">
                  <Link href={`/admin/users/${u.id}`} className="block truncate font-medium hover:underline">
                    {u.email}
                  </Link>
                  <div className="truncate text-[12px] text-fg-muted">{u.name || "—"}</div>
                </div>
                {u.emailVerified ? <Badge variant="success" dot>verified</Badge> : <Badge variant="outline">unverified</Badge>}
                <DateCell value={u.createdAt} />
              </li>
            ))}
          </ul>
        </Panel>
      </div>

      <Panel title="Recent failures" description="Latest failed requests across all customers." right={<Link href="/admin/requests?status=failed" className="text-[12.5px] text-accent hover:underline">Explore →</Link>} flush className="mt-6">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Request</TableHead>
              <TableHead>Organization</TableHead>
              <TableHead>Domain</TableHead>
              <TableHead>Error</TableHead>
              <TableHead className="text-right">HTTP</TableHead>
              <TableHead className="text-right">Attempts</TableHead>
              <TableHead className="text-right">When</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {failures.length === 0 ? (
              <TableEmpty colSpan={7}>No failures recorded.</TableEmpty>
            ) : (
              failures.map((f) => (
                <TableRow key={f.id}>
                  <TableCell>
                    <Link href={`/admin/requests/${f.id}`} className="hover:underline">
                      <Mono>{f.id}</Mono>
                    </Link>
                  </TableCell>
                  <TableCell>
                    <Link href={`/admin/organizations/${f.organizationId}`} className="hover:underline">
                      {f.orgName ?? f.organizationId}
                    </Link>
                  </TableCell>
                  <TableCell className="max-w-[240px] truncate">{f.domain}</TableCell>
                  <TableCell>{f.errorCode ? <StatusBadge status={f.errorCode} /> : "—"}</TableCell>
                  <TableCell className={numCell}>{f.httpStatus ?? "—"}</TableCell>
                  <TableCell className={numCell}>{f.attempts}</TableCell>
                  <TableCell className="text-right">
                    <DateCell value={f.createdAt} />
                  </TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </Panel>
      <p className="mt-4 text-[12px] text-fg-subtle">
        Compact figures: {formatCompact(kpi.requests)} requests · {formatCompact(kpi.bytes)} bytes.
      </p>
    </>
  );
}