import { Search, MessageCircle, LayoutGrid } from 'lucide-react';
import { NavigationHeader } from './NavigationHeader';

export function TopBar({ mode, onModeChange, query, onQueryChange, onSubmit, health, onResetHome }) {
  return (
    <NavigationHeader health={health} onResetHome={onResetHome}>
      <div className="flex flex-col sm:flex-row items-center gap-3 pt-1">
        <div className="flex shrink-0 items-center gap-1 rounded-full bg-ink-100/80 p-1 text-xs">
          <ModeButton icon={LayoutGrid} label="Browse & Search" active={mode === 'search'} onClick={() => onModeChange('search')} />
          <ModeButton icon={MessageCircle} label="Ask AI" active={mode === 'chat'} onClick={() => onModeChange('chat')} />
        </div>

        {mode === 'search' && (
          <form
            onSubmit={(e) => {
              e.preventDefault();
              onSubmit();
            }}
            className="relative flex-1 w-full"
          >
            <Search className="pointer-events-none absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
            <input
              value={query}
              onChange={(e) => onQueryChange(e.target.value)}
              placeholder="Search catalog products — e.g. 'Recommend Paneer under ₹150', 'How many products in Cadbury?'"
              className="w-full rounded-full border border-ink-900/10 bg-white py-2 pl-10 pr-4 text-xs text-ink-950 placeholder:text-slate-400 focus:border-amber-500 focus:outline-none focus:ring-2 focus:ring-amber-500/20 shadow-xs"
            />
          </form>
        )}
      </div>
    </NavigationHeader>
  );
}

function ModeButton({ icon: Icon, label, active, onClick }) {
  return (
    <button
      onClick={onClick}
      className={`flex items-center gap-1.5 rounded-full px-3.5 py-1.5 text-xs font-semibold transition ${
        active ? 'bg-white text-ink-950 shadow-xs' : 'text-slate-500 hover:text-ink-900'
      }`}
    >
      <Icon className="h-3.5 w-3.5" /> {label}
    </button>
  );
}