
import { Search, Settings, Home, Target, Cpu, Wrench, FileText } from 'lucide-react';
import { cn } from '../../lib/utils';

export type TabId = 'dashboard' | 'requirements' | 'capabilities' | 'tools' | 'knowledge';

interface NavbarProps {
  activeTab: TabId;
  onTabChange: (tab: TabId) => void;
}

const TABS = [
  { id: 'dashboard', label: 'Dashboard', icon: Home },
  { id: 'requirements', label: '需求库', icon: Target },
  { id: 'capabilities', label: '能力库', icon: Cpu },
  { id: 'tools', label: '工具库', icon: Wrench },
  { id: 'knowledge', label: '知识库', icon: FileText },
] as const;

export function Navbar({ activeTab, onTabChange }: NavbarProps) {
  return (
    <nav className="sticky top-0 z-50 h-[60px] bg-white/95 backdrop-blur-md border-b border-slate-100 shadow-sm flex items-center justify-between px-6">
      <div className="flex items-center gap-8">
        <div className="flex items-center gap-3">
          <div className="w-9 h-9 bg-indigo-600 rounded-xl shadow-lg shadow-indigo-100 flex items-center justify-center text-white font-black">
            K
          </div>
          <span className="font-black text-lg tracking-tight text-slate-900">K-OS</span>
        </div>
        
        <div className="flex items-center gap-1 h-full pt-1">
          {TABS.map(tab => {
            const isActive = activeTab === tab.id;
            const Icon = tab.icon;
            return (
              <button
                key={tab.id}
                onClick={() => onTabChange(tab.id as TabId)}
                className={cn(
                  "relative px-4 h-[59px] flex items-center gap-2 text-sm transition-colors",
                  isActive ? "text-indigo-600 font-bold" : "text-slate-500 hover:text-slate-700 font-medium"
                )}
              >
                <Icon size={16} />
                {tab.label}
                {isActive && (
                  <div className="absolute bottom-0 left-0 w-full h-[2px] bg-indigo-600 rounded-t-full" />
                )}
              </button>
            );
          })}
        </div>
      </div>
      
      <div className="flex items-center gap-4">
        <div className="relative">
          <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
          <input 
            type="text" 
            placeholder="Search KnowHub..." 
            className="bg-slate-50 border border-transparent rounded-xl py-2 pl-10 pr-4 w-64 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500/20 focus:bg-white focus:border-indigo-100 transition-all text-slate-700 placeholder:text-slate-400"
          />
        </div>
        <button className="h-8 w-8 flex items-center justify-center rounded-xl bg-slate-50 border border-slate-100 text-slate-400 hover:text-indigo-600 transition-colors">
          <Settings size={16} />
        </button>
      </div>
    </nav>
  );
}
