import { RotateCcw, Maximize, Scissors, Eye, ShieldAlert, ShieldOff, Sparkles, Image } from 'lucide-react';

const VIEW_BUTTONS = [
  { id: 'perspective', label: 'Persp', title: 'Perspective view' },
  { id: 'ortho', label: 'Ortho', title: 'Orthographic view', toggle: true },
  { id: 'front', label: 'Front', title: 'Anterior view' },
  { id: 'rear', label: 'Rear', title: 'Posterior view' },
  { id: 'lateral', label: 'Lat', title: 'Lateral view' },
  { id: 'medial', label: 'Med', title: 'Medial view' },
  { id: 'top', label: 'Top', title: 'Superior view' },
  { id: 'bottom', label: 'Bot', title: 'Inferior view' },
];

const TOGGLES = [
  { id: 'measurements', icon: Eye, label: 'Measurements' },
  { id: 'sensitive', icon: ShieldAlert, label: 'Sensitive' },
  { id: 'keepOut', icon: ShieldOff, label: 'Keep-out' },
  { id: 'cover', icon: Sparkles, label: 'Cover' },
  { id: 'movement', icon: RotateCcw, label: 'Movement' },
  { id: 'logo', icon: Image, label: 'SHiRE Logo' },
];

export default function ViewportToolbar({ viewPreset, onView, ortho, display, onToggle, transparency, onTransparency, onFit, onReset, onSection }) {
  return (
    <div className="flex flex-wrap items-center gap-2 border-b border-white/10 bg-[#0d1318]/80 px-3 py-2 backdrop-blur">
      <div className="flex items-center gap-1">
        {VIEW_BUTTONS.map(btn => (
          <button
            key={btn.id}
            onClick={() => onView(btn.id)}
            title={btn.title}
            className={`rounded-lg px-2.5 py-1.5 text-xs font-medium transition ${
              (btn.toggle && ortho) || (!btn.toggle && viewPreset === btn.id)
                ? 'bg-cyan-400/20 text-cyan-300 border border-cyan-400/40'
                : 'border border-white/10 text-slate-400 hover:text-cyan-300 hover:border-cyan-400/30'
            }`}
          >
            {btn.label}
          </button>
        ))}
      </div>
      <div className="h-6 w-px bg-white/10" />
      <button onClick={onFit} title="Fit to view" className="icon-btn !min-h-9 !min-w-9"><Maximize className="h-4 w-4" /></button>
      <button onClick={onReset} title="Reset view" className="icon-btn !min-h-9 !min-w-9"><RotateCcw className="h-4 w-4" /></button>
      <button onClick={onSection} title="Section cut" className="icon-btn !min-h-9 !min-w-9"><Scissors className="h-4 w-4" /></button>
      <div className="h-6 w-px bg-white/10" />
      <div className="flex items-center gap-2">
        <span className="text-xs text-slate-500">Transparency</span>
        <input type="range" min={0.2} max={1} step={0.05} value={transparency} onChange={e => onTransparency(parseFloat(e.target.value))} className="w-24 accent-cyan-400" />
      </div>
      <div className="h-6 w-px bg-white/10" />
      <div className="flex flex-wrap items-center gap-1">
        {TOGGLES.map(t => {
          const active = display[t.id];
          const Icon = t.icon;
          return (
            <button
              key={t.id}
              onClick={() => onToggle(t.id)}
              title={t.label}
              className={`flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-xs font-medium transition ${
                active ? 'bg-cyan-400/15 text-cyan-300 border border-cyan-400/30' : 'border border-white/10 text-slate-500 hover:text-slate-300'
              }`}
            >
              <Icon className="h-3.5 w-3.5" />
              <span className="hidden lg:inline">{t.label}</span>
            </button>
          );
        })}
      </div>
    </div>
  );
}