// Slides tab — PowerPoint-style viewer with prev/next/play controls.
// Shows uploaded slide images when present; otherwise the built-in demo deck.
function SlidesTab({ slides, images, deckName }){
  const uploaded = Array.isArray(images) && images.length > 0;
  const count = uploaded ? images.length : slides.length;
  const [i, setI] = React.useState(() => {
    const s = parseInt(localStorage.getItem('cwa-slide')||'0',10);
    return isNaN(s) ? 0 : Math.min(Math.max(s,0), count-1);
  });
  const [playing, setPlaying] = React.useState(false);
  React.useEffect(()=>{ if(i>count-1) setI(0); }, [count]);
  React.useEffect(()=>{ localStorage.setItem('cwa-slide', String(i)); }, [i]);
  React.useEffect(()=>{
    if(!playing) return;
    const t = setTimeout(()=> setI(p => (p+1) % count), 4000);
    return ()=> clearTimeout(t);
  }, [playing, i, count]);
  // keyboard: ← / → navigate, Space advances
  React.useEffect(()=>{
    const onKey = (e)=>{
      if(/input|textarea|select/i.test(e.target.tagName) || e.target.isContentEditable) return;
      if(e.key==='ArrowRight' || e.key==='PageDown'){ e.preventDefault(); setI(p=>Math.min(count-1,p+1)); }
      else if(e.key==='ArrowLeft' || e.key==='PageUp'){ e.preventDefault(); setI(p=>Math.max(0,p-1)); }
      else if(e.key===' '){ e.preventDefault(); setI(p=>Math.min(count-1,p+1)); }
    };
    window.addEventListener('keydown', onKey);
    return ()=> window.removeEventListener('keydown', onKey);
  }, [count]);

  const go = (n)=> setI(Math.min(Math.max(n,0), count-1));
  const s = uploaded ? null : (slides[i] || {});

  function renderSlide(s){
    if(s.kind==='title') return (
      <div className="slide-canvas">
        <div style={{display:'flex',flexDirection:'column',alignItems:'center',gap:18}}>
          {s.kicker && <div style={{color:'#c9bfa6',letterSpacing:'6px',fontSize:'clamp(13px,2.4vw,20px)'}}>{s.kicker}</div>}
          <div style={{fontFamily:'var(--serif)',fontWeight:800,color:'#fff',fontSize:'clamp(30px,7vw,60px)',lineHeight:1.06,whiteSpace:'pre-line'}}>{s.title}</div>
          {s.sub && <div style={{color:'#d8d2c4',fontSize:'clamp(15px,3vw,26px)'}}>{s.sub}</div>}
        </div>
      </div>);
    if(s.kind==='verse') return (
      <div className="slide-canvas">
        <div>
          <div style={{fontFamily:'var(--serif)',fontStyle:'italic',color:'#fff',fontSize:'clamp(22px,5vw,46px)',lineHeight:1.4,maxWidth:'18ch',margin:'0 auto'}}>&ldquo;{s.body}&rdquo;</div>
          <div style={{color:'#c9bfa6',letterSpacing:'3px',fontSize:'clamp(15px,2.6vw,24px)',marginTop:34}}>{s.ref}</div>
        </div>
      </div>);
    if(s.kind==='section') return (
      <div className="slide-canvas" style={{justifyItems:'start',textAlign:'left'}}>
        <div>
          <div style={{height:5,width:120,background:'#c9bfa6',marginBottom:26}}></div>
          <div style={{fontFamily:'var(--serif)',fontWeight:800,color:'#fff',fontSize:'clamp(34px,9vw,84px)'}}>{s.title}</div>
          {s.sub && <div style={{color:'#d8d2c4',fontSize:'clamp(15px,3vw,26px)',marginTop:18}}>{s.sub}</div>}
        </div>
      </div>);
    if(s.kind==='points') return (
      <div className="slide-canvas" style={{justifyItems:'start',textAlign:'left'}}>
        <div>
          <div style={{fontFamily:'var(--serif)',fontWeight:800,color:'#fff',fontSize:'clamp(28px,7vw,60px)',marginBottom:30}}>{s.title}</div>
          {s.items.map((it,n)=>(
            <div key={n} style={{display:'flex',gap:20,alignItems:'baseline',marginBottom:18}}>
              <span style={{color:'#c9bfa6',fontFamily:'var(--serif)',fontSize:'clamp(20px,4.5vw,40px)',fontWeight:800}}>{n+1}</span>
              <span style={{color:'#f0ece2',fontSize:'clamp(17px,4vw,34px)'}}>{it}</span>
            </div>
          ))}
        </div>
      </div>);
    return null;
  }

  return (
    <div className="slides-wrap">
      <div className="slide-stage">
        <div className="slide-num">{deckName} &nbsp;·&nbsp; {i+1} / {count}</div>
        {uploaded
          ? <img className="slide-img" src={images[i].url} alt={`Slide ${i+1}`} />
          : renderSlide(s)}
      </div>
      <div className="slide-ctl">
        <button className="sc-btn" title="First" onClick={()=>go(0)}><Icon name="first"/></button>
        <button className="sc-btn" title="Previous" onClick={()=>go(i-1)}><Icon name="prev"/></button>
        <button className="sc-btn play" title={playing?'Pause':'Play'} onClick={()=>setPlaying(p=>!p)}><Icon name={playing?'pause':'play'} size={18}/></button>
        <button className="sc-btn" title="Next" onClick={()=>go(i+1)}><Icon name="next"/></button>
        <button className="sc-btn" title="Last" onClick={()=>go(count-1)}><Icon name="last"/></button>
        <span className="sc-count">{i+1} of {count}</span>
      </div>
    </div>
  );
}
window.SlidesTab = SlidesTab;