import { Wand2, Sparkles, Check, FlaskConical, Loader2 } from 'lucide-react';
import { useExperienceMode } from '@/lib/ExperienceMode';

function ShireMark({ size = 26 }) {
  return (
    <span className="relative grid place-items-center rounded-lg border border-cyan-400/40 bg-[#0a0f14]" style={{ width: size, height: size }}>
      <svg viewBox="0 0 24 24" className="text-cyan-300" fill="none" stroke="currentColor" strokeWidth="1.6" style={{ width: size * 0.55, height: size * 0.55 }}>
        <path d="M12 2 4 6.5v11L12 22l8-4.5v-11L12 2Z" /><path d="M12 7v10M7.5 9.5l9 5M16.5 9.5l-9 5" opacity=".55" />
      </svg>
    </span>
  );
}

export default function CanvasTopBar({ designName, onName, saved, savedVersion, fitted, promptforgeBusy, onLoadDemo, onLoadDemoCovers }) {
  const { mode, setMode } = useExperienceMode();
  const guided = mode === 'guided';
  return (
    <header className="panel-glass flex flex-wrap items-center gap-3 px-3 py-2.5">
      <ShireMark size={30} />
      <div className="leading-tight">
        <p className="text-[9px] font-semibold uppercase tracking-[0.3em] text-cyan-400/80">SHiRE</p>
        <p className="font-heading text-[13px] font-semibold text-white">LimbForge <span className="text-slate-600">·</span> CoverCanvas</p>
      </div>
      <div className="mx-1 hidden h-6 w-px bg-white/10 sm:block" />
      <div className="min-w-0">
        <p className="text-[9px] font-semibold uppercase tracking-[0.22em] text-slate-500">Universal Design Canvas</p>
        <input value={designName} onChange={e => onName(e.target.value)} placeholder="Untitled Universal Design" className="w-full max-w-[220px] rounded-md border border-transparent bg-transparent px-1 py-0.5 font-heading text-sm font-semibold text-white focus:border-cyan-400 focus:outline-none" />
      </div>

      <div className="ml-auto flex flex-wrap items-center gap-2">
        <span className={`inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-[10px] ${saved ? 'border-emerald-400/30 bg-emerald-400/10 text-emerald-300' : 'border-amber-400/30 bg-amber-400/10 text-amber-200'}`}>
          {saved ? <><Check size={11} /> Saved · v{savedVersion || 1}</> : 'Not yet saved'}
        </span>
        <span className="hidden items-center gap-1.5 rounded-md border border-white/[0.07] bg-white/[0.02] px-2 py-1 text-[10px] text-slate-400 sm:inline-flex">
          <span className={`h-1.5 w-1.5 rounded-full ${fitted ? 'bg-cyan-400' : 'bg-amber-400'}`} />
          {fitted ? 'Fitted to a cover (preview)' : 'Master design — not yet fitted to a cover'}
        </span>
        <span className="hidden items-center gap-1.5 rounded-md border border-violet-400/30 bg-violet-400/10 px-2 py-1 text-[10px] text-violet-200 md:inline-flex">
          {promptforgeBusy ? <Loader2 size={11} className="animate-spin" /> : <Wand2 size={11} />} PromptForge {promptforgeBusy ? 'working' : 'ready'}
        </span>
        <div className="flex rounded-md border border-white/10 p-0.5">
          <button onClick={() => setMode('guided')} className={`rounded px-2 py-1 text-[11px] font-semibold ${guided ? 'bg-cyan-400/20 text-cyan-100' : 'text-slate-400 hover:text-white'}`}>Guided</button>
          <button onClick={() => setMode('advanced')} className={`rounded px-2 py-1 text-[11px] font-semibold ${!guided ? 'bg-cyan-400/20 text-cyan-100' : 'text-slate-400 hover:text-white'}`}>Advanced</button>
        </div>
        <button onClick={onLoadDemo} className="btn-ghost !min-h-9 !py-1.5 text-xs"><FlaskConical size={13} /> Demo design</button>
        <button onClick={onLoadDemoCovers} className="btn-ghost !min-h-9 !py-1.5 text-xs"><Sparkles size={13} /> Demo covers</button>
      </div>
    </header>
  );
}