"use client";

import { useCallback, useEffect, useState } from "react";
import { Page, PageHeader, Stat } from "@/components/ui/section";
import { RightsBadge, StatusBadge } from "@/components/ui/status-badge";
import { RelativeTime } from "@/components/ui/freshness";
import { clientApi } from "@/lib/client-api";
import { cx, formatCompact, formatDateTime, formatDuration } from "@/lib/format";

const TOKEN_KEY = "ma-admin-token";
type Tab = "overview" | "connectors" | "schema" | "divergence" | "storage" | "discovery";

interface Overview {
  version: string;
  role: string;
  uptime_s: number;
  memory: { rss: number; heapUsed: number };
  observations_total: number;
  events_total: number;
  queue_depth: number;
  rates: { observations_per_sec: number; events_per_min: number; http_per_min: number };
  tables: Array<{ relname: string; bytes: number }>;
  rate_limiter: Array<{ host: string; ratePerSec: number; pending: number }>;
}
interface ConnectorRow {
  metadata: Record<string, any>;
  health: Record<string, any>;
  paused: boolean;
  running: boolean;
  symbols: string[];
  schedule: Record<string, unknown> | null;
  consecutive_failures?: number;
  drift_strikes?: number;
  sockets: Array<{ url: string; open: boolean; reconnects: number }>;
}

/** Token-gated admin console (token kept in localStorage, sent as x-ma-admin-token; never rendered). */
export function AdminConsole() {
  const [token, setToken] = useState<string>("");
  const [input, setInput] = useState("");
  const [tab, setTab] = useState<Tab>("overview");
  const [error, setError] = useState<string | null>(null);
  useEffect(() => {
    try {
      setToken(localStorage.getItem(TOKEN_KEY) ?? "");
    } catch {
      /* ignore */
    }
  }, []);
  const call = useCallback(
    async <T,>(path: string, init?: RequestInit) => {
      try {
        setError(null);
        return await clientApi<T>(path, { ...init, adminToken: token });
      } catch (e) {
        const msg = e instanceof Error ? e.message : "request failed";
        setError(msg);
        if (/token|unauthor/i.test(msg)) {
          localStorage.removeItem(TOKEN_KEY);
          setToken("");
        }
        throw e;
      }
    },
    [token],
  );
  if (!token) {
    return (
      <Page>
        <PageHeader kicker="Admin" title="Market Atlas console" lead="Enter the admin token configured on the API (MA_ADMIN_TOKEN). It is stored in this browser only." />
        <form
          className="flex max-w-md gap-2"
          onSubmit={(e) => {
            e.preventDefault();
            if (!input.trim()) return;
            localStorage.setItem(TOKEN_KEY, input.trim());
            setToken(input.trim());
          }}
        >
          <input type="password" value={input} onChange={(e) => setInput(e.target.value)} placeholder="admin token" className="mono h-11 flex-1 rounded-md border border-rule bg-surface px-3 text-sm outline-none focus:border-rule-strong" autoComplete="off" />
          <button type="submit" className="h-11 rounded-md bg-ink px-4 text-sm font-medium text-canvas">
            Unlock
          </button>
        </form>
        {error && <p className="mt-3 text-sm text-negative">{error}</p>}
      </Page>
    );
  }
  return (
    <Page wide>
      <PageHeader
        kicker="Admin"
        title="Console"
        actions={
          <button
            type="button"
            onClick={() => {
              localStorage.removeItem(TOKEN_KEY);
              setToken("");
            }}
            className="h-9 rounded-md border border-rule px-3 text-xs text-ink-2 hover:text-ink"
          >
            Lock
          </button>
        }
      />
      <nav className="mb-4 flex flex-wrap gap-1 border-b border-rule">
        {(["overview", "connectors", "schema", "divergence", "storage", "discovery"] as Tab[]).map((t) => (
          <button key={t} type="button" onClick={() => setTab(t)} className={cx("h-10 px-3 text-sm capitalize", tab === t ? "border-b-2 border-ink font-medium text-ink" : "text-ink-2 hover:text-ink")}>
            {t === "schema" ? "Schema changes" : t}
          </button>
        ))}
      </nav>
      {error && <p className="mb-3 rounded-md border border-negative/40 bg-negative-soft px-3 py-2 text-sm text-negative">{error}</p>}
      {tab === "overview" && <OverviewTab call={call} />}
      {tab === "connectors" && <ConnectorsTab call={call} />}
      {tab === "schema" && <SchemaTab call={call} />}
      {tab === "divergence" && <DivergenceTab call={call} />}
      {tab === "storage" && <StorageTab call={call} />}
      {tab === "discovery" && <DiscoveryTab call={call} />}
    </Page>
  );
}

