/* BLOCKS E — Overlays (modal, toast, tooltip) — static previews, style-agnostic */
(function(){
  const { cx, Slot, Spark, Bars, Ring, Glyph, G } = window;
  const B='inline-flex items-center justify-center gap-2 cursor-pointer select-none whitespace-nowrap';
  const ghost=s=>s.cls.btnGhost||s.cls.btn;
  const head=(s,x='')=>cx(s.cls.display,s.cls.glow,x);
  const sw=(s,i,fb)=>(s.swatch&&s.swatch[i])||fb||s.cls.accent;
  const OK='#22c55e', ERR='#ef4444', WARN='#f59e0b', INFO='#3b82f6';
  const tint=(c,a=.15)=>{ // hex -> rgba
    const h=c.replace('#',''); const n=h.length===3?h.split('').map(x=>x+x).join(''):h;
    const r=parseInt(n.slice(0,2),16),g=parseInt(n.slice(2,4),16),b=parseInt(n.slice(4,6),16);
    return `rgba(${r},${g},${b},${a})`; };
  const Kbd=({s,children})=>(
    <span className={cx(s.cls.surface2,'px-1.5 py-0.5 rounded text-[10px] font-semibold leading-none inline-flex items-center')}
      style={{boxShadow:'inset 0 0 0 1px rgba(128,128,128,.22)'}}>{children}</span>);

  const blocks = [
    /* ============================== MODAL ============================== */
    { id:'eO-modal-confirm', type:'overlays', subtype:'modal', title:'Confirm dialog', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[320px] p-5')}>
          <div className="flex items-start gap-3">
            <span className="w-9 h-9 rounded-full inline-flex items-center justify-center shrink-0" style={{background:tint(WARN),color:WARN}}>
              <Glyph d={G.bell} size={16}/></span>
            <div className="min-w-0">
              <div className={head(s,'text-sm font-extrabold')}>Publish changes?</div>
              <div className={cx('text-xs mt-1 leading-relaxed',s.cls.sub)}>Your draft will go live to all visitors immediately. You can revert from history.</div>
            </div>
          </div>
          <div className="flex gap-2 mt-5">
            <button className={cx(B,ghost(s),'flex-1 py-2 text-xs')}>Cancel</button>
            <button className={cx(B,s.cls.btnPrimary,'flex-1 py-2 text-xs')}>Publish</button>
          </div>
        </div>) },

    { id:'eO-modal-destructive', type:'overlays', subtype:'modal', title:'Destructive confirm (typed name)', w:1,
      Render:(s)=>{
        const [v,setV]=React.useState('');
        const ok=v.trim()==='analytics-prod';
        return (
          <div className={cx(s.cls.surface,'w-full max-w-[330px] p-5')} style={{boxShadow:`inset 0 0 0 1px ${tint(ERR,.4)}`}}>
            <div className="flex items-center gap-2">
              <span style={{color:ERR}}><Glyph d={G.bell} size={16}/></span>
              <div className={head(s,'text-sm font-extrabold')} style={{color:ERR}}>Delete database</div>
            </div>
            <div className={cx('text-xs mt-2 leading-relaxed',s.cls.sub)}>This permanently removes <b>analytics-prod</b> and all 4.2M rows. This cannot be undone.</div>
            <label className={cx('block text-[11px] mt-3 mb-1',s.cls.muted)}>Type <span className="font-semibold" style={{color:s.cls.text}}>analytics-prod</span> to confirm</label>
            <input value={v} onChange={e=>setV(e.target.value)} placeholder="analytics-prod" className={cx(s.cls.input,'w-full px-3 py-2 text-xs')}/>
            <div className="flex gap-2 mt-4">
              <button className={cx(B,ghost(s),'flex-1 py-2 text-xs')}>Cancel</button>
              <button disabled={!ok} className={cx(B,'flex-1 py-2 text-xs text-white rounded-md transition')} style={{background:ok?ERR:tint(ERR,.4),cursor:ok?'pointer':'not-allowed'}}>Delete forever</button>
            </div>
          </div>); } },

    { id:'eO-modal-success', type:'overlays', subtype:'modal', title:'Success modal w/ check', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[300px] p-6 text-center')}>
          <span className="w-14 h-14 rounded-full inline-flex items-center justify-center mx-auto" style={{background:tint(OK),color:OK}}>
            <Glyph d={G.check} size={26}/></span>
          <div className={head(s,'text-base font-extrabold mt-4')}>Payment successful</div>
          <div className={cx('text-xs mt-1.5 leading-relaxed',s.cls.sub)}>We've emailed a receipt to billing@northwind.co. Your Pro plan is active.</div>
          <div className={cx(s.cls.surface2,'flex items-center justify-between px-3 py-2 rounded-lg mt-4 text-xs')}>
            <span className={s.cls.muted}>Invoice</span><span className="font-semibold">#EMP-20834</span>
          </div>
          <button className={cx(B,s.cls.btnPrimary,'w-full py-2.5 text-sm mt-4')}>Go to dashboard<Glyph d={G.arrow} size={14}/></button>
        </div>) },

    { id:'eO-modal-form', type:'overlays', subtype:'modal', title:'Form modal (inputs)', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[340px] p-5')}>
          <div className="flex items-center justify-between">
            <div className={head(s,'text-sm font-extrabold')}>Invite teammate</div>
            <button className={cx(B,ghost(s),'w-7 h-7 rounded-full p-0 text-base')}>×</button>
          </div>
          <div className={cx('text-xs mt-1',s.cls.muted)}>They'll get an email to join your workspace.</div>
          <div className="mt-4 flex flex-col gap-3">
            <div>
              <label className={cx('block text-[11px] mb-1',s.cls.sub)}>Email address</label>
              <input placeholder="name@company.com" className={cx(s.cls.input,'w-full px-3 py-2 text-xs')}/>
            </div>
            <div>
              <label className={cx('block text-[11px] mb-1',s.cls.sub)}>Role</label>
              <div className="flex gap-1.5">
                {['Viewer','Editor','Admin'].map((r,i)=>(
                  <span key={r} className={cx(s.cls.chip,'flex-1 text-center px-2 py-1.5 text-[11px] font-medium')} style={i===1?{boxShadow:`inset 0 0 0 1.5px ${s.cls.accent}`,color:s.cls.accent}:null}>{r}</span>))}
              </div>
            </div>
          </div>
          <div className="flex gap-2 mt-5">
            <button className={cx(B,ghost(s),'flex-1 py-2 text-xs')}>Cancel</button>
            <button className={cx(B,s.cls.btnPrimary,'flex-1 py-2 text-xs')}><Glyph d={G.plus} size={13}/>Send invite</button>
          </div>
        </div>) },

    { id:'eO-modal-cookie', type:'overlays', subtype:'modal', title:'Cookie consent banner', w:2,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[440px] p-4 flex flex-col sm:flex-row items-start sm:items-center gap-4')}>
          <span className="w-10 h-10 rounded-full inline-flex items-center justify-center shrink-0" style={{background:tint(s.cls.accent),color:s.cls.accent}}>
            <Glyph d={G.star} size={18}/></span>
          <div className="min-w-0 flex-1">
            <div className="text-sm font-semibold">We use cookies</div>
            <div className={cx('text-[11px] mt-0.5 leading-relaxed',s.cls.sub)}>We use essential and analytics cookies to improve your experience. Read our <span style={{color:s.cls.accent}}>privacy policy</span>.</div>
          </div>
          <div className="flex gap-2 shrink-0">
            <button className={cx(B,ghost(s),'px-3 py-1.5 text-xs')}>Decline</button>
            <button className={cx(B,s.cls.btnPrimary,'px-3 py-1.5 text-xs')}>Accept all</button>
          </div>
        </div>) },

    { id:'eO-modal-share', type:'overlays', subtype:'modal', title:'Share dialog w/ link copy', w:1,
      Render:(s)=>{
        const [copied,setCopied]=React.useState(false);
        const link='empire.ui/p/a8f2k';
        return (
          <div className={cx(s.cls.surface,'w-full max-w-[330px] p-5')}>
            <div className="flex items-center justify-between">
              <div className={head(s,'text-sm font-extrabold')}>Share board</div>
              <button className={cx(B,ghost(s),'w-7 h-7 rounded-full p-0 text-base')}>×</button>
            </div>
            <div className={cx('text-xs mt-1',s.cls.muted)}>Anyone with the link can view.</div>
            <div className="flex gap-2 mt-4">
              <div className={cx(s.cls.input,'flex-1 px-3 py-2 text-xs flex items-center font-mono truncate')}>{link}</div>
              <button onClick={()=>{setCopied(true);setTimeout(()=>setCopied(false),1400);}}
                className={cx(B,copied?ghost(s):s.cls.btnPrimary,'px-3 py-2 text-xs')}>
                {copied?<><Glyph d={G.check} size={13}/>Copied</>:'Copy'}</button>
            </div>
            <div className="flex items-center gap-2 mt-4 pt-4" style={{borderTop:'1px solid rgba(128,128,128,.18)'}}>
              {['Mail','Slack','X','Link'].map((n,i)=>(
                <button key={n} className={cx(B,s.cls.surface2,'flex-1 flex-col gap-1 py-2 px-0 rounded-lg')}>
                  <span className="w-7 h-7 rounded-full inline-flex items-center justify-center" style={{background:tint(sw(s,i%3,s.cls.accent),.18),color:sw(s,i%3,s.cls.accent)}}><Glyph d={G.arrow} size={13}/></span>
                  <span className={cx('text-[10px]',s.cls.muted)}>{n}</span>
                </button>))}
            </div>
          </div>); } },

    /* ============================== TOAST ============================== */
    { id:'eO-toast-success', type:'overlays', subtype:'toast', title:'Success toast', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[300px] p-3.5 flex items-center gap-3')} style={{boxShadow:`inset 3px 0 0 ${OK}`}}>
          <span className="w-7 h-7 rounded-full inline-flex items-center justify-center shrink-0" style={{background:tint(OK),color:OK}}><Glyph d={G.check} size={15}/></span>
          <div className="min-w-0 flex-1">
            <div className="text-xs font-semibold">Changes saved</div>
            <div className={cx('text-[11px]',s.cls.muted)}>Your profile was updated.</div>
          </div>
          <button className={cx(B,ghost(s),'w-6 h-6 rounded-full p-0 text-sm shrink-0')}>×</button>
        </div>) },

    { id:'eO-toast-error', type:'overlays', subtype:'toast', title:'Error toast', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[310px] p-3.5 flex items-start gap-3')} style={{boxShadow:`inset 3px 0 0 ${ERR}`}}>
          <span className="w-7 h-7 rounded-full inline-flex items-center justify-center shrink-0 mt-0.5" style={{background:tint(ERR),color:ERR}}><Glyph d={G.bell} size={15}/></span>
          <div className="min-w-0 flex-1">
            <div className="text-xs font-semibold" style={{color:ERR}}>Upload failed</div>
            <div className={cx('text-[11px] mt-0.5 leading-relaxed',s.cls.sub)}>report-q3.pdf exceeds the 25 MB limit.</div>
            <button className="text-[11px] font-semibold mt-1.5" style={{color:ERR}}>Try again</button>
          </div>
          <button className={cx(B,ghost(s),'w-6 h-6 rounded-full p-0 text-sm shrink-0')}>×</button>
        </div>) },

    { id:'eO-toast-info-action', type:'overlays', subtype:'toast', title:'Info toast w/ action', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[320px] p-3.5')} style={{boxShadow:`inset 3px 0 0 ${INFO}`}}>
          <div className="flex items-center gap-3">
            <span className="w-7 h-7 rounded-full inline-flex items-center justify-center shrink-0" style={{background:tint(INFO),color:INFO}}><Glyph d={G.bell} size={15}/></span>
            <div className="min-w-0 flex-1">
              <div className="text-xs font-semibold">New version available</div>
              <div className={cx('text-[11px]',s.cls.muted)}>v2.4 is ready to install.</div>
            </div>
          </div>
          <div className="flex gap-2 mt-3 pl-10">
            <button className={cx(B,s.cls.btnPrimary,'px-3 py-1.5 text-[11px]')}>Reload</button>
            <button className={cx(B,ghost(s),'px-3 py-1.5 text-[11px]')}>Later</button>
          </div>
        </div>) },

    { id:'eO-toast-progress', type:'overlays', subtype:'toast', title:'Upload progress toast', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[310px] p-3.5')}>
          <div className="flex items-center gap-3">
            <span className="w-7 h-7 rounded-full inline-flex items-center justify-center shrink-0" style={{background:tint(s.cls.accent),color:s.cls.accent}}><Glyph d={G.arrow} size={15}/></span>
            <div className="min-w-0 flex-1">
              <div className="text-xs font-semibold truncate">Uploading brand-assets.zip</div>
              <div className={cx('text-[11px]',s.cls.muted)}>14.2 MB of 22 MB · 6s left</div>
            </div>
            <span className="text-xs font-semibold tabular-nums" style={{color:s.cls.accent}}>64%</span>
          </div>
          <div className={cx(s.cls.surface2,'h-1.5 rounded-full mt-3 overflow-hidden')}>
            <div className="h-full rounded-full" style={{width:'64%',background:s.cls.accent,transition:'width .4s'}}/>
          </div>
        </div>) },

    { id:'eO-toast-undo', type:'overlays', subtype:'toast', title:'Undo snackbar', w:1,
      Render:(s)=>(
        <div className="w-full max-w-[300px] rounded-lg px-4 py-3 flex items-center gap-3 text-white" style={{background:'#1f1f23',boxShadow:'0 8px 24px -8px rgba(0,0,0,.5)'}}>
          <span className="text-xs flex-1">Message moved to Archive</span>
          <button className="text-xs font-bold uppercase tracking-wide" style={{color:s.cls.accent}}>Undo</button>
          <button className="w-5 h-5 inline-flex items-center justify-center rounded-full text-sm opacity-70 hover:opacity-100">×</button>
        </div>) },

    { id:'eO-toast-stacked', type:'overlays', subtype:'toast', title:'Stacked toasts', w:1,
      Render:(s)=>{
        const items=[['Comment posted',OK,G.check],['Synced to cloud',INFO,G.bell],['3 tasks overdue',WARN,G.bell]];
        return (
          <div className="w-full max-w-[300px] flex flex-col gap-2">
            {items.map(([t,c,d],i)=>(
              <div key={i} className={cx(s.cls.surface,'p-3 flex items-center gap-2.5')} style={{boxShadow:`inset 3px 0 0 ${c}`,opacity:1-i*0.12,transform:`scale(${1-i*0.02})`}}>
                <span className="w-6 h-6 rounded-full inline-flex items-center justify-center shrink-0" style={{background:tint(c),color:c}}><Glyph d={d} size={13}/></span>
                <span className="text-xs font-medium flex-1 truncate">{t}</span>
                <button className={cx('w-5 h-5 inline-flex items-center justify-center text-sm shrink-0',s.cls.muted)}>×</button>
              </div>))}
          </div>); } },

    /* ============================== TOOLTIP ============================== */
    { id:'eO-tooltip-basic', type:'overlays', subtype:'tooltip', title:'Basic tooltip', w:1,
      Render:(s)=>(
        <div className="flex flex-col items-center gap-2 py-4">
          <div className="relative">
            <span className="px-3 py-1.5 rounded-md text-xs font-medium text-white inline-block" style={{background:'#1f1f23'}}>Copy to clipboard
              <span className="absolute left-1/2 -translate-x-1/2 -bottom-1 w-2 h-2 rotate-45" style={{background:'#1f1f23'}}/>
            </span>
          </div>
          <button className={cx(B,ghost(s),'w-9 h-9 rounded-md p-0')}><Glyph d={G.plus} size={15}/></button>
        </div>) },

    { id:'eO-tooltip-rich', type:'overlays', subtype:'tooltip', title:'Rich tooltip (title + body)', w:1,
      Render:(s)=>(
        <div className="flex flex-col items-center gap-2 py-3">
          <div className="rounded-lg p-3 max-w-[220px] text-white relative" style={{background:'#1f1f23',boxShadow:'0 10px 28px -10px rgba(0,0,0,.55)'}}>
            <div className="text-xs font-bold flex items-center gap-1.5" style={{color:s.cls.accent}}><Glyph d={G.star} size={13}/>Pro feature</div>
            <div className="text-[11px] mt-1 leading-relaxed opacity-85">Custom domains let you serve your project from your own URL with auto SSL.</div>
            <span className="absolute left-1/2 -translate-x-1/2 -bottom-1 w-2 h-2 rotate-45" style={{background:'#1f1f23'}}/>
          </div>
          <button className={cx(B,s.cls.surface2,'px-3 py-1.5 text-xs')}>Custom domain</button>
        </div>) },

    { id:'eO-tooltip-kbd', type:'overlays', subtype:'tooltip', title:'Keyboard-hint tooltip', w:1,
      Render:(s)=>(
        <div className="flex flex-col items-center gap-2 py-4">
          <div className={cx(s.cls.surface,'px-3 py-2 flex items-center gap-2 relative')}>
            <span className="text-xs">Open command palette</span>
            <span className="flex gap-1"><Kbd s={s}>⌘</Kbd><Kbd s={s}>K</Kbd></span>
            <span className={cx(s.cls.surface,'absolute left-1/2 -translate-x-1/2 -bottom-1 w-2 h-2 rotate-45')}/>
          </div>
          <button className={cx(B,ghost(s),'px-3 py-1.5 text-xs')}><Glyph d={G.search} size={14}/>Search</button>
        </div>) },

    { id:'eO-tooltip-arrows', type:'overlays', subtype:'tooltip', title:'Tooltip arrow on 2 sides', w:1,
      Render:(s)=>(
        <div className="flex items-center justify-center gap-6 py-5">
          <div className="relative">
            <span className="px-2.5 py-1 rounded-md text-[11px] font-medium text-white inline-block" style={{background:'#1f1f23'}}>Top
              <span className="absolute left-1/2 -translate-x-1/2 -bottom-1 w-2 h-2 rotate-45" style={{background:'#1f1f23'}}/></span>
            <span className="block mt-3 w-6 h-6 rounded-full mx-auto" style={{background:s.cls.accent}}/>
          </div>
          <div className="relative flex items-center">
            <span className="w-6 h-6 rounded-full" style={{background:sw(s,1,s.cls.accent)}}/>
            <span className="ml-3 px-2.5 py-1 rounded-md text-[11px] font-medium text-white inline-block relative" style={{background:'#1f1f23'}}>Right
              <span className="absolute top-1/2 -translate-y-1/2 -left-1 w-2 h-2 rotate-45" style={{background:'#1f1f23'}}/></span>
          </div>
        </div>) },

    { id:'eO-tooltip-popover', type:'overlays', subtype:'tooltip', title:'Popover w/ actions', w:1,
      Render:(s)=>(
        <div className="flex flex-col items-center gap-2 py-3">
          <div className={cx(s.cls.surface,'w-[200px] p-1.5 relative')}>
            {[['Edit',G.plus],['Duplicate',G.star],['Move to…',G.arrow]].map(([t,d])=>(
              <button key={t} className={cx(B,'w-full justify-start gap-2.5 px-2.5 py-2 text-xs rounded-md hover:'+ (s.cls.surface2||''))}>
                <span className={s.cls.muted}><Glyph d={d} size={14}/></span>{t}</button>))}
            <div className="my-1 mx-2" style={{borderTop:'1px solid rgba(128,128,128,.18)'}}/>
            <button className={cx(B,'w-full justify-start gap-2.5 px-2.5 py-2 text-xs rounded-md')} style={{color:ERR}}>
              <Glyph d={G.bell} size={14}/>Delete</button>
            <span className={cx(s.cls.surface,'absolute left-1/2 -translate-x-1/2 -top-1 w-2 h-2 rotate-45')}/>
          </div>
          <button className={cx(B,ghost(s),'w-9 h-9 rounded-md p-0 text-base')}>⋯</button>
        </div>) },

    { id:'eO-tooltip-copy', type:'overlays', subtype:'tooltip', title:'Copy tooltip', w:1,
      Render:(s)=>{
        const [copied,setCopied]=React.useState(false);
        return (
          <div className="flex flex-col items-center gap-2 py-4">
            <div className="relative">
              <span className="px-2.5 py-1 rounded-md text-[11px] font-medium text-white inline-flex items-center gap-1" style={{background:copied?OK:'#1f1f23'}}>
                {copied?<><Glyph d={G.check} size={12}/>Copied!</>:'Click to copy'}
                <span className="absolute left-1/2 -translate-x-1/2 -bottom-1 w-2 h-2 rotate-45" style={{background:copied?OK:'#1f1f23'}}/>
              </span>
            </div>
            <button onClick={()=>{setCopied(true);setTimeout(()=>setCopied(false),1400);}}
              className={cx(s.cls.input,'px-3 py-2 text-xs font-mono inline-flex items-center gap-2')}>
              0xA8f2…9c4b<Glyph d={G.plus} size={13}/></button>
          </div>); } },
  ];
  blocks.forEach(b=>window.BLOCKS.push(b));
})();