/* BLOCKS F — dashboard widgets (analytics + activity), premium & style-agnostic */
(function(){
  const { cx, Slot, Spark, Bars, Ring, Glyph, G } = window;
  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:'fDB-chart-widget', type:'dashboard', subtype:'analytics', title:'Chart widget', 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)}>Page views</span>
            <Delta up>+9.2%</Delta>
          </div>
          <div className="text-3xl font-extrabold mt-1.5">92,418</div>
          <div className={cx('text-[11px] mt-0.5',s.cls.muted)}>vs 84,640 prior period</div>
          <div className="h-24 mt-4"><Spark colors={s.chart} h={96}/></div>
          <div className={cx('flex items-center justify-between mt-3 text-[11px]',s.cls.muted)}>
            <span>Jan</span><span>Mar</span><span>May</span><span>Jul</span>
          </div>
        </div>) },

    { id:'fDB-kpi-quad', type:'dashboard', subtype:'analytics', title:'KPI quad grid', w:2,
      Render:(s)=>{
        const kpis=[['MRR','$48.6K','+11.3%',true],['Active users','12,840','+5.7%',true],['Churn rate','2.1%','-0.4%',true],['Support load','318','+6.9%',false]];
        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')}>Key metrics</div>
              <span className={cx('text-[11px]',s.cls.muted)}>This month</span>
            </div>
            <div className="grid grid-cols-2 gap-3">
              {kpis.map(([l,v,d,up])=>(
                <div key={l} className={cx(s.cls.surface2,'p-4')}>
                  <div className={cx('text-[11px] font-medium uppercase tracking-wider',s.cls.muted)}>{l}</div>
                  <div className="text-2xl font-extrabold mt-1.5">{v}</div>
                  <div className="text-[11px] font-semibold mt-1 inline-flex items-center gap-1" style={{color:up?'#22c55e':'#ef4444'}}>
                    <span style={{transform:up?'none':'rotate(90deg)'}}><Glyph d={G.arrow} size={12}/></span>{d}
                  </div>
                </div>))}
            </div>
          </div>); } },

    { id:'fDB-revenue-ring', type:'dashboard', subtype:'analytics', title:'Revenue w/ Ring breakdown', w:1,
      Render:(s)=>{
        const rows=[['Subscriptions','$31.4K',sw(s,0)],['One-time','$9.8K',sw(s,1,s.cls.accent)],['Add-ons','$4.2K',sw(s,2,'#888')]];
        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')}>Revenue</div>
              <Delta up>+14%</Delta>
            </div>
            <div className="flex items-center gap-4">
              <div className="w-20 h-20 shrink-0"><Ring colors={s.chart} value={72}/></div>
              <div className="flex-1 flex flex-col gap-2.5">
                {rows.map(([l,v,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">{v}</span>
                  </div>))}
              </div>
            </div>
            <div className={cx('flex items-center justify-between mt-4 pt-3',s.cls.muted)} style={{borderTop:'1px solid rgba(128,128,128,.18)'}}>
              <span className="text-[11px]">Total this month</span>
              <span className="text-sm font-extrabold" style={{color:'inherit'}}>$45,400</span>
            </div>
          </div>); } },

    { id:'fDB-traffic-sources', type:'dashboard', subtype:'analytics', title:'Traffic sources', w:1,
      Render:(s)=>{
        const rows=[['Organic search',82],['Direct',54],['Referral',37],['Social',23],['Email',14]];
        const max=82;
        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')}>Traffic sources</div>
              <span className={cx('text-[11px]',s.cls.muted)}>30 days</span>
            </div>
            <div className="flex flex-col gap-3.5">
              {rows.map(([l,v],i)=>(
                <div key={l}>
                  <div className="flex items-center justify-between text-xs mb-1.5">
                    <span className={s.cls.sub}>{l}</span>
                    <span className="font-semibold">{(v*120).toLocaleString()}</span>
                  </div>
                  <div className={cx(s.cls.surface2,'h-2 rounded-full overflow-hidden')}>
                    <div className="h-full rounded-full" style={{width:(v/max*100)+'%',background:i===0?s.cls.accent:`linear-gradient(90deg, ${sw(s,0)}, ${sw(s,1,s.cls.accent)})`}}/>
                  </div>
                </div>))}
            </div>
          </div>); } },

    { id:'fDB-gauge', type:'dashboard', subtype:'analytics', title:'Gauge widget', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[300px] p-5 flex flex-col items-center text-center')}>
          <div className={head(s,'font-extrabold self-start mb-2')}>Goal progress</div>
          <div className="w-40 h-40 my-2"><Ring colors={s.chart} value={68}/></div>
          <div className="text-3xl font-extrabold">68%</div>
          <div className={cx('text-[11px] mt-1',s.cls.muted)}>$68K of $100K quarterly target</div>
          <div className="flex items-center gap-1.5 mt-3 text-xs font-semibold" style={{color:'#22c55e'}}>
            <Glyph d={G.arrow} size={13}/>On track · 14 days left
          </div>
        </div>) },

    { id:'fDB-leaderboard', type:'dashboard', subtype:'analytics', title:'Leaderboard', w:1,
      Render:(s)=>{
        const rows=[['Aria Chen','$28,410',sw(s,0)],['Marcus Lee','$24,180',sw(s,1,s.cls.accent)],['Sofia Reyes','$19,650',sw(s,2,'#888')],['Tom Becker','$15,920',sw(s,3,'#bbb')]];
        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')}>Top sellers</div>
              <span className={cx('text-[11px]',s.cls.muted)}>Q3</span>
            </div>
            <div className="flex flex-col gap-3">
              {rows.map(([n,v,bg],i)=>(
                <div key={n} className="flex items-center gap-3">
                  <span className={cx('w-5 text-sm font-extrabold tabular-nums',i===0?'':s.cls.muted)} style={i===0?{color:s.cls.accent}:undefined}>{i+1}</span>
                  <span className="w-9 h-9 rounded-full inline-flex items-center justify-center text-white text-xs font-bold shrink-0" style={{background:bg}}>{ini(n)}</span>
                  <span className="flex-1 text-sm font-semibold truncate">{n}</span>
                  <span className="text-sm font-extrabold tabular-nums">{v}</span>
                </div>))}
            </div>
          </div>); } },

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

    { id:'fDB-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:'fDB-recent-orders', type:'dashboard', subtype:'activity', title:'Recent orders table', w:2,
      Render:(s)=>{
        const rows=[['#A-8841','Aria Chen','$248.00','Paid','ok'],['#A-8840','Marcus Lee','$92.50','Pending','wait'],['#A-8839','Sofia Reyes','$415.20','Paid','ok'],['#A-8838','Tom Becker','$58.00','Refunded','off'],['#A-8837','Lena Park','$129.00','Pending','wait']];
        const tone=k=>k==='ok'?UP:k==='off'?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('inline-flex items-center gap-1.5 cursor-pointer',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,k])=>(
                <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(k)}>{st}</span></span>
                </div>))}
            </div>
          </div>); } },
  ];
  blocks.forEach(b=>window.BLOCKS.push(b));
})();