"use client";
import { useMutation, useQuery } from "@tanstack/react-query";
import { useSystemStatus } from "@/components/shell";
import { Badge, Button, Card, Empty, ErrorBox, KV, PageHeader, Spinner, Table, Td, Th } from "@/components/ui";
import { api, ApiError } from "@/lib/api";

type Preflight = { checked_at: number; data_key: Record<string, { ok?: boolean; permission_denied?: boolean; error?: string; has_trade_permission?: boolean | null }> & { warning?: string } | null; trade_key: Record<string, unknown> | null };

export default function SettingsPage() {
  const sys = useSystemStatus();
  const balance = useQuery({ queryKey: ["balance"], queryFn: () => api<{ balances: Record<string, string>; fetched_at: number }>("/api/account/balance"), retry: false, enabled: !!sys.data?.credentials.data_key });
  const preflight = useMutation({ mutationFn: () => api<Preflight>("/api/account/preflight", { method: "POST" }) });
  const s = sys.data;
  const pf = (preflight.data ?? s?.preflight) as Preflight | null | undefined;
  return (
    <>
      <PageHeader title="Settings" subtitle="Credentials are injected server-side and never displayed. Only their presence and probed permissions are shown." />
      <div className="grid gap-4 md:grid-cols-2">
        <Card title="Exchange credentials" subtitle="Least privilege: data/account key must not have order permission; the trade key is only read when live mode is armed." actions={<Button size="sm" loading={preflight.isPending} onClick={() => preflight.mutate()} disabled={!s?.credentials.data_key && !s?.credentials.trade_key}>Run preflight</Button>}>
          {sys.isLoading && <Spinner />}
          {s && (
            <KV items={[
              ["Data / account key", s.credentials.data_key ? <Badge key="d" tone="up">configured</Badge> : <Badge key="d" tone="muted">not configured</Badge>],
              ["Trade key", s.credentials.trade_key ? <Badge key="t" tone="warn">configured (live flag off)</Badge> : <Badge key="t" tone="muted">not configured</Badge>],
              ["Withdrawal permission", <span key="w" className="text-fg-muted">{s.credentials.withdrawal}</span>],
              ["Live trading flag", s.live_trading_enabled ? <Badge key="l" tone="down">ENABLED</Badge> : <Badge key="l" tone="up">disabled</Badge>],
            ]} />
          )}
          {preflight.error && <div className="mt-3"><ErrorBox error={preflight.error instanceof ApiError ? preflight.error : String(preflight.error)} /></div>}
          {pf ? (
            <div className="mt-3 text-xs">
              <div className="mb-1 text-fg-dim">Preflight {pf.checked_at ? `at ${new Date(pf.checked_at * 1000).toISOString().slice(0, 19)}Z` : ""}</div>
              {pf.data_key?.warning && <div role="alert" className="mb-2 rounded border border-warn/40 bg-warn/10 px-2 py-1 text-warn">{pf.data_key.warning}</div>}
              {pf.data_key ? (
                <Table><thead><tr><Th>Probe (data key)</Th><Th>Result</Th></tr></thead><tbody>{Object.entries(pf.data_key).filter(([k]) => k !== "warning").map(([k, v]) => <tr key={k}><Td>{k}</Td><Td>{"has_trade_permission" in (v as object) ? ((v as { has_trade_permission?: boolean | null }).has_trade_permission ? <Badge tone="warn">has order permission</Badge> : <Badge tone="up">no order permission</Badge>) : (v as { ok?: boolean }).ok ? <Badge tone="up">ok</Badge> : <span className="text-down">{(v as { error?: string }).error}</span>}</Td></tr>)}</tbody></Table>
              ) : <p className="text-fg-dim">No data key to probe.</p>}
              {pf.trade_key && <pre className="mt-2 overflow-auto rounded bg-bg p-2 text-[11px]">{JSON.stringify(pf.trade_key, null, 1)}</pre>}
            </div>
          ) : <p className="mt-3 text-xs text-fg-dim">No preflight has been run. The trade-permission probe uses AddOrder with validate=true on an order that could never fill; it is recorded in the audit log.</p>}
        </Card>
        <Card title="Account balances" subtitle="Read-only Balance endpoint; non-zero assets only.">
          {!s?.credentials.data_key ? <Empty title="No data key configured">Set KTRADE_KRAKEN_API_KEY / SECRET on the server to enable account reads.</Empty> : balance.isLoading ? <Spinner /> : balance.error ? <ErrorBox error={balance.error} /> : balance.data && Object.keys(balance.data.balances).length ? (
            <Table><thead><tr><Th>Asset</Th><Th align="right">Amount</Th></tr></thead><tbody>{Object.entries(balance.data.balances).map(([k, v]) => <tr key={k}><Td>{k}</Td><Td align="right" num>{v}</Td></tr>)}</tbody></Table>
          ) : <Empty title="No non-zero balances" />}
        </Card>
        <Card title="Environment">
          {s && <KV items={[["Environment", s.env], ["Version", s.version], ["Trading mode", s.mode], ["Universe", s.universe.join(", ")], ["Candle intervals", s.intervals.map((i) => `${i}m`).join(", ")], ["TimescaleDB", s.timescale ? "enabled (hypertables)" : "not installed (plain tables with indexes)"], ["Kraken REST", `${s.kraken.status}${s.kraken.rtt_ms != null ? ` · ${s.kraken.rtt_ms} ms` : ""}`]]} />}
        </Card>
        <Card title="Alerts, access control, retention" subtitle="Planned for Phase 4.">
          <ul className="list-disc space-y-1 pl-5 text-xs text-fg-muted">
            <li>Alert channels (e-mail / webhook) for circuit breakers, staleness and reconciliation mismatches.</li>
            <li>Single-owner sessions today; role-based viewers/operators later.</li>
            <li>Retention: trades 30 days, book samples 14 days (enforced by the worker); candles and audit log kept indefinitely; Postgres backups via the operator runbook.</li>
          </ul>
        </Card>
      </div>
    </>
  );
}