import { MoreHorizontal, RotateCcw, Square } from "lucide-react";
import { HelixMark } from "@/components/desk/mark";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { formatClock, formatSignedUsd, formatUsd } from "@/lib/fx/format";
import { accountSnapshot, useDesk } from "@/store/desk";

export function Header() {
  const now = useDesk((s) => s.now);
  const botOn = useDesk((s) => s.bot.enabled);
  useDesk((s) => s.balance);
  useDesk((s) => s.positions);
  useDesk((s) => s.market);
  useDesk((s) => s.dailyPnl);
  const snap = accountSnapshot();
  const closeAll = useDesk((s) => s.closeAll);
  const resetAccount = useDesk((s) => s.resetAccount);
  const posCount = useDesk((s) => s.positions.length);

  return (
    <header className="flex h-14 shrink-0 items-center gap-3 border-b border-border px-3 lg:px-4">
      <div className="flex items-center gap-2.5">
        <HelixMark className="size-7 text-foreground" />
        <div className="leading-none">
          <div className="text-sm font-semibold tracking-[0.18em]">HELIX</div>
          <div className="mt-0.5 text-2xs uppercase tracking-[0.16em] text-muted-foreground">
            FX Desk
          </div>
        </div>
      </div>

      <Badge variant="default" className="hidden sm:inline-flex">
        Paper
      </Badge>
      <Badge variant={botOn ? "live" : "default"} className="hidden sm:inline-flex gap-1.5">
        <span
          className={
            botOn
              ? "live-dot size-1.5 rounded-full bg-up"
              : "size-1.5 rounded-full bg-muted-foreground/50"
          }
        />
        {botOn ? "Bot live" : "Bot idle"}
      </Badge>

      <div className="ml-auto flex items-center gap-3 sm:gap-5">
        <Stat label="Equity" value={formatUsd(snap.equity)} />
        <Stat
          label="Open P&L"
          value={formatSignedUsd(snap.unrealized)}
          tone={snap.unrealized > 0 ? "up" : snap.unrealized < 0 ? "down" : undefined}
        />
        <Stat
          label="Day"
          value={formatSignedUsd(snap.dailyPnl)}
          tone={snap.dailyPnl > 0 ? "up" : snap.dailyPnl < 0 ? "down" : undefined}
          className="hidden md:flex"
        />
        <Stat label="Free" value={formatUsd(snap.free)} className="hidden lg:flex" />
        <div className="hidden flex-col items-end leading-none md:flex">
          <span className="text-2xs uppercase tracking-[0.14em] text-muted-foreground">UTC</span>
          <span className="font-mono text-xs tabular text-foreground">{formatClock(now)}</span>
        </div>
        {posCount > 0 && (
          <Button variant="outline" size="sm" onClick={closeAll} className="hidden sm:inline-flex">
            <Square className="size-3.5" />
            Flatten
          </Button>
        )}
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="ghost" size="icon" aria-label="Desk menu">
              <MoreHorizontal className="size-4" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            <DropdownMenuItem onSelect={() => closeAll()}>Flatten all</DropdownMenuItem>
            <DropdownMenuItem onSelect={() => resetAccount()}>
              <RotateCcw className="size-3.5" />
              Reset paper account
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
    </header>
  );
}

function Stat({
  label,
  value,
  tone,
  className,
}: {
  label: string;
  value: string;
  tone?: "up" | "down";
  className?: string;
}) {
  return (
    <div className={`flex flex-col items-end leading-none ${className ?? ""}`}>
      <span className="text-2xs uppercase tracking-[0.14em] text-muted-foreground">{label}</span>
      <span
        className={`font-mono text-xs tabular ${
          tone === "up" ? "text-up" : tone === "down" ? "text-down" : "text-foreground"
        }`}
      >
        {value}
      </span>
    </div>
  );
}