"use client";
import * as React from "react";
import { RefreshCw, ChevronDown, CheckCircle2, XCircle, Users, Boxes, Link2, AlertTriangle } from "lucide-react";
import { PageHeader, Card, CardHeader, CardBody, Stat, EmptyState, Skeleton } from "@/components/ui/misc";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Tooltip } from "@/components/ui/tooltip";
import { toast } from "@/components/ui/toast";
import { ProviderIcon } from "@/components/brand/provider-icon";
import { api, useApi } from "@/lib/client/api";
import { PROVIDERS, PROVIDER_ORDER, providerName } from "@/lib/client/providers";
import { formatMs, formatNumber, formatRelative, cn } from "@/lib/utils";
import { errorMessage, formatDateTime } from "@/lib/client/humanize";
import type { ProviderId } from "@/lib/client/types";

interface AdminResponse {
  users: number;
  connections: { provider: ProviderId; status: string; n: number }[];
  counts: { provider: ProviderId; total: number; hidden: number }[];
  syncRuns: {
    id: string;
    provider: ProviderId;
    triggeredBy: string;
    startedAt: string;
    finishedAt: string | null;
    ok: boolean | null;
    modelsFound: number | null;
    modelsAdded: number | null;
    modelsRemoved: number | null;
    latencyMs: number | null;
    errorCode: string | null;
    errorMessage: string | null;
  }[];
  errors: { provider: ProviderId; errorCode: string | null; n: number }[];
  latency: { provider: ProviderId; avgLatencyMs: number; avgTtftMs: number; requests: number }[];
  providers: { provider: ProviderId; envKeyConfigured: boolean; models: { key: string; displayName: string; status: string; hidden: boolean; lastSeenAt: string; source: string }[] }[];
}

interface SyncResult {
  provider: ProviderId;
  ok: boolean;
  found: number;
  added: number;
  removed: number;
  latencyMs: number;
  error?: string;
}

const CONN_STATUS_VARIANT: Record<string, "success" | "danger" | "warning" | "default"> = { valid: "success", invalid: "danger", unverified: "warning" };

