// Presentation
function ModuleSlides() {
  const [cur, setCur] = React.useState(2);
  const [tab, setTab] = React.useState('Home');
  const S = KS_DATA.slides;

  // Render one slide by kind
  const renderSlide = (s, small = false) => {
    const scale = small ? 0.24 : 1;
    const p = (n) => n * scale + 'px';

    if (s.kind === 'title') {
      return (
        <div style={{
          height:'100%', display:'flex', flexDirection:'column', justifyContent:'center',
          padding: p(72), gap: p(20),
          background: 'linear-gradient(135deg, #F4F8FC 0%, #FFFFFF 60%)',
        }}>
          <div style={{width: p(60), height: p(4), background:'var(--mod-slides)'}}/>
          <div style={{fontSize: p(72), fontWeight: 700, lineHeight:1.05, letterSpacing:'-0.02em'}}>DigiSeva Platform</div>
          <div style={{fontSize: p(28), color:'var(--ink-500)', fontWeight:400}}>Q3 FY 2026-27 Review</div>
          <div style={{position:'absolute', bottom: p(48), left: p(72), fontSize: p(14), color:'var(--ink-500)', letterSpacing:'0.06em'}}>
            MINISTRY OF ELECTRONICS & IT · 13 JULY 2026
          </div>
        </div>
      );
    }
    if (s.kind === 'agenda') {
      return (
        <div style={{padding: p(64), height:'100%'}}>
          <div style={{fontSize: p(40), fontWeight: 700, marginBottom: p(28), letterSpacing:'-0.01em'}}>Agenda</div>
          <div style={{display:'flex', flexDirection:'column', gap: p(14)}}>
            {s.items.map((it, i) => (
              <div key={i} style={{display:'flex', alignItems:'center', gap: p(20), fontSize: p(22)}}>
                <div style={{width: p(36), height: p(36), borderRadius:'50%', background:'var(--mod-slides-tint)', color:'var(--mod-slides)', display:'grid', placeItems:'center', fontWeight:700, fontSize: p(15), flexShrink:0}}>{i+1}</div>
                <span>{it}</span>
              </div>
            ))}
          </div>
        </div>
      );
    }
    if (s.kind === 'kpi') {
      const kpis = [
        {label:'Citizen accounts', v:'847M', d:'+ 4.2% QoQ', c:'#0F7A3E'},
        {label:'Monthly txns', v:'12.4 B', d:'+ 11% QoQ', c:'#0F7A3E'},
        {label:'Avg latency', v:'218 ms', d:'– 34 ms', c:'#0F7A3E'},
        {label:'Uptime', v:'99.982%', d:'SLA: 99.95%', c:'#0F7A3E'},
      ];
      return (
        <div style={{padding: p(64), height:'100%'}}>
          <div style={{fontSize: p(40), fontWeight: 700, marginBottom: p(6)}}>Programme Status</div>
          <div style={{fontSize: p(18), color:'var(--ink-500)', marginBottom: p(28)}}>Rolling 90-day metrics · as of 12 Jul 2026</div>
          <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: p(16)}}>
            {kpis.map(k => (
              <div key={k.label} style={{
                border:'1px solid var(--ink-200)', borderRadius: p(12),
                padding: p(24), display:'flex', flexDirection:'column', gap: p(6),
              }}>
                <div style={{fontSize: p(13), color:'var(--ink-500)', letterSpacing:'0.05em', textTransform:'uppercase'}}>{k.label}</div>
                <div style={{fontSize: p(44), fontWeight:700, letterSpacing:'-0.02em'}}>{k.v}</div>
                <div style={{fontSize: p(13), color: k.c, fontWeight:600}}>{k.d}</div>
              </div>
            ))}
          </div>
        </div>
      );
    }
    if (s.kind === 'chart') {
      const data = [420, 540, 590, 680, 720, 810, 890, 940, 1020, 1080, 1180, 1240];
      const max = 1300;
      return (
        <div style={{padding: p(64), height:'100%'}}>
          <div style={{fontSize: p(40), fontWeight: 700, marginBottom: p(6)}}>Adoption Metrics</div>
          <div style={{fontSize: p(18), color:'var(--ink-500)', marginBottom: p(20)}}>Monthly active users (millions) · rolling 12 months</div>
          <svg viewBox="0 0 800 380" width="100%" height={p(380)} style={{maxHeight: p(380)}}>
            {[0, 0.25, 0.5, 0.75, 1].map((t, i) => (
              <line key={i} x1={40} x2={780} y1={40 + t*300} y2={40 + t*300} stroke="#E2E8F0" strokeWidth="1"/>
            ))}
            <polyline
              fill="none" stroke="var(--mod-slides)" strokeWidth={p(3)} strokeLinejoin="round"
              points={data.map((d, i) => `${40 + i * (740/11)},${340 - (d/max)*300}`).join(' ')}
            />
            <polygon
              fill="var(--mod-slides)" fillOpacity="0.1"
              points={`40,340 ${data.map((d, i) => `${40 + i * (740/11)},${340 - (d/max)*300}`).join(' ')} 780,340`}
            />
            {data.map((d, i) => (
              <circle key={i} cx={40 + i * (740/11)} cy={340 - (d/max)*300} r={p(4)} fill="var(--mod-slides)"/>
            ))}
            {['Jul','Aug','Sep','Oct','Nov','Dec','Jan','Feb','Mar','Apr','May','Jun'].map((m, i) => (
              <text key={m} x={40 + i * (740/11)} y={365} fontSize={p(13)} textAnchor="middle" fill="#64748B">{m}</text>
            ))}
          </svg>
        </div>
      );
    }
    if (s.kind === 'bars') {
      const bars = KS_DATA.budget.rows.slice(0, 6);
      return (
        <div style={{padding: p(64), height:'100%'}}>
          <div style={{fontSize: p(40), fontWeight: 700, marginBottom: p(6)}}>Budget Utilisation</div>
          <div style={{fontSize: p(18), color:'var(--ink-500)', marginBottom: p(24)}}>Top 6 programmes · FY 26-27 YTD</div>
          <div style={{display:'flex', flexDirection:'column', gap: p(14)}}>
            {bars.map((b, i) => (
              <div key={i}>
                <div style={{display:'flex', justifyContent:'space-between', fontSize: p(15), marginBottom: p(4)}}>
                  <span>{b[0]}</span>
                  <span style={{fontFamily:'var(--f-mono)', fontWeight:600}}>{b[4].toFixed(1)}%</span>
                </div>
                <div style={{height: p(14), background:'var(--ink-100)', borderRadius: p(3), overflow:'hidden'}}>
                  <div style={{
                    width: b[4] + '%', height:'100%',
                    background: b[4] > 70 ? 'var(--ok)' : b[4] > 55 ? 'var(--warn)' : 'var(--err)',
                  }}/>
                </div>
              </div>
            ))}
          </div>
        </div>
      );
    }
    if (s.kind === 'risks') {
      const risks = [
        {r:'Data centre commissioning delay (Bhubaneswar)', i:'High', p:'Med', m:'Q3 review; escalation to MoS'},
        {r:'GPU procurement — global supply constraints', i:'High', p:'High', m:'Multi-vendor RFP; PPP mode'},
        {r:'Skilling ecosystem lag for AA framework', i:'Med', p:'Med', m:'FutureSkills alignment; 12 new courses'},
        {r:'State onboarding pace on federated fabric', i:'Med', p:'High', m:'Model MoU + technical assistance'},
      ];
      return (
        <div style={{padding: p(64), height:'100%'}}>
          <div style={{fontSize: p(40), fontWeight: 700, marginBottom: p(24)}}>Risks & Mitigations</div>
          <div style={{border:'1px solid var(--ink-200)', borderRadius: p(8), overflow:'hidden'}}>
            <div style={{display:'grid', gridTemplateColumns:'2.4fr 0.6fr 0.6fr 1.4fr', fontSize: p(13), background:'#F5F7FA', fontWeight:600, color:'var(--ink-600)', padding: p(12), letterSpacing:'0.03em', textTransform:'uppercase'}}>
              <div>Risk</div><div>Impact</div><div>Prob.</div><div>Mitigation</div>
            </div>
            {risks.map((rk, i) => (
              <div key={i} style={{display:'grid', gridTemplateColumns:'2.4fr 0.6fr 0.6fr 1.4fr', fontSize: p(15), padding: p(14), borderTop:'1px solid var(--ink-150)'}}>
                <div>{rk.r}</div>
                <div><span style={{background: rk.i==='High'?'#FBEAEA':'#FBF1E1', color: rk.i==='High'?'#B91C1C':'#B45309', padding:`${p(1)} ${p(8)}`, borderRadius:999, fontSize: p(12), fontWeight:600}}>{rk.i}</span></div>
                <div><span style={{background: rk.p==='High'?'#FBEAEA':'#FBF1E1', color: rk.p==='High'?'#B91C1C':'#B45309', padding:`${p(1)} ${p(8)}`, borderRadius:999, fontSize: p(12), fontWeight:600}}>{rk.p}</span></div>
                <div style={{color:'var(--ink-600)'}}>{rk.m}</div>
              </div>
            ))}
          </div>
        </div>
      );
    }
    if (s.kind === 'closing') {
      return (
        <div style={{padding: p(72), height:'100%', display:'flex', flexDirection:'column', justifyContent:'center', gap: p(24)}}>
          <div style={{width: p(60), height: p(4), background:'var(--mod-slides)'}}/>
          <div style={{fontSize: p(52), fontWeight:700, letterSpacing:'-0.02em', lineHeight:1.1}}>Ask from the Committee</div>
          <div style={{fontSize: p(22), color:'var(--ink-700)', lineHeight:1.55, maxWidth: p(900)}}>
            Approval for <b>₹ 8,940 crore</b> supplementary allocation in Q4 to accelerate the sovereign compute layer,
            and formal endorsement of the federation blueprint for state onboarding.
          </div>
        </div>
      );
    }
    return null;
  };

  return (
    <div className="ks-module"
         style={{'--mod-current':'var(--mod-slides)', '--mod-current-tint':'var(--mod-slides-tint)'}}
         data-screen-label="slides">
      <div style={{padding:'8px 16px', background:'var(--white)', borderBottom:'1px solid var(--ink-150)', display:'flex', alignItems:'center', gap:12}}>
        <div style={{width:28, height:28, borderRadius:6, background: 'var(--mod-slides)', color:'white', display:'grid', placeItems:'center', fontWeight:700, fontSize:12}}>P</div>
        <div className="col" style={{lineHeight:1.2}}>
          <div style={{fontWeight:600, fontSize:13.5}}>DigiSeva Platform — Q3 Review Deck</div>
          <div className="muted text-xs">7 slides · <span style={{color:'var(--ok)'}}>Ready for Committee</span></div>
        </div>
        <div className="grow"/>
        <button className="btn">{IC.play2} Present</button>
        <button className="btn">Screen record</button>
        <button className="btn primary">{IC.share} Share</button>
      </div>

      <div className="ks-ribbon">
        <div className="ks-ribbon-tabs">
          {['File','Home','Insert','Design','Transitions','Animation','Slide Show','AI Assist'].map(t => (
            <button key={t} className={"ks-ribbon-tab " + (tab === t ? 'active' : '')} onClick={()=>setTab(t)}>{t}</button>
          ))}
        </div>
        <div className="ks-ribbon-body">
          <div className="ks-ribbon-group">
            <button className="rb-btn"><span style={{fontWeight:700}}>+</span> New slide</button>
            <button className="rb-btn">Layout</button>
            <button className="rb-btn">Theme: Ashoka</button>
          </div>
          <div className="ks-ribbon-group">
            <button className="rb-btn">{IC.image} Image</button>
            <button className="rb-btn">{IC.chart} Chart</button>
            <button className="rb-btn">{IC.table} Table</button>
            <button className="rb-btn">Shape</button>
          </div>
          <div className="ks-ribbon-group">
            <button className="rb-btn">Fade</button>
            <button className="rb-btn">Slide</button>
            <button className="rb-btn">Morph</button>
          </div>
          <div className="grow"/>
          <button className="btn ai">{IC.sparkles} Generate slides</button>
        </div>
      </div>

      {/* Slide sorter + main canvas + notes */}
      <div style={{flex:1, display:'flex', overflow:'hidden'}}>
        {/* Sorter */}
        <div style={{
          width: 180,
          background:'var(--ink-50)',
          borderRight:'1px solid var(--ink-150)',
          padding: '12px 12px',
          overflow:'auto',
        }}>
          <div className="col gap-3">
            {S.map((s, i) => (
              <button key={i} onClick={() => setCur(i)}
                      style={{
                        border:'none', padding:0, background:'transparent',
                        textAlign:'left', cursor:'pointer',
                      }}>
                <div style={{display:'flex', gap:8, alignItems:'flex-start'}}>
                  <div style={{fontSize:11, color:'var(--ink-500)', width:14, textAlign:'right', paddingTop:4, fontWeight:600}}>{i+1}</div>
                  <div style={{
                    flex:1,
                    aspectRatio:'16/9',
                    background:'var(--white)',
                    borderRadius:4,
                    border: i === cur ? '2px solid var(--mod-slides)' : '1px solid var(--ink-200)',
                    overflow:'hidden', position:'relative',
                    boxShadow: i === cur ? 'var(--sh-2)' : 'none',
                  }}>
                    <div style={{position:'absolute', inset:0, transform:'scale(0.24)', transformOrigin:'top left', width: '416.67%', height:'416.67%'}}>
                      {renderSlide(s, true)}
                    </div>
                  </div>
                </div>
              </button>
            ))}
          </div>
        </div>

        {/* Canvas + notes */}
        <div style={{flex:1, display:'flex', flexDirection:'column', overflow:'hidden', background:'var(--ink-100)'}}>
          <div style={{flex:1, display:'grid', placeItems:'center', overflow:'auto', padding:24}}>
            <div style={{
              aspectRatio:'16/9', width: 'min(100%, 960px)',
              background:'var(--white)',
              boxShadow:'var(--sh-3)',
              borderRadius: 6,
              overflow:'hidden',
              position:'relative',
            }}>
              {renderSlide(S[cur])}
            </div>
          </div>
          {/* Notes */}
          <div style={{
            background:'var(--white)',
            borderTop:'1px solid var(--ink-150)',
            padding:'12px 20px',
            minHeight: 110,
          }}>
            <div className="row" style={{marginBottom:6}}>
              <div className="text-xs muted b-500" style={{letterSpacing:'0.06em', textTransform:'uppercase'}}>Speaker notes · Slide {cur+1} of {S.length}</div>
              <div className="grow"/>
              <button className="btn ghost" style={{height:24, fontSize:11.5}}>{IC.sparkles} Generate notes</button>
            </div>
            <div style={{fontSize:13, color:'var(--ink-700)', lineHeight:1.55}}>
              {[
                'Open with a brief acknowledgment of Committee members. Set expectation: 20-minute review, then Q&A. Note that the Cabinet Note (File No. MeitY/DPI/2026/044) has been circulated.',
                'Walk through five items. Emphasise that the Committee ask on slide 7 is the primary decision-point.',
                'Highlight uptime — first quarter above 99.98% since programme inception. Latency reduction reflects the Q2 edge-caching rollout across 12 states.',
                'Adoption is tracking above plan. Q4 uplift driven by MyGov integration and state e-district onboarding (11 states this quarter).',
                'Digital India Programme is behind on utilisation (61.7%). Root cause: delayed C-DAC bench hiring — resolved as of June. Expect Q4 catch-up.',
                'Two Highs deserve attention. The GPU risk is being mitigated via a multi-vendor RFP; we expect to close by August.',
                'Direct ask: supplementary allocation + federation blueprint endorsement. If time permits, defer detailed discussion of Section 3.2 to the follow-up.',
              ][cur]}
            </div>
          </div>
        </div>

        {/* AI slide generator side rail */}
        <div style={{
          width: 260,
          background:'var(--white)',
          borderLeft:'1px solid var(--ink-150)',
          padding: 14,
          overflow:'auto',
        }}>
          <div style={{fontSize:12, fontWeight:600, color:'var(--ink-900)', marginBottom:8, letterSpacing:'0.02em'}}>
            Design suggestions
          </div>
          <div className="col gap-2">
            {['Data-forward layout','Cover with subtle grid','Executive summary card','Comparison split'].map(t => (
              <button key={t} style={{
                border:'1px solid var(--ink-200)',
                borderRadius:6,
                padding:'10px 12px',
                background:'var(--white)',
                fontSize:12, fontWeight:500, textAlign:'left',
                display:'flex', gap:10, alignItems:'center',
              }}>
                <div style={{width:38, height:24, borderRadius:3, background:'linear-gradient(135deg, var(--mod-slides-tint), var(--white))', border:'1px solid var(--ink-200)'}}/>
                {t}
              </button>
            ))}
          </div>

          <div style={{fontSize:12, fontWeight:600, color:'var(--ink-900)', margin:'18px 0 8px'}}>
            Generate with AI
          </div>
          <textarea
            defaultValue="Create a slide comparing this quarter's KPIs with plan targets"
            style={{
              width:'100%', minHeight:80,
              border:'1px solid var(--ink-200)', borderRadius:8,
              padding:'8px 10px', fontSize:12.5, resize:'none',
              fontFamily:'inherit', lineHeight:1.5,
            }}/>
          <button className="btn ai" style={{width:'100%', marginTop:8, justifyContent:'center'}}>
            {IC.sparkles} Generate slide
          </button>
        </div>
      </div>
    </div>
  );
}

window.ModuleSlides = ModuleSlides;