/* BLOCKS E — extra dashboard widgets (analytics + activity), 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 UP={background:'rgba(34,197,94,.15)',color:'#22c55e'};
  const DN={background:'rgba(239,68,68,.15)',color:'#ef4444'};
  const Delta=({up,children})=>(<span className="px-2 py-0.5 text-[11px] font-semibold rounded-full inline-flex items-center gap-0.5" style={up?UP:DN}>{children}</span>);

  const blocks=[
    /* ============ ANALYTICS ============ */

    { id:'eDash-metric-chart', type:'dashboard', subtype:'analytics', title:'Metric widget w/ chart', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[300px] p-5')}>
          <div className="flex items-center justify-between">
            <span className={cx('text-xs font-medium uppercase tracking-wider',s.cls.sub)}>Active users</span>
            <Delta up>+12.4%</Delta>
          </div>
          <div className="text-3xl font-extrabold mt-1.5">18,492</div>
          <div className={cx('text-[11px] mt-0.5',s.cls.muted)}>vs 16,450 last week</div>
          <div className="h-24 mt-4"><Bars colors={s.chart}/></div>
          <div className={cx('flex items-center justify-between mt-3 text-[11px]',s.cls.muted)}>
            <span>Mon</span><span>Wed</span><span>Fri</span><span>Sun</span>
          </div>
        </div>) },

    { id:'eDash-kpi-quad', type:'dashboard', subtype:'analytics', title:'KPI quad grid', w:2,
      Render:(s)=>{
        const kpis=[['Revenue','$84.2K','+8.1%',true,G.arrow],['Orders','1,294','+3.4%',true,G.plus],['Refunds','$2,140','+1.2%',false,G.arrow],['Avg. order','$65.07','-0.8%',false,G.arrow]];
        return (
          <div className={cx(s.cls.surface,'w-full max-w-[480px] p-6')}>
            <div className="flex items-center justify-between mb-4">
              <div className={head(s,'font-extrabold')}>Overview</div>
              <span className={cx('text-[11px]',s.cls.muted)}>Last 30 days</span>
            </div>
            <div className="grid grid-cols-2 gap-3">
              {kpis.map(([l,v,d,up,g])=>(
                <div key={l} className={cx(s.cls.surface2,'p-4')}>
                  <div className="flex items-center justify-between">
                    <span className={cx('text-[11px] font-medium uppercase tracking-wider',s.cls.muted)}>{l}</span>
                    <span style={{color:up?'#22c55e':'#ef4444'}}><Glyph d={g} size={14}/></span>
                  </div>
                  <div className="text-2xl font-extrabold mt-1.5">{v}</div>
                  <div className="text-[11px] font-semibold mt-0.5" style={{color:up?'#22c55e':'#ef4444'}}>{d}</div>
                </div>))}
            </div>
          </div>); } },

    { id:'eDash-traffic-sources', type:'dashboard', subtype:'analytics', title:'Traffic sources w/ Ring', w:1,
      Render:(s)=>{
        const rows=[['Organic','42%',sw(s,0)],['Direct','28%',sw(s,1,s.cls.accent)],['Referral','19%',sw(s,2,'#888')],['Social','11%',sw(s,3,'#bbb')]];
        return (
          <div className={cx(s.cls.surface,'w-full max-w-[300px] p-5')}>
            <div className={head(s,'font-extrabold mb-4')}>Traffic sources</div>
            <div className="flex items-center gap-4">
              <div className="w-20 h-20 shrink-0"><Ring colors={s.chart} value={42}/></div>
              <div className="flex-1 flex flex-col gap-2.5">
                {rows.map(([l,p,c])=>(
                  <div key={l} className="flex items-center gap-2 text-xs">
                    <span className="w-2.5 h-2.5 rounded-full shrink-0" style={{background:c}}/>
                    <span className={cx('flex-1',s.cls.sub)}>{l}</span>
                    <span className="font-semibold">{p}</span>
                  </div>))}
              </div>
            </div>
            <div className={cx('text-[11px] mt-4 pt-3',s.cls.muted)} style={{borderTop:'1px solid rgba(128,128,128,.18)'}}>24,180 sessions this month</div>
          </div>); } },

    { id:'eDash-revenue-spark', type:'dashboard', subtype:'analytics', title:'Revenue w/ Spark + delta', w:2,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[480px] p-6')}>
          <div className="flex items-start justify-between">
            <div>
              <div className={cx('text-xs font-medium uppercase tracking-wider',s.cls.sub)}>Total revenue</div>
              <div className="text-4xl font-extrabold mt-1">$248,910</div>
              <div className="flex items-center gap-2 mt-1.5">
                <Delta up>+22.6%</Delta>
                <span className={cx('text-[11px]',s.cls.muted)}>vs previous quarter</span>
              </div>
            </div>
            <div className={cx(s.cls.surface2,'p-0.5 inline-flex text-xs')}>
              <span className={cx('px-2.5 py-1 rounded-md',s.cls.btnPrimary)}>Q</span>
              <span className={cx('px-2.5 py-1',s.cls.muted)}>Y</span>
            </div>
          </div>
          <div className="h-24 mt-5"><Spark colors={s.chart} h={96}/></div>
          <div className="grid grid-cols-3 gap-3 mt-4">
            {[['MRR','$82.9K'],['New','$31.2K'],['Churn','$4.1K']].map(([l,v])=>(
              <div key={l} className={cx(s.cls.surface2,'p-3')}>
                <div className={cx('text-[11px]',s.cls.muted)}>{l}</div>
                <div className="text-lg font-extrabold">{v}</div>
              </div>))}
          </div>
        </div>) },

    { id:'eDash-funnel', type:'dashboard', subtype:'analytics', title:'Conversion funnel', w:1,
      Render:(s)=>{
        const steps=[['Visited',100,'24,180'],['Signed up',46,'11,123'],['Activated',31,'7,496'],['Subscribed',12,'2,901']];
        return (
          <div className={cx(s.cls.surface,'w-full max-w-[300px] p-5')}>
            <div className="flex items-center justify-between mb-4">
              <div className={head(s,'font-extrabold')}>Conversion funnel</div>
              <Delta up>12% CVR</Delta>
            </div>
            <div className="flex flex-col gap-3.5">
              {steps.map(([l,pct,n],i)=>(
                <div key={l}>
                  <div className="flex items-center justify-between text-xs mb-1">
                    <span className={s.cls.sub}>{l}</span>
                    <span className="font-semibold">{n} · {pct}%</span>
                  </div>
                  <div className={cx(s.cls.surface2,'h-2.5 rounded-full overflow-hidden')}>
                    <div className="h-full rounded-full" style={{width:pct+'%',background:i===steps.length-1?s.cls.accent:`linear-gradient(90deg, ${sw(s,0)}, ${sw(s,1,s.cls.accent)})`}}/>
                  </div>
                </div>))}
            </div>
          </div>); } },

    /* ============ ACTIVITY ============ */

    { id:'eDash-timeline', type:'dashboard', subtype:'activity', title:'Activity timeline', w:1,
      Render:(s)=>{
        const ev=[['Deploy succeeded','api-gateway · v2.14.0','#22c55e','2m ago'],['New customer','Northwind Labs upgraded to Scale',s.cls.accent,'25m ago'],['Comment added','Mara on "Pricing redesign"',sw(s,1,'#888'),'1h ago'],['Build failed','web-app · lint errors','#ef4444','3h ago']];
        return (
          <div className={cx(s.cls.surface,'w-full max-w-[300px] p-5')}>
            <div className={head(s,'font-extrabold mb-4')}>Timeline</div>
            <div className="relative flex flex-col gap-5">
              <span className="absolute left-[5px] top-1 bottom-1 w-px" style={{background:'rgba(128,128,128,.25)'}}/>
              {ev.map(([t,d,c,when],i)=>(
                <div key={i} className="relative flex gap-3 pl-5">
                  <span className="absolute left-0 top-1 w-[11px] h-[11px] rounded-full" style={{background:c,boxShadow:`0 0 0 3px var(--card-bg,rgba(0,0,0,0))`}}/>
                  <div className="min-w-0">
                    <div className="text-sm font-semibold leading-tight">{t}</div>
                    <div className={cx('text-[11px] mt-0.5 truncate',s.cls.sub)}>{d}</div>
                    <div className={cx('text-[11px] mt-0.5',s.cls.muted)}>{when}</div>
                  </div>
                </div>))}
            </div>
          </div>); } },

    { id:'eDash-recent-orders', type:'dashboard', subtype:'activity', title:'Recent orders table', w:2,
      Render:(s)=>{
        const rows=[['#A-7741','Aria Chen','$248.00','Paid',true],['#A-7740','Marcus Lee','$92.50','Pending',null],['#A-7739','Sofia Reyes','$415.20','Paid',true],['#A-7738','Tom Becker','$58.00','Refunded',false]];
        const tone=ok=>ok?UP:ok===false?DN:{background:'rgba(234,179,8,.15)',color:'#eab308'};
        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')}>Recent orders</div>
              <button className={cx(B,s.cls.btn,'px-3 py-1.5 text-xs')}>View all<Glyph d={G.arrow} size={13}/></button>
            </div>
            <div className={cx('grid grid-cols-[1fr_1.4fr_auto_auto] gap-x-3 text-[11px] font-medium uppercase tracking-wider pb-2',s.cls.muted)} style={{borderBottom:'1px solid rgba(128,128,128,.18)'}}>
              <span>Order</span><span>Customer</span><span className="text-right">Total</span><span className="text-right">Status</span>
            </div>
            <div className="flex flex-col">
              {rows.map(([id,cust,total,st,ok])=>(
                <div key={id} className="grid grid-cols-[1fr_1.4fr_auto_auto] gap-x-3 items-center py-2.5 text-sm" style={{borderBottom:'1px solid rgba(128,128,128,.1)'}}>
                  <span className="font-mono text-xs font-semibold">{id}</span>
                  <span className={cx('truncate',s.cls.sub)}>{cust}</span>
                  <span className="text-right font-semibold">{total}</span>
                  <span className="text-right"><span className="px-2 py-0.5 text-[11px] font-semibold rounded-full" style={tone(ok)}>{st}</span></span>
                </div>))}
            </div>
          </div>); } },

    { id:'eDash-notifications', type:'dashboard', subtype:'activity', title:'Notifications list', w:1,
      Render:(s)=>{
        const items=[[G.bell,'Payment received','$248 from Aria Chen','5m',true],[G.star,'New 5-star review','"Best component kit"','40m',true],[G.heart,'Daniel mentioned you','in #design-system','2h',false],[G.check,'Backup completed','prod-db snapshot','6h',false]];
        return (
          <div className={cx(s.cls.surface,'w-full max-w-[300px] p-5')}>
            <div className="flex items-center justify-between mb-3">
              <div className={head(s,'font-extrabold')}>Notifications</div>
              <span className="px-2 py-0.5 text-[11px] font-bold rounded-full text-white" style={{background:s.cls.accent}}>2 new</span>
            </div>
            <div className="flex flex-col gap-1">
              {items.map(([g,t,d,when,unread],i)=>(
                <div key={i} className={cx('flex gap-3 p-2 rounded-lg',unread?s.cls.surface2:'')}>
                  <span className="w-8 h-8 rounded-full inline-flex items-center justify-center shrink-0" style={{background:unread?s.cls.accent:'rgba(128,128,128,.18)',color:unread?'#fff':undefined}}><Glyph d={g} size={14}/></span>
                  <div className="flex-1 min-w-0">
                    <div className={cx('text-sm leading-tight',unread?'font-semibold':'font-medium')}>{t}</div>
                    <div className={cx('text-[11px] mt-0.5 truncate',s.cls.sub)}>{d}</div>
                  </div>
                  <div className="flex flex-col items-end shrink-0">
                    <span className={cx('text-[11px]',s.cls.muted)}>{when}</span>
                    {unread && <span className="w-2 h-2 rounded-full mt-1" style={{background:s.cls.accent}}/>}
                  </div>
                </div>))}
            </div>
          </div>); } },

    { id:'eDash-team-online', type:'dashboard', subtype:'activity', title:'Team online list', w:1,
      Render:(s)=>{
        const team=[['Mara Velez','Designing',sw(s,0),'#22c55e'],['Diego Santos','In a call',sw(s,1,s.cls.accent),'#eab308'],['Yuki Tanaka','Reviewing PR',sw(s,2,'#888'),'#22c55e'],['Omar Haddad','Away',sw(s,3,'#bbb'),'#9ca3af']];
        const ini=n=>n.split(' ').map(w=>w[0]).join('');
        return (
          <div className={cx(s.cls.surface,'w-full max-w-[300px] p-5')}>
            <div className="flex items-center justify-between mb-4">
              <div className={head(s,'font-extrabold')}>Team</div>
              <span className="inline-flex items-center gap-1.5 text-[11px] font-semibold" style={{color:'#22c55e'}}><span className="w-2 h-2 rounded-full" style={{background:'#22c55e'}}/>3 online</span>
            </div>
            <div className="flex flex-col gap-3.5">
              {team.map(([n,st,bg,dot])=>(
                <div key={n} className="flex items-center gap-3">
                  <div className="relative shrink-0">
                    <span className="w-9 h-9 rounded-full inline-flex items-center justify-center text-white text-xs font-bold" style={{background:bg}}>{ini(n)}</span>
                    <span className="absolute bottom-0 right-0 w-3 h-3 rounded-full" style={{background:dot,border:'2px solid var(--card-bg,#fff)'}}/>
                  </div>
                  <div className="min-w-0 flex-1">
                    <div className="text-sm font-semibold truncate">{n}</div>
                    <div className={cx('text-[11px]',s.cls.muted)}>{st}</div>
                  </div>
                  <button className={cx(B,s.cls.surface2,'w-8 h-8 rounded-full p-0')}><Glyph d={G.bell} size={13}/></button>
                </div>))}
            </div>
          </div>); } },

    { id:'eDash-tasks', type:'dashboard', subtype:'activity', title:'Tasks checklist', w:1,
      Render:(s)=>{
        const [done,setDone]=React.useState({1:true});
        const tasks=[['Review Q3 roadmap','Today'],['Ship pricing redesign','Tomorrow'],['Sync with design team','Jun 10'],['Audit onboarding flow','Jun 12'],['Draft release notes','Jun 14']];
        const toggle=i=>setDone(d=>({...d,[i]:!d[i]}));
        const count=tasks.filter((_,i)=>done[i]).length;
        return (
          <div className={cx(s.cls.surface,'w-full max-w-[300px] p-5')}>
            <div className="flex items-center justify-between mb-1">
              <div className={head(s,'font-extrabold')}>Tasks</div>
              <span className={cx('text-[11px]',s.cls.muted)}>{count}/{tasks.length} done</span>
            </div>
            <div className={cx(s.cls.surface2,'h-1.5 rounded-full overflow-hidden mb-4')}>
              <div className="h-full rounded-full transition-all" style={{width:(count/tasks.length*100)+'%',background:s.cls.accent}}/>
            </div>
            <div className="flex flex-col gap-1">
              {tasks.map(([t,when],i)=>(
                <button key={i} onClick={()=>toggle(i)} className="flex items-center gap-3 p-2 rounded-lg text-left hover:opacity-100 transition" style={{opacity:done[i]?.55:1}}>
                  <span className="w-5 h-5 rounded-md inline-flex items-center justify-center shrink-0 transition" style={done[i]?{background:s.cls.accent,color:'#fff'}:{boxShadow:'inset 0 0 0 1.5px rgba(128,128,128,.4)'}}>{done[i]&&<Glyph d={G.check} size={13}/>}</span>
                  <span className={cx('flex-1 text-sm',done[i]?'line-through':'font-medium')}>{t}</span>
                  <span className={cx('text-[11px]',s.cls.muted)}>{when}</span>
                </button>))}
            </div>
          </div>); } },
  ];
  blocks.forEach(b=>window.BLOCKS.push(b));
})();