export default function AdminProvidersPage() {
  const q = useApi<AdminResponse>("/api/admin/providers");
  const [syncing, setSyncing] = React.useState<string | null>(null);
  const data = q.data;

  const sync = async (provider?: ProviderId) => {
    setSyncing(provider ?? "all");
    try {
      const res = await api<{ results: SyncResult[] }>("/api/admin/providers", { method: "POST", json: provider ? { action: "sync", provider } : { action: "sync" } });
      await q.mutate();
      const ok = res.results.filter((r) => r.ok);
      const bad = res.results.filter((r) => !r.ok);
      if (ok.length) toast.success(`Synced ${ok.map((r) => providerName(r.provider)).join(", ")}`, ok.map((r) => `${providerName(r.provider)}: ${r.found} found, +${r.added} / −${r.removed} in ${formatMs(r.latencyMs)}`).join(" · "));
      for (const r of bad) toast.error(`${providerName(r.provider)} failed`, r.error);
      if (!res.results.length) toast.warning("Nothing synced", "No owner keys configured in the environment.");
    } catch (e) {
      toast.error("Sync failed", errorMessage(e));
    } finally {
      setSyncing(null);
    }
  };

  const connByProvider = React.useMemo(() => {
    const m = new Map<ProviderId, Record<string, number>>();
    for (const c of data?.connections ?? []) {
      const cur = m.get(c.provider) ?? {};
      cur[c.status] = (cur[c.status] ?? 0) + c.n;
      m.set(c.provider, cur);
    }
    return m;
  }, [data?.connections]);

  const totalConnections = (data?.connections ?? []).reduce((a, c) => a + c.n, 0);
  const totalModels = (data?.counts ?? []).reduce((a, c) => a + c.total, 0);
  const totalErrors = (data?.errors ?? []).reduce((a, c) => a + c.n, 0);

  return (
    <div className="space-y-6">
      <PageHeader
        title="Provider diagnostics"
        description="Registry health, sync history and 7-day error/latency signals across all users. User key material is never loaded here."
        actions={
          <Button loading={syncing === "all"} disabled={syncing !== null} onClick={() => sync()}>
            <RefreshCw /> Sync all with owner keys
          </Button>
        }
      />

      {q.error ? (
        <EmptyState title="Could not load diagnostics" description={errorMessage(q.error)} action={<Button variant="outline" size="sm" onClick={() => q.mutate()}>Retry</Button>} />
      ) : !data ? (
        <div className="space-y-4">
          <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
            {Array.from({ length: 4 }).map((_, i) => (
              <Skeleton key={i} className="h-[76px]" />
            ))}
          </div>
          <Skeleton className="h-64" />
        </div>
      ) : (
        <>
          <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
            <Stat label="Users" value={formatNumber(data.users)} hint={<span className="inline-flex items-center gap-1"><Users className="size-3" /> registered</span>} />
            <Stat label="Provider connections" value={formatNumber(totalConnections)} hint={<span className="inline-flex items-center gap-1"><Link2 className="size-3" /> across all users</span>} />
            <Stat label="Models in registry" value={formatNumber(totalModels)} hint={<span className="inline-flex items-center gap-1"><Boxes className="size-3" /> {formatNumber((data.counts ?? []).reduce((a, c) => a + c.hidden, 0))} hidden</span>} />
            <Stat label="Errors (7 d)" value={formatNumber(totalErrors)} hint={totalErrors ? "see breakdown below" : "no failures"} className={totalErrors ? "border-warning/40" : undefined} />
          </div>

          {/* Per-provider overview */}
          <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
            {PROVIDER_ORDER.map((p) => {
              const conns = connByProvider.get(p) ?? {};
              const count = data.counts.find((c) => c.provider === p);
              const lat = data.latency.find((l) => l.provider === p);
              const env = data.providers.find((x) => x.provider === p)?.envKeyConfigured ?? false;
              const lastRun = data.syncRuns.find((r) => r.provider === p);
              return (
                <Card key={p} className="p-4">
                  <div className="flex items-start justify-between gap-2">
                    <div className="flex items-center gap-2">
                      <ProviderIcon provider={p} size={18} />
                      <h3 className="text-sm font-semibold">{PROVIDERS[p].name}</h3>
                    </div>
                    <Tooltip content={env ? "Owner key present in environment — admin sync available" : "No owner key in environment; registry relies on user-triggered syncs"}>
                      <Badge variant={env ? "success" : "default"}>{env ? "owner key" : "no owner key"}</Badge>
                    </Tooltip>
                  </div>
                  <dl className="mt-3 space-y-1.5 text-xs">
                    <div className="flex justify-between gap-2">
                      <dt className="text-fg-subtle">Connections</dt>
                      <dd className="flex flex-wrap justify-end gap-1">
                        {Object.keys(conns).length ? (
                          Object.entries(conns).map(([s, n]) => (
                            <Badge key={s} variant={CONN_STATUS_VARIANT[s] ?? "default"}>
                              {n} {s}
                            </Badge>
                          ))
                        ) : (
                          <span className="text-fg-muted">none</span>
                        )}
                      </dd>
                    </div>
                    <div className="flex justify-between gap-2">
                      <dt className="text-fg-subtle">Registry</dt>
                      <dd className="font-mono tabular-nums">
                        {count?.total ?? 0} <span className="text-fg-subtle">({count?.hidden ?? 0} hidden)</span>
                      </dd>
                    </div>
                    <div className="flex justify-between gap-2">
                      <dt className="text-fg-subtle">Latency (7 d)</dt>
                      <dd className="font-mono tabular-nums">{lat && lat.requests ? `${formatMs(lat.avgLatencyMs)} · ttft ${formatMs(lat.avgTtftMs)} · ${formatNumber(lat.requests)} req` : "—"}</dd>
                    </div>
                    <div className="flex justify-between gap-2">
                      <dt className="text-fg-subtle">Last sync</dt>
                      <dd className="flex items-center gap-1">
                        {lastRun ? (
                          <>
                            {lastRun.ok ? <CheckCircle2 className="size-3 text-success" /> : lastRun.ok === false ? <XCircle className="size-3 text-danger" /> : null}
                            <span className="text-fg-muted">{formatRelative(lastRun.startedAt)}</span>
                          </>
                        ) : (
                          <span className="text-fg-muted">never</span>
                        )}
                      </dd>
                    </div>
                  </dl>
                  <Button size="sm" variant="outline" className="mt-3 w-full" disabled={!env || syncing !== null} loading={syncing === p} onClick={() => sync(p)}>
                    <RefreshCw /> Sync {PROVIDERS[p].shortName}
                  </Button>
                </Card>
              );
            })}
          </div>

          {/* Errors + latency */}
          <div className="grid gap-3 lg:grid-cols-2">
            <Card>
              <CardHeader title="Errors by provider and code" description="Last 7 days, top 30." />
              <CardBody className="px-0 pb-0">
                {data.errors.length === 0 ? (
                  <p className="px-5 pb-5 text-sm text-fg-muted">No failed requests in the last 7 days.</p>
                ) : (
                  <table className="w-full text-[13px]">
                    <thead>
                      <tr className="border-y border-border bg-bg-subtle/60 text-left text-[11px] font-medium uppercase tracking-wide text-fg-subtle">
                        <th className="px-5 py-2">Provider</th>
                        <th className="px-3 py-2">Code</th>
                        <th className="px-5 py-2 text-right">Count</th>
                      </tr>
                    </thead>
                    <tbody>
                      {data.errors.map((e, i) => (
                        <tr key={`${e.provider}-${e.errorCode}-${i}`} className="border-b border-border last:border-b-0">
                          <td className="px-5 py-2">
                            <span className="flex items-center gap-1.5">
                              <ProviderIcon provider={e.provider} size={13} /> {providerName(e.provider)}
                            </span>
                          </td>
                          <td className="px-3 py-2">
                            <code className="rounded bg-danger-soft px-1.5 py-0.5 text-[11px] text-danger">{e.errorCode ?? "unknown"}</code>
                          </td>
                          <td className="px-5 py-2 text-right font-mono tabular-nums">{formatNumber(e.n)}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                )}
              </CardBody>
            </Card>
            <Card>
              <CardHeader title="Latency by provider" description="Average total and time-to-first-token, last 7 days." />
              <CardBody className="space-y-3">
                {data.latency.length === 0 ? (
                  <p className="text-sm text-fg-muted">No requests in the last 7 days.</p>
                ) : (
                  (() => {
                    const max = Math.max(...data.latency.map((l) => l.avgLatencyMs), 1);
                    return [...data.latency]
                      .sort((a, b) => a.avgLatencyMs - b.avgLatencyMs)
                      .map((l) => (
                        <div key={l.provider} className="space-y-1">
                          <div className="flex items-center justify-between text-xs">
                            <span className="flex items-center gap-1.5 font-medium">
                              <ProviderIcon provider={l.provider} size={13} /> {providerName(l.provider)}
                              <span className="text-fg-subtle">· {formatNumber(l.requests)} req</span>
                            </span>
                            <span className="font-mono tabular-nums text-fg-muted">
                              {formatMs(l.avgLatencyMs)} <span className="text-fg-subtle">/ ttft {formatMs(l.avgTtftMs)}</span>
                            </span>
                          </div>
                          <div className="relative h-2 overflow-hidden rounded-full bg-bg-muted">
                            <div className="absolute inset-y-0 left-0 rounded-full" style={{ width: `${(l.avgLatencyMs / max) * 100}%`, background: PROVIDERS[l.provider]?.colorVar ?? "var(--fg-subtle)" }} />
                            <div className="absolute inset-y-0 left-0 rounded-full bg-bg-elevated/60" style={{ width: `${(l.avgTtftMs / max) * 100}%` }} aria-hidden />
                          </div>
                        </div>
                      ));
                  })()
                )}
              </CardBody>
            </Card>
          </div>

          {/* Sync runs */}
          <Card>
            <CardHeader title="Model sync runs" description="Most recent 40 registry refreshes (any trigger)." />
            <CardBody className="px-0 pb-0">
              {data.syncRuns.length === 0 ? (
                <p className="px-5 pb-5 text-sm text-fg-muted">No sync runs recorded yet.</p>
              ) : (
                <div className="overflow-x-auto">
                  <table className="w-full min-w-[760px] text-[13px]">
                    <thead>
                      <tr className="border-y border-border bg-bg-subtle/60 text-left text-[11px] font-medium uppercase tracking-wide text-fg-subtle">
                        <th className="px-5 py-2">Provider</th>
                        <th className="px-3 py-2">Trigger</th>
                        <th className="px-3 py-2">Started</th>
                        <th className="px-3 py-2">Result</th>
                        <th className="px-3 py-2 text-right">Found</th>
                        <th className="px-3 py-2 text-right">Added</th>
                        <th className="px-3 py-2 text-right">Removed</th>
                        <th className="px-3 py-2 text-right">Latency</th>
                        <th className="px-5 py-2">Error</th>
                      </tr>
                    </thead>
                    <tbody>
                      {data.syncRuns.map((r) => (
                        <tr key={r.id} className="border-b border-border last:border-b-0">
                          <td className="px-5 py-2">
                            <span className="flex items-center gap-1.5">
                              <ProviderIcon provider={r.provider} size={13} /> {providerName(r.provider)}
                            </span>
                          </td>
                          <td className="px-3 py-2">
                            <Badge className="capitalize">{r.triggeredBy}</Badge>
                          </td>
                          <td className="px-3 py-2 text-fg-muted">
                            <Tooltip content={formatDateTime(r.startedAt, { year: "numeric", second: "2-digit" })}>
                              <span>{formatRelative(r.startedAt)}</span>
                            </Tooltip>
                          </td>
                          <td className="px-3 py-2">
                            {r.ok === true ? (
                              <Badge variant="success">
                                <CheckCircle2 /> ok
                              </Badge>
                            ) : r.ok === false ? (
                              <Badge variant="danger">
                                <XCircle /> failed
                              </Badge>
                            ) : (
                              <Badge variant="warning">running</Badge>
                            )}
                          </td>
                          <td className="px-3 py-2 text-right font-mono tabular-nums">{r.modelsFound ?? "—"}</td>
                          <td className="px-3 py-2 text-right font-mono tabular-nums text-success">{r.modelsAdded ? `+${r.modelsAdded}` : "0"}</td>
                          <td className="px-3 py-2 text-right font-mono tabular-nums text-warning">{r.modelsRemoved ? `−${r.modelsRemoved}` : "0"}</td>
                          <td className="px-3 py-2 text-right font-mono tabular-nums text-fg-muted">{formatMs(r.latencyMs)}</td>
                          <td className="max-w-[240px] truncate px-5 py-2 text-xs text-fg-muted" title={r.errorMessage ?? undefined}>
                            {r.errorCode ? <code className="mr-1 rounded bg-danger-soft px-1 text-[11px] text-danger">{r.errorCode}</code> : null}
                            {r.errorMessage ?? ""}
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              )}
            </CardBody>
          </Card>

          {/* Per-provider model lists */}
          <section className="space-y-2" aria-label="Registry models per provider">
            <h2 className="text-[15px] font-semibold tracking-tight">Registry contents</h2>
            {data.providers.map((p) => (
              <ProviderModelList key={p.provider} provider={p.provider} models={p.models} />
            ))}
          </section>
        </>
      )}
    </div>
  );
}

function ProviderModelList({ provider, models }: { provider: ProviderId; models: AdminResponse["providers"][number]["models"] }) {
  const [open, setOpen] = React.useState(false);
  const [now] = React.useState(() => Date.now());
  const hidden = models.filter((m) => m.hidden).length;
  const stale = models.filter((m) => now - new Date(m.lastSeenAt).getTime() > 7 * 86_400_000 && !m.hidden).length;
  return (
    <Card>
      <button type="button" onClick={() => setOpen((v) => !v)} aria-expanded={open} className="flex w-full items-center justify-between gap-3 px-4 py-3 text-left">
        <span className="flex items-center gap-2.5">
          <ProviderIcon provider={provider} size={16} />
          <span className="text-sm font-medium">{PROVIDERS[provider].name}</span>
          <span className="text-xs text-fg-subtle">
            {models.length} models · {hidden} hidden
          </span>
          {stale ? (
            <Tooltip content="Visible models not seen on the provider list in over 7 days">
              <Badge variant="warning">
                <AlertTriangle /> {stale} stale
              </Badge>
            </Tooltip>
          ) : null}
        </span>
        <ChevronDown className={cn("size-4 text-fg-subtle transition-transform", open && "rotate-180")} />
      </button>
      {open ? (
        <div className="overflow-x-auto border-t border-border">
          {models.length === 0 ? (
            <p className="px-4 py-3 text-sm text-fg-muted">No models recorded for this provider.</p>
          ) : (
            <table className="w-full min-w-[640px] text-[13px]">
              <thead>
                <tr className="bg-bg-subtle/60 text-left text-[11px] font-medium uppercase tracking-wide text-fg-subtle">
                  <th className="px-4 py-2">Key</th>
                  <th className="px-3 py-2">Name</th>
                  <th className="px-3 py-2">Status</th>
                  <th className="px-3 py-2">Source</th>
                  <th className="px-3 py-2">Hidden</th>
                  <th className="px-4 py-2 text-right">Last seen</th>
                </tr>
              </thead>
              <tbody>
                {models.map((m) => (
                  <tr key={m.key} className={cn("border-t border-border", m.hidden && "opacity-60")}>
                    <td className="px-4 py-1.5 font-mono text-xs">{m.key}</td>
                    <td className="px-3 py-1.5">{m.displayName}</td>
                    <td className="px-3 py-1.5">
                      <Badge variant={m.status === "active" ? "success" : m.status === "preview" ? "info" : m.status === "deprecated" ? "warning" : "default"} className="capitalize">
                        {m.status}
                      </Badge>
                    </td>
                    <td className="px-3 py-1.5 text-xs text-fg-muted">{m.source}</td>
                    <td className="px-3 py-1.5 text-xs text-fg-muted">{m.hidden ? "yes" : "no"}</td>
                    <td className="px-4 py-1.5 text-right text-xs text-fg-muted">{formatRelative(m.lastSeenAt)}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          )}
        </div>
      ) : null}
    </Card>
  );
}