import { useState } from 'react';
import { Link } from 'react-router-dom';
import {
  Menu, Hexagon, Bell, MessageSquare, HelpCircle, Cloud, Wifi, Maximize2, Search, Activity, ExternalLink
} from 'lucide-react';
import { runtimeConfig, notifyHost } from '@/lib/runtime-config';

const tabs = [
  ['/', 'Dashboard'],
  ['/scans', 'Scans'],
  ['/design', 'Design'],
  ['/materials', 'Materials'],
  ['/cases', 'Plan'],
  ['/manufacturing', 'Manufacture'],
  ['/quality', 'QC'],
  ['/reports', 'Reports'],
  ['/settings', 'Settings']
];

const TopBar = ({ onMenu }) => {
  const [q, setQ] = useState('');
  return (
    <header className="flex h-12 items-center gap-3 border-b border-white/[.06] bg-[#0c0e12] px-3">
      <button onClick={onMenu} className="icon-button lg:hidden"><Menu /></button>
      <Link to="/" className="flex items-center gap-2">
        <div className="grid h-7 w-7 place-items-center rounded-lg border border-cyan-400/30 bg-cyan-400/10 text-cyan-300">
          <Hexagon className="h-4 w-4" />
        </div>
        <div className="leading-none">
          <div className="text-[13px] font-semibold tracking-wide text-white">SHiRE</div>
          <div className="text-[8px] uppercase tracking-[.18em] text-slate-500">{runtimeConfig.productTagline}</div>
        </div>
      </Link>

      <nav className="ml-4 hidden items-center gap-1 lg:flex">
        {tabs.map(([to, label]) => (
          <Link key={label} to={to} className="nav-tab text-slate-500 hover:bg-white/[.04] hover:text-white">
            {label}
          </Link>
        ))}
      </nav>

      <div className="relative ml-auto hidden max-w-xs flex-1 sm:block">
        <Search className="absolute left-2.5 top-2.5 h-3.5 w-3.5 text-slate-600" />
        <input value={q} onChange={e => setQ(e.target.value)} className="studio-input w-full pl-8" placeholder="Case search…" />
      </div>

      <div className="ml-auto flex items-center gap-1 sm:ml-0">
        <button className="icon-button" title="Cloud sync"><Cloud /><span className="sr-only">Sync</span></button>
        <button className="icon-button" title="Connection"><Wifi /></button>
        <button className="icon-button" title="System health"><Activity /></button>
        <button className="icon-button" title="Notifications"><Bell /></button>
        <button className="icon-button" title="Messages"><MessageSquare /></button>
        <button className="icon-button" title="Help"><HelpCircle /></button>
        <button className="icon-button" onClick={() => document.documentElement.requestFullscreen?.()} title="Fullscreen"><Maximize2 /></button>
        {runtimeConfig.embedded && <button className="icon-button" onClick={() => notifyHost('REQUEST_CLOSE')} title="Return to SHiRE"><ExternalLink /></button>}
        <div className="ml-1 flex items-center gap-2 rounded-md border border-white/[.07] bg-white/[.02] px-2 py-1">
          <div className="grid h-6 w-6 place-items-center rounded-full bg-cyan-400/15 text-[10px] font-bold text-cyan-300">DR</div>
          <span className="hidden text-[11px] text-slate-300 sm:inline">{runtimeConfig.edition}</span>
        </div>
      </div>
    </header>
  );
};
export default TopBar;