import { Search, Command, Sun, Moon, LogOut, Bot, type LucideIcon } from 'lucide-react';
import { useAppStore } from '@/store/appStore';
import { useTheme } from '@/hooks/useTheme';
import { useNavigate, useLocation } from 'react-router-dom';
import { clearToken } from '@/api/client';
import { useAgentSettings } from '@/contexts/AgentSettingsContext';

interface TopBarProps {
  title: string;
  icon?: LucideIcon;
  iconClassName?: string;
  description?: string;
  /** Extra inline content rendered after the title (e.g. counts) */
  badge?: React.ReactNode;
  children?: React.ReactNode;
}

export function TopBar({ title, icon: Icon, iconClassName, description, badge, children }: TopBarProps) {
  const { setCommandPaletteOpen } = useAppStore();
  const { theme, toggle } = useTheme();
  const navigate = useNavigate();
  const location = useLocation();
  const { enabled: agentEnabled } = useAgentSettings();
  const onAgentPage = location.pathname === '/agent';

  const handleLogout = () => {
    clearToken();
    navigate('/login');
  };

  return (
    <header className="sticky top-0 z-30 flex items-center justify-between h-16 px-4 md:px-6 border-b border-border bg-background/80 backdrop-blur-md gap-2">
      <div className="hidden md:grid grid-cols-[auto_1fr] items-center gap-x-2 min-w-0 shrink">
        {Icon && (
          <Icon className={`row-span-2 w-4.5 h-4.5 flex-shrink-0 self-start mt-1 ${iconClassName ?? 'text-foreground'}`} />
        )}
        <div className="flex items-center gap-2 min-w-0">
          <h1 className="font-display font-bold text-lg text-foreground truncate">{title}</h1>
          {badge}
        </div>
        {description && (
          <p className={`text-xs text-muted-foreground truncate mt-0.5 ${Icon ? 'col-start-2' : 'col-span-2'}`}>{description}</p>
        )}
      </div>
      <div className="flex items-center gap-1.5 md:ml-auto w-full md:w-auto">
        {children}
        {agentEnabled && !onAgentPage && (
          <button
            onClick={() => navigate('/agent')}
            className="relative p-1.5 rounded-xl bg-gradient-to-br from-violet-500 to-fuchsia-500 text-white shadow-sm hover:opacity-90 hover:shadow-md transition-all group"
            title="Open Workspace Agent (⌘J)"
          >
            <Bot className="w-4 h-4" />
            <kbd className="absolute -bottom-1 -right-1 hidden md:inline-flex items-center gap-px text-[8px] font-mono leading-none bg-background/90 text-foreground border border-border px-0.5 py-px rounded shadow-sm">
              <Command className="w-2 h-2" />J
            </kbd>
          </button>
        )}
        <button
          onClick={toggle}
          className="p-2 rounded-xl text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
          title={theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
        >
          {theme === 'dark' ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
        </button>
        <button
          onClick={() => setCommandPaletteOpen(true)}
          className="flex items-center gap-2 flex-1 md:flex-none px-3 py-1.5 rounded-xl bg-muted text-muted-foreground text-sm hover:bg-muted/80 transition-colors min-h-[36px] md:min-h-0"
        >
          <Search className="w-4 h-4 md:w-3.5 md:h-3.5 flex-shrink-0" />
          <span className="text-left flex-1 md:flex-none">Search...</span>
          <kbd className="hidden md:inline-flex items-center gap-0.5 text-xs font-mono bg-background px-1.5 py-0.5 rounded-md border border-border">
            <Command className="w-3 h-3" />K
          </kbd>
        </button>
        <button
          onClick={handleLogout}
          className="p-2 rounded-xl text-muted-foreground hover:text-destructive hover:bg-muted transition-colors"
          title="Sign out"
        >
          <LogOut className="w-4 h-4" />
        </button>
      </div>
    </header>
  );
}
