import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Cloud, Expand, Search, SunMoon } from 'lucide-react';
const commands=[['Patients','/patients'],['Cases & scans','/cases'],['Manufacturing','/manufacturing'],['Quality control','/quality'],['Material, shade & tooth libraries','/libraries'],['AI, roles, diagnostics & licensing','/settings']];
const StudioHeader = ({ onTheme }) => {
  const [query,setQuery]=useState(''); const navigate=useNavigate();
  const results=query?commands.filter(([name])=>name.toLowerCase().includes(query.toLowerCase())):[];
  const go=path=>{navigate(path);setQuery('')};
  return <header className="relative flex h-16 items-center gap-3 border-b border-white/[.06] px-4 lg:px-6">
    <div className="relative max-w-xl flex-1">
      <Search className="absolute left-3 top-2.5 h-4 w-4 text-slate-600" />
      <input value={query} onChange={e=>setQuery(e.target.value)} onKeyDown={e=>e.key==='Enter'&&results[0]&&go(results[0][1])} className="h-9 w-full rounded-lg border border-white/[.07] bg-white/[.025] pl-9 pr-3 text-xs text-white outline-none focus:border-cyan-400/40" placeholder="Search modules and commands…" />
      {!!results.length&&<div className="absolute top-11 z-50 w-full rounded-xl border border-white/10 bg-slate-950 p-2 shadow-2xl">{results.map(([name,path])=><button key={path} onClick={()=>go(path)} className="block w-full rounded-lg px-3 py-2 text-left text-xs text-slate-400 hover:bg-cyan-400/10 hover:text-cyan-300">{name}</button>)}</div>}
    </div>
    <div className="ml-auto flex items-center gap-1"><button className="icon-button" title="Cloud sync placeholder"><Cloud /><i /></button><button className="icon-button" onClick={onTheme} title="Switch theme"><SunMoon /></button><button className="icon-button" onClick={()=>document.documentElement.requestFullscreen?.()} title="Fullscreen"><Expand /></button></div>
  </header>;
};
export default StudioHeader;