"use client";
import { useQuery } from "@tanstack/react-query";
import Link from "next/link";
import { useRiskStatus, useSystemStatus } from "@/components/shell";
import { Badge, Card, Dot, Empty, ErrorBox, KV, PageHeader, Spinner, Table, Td, Th, Tile } from "@/components/ui";
import { api } from "@/lib/api";
import { fmtAge, fmtBps, fmtNum, fmtPct, fmtPctPlain, fmtPrice, fmtUsd, signClass } from "@/lib/format";
import type { OverviewSymbol, RunRow } from "@/lib/types";

export default function OverviewPage() {
  const sys = useSystemStatus();
  const risk = useRiskStatus();
  const ov = useQuery({ queryKey: ["overview"], queryFn: () => api<{ symbols: OverviewSymbol[] }>("/api/market/overview"), refetchInterval: 5_000 });
  const runs = useQuery({ queryKey: ["runs", 5], queryFn: () => api<{ items: RunRow[] }>("/api/backtests?limit=5"), refetchInterval: 10_000 });
  const s = sys.data;
  return (
    <>
      <PageHeader title="Overview" subtitle="Portfolio, universe, connectivity and risk posture at a glance." />
      <div className="grid grid-cols-2 gap-3 md:grid-cols-3 xl:grid-cols-6">
        <Tile label="Total equity" value="—" sub="paper ledger not started (Phase 4)" tone="muted" />
        <Tile label="Cash" value="—" sub="paper ledger not started (Phase 4)" tone="muted" />
        <Tile label="Realized / unrealized P&L" value="—" sub="no fills yet" tone="muted" />
        <Tile label="Gross exposure" value={fmtUsd(0)} sub="no positions" tone="muted" />
        <Tile label="Trading mode" value={<span className="uppercase">{s?.mode ?? "…"}</span>} sub={s?.live_trading_enabled ? "live flag ON" : "live flag off"} tone={s?.mode === "live" ? "down" : "muted"} />
        <Tile label="Kill switch" value={risk.data ? (risk.data.kill_switch.active ? "ACTIVE" : "armed") : "…"} sub={risk.data?.kill_switch.reason ?? "blocks all new orders when active"} tone={risk.data?.kill_switch.active ? "down" : "up"} />
      </div>

      <div className="mt-4 grid gap-4 xl:grid-cols-3">
        <Card title="Universe" subtitle="Live ticker from the Kraken WebSocket; realized vol from stored hourly bars." className="xl:col-span-2">
          {ov.isLoading && <Spinner />}
          {ov.error && <ErrorBox error={ov.error} />}
          {ov.data && (
            <Table>
              <thead>
                <tr>
                  <Th>Symbol</Th><Th align="right">Last</Th><Th align="right">24h</Th><Th align="right">Bid / Ask</Th><Th align="right">Spread</Th><Th align="right">24h volume</Th><Th align="right">RV 7d (ann.)</Th><Th align="right">1h bars</Th><Th>Data</Th>
                </tr>
              </thead>
              <tbody>
                {ov.data.symbols.map((r) => (
                  <tr key={r.symbol} className="hover:bg-bg-sub">
                    <Td><Link href={`/market?symbol=${encodeURIComponent(r.symbol)}`} className="font-medium text-accent hover:underline">{r.symbol}</Link></Td>
                    <Td align="right" num>{fmtPrice(r.last)}</Td>
                    <Td align="right" num className={signClass(r.change_pct)}>{fmtPct(r.change_pct, 2, true)}</Td>
                    <Td align="right" num>{fmtPrice(r.bid)} / {fmtPrice(r.ask)}</Td>
                    <Td align="right" num>{fmtBps(r.spread_bps, 2)}</Td>
                    <Td align="right" num>{fmtNum(r.volume, 0)}</Td>
                    <Td align="right" num>{fmtPctPlain(r.rv_7d_annualized)}</Td>
                    <Td align="right" num>{r.hourly_bars}</Td>
                    <Td>{r.stale ? <Badge tone="warn">stale {fmtAge(r.age_s)}</Badge> : <Badge tone="up">live {fmtAge(r.age_s)}</Badge>}</Td>
                  </tr>
                ))}
              </tbody>
            </Table>
          )}
        </Card>
        <div className="flex flex-col gap-4">
          <Card title="Exchange connectivity">
            {sys.isLoading && <Spinner />}
            {sys.error && <ErrorBox error={sys.error} />}
            {s && (
              <KV items={[
                ["Kraken status", <span key="k" className="flex items-center gap-1.5"><Dot ok={s.kraken.status === "online"} /> {s.kraken.status}{s.kraken.error ? ` — ${s.kraken.error}` : ""}</span>],
                ["REST round-trip", s.kraken.rtt_ms != null ? `${s.kraken.rtt_ms} ms` : "—"],
                ["Clock drift", s.kraken.clock_drift_s != null ? `${s.kraken.clock_drift_s.toFixed(2)} s` : "—"],
                ["WebSocket", s.stream ? <span key="w" className="flex items-center gap-1.5"><Dot ok={s.stream.connected} /> {s.stream.connected ? "connected" : "disconnected"} · {s.stream.messages.toLocaleString()} msgs · {s.stream.reconnects} reconnects · {s.stream.checksum_failures} checksum fails</span> : "worker not reporting"],
                ["Last message", s.stream?.last_msg_age != null ? `${s.stream.last_msg_age}s ago` : "—"],
                ["Data key", s.credentials.data_key ? "configured" : "not configured"],
                ["Trade key", s.credentials.trade_key ? "configured" : "not configured"],
              ]} />
            )}
          </Card>
          <Card title="Active strategies" subtitle="Paper/live strategy runners arrive in Phase 4.">
            <Empty title="No strategies running">Backtests run on demand from the Strategy Lab; there is no scheduled execution yet.</Empty>
          </Card>
          <Card title="Risk limits">
            {risk.data && (
              <KV items={[
                ["Max order notional", fmtUsd(risk.data.limits.max_order_notional, 0)],
                ["Max position notional", fmtUsd(risk.data.limits.max_position_notional, 0)],
                ["Max gross exposure", `${risk.data.limits.max_gross_exposure}×`],
                ["Daily loss limit", fmtPctPlain(risk.data.limits.daily_loss_limit)],
                ["Max drawdown", fmtPctPlain(risk.data.limits.max_drawdown_limit)],
                ["Stale data cutoff", `${risk.data.limits.stale_data_seconds}s`],
              ]} />
            )}
            <Link href="/risk" className="mt-3 inline-block text-xs text-accent hover:underline">Open Risk Center →</Link>
          </Card>
        </div>
      </div>
      <Card title="Recent backtests" className="mt-4" actions={<Link href="/backtests" className="text-xs text-accent hover:underline">All runs →</Link>}>
        {runs.data?.items.length ? (
          <Table>
            <thead><tr><Th>Status</Th><Th>Strategy</Th><Th>Symbol</Th><Th align="right">Interval</Th><Th align="right">Sharpe</Th><Th align="right">Return</Th><Th align="right">Max DD</Th></tr></thead>
            <tbody>
              {runs.data.items.map((r) => (
                <tr key={r.id} className="hover:bg-bg-sub">
                  <Td><Link href={`/backtests/${r.id}`} className="text-accent hover:underline"><StatusBadge status={r.status} /></Link></Td>
                  <Td>{r.strategy}</Td><Td>{r.symbol}</Td><Td align="right" num>{r.interval_min}m</Td>
                  <Td align="right" num>{fmtNum(r.sharpe)}</Td><Td align="right" num className={signClass(r.total_return)}>{fmtPct(r.total_return)}</Td><Td align="right" num className="text-down">{fmtPct(r.max_drawdown)}</Td>
                </tr>
              ))}
            </tbody>
          </Table>
        ) : <Empty title="No backtests yet">Launch one from the Strategy Lab.</Empty>}
      </Card>
    </>
  );
}

export function StatusBadge({ status }: { status: string }) {
  const tone = status === "done" ? "up" : status === "failed" ? "down" : status === "running" ? "accent" : "muted";
  return <Badge tone={tone}>{status}</Badge>;
}