"use client";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { Activity, BarChart3, BookOpen, Briefcase, FlaskConical, Gauge, LayoutDashboard, LogOut, Menu, Radio, Settings, ShieldAlert, TerminalSquare, X } from "lucide-react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useState } from "react";
import { api } from "@/lib/api";
import type { RiskStatus, SystemStatus } from "@/lib/types";
import { Badge, Button, Dot, cx } from "./ui";

const NAV = [
  { href: "/", label: "Overview", icon: LayoutDashboard },
  { href: "/market", label: "Market Explorer", icon: Activity },
  { href: "/lab", label: "Strategy Lab", icon: FlaskConical },
  { href: "/backtests", label: "Backtest Explorer", icon: BarChart3 },
  { href: "/portfolio", label: "Portfolio Optimizer", icon: Briefcase },
  { href: "/paper", label: "Paper Trading", icon: Radio },
  { href: "/execution", label: "Execution Console", icon: TerminalSquare },
  { href: "/risk", label: "Risk Center", icon: ShieldAlert },
  { href: "/reports", label: "Research Reports", icon: BookOpen },
  { href: "/settings", label: "Settings", icon: Settings },
];

export function useSystemStatus() {
  return useQuery({ queryKey: ["system-status"], queryFn: () => api<SystemStatus>("/api/system/status"), refetchInterval: 15_000 });
}
export function useRiskStatus() {
  return useQuery({ queryKey: ["risk-status"], queryFn: () => api<RiskStatus>("/api/risk/status"), refetchInterval: 15_000 });
}

export function Shell({ children }: { children: React.ReactNode }) {
  const [open, setOpen] = useState(false);
  const pathname = usePathname();
  const sys = useSystemStatus();
  const risk = useRiskStatus();
  const qc = useQueryClient();
  const mode = sys.data?.mode ?? "offline";
  const ks = risk.data?.kill_switch?.active;

  async function logout() {
    await api("/api/auth/logout", { method: "POST", headers: { Origin: window.location.origin } });
    qc.clear();
    // eslint-disable-next-line @next/next/no-location-assign-relative-destination -- full reload clears client state
    window.location.href = "/login";
  }

  const nav = (
    <nav aria-label="Main" className="flex flex-col gap-0.5 p-2">
      {NAV.map(({ href, label, icon: Icon }) => {
        const active = href === "/" ? pathname === "/" : pathname.startsWith(href);
        return (
          <Link key={href} href={href} onClick={() => setOpen(false)} aria-current={active ? "page" : undefined} className={cx("flex items-center gap-2.5 rounded-md px-2.5 py-2 text-sm transition", active ? "bg-accent-soft text-fg" : "text-fg-muted hover:bg-bg-sub hover:text-fg")}>
            <Icon className="h-4 w-4 shrink-0" aria-hidden />
            <span>{label}</span>
          </Link>
        );
      })}
    </nav>
  );

  return (
    <div className="flex min-h-screen">
      <aside className="no-print hidden w-56 shrink-0 border-r border-line bg-bg-elev lg:block">
        <div className="flex h-12 items-center gap-2 border-b border-line px-4">
          <Gauge className="h-4 w-4 text-accent" aria-hidden />
          <span className="font-semibold tracking-tight">ktrade</span>
          <span className="text-[10px] text-fg-dim">Kraken spot</span>
        </div>
        {nav}
      </aside>
      {open && (
        <div className="fixed inset-0 z-40 lg:hidden" onClick={() => setOpen(false)}>
          <div className="absolute inset-0 bg-black/60" />
          <aside className="absolute left-0 top-0 h-full w-64 border-r border-line bg-bg-elev" onClick={(e) => e.stopPropagation()}>
            <div className="flex h-12 items-center justify-between border-b border-line px-4">
              <span className="font-semibold">ktrade</span>
              <button aria-label="Close menu" onClick={() => setOpen(false)}><X className="h-4 w-4" /></button>
            </div>
            {nav}
          </aside>
        </div>
      )}
      <div className="flex min-w-0 flex-1 flex-col">
        {mode === "live" && (
          <div role="alert" className="bg-live px-4 py-1.5 text-center text-xs font-bold uppercase tracking-widest text-white">LIVE TRADING ACTIVE — real orders can reach Kraken</div>
        )}
        <header className="no-print flex h-12 items-center gap-3 border-b border-line bg-bg-elev px-3 sm:px-4">
          <button className="rounded p-1 text-fg-muted hover:bg-bg-sub lg:hidden" aria-label="Open menu" onClick={() => setOpen(true)}><Menu className="h-5 w-5" /></button>
          <ModeBadge mode={mode} />
          <div className="ml-1 hidden items-center gap-3 text-xs text-fg-muted sm:flex">
            <span className="flex items-center gap-1.5" title={sys.data?.kraken?.error ?? sys.data?.kraken?.status}><Dot ok={sys.data ? sys.data.kraken?.status === "online" : null} /> Kraken {sys.data?.kraken?.status ?? "…"}</span>
            <span className="flex items-center gap-1.5"><Dot ok={sys.data ? !!sys.data.stream?.connected : null} /> stream {sys.data?.stream ? (sys.data.stream.connected ? "live" : "down") : "n/a"}</span>
            {ks !== undefined && <span className="flex items-center gap-1.5"><Dot ok={!ks} /> kill switch {ks ? <span className="font-semibold text-down">ACTIVE</span> : "armed"}</span>}
          </div>
          <div className="ml-auto flex items-center gap-2">
            {ks && <Badge tone="down" className="sm:hidden">kill</Badge>}
            <Button size="sm" variant="ghost" onClick={logout} aria-label="Log out"><LogOut className="h-3.5 w-3.5" /> <span className="hidden sm:inline">Logout</span></Button>
          </div>
        </header>
        <main className="min-w-0 flex-1 p-3 sm:p-4 lg:p-6">{children}</main>
      </div>
    </div>
  );
}

export function ModeBadge({ mode }: { mode: string }) {
  if (mode === "live") return <Badge tone="live">LIVE</Badge>;
  if (mode === "paper") return <Badge tone="accent">PAPER</Badge>;
  return <Badge tone="muted">OFFLINE</Badge>;
}