import { Lock } from "lucide-react";
import { Badge, Card, Empty, PageHeader } from "@/components/ui";

const CHECKLIST = [
  ["Owner confirmation in the UI (second confirmation)", "Live mode can never be enabled by a background process or an agent."],
  ["Trade-key permission verified by preflight", "Separate least-privilege key with order permission only; withdrawal permission is never used."],
  ["Risk budget selected", "Per-order, per-symbol, daily-loss and drawdown limits acknowledged for the live book."],
  ["Small-size canary completed", "A documented minimum-size order cycle before any strategy is allowed to route live."],
  ["Feature flag KTRADE_LIVE_TRADING_ENABLED=true", "Server-side gate; off by default and in every deployment so far."],
];

export default function ExecutionPage() {
  return (
    <>
      <PageHeader title="Execution Console" subtitle="Order lifecycle, routing status, Kraken error codes, latency and reconciliation. Paper routing arrives in Phase 4; the live adapter in Phase 5." />
      <div className="mb-4 flex gap-2" role="tablist" aria-label="Execution environment">
        <button role="tab" aria-selected="true" className="rounded-md border border-accent bg-accent-soft px-3 py-1.5 text-xs">Paper</button>
        <button role="tab" aria-selected="false" aria-disabled="true" disabled className="inline-flex items-center gap-1.5 rounded-md border border-line-strong px-3 py-1.5 text-xs text-fg-dim"><Lock className="h-3 w-3" /> Live <Badge tone="muted">locked</Badge></button>
      </div>
      <div className="grid gap-4 md:grid-cols-2">
        <Card title="Order lifecycle"><Empty title="No orders">No paper or live orders have been created. Order ids are idempotent client ids (cl_ord_id) so retries can never duplicate an order.</Empty></Card>
        <Card title="Live activation checklist" subtitle="All items are required, in order. None is satisfied.">
          <ol className="space-y-2">
            {CHECKLIST.map(([t, d]) => (
              <li key={t} className="flex items-start gap-2 text-xs">
                <input type="checkbox" disabled aria-label={t} className="mt-0.5" />
                <span><span className="font-medium text-fg">{t}</span><br /><span className="text-fg-dim">{d}</span></span>
              </li>
            ))}
          </ol>
        </Card>
      </div>
    </>
  );
}