import { requireAdmin } from "@/lib/session";
import { internalApi, InternalApiError } from "@/lib/api";
import { getProviderConfigs, getProviderHealthHistory, getProviderStats, rangeStart } from "@/lib/queries/admin";
import { formatBytes, formatMs, formatNumber, formatPercent, formatUsd } from "@/lib/format";
import { PageHeader } from "@/components/ui/page-header";
import { Alert } from "@/components/ui/alert";
import { Badge, StatusBadge } from "@/components/ui/badge";
import { Stat, StatGrid } from "@/components/ui/stat";
import { Table, TableBody, TableCell, TableEmpty, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { DateCell, NetworkBadge, Panel, ProviderBadge, numCell } from "@/components/admin/primitives";
import { CircuitList, ProbeButton, ProviderConfigForm, ResetAllCircuitsButton } from "@/components/admin/provider-panel";

export const dynamic = "force-dynamic";

type ProvidersPayload = Awaited<ReturnType<typeof internalApi.providers>>;

export default async function AdminProvidersPage() {
  await requireAdmin();
  let live: ProvidersPayload | null = null;
  let apiError: string | null = null;
  try {
    live = await internalApi.providers();
  } catch (e) {
    apiError = e instanceof InternalApiError ? `${e.code}: ${e.message}` : (e as Error).message;
  }
  const [configs, stats, history] = await Promise.all([getProviderConfigs(), getProviderStats(rangeStart("24h")), getProviderHealthHistory(50)]);
  const configById = new Map(configs.map((c) => [c.id, c]));
  const statById = new Map(stats.map((s) => [s.provider, s]));

  // Providers known to the API, plus any config rows the API does not report (e.g. disabled ones).
  const providerIds = Array.from(new Set([...(live?.providers.map((p) => p.id) ?? []), ...configs.map((c) => c.id)]));

  return (
    <>
      <PageHeader
        eyebrow="Upstream"
        title="Providers"
        description="Configuration, health, circuit breakers and 24-hour unit economics per upstream provider. This page is the only place provider names appear."
        actions={
          <>
            <ResetAllCircuitsButton />
            <ProbeButton />
          </>
        }
      />

      {apiError ? (
        <Alert variant="warning" title="API service unreachable" className="mb-4">
          Live provider status could not be loaded ({apiError}). Configuration and database statistics are still shown; saving a config will retry the reload.
        </Alert>
      ) : (
        <p className="mb-4 text-[12.5px] text-fg-muted">
          Available networks right now: {live!.available_networks.length ? live!.available_networks.map((n) => <NetworkBadge key={n} network={n} />) : <span>none</span>}
        </p>
      )}

      <div className="space-y-6">
        {providerIds.length === 0 ? <Alert variant="info">No providers registered.</Alert> : null}
        {providerIds.map((id) => {
          const p = live?.providers.find((x) => x.id === id) ?? null;
          const cfg = configById.get(id) ?? null;
          const st = statById.get(id) ?? null;
          const label = cfg?.label ?? p?.label ?? id;
          const enabled = cfg?.enabled ?? true;
          return (
            <Panel
              key={id}
              title={
                <span className="flex flex-wrap items-center gap-2">
                  <span className="text-[15px]">{label}</span>
                  <ProviderBadge id={id} />
                  {p ? p.configured ? <Badge variant="success" dot>configured</Badge> : <Badge variant="danger" dot>credentials missing</Badge> : <Badge variant="outline">not reported by API</Badge>}
                  {enabled ? <Badge variant="accent">enabled</Badge> : <Badge variant="outline">disabled</Badge>}
                </span>
              }
              description={p ? `Networks: ${p.networks.join(", ") || "none"}` : cfg ? `Networks (config): ${cfg.networks.join(", ")}` : undefined}
              bodyClassName="p-0"
            >
              <div className="border-b border-border">
                <StatGrid cols={6} className="rounded-none border-0 shadow-none">
                  <Stat label="Attempts 24h" value={formatNumber(st?.requests ?? 0)} />
                  <Stat label="Success" value={formatPercent(st?.successRate ?? null)} />
                  <Stat label="Blocked" value={formatPercent(st?.blockedRate ?? null)} />
                  <Stat label="Avg latency" value={formatMs(st?.avgLatency ?? null)} />
                  <Stat label="Bytes · cost" value={`${formatBytes(st?.bytes ?? 0)} · ${formatUsd(st?.cost ?? 0, true)}`} />
                  <Stat label="Cost / success" value={<span className="text-accent">{formatUsd(st?.costPerSuccess ?? null, true)}</span>} hint="key metric" />
                </StatGrid>
              </div>
              <div className="grid gap-6 p-4 lg:grid-cols-2">
                <div>
                  <h3 className="mb-2 text-[12px] font-semibold uppercase tracking-wide text-fg-subtle">Configuration</h3>
                  <ProviderConfigForm
                    id={id}
                    label={label}
                    enabled={enabled}
                    networks={cfg?.networks ?? []}
                    pricePerGbUsd={cfg?.pricePerGbUsd ?? {}}
                    weight={cfg?.weight ?? 1}
                    maxConcurrency={cfg?.maxConcurrency ?? 200}
                    notes={cfg?.notes ?? null}
                    livePrices={p?.prices ?? {}}
                    liveNetworks={p?.networks ?? []}
                    hasConfigRow={Boolean(cfg)}
                  />
                </div>
                <div className="grid gap-5">
                  <div>
                    <h3 className="mb-2 text-[12px] font-semibold uppercase tracking-wide text-fg-subtle">Latest health per network</h3>
                    {p?.health.length ? (
                      <ul className="divide-y divide-border rounded-md border border-border">
                        {p.health.map((h) => (
                          <li key={h.network} className="flex flex-wrap items-center gap-3 px-3 py-2 text-[12.5px]">
                            <NetworkBadge network={h.network} />
                            <StatusBadge status={h.status} />
                            <span className="tabular font-mono text-fg-muted">{formatMs(h.latency_ms)}</span>
                            <span className="text-fg-subtle">
                              <DateCell value={h.checked_at} />
                            </span>
                            {h.detail ? (
                              <span className="w-full truncate font-mono text-[11.5px] text-fg-subtle" title={h.detail}>
                                {h.detail}
                              </span>
                            ) : null}
                          </li>
                        ))}
                      </ul>
                    ) : (
                      <p className="text-[12.5px] text-fg-muted">No health check in the last 24 hours. Run a probe.</p>
                    )}
                  </div>
                  <div>
                    <h3 className="mb-2 text-[12px] font-semibold uppercase tracking-wide text-fg-subtle">Circuit breakers</h3>
                    <CircuitList circuits={p?.circuits ?? []} />
                  </div>
                </div>
              </div>
            </Panel>
          );
        })}
      </div>

      <Panel title="Health history" description="Last 50 probe results across providers." flush className="mt-6">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Checked</TableHead>
              <TableHead>Provider</TableHead>
              <TableHead>Network</TableHead>
              <TableHead>Status</TableHead>
              <TableHead className="text-right">Latency</TableHead>
              <TableHead className="text-right">Success rate</TableHead>
              <TableHead>Detail</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {history.length === 0 ? (
              <TableEmpty colSpan={7}>No probes recorded yet.</TableEmpty>
            ) : (
              history.map((h) => (
                <TableRow key={h.id}>
                  <TableCell>
                    <DateCell value={h.checkedAt} relative={false} />
                  </TableCell>
                  <TableCell>
                    <ProviderBadge id={h.provider} />
                  </TableCell>
                  <TableCell>
                    <NetworkBadge network={h.network} />
                  </TableCell>
                  <TableCell>
                    <StatusBadge status={h.status} />
                  </TableCell>
                  <TableCell className={numCell}>{formatMs(h.latencyMs)}</TableCell>
                  <TableCell className={numCell}>{h.successRate !== null ? formatPercent(h.successRate * (h.successRate <= 1 ? 100 : 1)) : "—"}</TableCell>
                  <TableCell className="max-w-[360px] truncate font-mono text-[11.5px] text-fg-muted" title={h.detail ?? undefined}>
                    {h.detail ?? "—"}
                  </TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </Panel>
    </>
  );
}