/* ============================================================
   COMPONENT DETAIL — overlay with large live preview,
   prev/next across the current set, code panel, copy,
   and an admin-locked delete affordance.
   ============================================================ */
(function(){
  const { cx, Glyph, G, STYLES } = window;

  function genCode(block, s){
    const comp = block.title.replace(/[^a-zA-Z0-9]/g,'') || 'Component';
    const tag = s.cls.surface;
    return `import { tokens } from "@empire/${s.id}";

// ${block.title} — ${s.name} universe
export function ${comp}() {
  return (
    <div className="${tag}">
      {/* rendered with ${s.name} tokens:
         radius ${s.id==='maximal'?'6px':s.id==='retro'?'8px':'24px'} ·
         accent ${s.cls.accent} */}
      <Empire.Block
        style="${s.id}"
        type="${block.type}"
        variant="${block.subtype}"
      />
    </div>
  );
}

export default ${comp};`;
  }

  function Detail({ block, blocks, s, onClose, onNav, onSwitchStyle }){
    const [copied,setCopied]=React.useState(false);
    const idx = blocks.findIndex(b=>b.id===block.id);
    const code = genCode(block,s);
    const copy = ()=>{
      try{ navigator.clipboard.writeText(code); }catch(e){}
      setCopied(true); setTimeout(()=>setCopied(false),1600);
    };
    React.useEffect(()=>{
      const h=e=>{ if(e.key==='Escape')onClose(); if(e.key==='ArrowRight')onNav(1); if(e.key==='ArrowLeft')onNav(-1); };
      window.addEventListener('keydown',h); return ()=>window.removeEventListener('keydown',h);
    },[block,blocks]);

    return (
      <div className="fixed inset-0 z-[60] flex items-center justify-center p-3 sm:p-6 anim-fadeIn" style={{background:'rgba(6,6,10,.78)',backdropFilter:'blur(6px)'}} onClick={onClose}>
        <div className="relative w-full max-w-[1040px] max-h-[92vh] rounded-2xl overflow-hidden anim-scaleIn flex flex-col"
          style={{background:'#101016',border:'1px solid var(--chrome-line)',boxShadow:'0 40px 120px rgba(0,0,0,.7)'}} onClick={e=>e.stopPropagation()}>
          {/* header */}
          <div className="flex items-center gap-3 px-5 h-14 shrink-0" style={{borderBottom:'1px solid var(--chrome-line)'}}>
            <span className="flex -space-x-1">{s.swatch.slice(0,3).map((c,i)=><span key={i} className="w-3.5 h-3.5 rounded-full" style={{background:c,border:'1.5px solid #101016'}}/>)}</span>
            <div className="min-w-0">
              <div className="font-bold text-[15px] truncate leading-tight">{block.title}</div>
              <div className="text-[11px]" style={{color:'var(--chrome-sub)'}}>{s.name} · {block.type}/{block.subtype}</div>
            </div>
            <div className="ml-auto flex items-center gap-1.5 text-xs" style={{color:'var(--chrome-sub)'}}>
              <span className="hidden sm:inline">{idx+1} / {blocks.length}</span>
              <button onClick={()=>onNav(-1)} className="p-2 rounded-lg hover:bg-white/5"><Glyph d="M15 18l-6-6 6-6" size={18}/></button>
              <button onClick={()=>onNav(1)} className="p-2 rounded-lg hover:bg-white/5"><Glyph d="M9 18l6-6-6-6" size={18}/></button>
              <button onClick={onClose} className="p-2 rounded-lg hover:bg-white/5 ml-1"><Glyph d="M6 6l12 12M18 6L6 18" size={18}/></button>
            </div>
          </div>

          <div className="grid lg:grid-cols-[1.1fr_.9fr] min-h-0 flex-1">
            {/* preview */}
            <div className={cx('relative flex items-center justify-center p-8 overflow-auto thin-scroll',s.canvas)} style={{minHeight:320}}>
              {s.id==='retro' && <div className="rf-sun"/>}
              {s.id==='motion' && <><div className="mo-blob" style={{width:160,height:160,top:-20,left:-30}}/><div className="mo-blob" style={{width:110,height:110,bottom:0,right:-20,animationDelay:'-5s'}}/></>}
              <div className="relative" key={block.id+s.id}>{block.Render(s)}</div>
            </div>

            {/* code + meta */}
            <div className="flex flex-col min-h-0" style={{borderLeft:'1px solid var(--chrome-line)'}}>
              {/* style switch row */}
              <div className="flex items-center gap-1.5 px-4 py-3 overflow-x-auto no-scrollbar shrink-0" style={{borderBottom:'1px solid var(--chrome-line)'}}>
                <span className="text-[11px] uppercase tracking-wider mr-1 shrink-0" style={{color:'var(--chrome-sub)'}}>Preview in</span>
                {window.STYLE_ORDER.map(id=>{
                  const st=STYLES[id],on=id===s.id;
                  return <button key={id} onClick={()=>onSwitchStyle(id)} title={st.name}
                    className="w-7 h-7 rounded-full shrink-0 transition" style={{background:`linear-gradient(135deg,${st.swatch[0]},${st.swatch[2]})`,outline:on?'2px solid #fff':'2px solid transparent',outlineOffset:2,opacity:on?1:.55}}/>;
                })}
              </div>
              {/* code */}
              <div className="flex items-center justify-between px-4 py-2 shrink-0" style={{background:'#0c0c11'}}>
                <span className="text-[11px] font-mono" style={{color:'var(--chrome-sub)'}}>{block.id}.tsx</span>
                <button onClick={copy} className="flex items-center gap-1.5 text-xs px-2.5 py-1.5 rounded-lg font-medium transition"
                  style={{background:copied?'#16331f':'#1b1b22',color:copied?'#4ade80':'var(--chrome-text)',border:'1px solid var(--chrome-line)'}}>
                  <Glyph d={copied?G.check:'M9 9h10v10H9zM5 15V5h10'} size={13}/>{copied?'Copied':'Copy'}
                </button>
              </div>
              <pre className="flex-1 overflow-auto thin-scroll text-[12px] leading-relaxed p-4 m-0" style={{background:'#0c0c11',fontFamily:'Space Mono,monospace',color:'#c8c8d4'}}>
                <code>{code}</code></pre>
              {/* footer actions */}
              <div className="flex items-center gap-2 px-4 py-3 shrink-0" style={{borderTop:'1px solid var(--chrome-line)'}}>
                <button className="flex-1 py-2.5 rounded-xl text-sm font-semibold" style={{background:'#fff',color:'#111'}}>Add to project</button>
                <button title="Admin only" disabled
                  className="flex items-center gap-1.5 px-3 py-2.5 rounded-xl text-sm font-medium cursor-not-allowed"
                  style={{background:'#160e10',color:'#7a4a4a',border:'1px solid #331c1f'}}>
                  <Glyph d="M6 10V8a6 6 0 1112 0v2M5 10h14v10H5z" size={14}/>Delete
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
  window.Detail = Detail;
})();