import { useEffect, type ReactNode } from 'react';
import { NavLink, useNavigate } from 'react-router-dom';
import { StatusBar } from './StatusBar';

const NAV_ITEMS = [
  { path: '/trading', label: 'Trading', key: 'T' },
  { path: '/risk', label: 'Risk', key: 'R' },
  { path: '/ml', label: 'ML', key: 'M' },
  { path: '/performance', label: 'Performance', key: 'P' },
  { path: '/backtest', label: 'Backtest', key: 'B' },
  { path: '/config', label: 'Config', key: 'C' },
] as const;

interface Props {
  children: ReactNode;
}

export function DashboardLayout({ children }: Props) {
  const navigate = useNavigate();

  // Keyboard shortcuts (same as TLI: T/R/M/P/B/C)
  useEffect(() => {
    function handleKey(e: KeyboardEvent) {
      // Ignore if typing in an input
      if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;

      const item = NAV_ITEMS.find((i) => i.key === e.key.toUpperCase());
      if (item) {
        navigate(item.path);
      }
    }
    window.addEventListener('keydown', handleKey);
    return () => window.removeEventListener('keydown', handleKey);
  }, [navigate]);

  return (
    <div className="flex flex-col h-screen">
      {/* Top navigation */}
      <nav aria-label="Dashboard navigation" className="flex items-center gap-1 px-4 py-2 bg-[var(--color-bg-secondary)] border-b border-[var(--color-border)]">
        <span className="text-sm font-bold text-[var(--color-accent)] mr-4">FOXHUNT</span>
        {NAV_ITEMS.map((item) => (
          <NavLink
            key={item.path}
            to={item.path}
            className={({ isActive }) =>
              `px-3 py-1.5 text-sm rounded transition-colors ${
                isActive
                  ? 'bg-[var(--color-accent)] text-white'
                  : 'text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-primary)]'
              }`
            }
          >
            {item.label}
            <span className="ml-1 text-xs opacity-50">({item.key})</span>
          </NavLink>
        ))}
      </nav>

      {/* Main content */}
      <main className="flex-1 overflow-auto p-4">{children}</main>

      {/* Status bar */}
      <StatusBar />
    </div>
  );
}
