"use client";

import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { useCallback } from "react";

import { getNavItems, isActive } from "@/lib/nav";
import { useHotkey } from "@/lib/hooks/use-hotkey";

export function RailNav({ microstructureEnabled }: { microstructureEnabled: boolean }) {
  const pathname = usePathname();
  const router = useRouter();
  const navItems = getNavItems(microstructureEnabled);
  const navigate = useCallback(
    (href: string) => {
      router.push(href);
    },
    [router],
  );

  useHotkey("1", () => navigate("/"));
  useHotkey("2", () => navigate("/dashboards"));
  useHotkey("3", () => navigate("/signals"));
  useHotkey("4", () => navigate("/composite"));
  useHotkey("5", () => navigate("/options"));
  useHotkey("6", () => navigate("/perps"));
  useHotkey("7", () => {
    if (microstructureEnabled) {
      navigate("/microstructure");
    }
  });
  useHotkey("8", () => navigate("/execution"));
  useHotkey("9", () => navigate("/datasets"));
  useHotkey("0", () => navigate("/runs"));
  useHotkey("-", () => navigate("/engines"));

  return (
    <nav className="railNav">
      <div className="railBrand">uf</div>
      <div className="railItems">
        {navItems.map((item) => (
          <Link
            key={item.href}
            href={item.href}
            prefetch={false}
            className={`railItem ${isActive(pathname, item.href, item.exact) ? "active" : ""}`}
          >
            <span className="railKey">{item.shortcut}</span>
            <span className="railLabel">{item.label}</span>
          </Link>
        ))}
      </div>
    </nav>
  );
}
