frontend/src/components/Header.tsx

import { Database, Sun, Moon, PanelLeftOpen, PanelRightOpen, Cpu, Play, PlugZap } from 'lucide-react'
import { useStore } from '../store/useStore'

interface HeaderProps {
  onToggleLeft: () => void
  onToggleRight: () => void
  onDemo: () => void
  onConnectDb: () => void
}

export function Header({ onToggleLeft, onToggleRight, onDemo, onConnectDb }: HeaderProps) {
  const { theme, toggleTheme, dbSeeded, dbLabel } = useStore()

  return (
    <header
      className="border-b px-3 sm:px-5 py-3 flex items-center justify-between shrink-0 backdrop-blur-sm sticky top-0 z-50 theme-border"
      style={{ background: 'var(--bg-secondary)' }}
    >
      <div className="flex items-center gap-2 sm:gap-3">
        {/* Mobile sidebar toggle */}
        <button
          onClick={onToggleLeft}
          className="lg:hidden flex items-center gap-1 px-2 py-1.5 rounded-lg hover:bg-white/5 text-gray-400 hover:text-white transition-colors text-[10px]"
        >
          <PanelLeftOpen size={14} />
          <span className="hidden sm:inline">Data</span>
        </button>

        {/* Logo */}
        <div
          className="w-7 h-7 rounded-lg flex items-center justify-center shadow-lg shrink-0"
          style={{ background: '#1e3a5f', boxShadow: '0 4px 12px rgba(30,58,95,0.4)' }}
        >
          <Database size={13} className="text-white" />
        </div>

        {/* Title */}
        <div>
          <h1 className="text-sm font-bold text-white tracking-tight leading-none">
            Self-Improving SQL Agent
          </h1>
          <p className="text-[10px] text-gray-600 hidden sm:block mt-0.5">
            LinUCB · GEPA · OpenEnv
          </p>
        </div>
      </div>

      <div className="flex items-center gap-2 sm:gap-3">
        {/* Connection status */}
        {dbSeeded ? (
          <div className="hidden sm:flex items-center gap-1.5 text-[10px] text-green-400 max-w-[140px] truncate">
            <span className="w-1.5 h-1.5 rounded-full bg-green-400 inline-block shrink-0" />
            <span className="truncate">{dbLabel}</span>
          </div>
        ) : (
          <div className="hidden sm:flex items-center gap-1.5 text-[10px] text-amber-400">
            <span className="w-1.5 h-1.5 rounded-full bg-amber-400 inline-block animate-pulse" />
            connecting...
          </div>
        )}

        {/* RL indicator */}
        <div className="hidden md:flex items-center gap-1.5 text-[10px] text-violet-400 border border-violet-500/20 rounded-full px-2 py-0.5">
          <Cpu size={10} />
          LinUCB Active
        </div>

        {/* Connect DB button */}
        <button
          onClick={onConnectDb}
          className="hidden sm:flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-[11px] font-medium transition-all hover:bg-white/5 theme-border border"
          style={{ color: 'var(--text-muted)' }}
          title={`Active: ${dbLabel}`}
        >
          <PlugZap size={11} />
          <span className="hidden md:inline">Connect DB</span>
        </button>

        {/* Demo button */}
        <button
          onClick={onDemo}
          className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-[11px] font-semibold text-white transition-all active:scale-95"
          style={{ background: 'linear-gradient(135deg,#7c3aed,#2563eb)', boxShadow: '0 4px 12px rgba(124,58,237,0.35)' }}
        >
          <Play size={10} fill="currentColor" />
          <span>Demo</span>
        </button>

        {/* Theme toggle */}
        <button
          onClick={toggleTheme}
          className="p-1.5 rounded-lg hover:bg-white/5 transition-colors theme-text-muted"
          title={theme === 'dark' ? 'Switch to light' : 'Switch to dark'}
        >
          {theme === 'dark' ? <Sun size={14} /> : <Moon size={14} />}
        </button>

        {/* Mobile right sidebar toggle */}
        <button
          onClick={onToggleRight}
          className="lg:hidden flex items-center gap-1 px-2 py-1.5 rounded-lg hover:bg-white/5 text-gray-400 hover:text-white transition-colors text-[10px]"
        >
          <span className="hidden sm:inline">GEPA</span>
          <PanelRightOpen size={14} />
        </button>
      </div>
    </header>
  )
}