/* BLOCKS C3 — extra Overlays & Data variants */
(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, extra='') => cx(s.cls.display, s.cls.glow, extra);
  const blocks = [
    /* ---------- OVERLAYS ---------- */
    { id:'c3-modal-confirm', type:'overlays', subtype:'modal', title:'Confirm modal', w:2,
      Render:(s)=>{
        const [busy,setBusy] = window.React.useState(false);
        return (
        <div className={cx(s.cls.surface,'w-full max-w-[440px] p-7')}>
          <div className="flex items-start gap-4">
            <span className="w-11 h-11 rounded-full flex items-center justify-center shrink-0" style={{background:'rgba(255,90,90,.16)',color:'#ff6b6b'}}><Glyph d="M12 8v5M12 16v.5" size={20}/></span>
            <div className="flex-1">
              <div className={head(s,'text-lg font-extrabold')}>Delete this universe?</div>
              <p className={cx('text-sm mt-1.5 leading-relaxed',s.cls.sub)}>All 52 components and their tokens will be archived. This cannot be undone from here.</p>
            </div>
          </div>
          <label className={cx('flex items-center gap-2 mt-5 text-xs cursor-pointer',s.cls.muted)}>
            <input type="checkbox" className="accent-current"/> I understand the consequences
          </label>
          <div className="flex gap-3 mt-5 justify-end">
            <button className={cx(B,ghost(s),'px-5 py-2.5 text-sm')}>Cancel</button>
            <button onClick={()=>setBusy(b=>!b)} className={cx(B,s.cls.btnPrimary,'px-5 py-2.5 text-sm')} style={{background:'#ff5a5a',color:'#fff'}}>{busy?'Deleting…':'Delete forever'}</button>
          </div>
        </div>); } },

    { id:'c3-modal-command', type:'overlays', subtype:'modal', title:'Command palette', w:2,
      Render:(s)=>{
        const all = [['Open library','L'],['New collection','N'],['Switch style','S'],['Copy as TSX','C'],['Invite teammate','I']];
        const [q,setQ] = window.React.useState('');
        const list = all.filter(([t])=>t.toLowerCase().includes(q.toLowerCase()));
        return (
        <div className={cx(s.cls.surface,'w-full max-w-[440px] p-0 overflow-hidden')}>
          <div className="flex items-center gap-3 px-4 py-3.5" style={{borderBottom:'1px solid rgba(128,128,128,.18)'}}>
            <span className={s.cls.muted}><Glyph d={G.search} size={17}/></span>
            <input value={q} onChange={e=>setQ(e.target.value)} placeholder="Type a command…" className={cx('flex-1 bg-transparent outline-none text-sm',s.cls.text)}/>
            <span className={cx(s.cls.chip,'px-1.5 py-0.5 text-[10px] font-bold')}>ESC</span>
          </div>
          <div className="p-2 max-h-[220px] overflow-auto">
            {list.length===0 && <div className={cx('text-sm px-3 py-4 text-center',s.cls.muted)}>No matches</div>}
            {list.map(([t,k])=>(
              <div key={t} className={cx('flex items-center justify-between px-3 py-2.5 rounded-lg cursor-pointer text-sm',s.cls.surface2)}>
                <span className="flex items-center gap-2.5"><Glyph d={G.arrow} size={14}/>{t}</span>
                <span className={cx(s.cls.chip,'px-1.5 py-0.5 text-[10px] font-bold')}>⌘{k}</span>
              </div>))}
          </div>
        </div>); } },

    { id:'c3-toast-success', type:'overlays', subtype:'toast', title:'Success toast', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[320px] px-4 py-3.5 flex items-center gap-3')}>
          <span className="w-8 h-8 rounded-full flex items-center justify-center text-white shrink-0" style={{background:s.cls.accent}}><Glyph d={G.check} size={16}/></span>
          <div className="flex-1">
            <div className="text-sm font-semibold">Collection published</div>
            <div className={cx('text-[11px]',s.cls.muted)}>Live across the Glassmorphism universe</div>
          </div>
          <button className={cx('text-xs font-semibold',s.cls.accent && '')} style={{color:s.cls.accent}}>Undo</button>
        </div>) },

    { id:'c3-toast-progress', type:'overlays', subtype:'toast', title:'Progress toast', w:1,
      Render:(s)=>{
        const [p,setP] = window.React.useState(64);
        return (
        <div className={cx(s.cls.surface,'w-full max-w-[320px] px-4 py-3.5')}>
          <div className="flex items-center gap-3">
            <span className="w-8 h-8 rounded-full flex items-center justify-center shrink-0" style={{background:'rgba(128,128,128,.18)',color:s.cls.accent}}><Glyph d={G.arrow} size={16}/></span>
            <div className="flex-1">
              <div className="text-sm font-semibold">Exporting bundle</div>
              <div className={cx('text-[11px]',s.cls.muted)}>{p}% · ~12s remaining</div>
            </div>
            <button onClick={()=>setP(v=>Math.min(100,v+12))} className={cx(B,ghost(s),'px-2 py-1 text-[11px]')}>+</button>
          </div>
          <div className="h-1.5 rounded-full mt-3 overflow-hidden" style={{background:'rgba(128,128,128,.18)'}}>
            <div className="h-full rounded-full" style={{width:p+'%',background:s.cls.accent}}/>
          </div>
        </div>); } },

    { id:'c3-toast-stack', type:'overlays', subtype:'toast', title:'Toast stack', w:1,
      Render:(s)=>{
        const items = [
          [G.check,'Saved to drafts','just now'],
          [G.heart,'Added to favorites','2m'],
          [G.bell,'3 new comments','5m'],
        ];
        return (
        <div className="flex flex-col gap-2.5 w-full max-w-[320px]">
          {items.map(([d,t,when],i)=>(
            <div key={i} className={cx(s.cls.surface,'px-4 py-3 flex items-center gap-3')} style={{opacity:1-i*0.14}}>
              <span className="w-7 h-7 rounded-full flex items-center justify-center shrink-0" style={{background:'rgba(128,128,128,.16)',color:s.cls.accent}}><Glyph d={d} size={14}/></span>
              <div className="flex-1 text-sm font-medium">{t}</div>
              <span className={cx('text-[11px]',s.cls.muted)}>{when}</span>
            </div>))}
        </div>); } },

    { id:'c3-tooltip-rich', type:'overlays', subtype:'tooltip', title:'Rich tooltip', w:1,
      Render:(s)=>(
        <div className="flex flex-col items-center gap-3">
          <div className={cx(s.cls.surface2,'w-[240px] p-3.5 relative')}>
            <div className="flex items-center gap-2 mb-1.5">
              <Glyph d={G.star} size={15}/>
              <span className={head(s,'text-sm font-bold')}>Pro tip</span>
            </div>
            <p className={cx('text-xs leading-relaxed',s.cls.sub)}>Press <span className={cx(s.cls.chip,'px-1 py-0.5 text-[10px] font-bold')}>⌘K</span> anywhere to jump between styles instantly.</p>
            <span className="absolute left-1/2 -bottom-1.5 w-3 h-3" style={{transform:'translateX(-50%) rotate(45deg)',background:'inherit'}}/>
          </div>
          <button className={cx(B,ghost(s),'w-10 h-10 rounded-full p-0')}><Glyph d="M12 16v-4M12 8v.5" size={18}/></button>
        </div>) },

    { id:'c3-tooltip-hint', type:'overlays', subtype:'tooltip', title:'Hint tooltip', w:1,
      Render:(s)=>{
        const [on,setOn] = window.React.useState(true);
        return (
        <div className="flex flex-col items-center gap-3">
          <div className="h-9 flex items-end">
            {on && (
            <div className={cx(s.cls.surface2,'px-3 py-1.5 text-xs font-medium relative')}>
              Click to copy TSX
              <span className="absolute left-1/2 -bottom-1.5 w-2.5 h-2.5" style={{transform:'translateX(-50%) rotate(45deg)',background:'inherit'}}/>
            </div>)}
          </div>
          <button onMouseEnter={()=>setOn(true)} onMouseLeave={()=>setOn(true)} onClick={()=>setOn(o=>!o)} className={cx(B,s.cls.btnPrimary,'px-4 py-2.5 text-sm')}>
            <Glyph d={G.plus} size={15}/>Copy
          </button>
        </div>); } },

    /* ---------- DATA ---------- */
    { id:'c3-data-area-kpi', type:'data', subtype:'area', title:'KPI area', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[330px] p-5')}>
          <div className="flex items-center justify-between mb-1">
            <div>
              <div className={cx('text-sm',s.cls.sub)}>Monthly recurring</div>
              <div className={head(s,'text-2xl font-extrabold')}>$48,920</div>
            </div>
            <span className={cx(s.cls.chip,'px-2 py-0.5 text-[11px] font-bold')}>+12.4%</span>
          </div>
          <div className="h-24 mt-2"><Spark colors={s.chart} h={96} data={[20,24,22,30,28,36,33,44,40,52,49,60]}/></div>
          <div className={cx('flex justify-between text-[10px] mt-1',s.cls.muted)}><span>Jan</span><span>Apr</span><span>Aug</span><span>Dec</span></div>
        </div>) },

    { id:'c3-data-area-multi', type:'data', subtype:'area', title:'Multi-series area', w:2,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[460px] p-6')}>
          <div className="flex items-center justify-between mb-3">
            <div className={head(s,'font-extrabold')}>Traffic vs conversions</div>
            <div className="flex gap-3 text-[11px]">
              <span className="flex items-center gap-1.5"><span className="w-2.5 h-2.5 rounded-full" style={{background:s.chart[0]}}/>Visits</span>
              <span className="flex items-center gap-1.5"><span className="w-2.5 h-2.5 rounded-full" style={{background:s.chart[1]||s.chart[0]}}/>Sales</span>
            </div>
          </div>
          <div className="relative h-28">
            <div className="absolute inset-0"><Spark colors={[s.chart[0]]} h={112} data={[18,30,26,42,38,54,48,66,60,78,72,88]}/></div>
            <div className="absolute inset-0 opacity-70"><Spark colors={[s.chart[1]||s.chart[0]]} h={112} data={[8,14,11,20,17,26,22,32,28,38,34,46]}/></div>
          </div>
          <div className={cx('flex justify-between text-[10px] mt-2',s.cls.muted)}>{['W1','W2','W3','W4','W5','W6'].map(l=><span key={l}>{l}</span>)}</div>
        </div>) },

    { id:'c3-data-bars-grouped', type:'data', subtype:'bars', title:'Grouped bars', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[330px] p-5')}>
          <div className={cx('text-sm',s.cls.sub)}>Plan distribution</div>
          <div className={head(s,'text-2xl font-extrabold mb-3')}>3,204</div>
          <div className="h-28"><Bars colors={s.chart} data={[34,58,46,72,50,80,62,90]}/></div>
          <div className={cx('flex justify-between text-[10px] mt-2',s.cls.muted)}>{['Q1','Q1','Q2','Q2','Q3','Q3','Q4','Q4'].map((l,i)=><span key={i}>{l}</span>)}</div>
        </div>) },

    { id:'c3-data-bars-mini', type:'data', subtype:'bars', title:'Mini bars row', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[330px] p-5 flex flex-col gap-3')}>
          {[['Direct',82],['Organic',64],['Referral',48],['Social',31]].map(([l,v])=>(
            <div key={l} className="flex items-center gap-3">
              <span className={cx('text-xs w-16 shrink-0',s.cls.sub)}>{l}</span>
              <div className="flex-1 h-2.5 rounded-full overflow-hidden" style={{background:'rgba(128,128,128,.16)'}}>
                <div className="h-full rounded-full" style={{width:v+'%',background:s.chart[0]}}/>
              </div>
              <span className="text-xs font-semibold w-9 text-right">{v}%</span>
            </div>))}
        </div>) },

    { id:'c3-data-donut', type:'data', subtype:'bars', title:'Donut breakdown', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[330px] p-5 flex items-center gap-5')}>
          <div className="flex flex-col items-center shrink-0">
            <Ring colors={s.chart} value={68}/>
            <div className={cx('text-[11px] mt-1.5',s.cls.muted)}>used</div>
          </div>
          <div className="flex-1 flex flex-col gap-2.5">
            {[['Components','68%'],['Assets','22%'],['Free','10%']].map(([l,v],i)=>(
              <div key={l} className="flex items-center gap-2.5 text-sm">
                <span className="w-2.5 h-2.5 rounded-full" style={{background:s.chart[i%s.chart.length]}}/>
                <span className={cx('flex-1',s.cls.sub)}>{l}</span>
                <span className="font-semibold">{v}</span>
              </div>))}
          </div>
        </div>) },

    { id:'c3-data-table-rows', type:'data', subtype:'table', title:'Sortable table', w:2,
      Render:(s)=>{
        const rows = [['Pricing card','Marketing','1.2k','Live'],['Stat grid','Dashboard','940','Live'],['Hero split','Marketing','812','Draft'],['Toast stack','Overlays','603','Live']];
        return (
        <div className={cx(s.cls.surface,'w-full max-w-[480px] p-5')}>
          <div className="flex items-center justify-between mb-3">
            <div className={head(s,'font-extrabold')}>Top components</div>
            <button className={cx(B,ghost(s),'px-3 py-1.5 text-xs')}><Glyph d={G.search} size={13}/>Filter</button>
          </div>
          <div className={cx('grid grid-cols-[1fr_auto_auto_auto] gap-x-4 text-[11px] uppercase tracking-wider pb-2 mb-1',s.cls.muted)} style={{borderBottom:'1px solid rgba(128,128,128,.25)'}}>
            <span>Name</span><span>Type</span><span className="text-right">Uses</span><span className="text-right">Status</span>
          </div>
          {rows.map(([n,ty,u,st])=>(
            <div key={n} className="grid grid-cols-[1fr_auto_auto_auto] gap-x-4 items-center py-2 text-sm" style={{borderBottom:'1px solid rgba(128,128,128,.12)'}}>
              <span className="font-medium">{n}</span>
              <span className={s.cls.sub}>{ty}</span>
              <span className="text-right font-semibold">{u}</span>
              <span className={cx(s.cls.chip,'px-2 py-0.5 text-[10px] font-bold justify-self-end')}>{st}</span>
            </div>))}
        </div>); } },

    { id:'c3-data-stat-grid', type:'data', subtype:'table', title:'Stat grid', w:2,
      Render:(s)=>{
        const stats = [['Total revenue','$128.4k','+9.2%',[20,28,24,34,40,52]],['Active users','9,310','+4.1%',[30,26,34,30,42,48]],['Churn','1.8%','-0.6%',[40,36,30,28,22,18]],['Avg. order','$74','+2.3%',[18,22,20,28,26,32]]];
        return (
        <div className={cx(s.cls.surface,'w-full max-w-[480px] p-5')}>
          <div className={head(s,'font-extrabold mb-4')}>This quarter</div>
          <div className="grid grid-cols-2 gap-3">
            {stats.map(([l,v,d,data])=>(
              <div key={l} className={cx(s.cls.surface2,'p-3.5')}>
                <div className={cx('text-[11px]',s.cls.muted)}>{l}</div>
                <div className="flex items-end justify-between mt-0.5">
                  <div className="text-xl font-extrabold">{v}</div>
                  <span className={cx(s.cls.chip,'px-1.5 py-0.5 text-[10px] font-bold')}>{d}</span>
                </div>
                <div className="h-8 mt-2"><Spark colors={s.chart} h={32} data={data}/></div>
              </div>))}
          </div>
        </div>); } },
  ];
  blocks.forEach(b=>window.BLOCKS.push(b));
})();