type Call = <T>(path: string, init?: RequestInit) => Promise<T>;

function OverviewTab({ call }: { call: Call }) {
  const [o, setO] = useState<Overview | null>(null);
  useEffect(() => {
    const load = () => call<Overview>("/v1/admin/overview").then(setO).catch(() => {});
    load();
    const t = setInterval(load, 5000);
    return () => clearInterval(t);
  }, [call]);
  if (!o) return <p className="text-sm text-ink-3">Loading…</p>;
  return (
    <div className="space-y-6">
      <div className="grid grid-cols-2 gap-4 rounded-md border border-rule bg-surface px-4 py-4 sm:grid-cols-3 lg:grid-cols-6">
        <Stat label="Version / role" value={`v${o.version}`} sub={o.role} />
        <Stat label="Uptime" value={formatDuration(o.uptime_s * 1000)} />
        <Stat label="RSS" value={formatCompact(o.memory.rss)} sub={`heap ${formatCompact(o.memory.heapUsed)}`} />
        <Stat label="Observations" value={formatCompact(o.observations_total, 2)} sub={`${o.rates.observations_per_sec.toFixed(1)} / s`} />
        <Stat label="Events" value={formatCompact(o.events_total)} sub={`${o.rates.events_per_min.toFixed(1)} / min`} />
        <Stat label="Queue depth" value={o.queue_depth} sub={`HTTP ${o.rates.http_per_min.toFixed(0)} / min`} tone={o.queue_depth > 50_000 ? "warn" : undefined} />
      </div>
      <div className="grid grid-cols-1 [&>*]:min-w-0 gap-4 lg:grid-cols-2">
        <div className="overflow-x-auto rounded-md border border-rule bg-surface">
          <table className="table-dense">
            <thead>
              <tr>
                <th>Table</th>
                <th className="text-right">Size</th>
              </tr>
            </thead>
            <tbody>
              {o.tables.map((t) => (
                <tr key={t.relname}>
                  <td className="mono">{t.relname}</td>
                  <td className="num">{formatCompact(t.bytes)}B</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <div className="overflow-x-auto rounded-md border border-rule bg-surface">
          <table className="table-dense">
            <thead>
              <tr>
                <th>Rate-limited host</th>
                <th className="text-right">req / s</th>
                <th className="text-right">Pending</th>
              </tr>
            </thead>
            <tbody>
              {o.rate_limiter.map((r) => (
                <tr key={r.host}>
                  <td className="mono">{r.host}</td>
                  <td className="num">{r.ratePerSec}</td>
                  <td className="num">{r.pending}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

function ConnectorsTab({ call }: { call: Call }) {
  const [rows, setRows] = useState<ConnectorRow[]>([]);
  const [sel, setSel] = useState<string | null>(null);
  const [detail, setDetail] = useState<Record<string, any> | null>(null);
  const [busy, setBusy] = useState<string | null>(null);
  const [testResult, setTestResult] = useState<string | null>(null);
  const load = useCallback(() => call<ConnectorRow[]>("/v1/admin/connectors").then(setRows).catch(() => {}), [call]);
  useEffect(() => {
    load();
    const t = setInterval(load, 5000);
    return () => clearInterval(t);
  }, [load]);
  useEffect(() => {
    if (!sel) return;
    call<Record<string, any>>(`/v1/admin/connectors/${sel}`).then(setDetail).catch(() => {});
  }, [sel, call]);
  const action = async (id: string, a: string) => {
    setBusy(`${id}:${a}`);
    setTestResult(null);
    try {
      const r = await call<Record<string, unknown>>(`/v1/admin/connectors/${id}/${a}`, { method: "POST", body: "{}" });
      if (a === "test") setTestResult(JSON.stringify(r));
      await load();
    } finally {
      setBusy(null);
    }
  };
  return (
    <div className="grid grid-cols-1 [&>*]:min-w-0 gap-4 xl:grid-cols-[1fr_420px]">
      <div className="overflow-x-auto rounded-md border border-rule bg-surface">
        <table className="table-dense">
          <thead>
            <tr>
              <th>Connector</th>
              <th>State</th>
              <th className="text-right">Msg/min</th>
              <th className="text-right">Errors</th>
              <th className="text-right">Score</th>
              <th>Last message</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            {rows.map((r) => {
              const id = r.metadata.id as string;
              return (
                <tr key={id} className={cx(sel === id && "bg-surface-2")}>
                  <td>
                    <button type="button" onClick={() => setSel(id)} className="text-left hover:underline">
                      <span className="mono font-medium">{id}</span>
                      <span className="block text-[11px] text-ink-3">
                        {r.metadata.sourceType} · <RightsBadge status={r.metadata.rightsStatus} />
                      </span>
                    </button>
                  </td>
                  <td>
                    <StatusBadge status={r.health.state} />
                    {r.paused && <span className="ml-1 text-[10px] text-ink-3">paused</span>}
                  </td>
                  <td className="num">{r.health.messages1m}</td>
                  <td className="num">{r.health.errorsTotal}</td>
                  <td className="num">{r.health.reliabilityScore ?? "—"}</td>
                  <td className="text-xs text-ink-3">{r.health.lastMessageAt ? <RelativeTime value={r.health.lastMessageAt} /> : "—"}</td>
                  <td>
                    <div className="flex gap-1">
                      {(r.paused ? ["resume"] : ["pause", "restart"]).concat(["test"]).map((a) => (
                        <button key={a} type="button" disabled={busy != null} onClick={() => action(id, a)} className="h-7 rounded border border-rule px-2 text-[11px] text-ink-2 hover:text-ink disabled:opacity-50">
                          {busy === `${id}:${a}` ? "…" : a}
                        </button>
                      ))}
                    </div>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
        {testResult && <pre className="mono m-3 overflow-x-auto rounded bg-surface-2 p-2 text-xs">{testResult}</pre>}
      </div>
      <div className="rounded-md border border-rule bg-surface p-4 text-sm">
        {!sel && <p className="text-ink-3">Select a connector to inspect health history, schema fingerprints, recent observations and persisted state.</p>}
        {sel && detail && (
          <div className="space-y-4">
            <div>
              <div className="mono text-xs text-ink-3">{sel}</div>
              <div className="font-medium">{detail.metadata?.name}</div>
              <div className="mt-1 text-xs text-ink-2">{detail.metadata?.description}</div>
            </div>
            <div className="grid grid-cols-2 gap-x-4 text-xs">
              {[
                ["State", detail.health?.state],
                ["Messages", detail.health?.messagesTotal],
                ["Errors", detail.health?.errorsTotal],
                ["Reconnects", detail.health?.reconnects],
                ["p50 latency", detail.health?.medianLatencyMs != null ? formatDuration(detail.health.medianLatencyMs) : "—"],
                ["Instruments", detail.health?.instrumentsCovered],
                ["Parse success", detail.health?.parseSuccessRate != null ? `${Math.round(detail.health.parseSuccessRate * 100)}%` : "—"],
                ["Last error", detail.health?.lastError ?? "—"],
              ].map(([k, v]) => (
                <div key={String(k)} className="flex justify-between gap-2 border-b border-rule py-1">
                  <span className="text-ink-3">{String(k)}</span>
                  <span className="mono truncate">{String(v ?? "—")}</span>
                </div>
              ))}
            </div>
            <div>
              <div className="mb-1 text-[11px] font-medium uppercase tracking-wide text-ink-3">Schema fingerprints</div>
              <pre className="mono overflow-x-auto rounded bg-surface-2 p-2 text-[11px]">{JSON.stringify(detail.fingerprints ?? {}, null, 1)}</pre>
            </div>
            <div>
              <div className="mb-1 text-[11px] font-medium uppercase tracking-wide text-ink-3">Schema changes</div>
              {(detail.schema_changes ?? []).length === 0 ? (
                <p className="text-xs text-ink-3">None recorded.</p>
              ) : (
                <ul className="space-y-1 text-xs">
                  {(detail.schema_changes as Array<Record<string, any>>).map((c) => (
                    <li key={c.id} className="flex items-center justify-between gap-2">
                      <span className="mono">
                        {c.kind}: {c.old_fingerprint ?? "∅"} → {c.new_fingerprint}
                      </span>
                      {c.acknowledged ? (
                        <span className="text-ink-3">ack</span>
                      ) : (
                        <button type="button" onClick={() => call(`/v1/admin/connectors/${sel}/schema-changes/${c.id}/ack`, { method: "POST", body: "{}" }).then(() => call<Record<string, any>>(`/v1/admin/connectors/${sel}`).then(setDetail))} className="rounded border border-rule px-1.5 text-[10px]">
                          acknowledge
                        </button>
                      )}
                    </li>
                  ))}
                </ul>
              )}
            </div>
            <div>
              <div className="mb-1 text-[11px] font-medium uppercase tracking-wide text-ink-3">Recent observations</div>
              <div className="max-h-48 overflow-auto">
                <table className="table-dense">
                  <tbody>
                    {(detail.recent_observations as Array<Record<string, any>> | undefined)?.map((o, i) => (
                      <tr key={i}>
                        <td className="mono text-[11px] text-ink-3">{formatDateTime(o.received_at, { seconds: true })}</td>
                        <td className="mono text-[11px]">{o.instrument_id}</td>
                        <td className="mono text-[11px]">{o.field}</td>
                        <td className="num text-[11px]">{o.value}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
            <div>
              <div className="mb-1 text-[11px] font-medium uppercase tracking-wide text-ink-3">Persisted state (redacted)</div>
              <pre className="mono max-h-40 overflow-auto rounded bg-surface-2 p-2 text-[11px]">{JSON.stringify(detail.state ?? {}, null, 1)}</pre>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

function SchemaTab({ call }: { call: Call }) {
  const [rows, setRows] = useState<Array<Record<string, any>>>([]);
  useEffect(() => {
    call<Array<Record<string, any>>>("/v1/admin/schema-changes").then(setRows).catch(() => {});
  }, [call]);
  return (
    <div className="overflow-x-auto rounded-md border border-rule bg-surface">
      <table className="table-dense">
        <thead>
          <tr>
            <th>Detected</th>
            <th>Connector</th>
            <th>Kind</th>
            <th>Old</th>
            <th>New</th>
            <th />
          </tr>
        </thead>
        <tbody>
          {rows.length === 0 && (
            <tr>
              <td colSpan={6} className="py-6 text-center text-ink-3">
                No unacknowledged schema changes.
              </td>
            </tr>
          )}
          {rows.map((r) => (
            <tr key={r.id}>
              <td className="mono text-xs">{formatDateTime(r.detected_at, { seconds: true })}</td>
              <td className="mono">{r.connector_id}</td>
              <td>{r.kind}</td>
              <td className="mono text-xs text-ink-3">{r.old_fingerprint ?? "∅"}</td>
              <td className="mono text-xs">{r.new_fingerprint}</td>
              <td>
                <button type="button" onClick={() => call(`/v1/admin/connectors/${r.connector_id}/schema-changes/${r.id}/ack`, { method: "POST", body: "{}" }).then(() => setRows((x) => x.filter((y) => y.id !== r.id)))} className="h-7 rounded border border-rule px-2 text-[11px]">
                  acknowledge
                </button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

function DivergenceTab({ call }: { call: Call }) {
  const [rows, setRows] = useState<Array<Record<string, any>>>([]);
  useEffect(() => {
    call<Array<Record<string, any>>>("/v1/admin/divergence").then(setRows).catch(() => {});
  }, [call]);
  return (
    <div className="overflow-x-auto rounded-md border border-rule bg-surface">
      <table className="table-dense">
        <thead>
          <tr>
            <th>Time</th>
            <th>Instruments</th>
            <th>Title</th>
            <th className="text-right">Dispersion</th>
            <th>Sources</th>
          </tr>
        </thead>
        <tbody>
          {rows.length === 0 && (
            <tr>
              <td colSpan={5} className="py-6 text-center text-ink-3">
                No divergence events recorded.
              </td>
            </tr>
          )}
          {rows.map((r) => (
            <tr key={r.id}>
              <td className="mono text-xs">{formatDateTime(r.ts, { seconds: true })}</td>
              <td className="mono text-xs">{(r.instrument_ids as string[]).join(", ")}</td>
              <td>{r.title}</td>
              <td className="num">{r.data?.dispersionBps?.toFixed?.(0) ?? "—"} bps</td>
              <td className="mono text-[11px] text-ink-3">{(r.data?.contributions as Array<{ source: string; value: number }> | undefined)?.map((c) => `${c.source}=${c.value}`).join(" · ")}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

function StorageTab({ call }: { call: Call }) {
  const [s, setS] = useState<Record<string, any> | null>(null);
  useEffect(() => {
    call<Record<string, any>>("/v1/admin/storage").then(setS).catch(() => {});
  }, [call]);
  if (!s) return <p className="text-sm text-ink-3">Loading…</p>;
  return (
    <div className="space-y-4">
      <div className="grid grid-cols-2 gap-4 rounded-md border border-rule bg-surface px-4 py-4 sm:grid-cols-4">
        <Stat label="Database" value={`${formatCompact(s.database_bytes)}B`} />
        <Stat label="Retention" value={`${s.retention_days} d`} sub="observation partitions" />
        <Stat label="Partitions" value={(s.partitions as unknown[]).length} />
        <Stat label="Archives" value={(s.archives as unknown[]).length} sub={s.data_dir} />
      </div>
      <div className="grid grid-cols-1 [&>*]:min-w-0 gap-4 lg:grid-cols-2">
        <div className="overflow-x-auto rounded-md border border-rule bg-surface">
          <table className="table-dense">
            <thead>
              <tr>
                <th>Partition</th>
                <th className="text-right">Size</th>
                <th className="text-right">≈ rows</th>
              </tr>
            </thead>
            <tbody>
              {(s.partitions as Array<Record<string, any>>).map((p) => (
                <tr key={p.relname}>
                  <td className="mono">{p.relname}</td>
                  <td className="num">{formatCompact(p.bytes)}B</td>
                  <td className="num">{formatCompact(Math.max(0, Number(p.est_rows)))}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <div className="overflow-x-auto rounded-md border border-rule bg-surface">
          <table className="table-dense">
            <thead>
              <tr>
                <th>Archived day</th>
                <th className="text-right">Rows</th>
                <th className="text-right">Bytes</th>
              </tr>
            </thead>
            <tbody>
              {(s.archives as Array<Record<string, any>>).length === 0 && (
                <tr>
                  <td colSpan={3} className="py-6 text-center text-ink-3">
                    Nothing archived yet.
                  </td>
                </tr>
              )}
              {(s.archives as Array<Record<string, any>>).map((a) => (
                <tr key={a.partition_name}>
                  <td className="mono">{String(a.day).slice(0, 10)}</td>
                  <td className="num">{formatCompact(a.rows_archived)}</td>
                  <td className="num">{formatCompact(a.bytes)}B</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

function DiscoveryTab({ call }: { call: Call }) {
  const [url, setUrl] = useState("");
  const [report, setReport] = useState<Record<string, any> | null>(null);
  const [busy, setBusy] = useState(false);
  return (
    <div className="space-y-4">
      <form
        className="flex gap-2"
        onSubmit={async (e) => {
          e.preventDefault();
          setBusy(true);
          setReport(null);
          try {
            setReport(await call<Record<string, any>>("/v1/admin/discovery", { method: "POST", body: JSON.stringify({ url }) }));
          } catch {
            /* error shown above */
          } finally {
            setBusy(false);
          }
        }}
      >
        <input value={url} onChange={(e) => setUrl(e.target.value)} placeholder="https://example.com/markets/AAPL" className="mono h-11 flex-1 rounded-md border border-rule bg-surface px-3 text-sm outline-none focus:border-rule-strong" />
        <button type="submit" disabled={busy || !url} className="h-11 rounded-md bg-ink px-4 text-sm font-medium text-canvas disabled:opacity-50">
          {busy ? "Probing…" : "Discover"}
        </button>
      </form>
      <p className="text-xs text-ink-3">Network-level prototype: fetches the public page unauthenticated (SSRF-guarded), inventories referenced JSON/WebSocket/SSE endpoints and embedded state, and scores candidate quote sources. Output is a candidate report for rights review — nothing is activated.</p>
      {report && (
        <div className="space-y-3 rounded-md border border-rule bg-surface p-4 text-sm">
          <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
            <Stat label="HTTP" value={report.status} sub={report.content_type} />
            <Stat label="Bytes" value={formatCompact(report.bytes)} />
            <Stat label="WebSocket URLs" value={report.websocket_urls?.length ?? 0} />
            <Stat label="JSON candidates" value={report.json_endpoints?.length ?? 0} />
          </div>
          {report.websocket_urls?.length > 0 && (
            <div>
              <div className="text-[11px] font-medium uppercase tracking-wide text-ink-3">WebSocket endpoints</div>
              <ul className="mono text-xs">{(report.websocket_urls as string[]).map((u) => <li key={u}>{u}</li>)}</ul>
            </div>
          )}
          {report.json_endpoints?.length > 0 && (
            <div className="overflow-x-auto">
              <table className="table-dense">
                <thead>
                  <tr>
                    <th>Candidate endpoint</th>
                    <th className="text-right">Score</th>
                    <th>Hints</th>
                  </tr>
                </thead>
                <tbody>
                  {(report.json_endpoints as Array<Record<string, any>>).map((e) => (
                    <tr key={e.url}>
                      <td className="mono max-w-[520px] truncate text-xs">{e.url}</td>
                      <td className="num">{e.score}</td>
                      <td className="text-xs text-ink-2">{(e.hints as string[]).join(", ")}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
          {report.embedded_state?.length > 0 && (
            <div>
              <div className="text-[11px] font-medium uppercase tracking-wide text-ink-3">Embedded state</div>
              {(report.embedded_state as Array<Record<string, any>>).map((s) => (
                <div key={s.kind} className="mt-1 text-xs">
                  <span className="mono font-medium">{s.kind}</span> · fingerprint <span className="mono">{s.fingerprint}</span>
                  {s.price_like_fields?.length > 0 && <div className="text-ink-2">price-like: {s.price_like_fields.join(", ")}</div>}
                  {s.symbol_like_fields?.length > 0 && <div className="text-ink-2">symbol-like: {s.symbol_like_fields.join(", ")}</div>}
                </div>
              ))}
            </div>
          )}
          <ul className="list-disc pl-5 text-xs text-ink-2">{(report.notes as string[]).map((n) => <li key={n}>{n}</li>)}</ul>
        </div>
      )}
    </div>
  );
}