import { useEffect } from "react";
import { toast } from "sonner";
import { BotPanel } from "@/components/desk/bot-panel";
import { Chart } from "@/components/desk/chart";
import { Header } from "@/components/desk/header";
import { StatusBar } from "@/components/desk/status-bar";
import { BottomDock } from "@/components/desk/tables";
import { Ticket } from "@/components/desk/ticket";
import { Watchlist } from "@/components/desk/watchlist";
import { useDesk } from "@/store/desk";

const TICK_MS = 280;

export function Desk() {
  const tick = useDesk((s) => s.tick);
  const rehydrate = useDesk((s) => s.rehydrate);

  useEffect(() => {
    rehydrate();
    const id = window.setInterval(tick, TICK_MS);
    return () => window.clearInterval(id);
  }, [tick, rehydrate]);

  useEffect(() => {
    let prev = useDesk.getState().lastFillId;
    return useDesk.subscribe((s) => {
      if (!s.lastFillId || s.lastFillId === prev) return;
      prev = s.lastFillId;
      const fill = s.fills.find((f) => f.id === s.lastFillId);
      if (!fill || fill.pnl != null) return;
      if (fill.source !== "bot") return;
      toast.success(`BOT ${fill.side.toUpperCase()} ${fill.pair} ${fill.lots.toFixed(2)}`);
    });
  }, []);

  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      const t = e.target as HTMLElement | null;
      if (t && (t.tagName === "INPUT" || t.tagName === "SELECT" || t.isContentEditable)) return;
      const s = useDesk.getState();
      if (e.key === "b" || e.key === "B") {
        s.marketOrder("buy", s.ticket.lots, s.ticket.slPips, s.ticket.tpPips, "manual", "Hotkey");
      }
      if (e.key === "s" || e.key === "S") {
        s.marketOrder("sell", s.ticket.lots, s.ticket.slPips, s.ticket.tpPips, "manual", "Hotkey");
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  return (
    <div className="flex min-h-dvh flex-col bg-background text-foreground lg:h-dvh lg:max-h-dvh lg:overflow-hidden">
      <Header />
      <div className="grid min-h-0 flex-1 grid-cols-1 lg:grid-cols-[14rem_minmax(0,1fr)_20rem] lg:grid-rows-[minmax(0,1fr)_14rem]">
        <aside className="border-b border-border lg:row-span-2 lg:border-r lg:border-b-0">
          <Watchlist />
        </aside>
        <div className="h-80 min-h-80 lg:h-auto lg:min-h-0">
          <Chart />
        </div>
        <aside className="border-t border-border lg:col-start-3 lg:row-start-1 lg:row-span-2 lg:border-t-0 lg:border-l lg:overflow-y-auto">
          <Ticket />
          <BotPanel />
        </aside>
        <div className="h-56 border-t border-border lg:col-start-2 lg:row-start-2 lg:h-auto">
          <BottomDock />
        </div>
      </div>
      <StatusBar />
    </div>
  );
}