// Share / Export screen — destinations, quality, progress, success
function ScreenShare({ state, set, nav }) {
  const [stage, setStage] = React.useState('setup'); // setup | exporting | done
  const [quality, setQuality] = React.useState('1080p');
  const [destinations, setDestinations] = React.useState(['photos']);
  const [progress, setProgress] = React.useState(0);

  React.useEffect(() => {
    if (stage !== 'exporting') return;
    setProgress(0);
    let p = 0;
    const iv = setInterval(() => {
      p += Math.random() * 12 + 4;
      if (p >= 100) { p = 100; setProgress(100); clearInterval(iv); setTimeout(()=>setStage('done'), 500); }
      else setProgress(p);
    }, 300);
    return () => clearInterval(iv);
  }, [stage]);

  const toggleDest = (id) => {
    setDestinations(destinations.includes(id)
      ? destinations.filter(x=>x!==id)
      : [...destinations, id]);
  };

  const dests = [
    { id:'tiktok', name:'TikTok', hint:'9:16 vertical, caption auto-filled', icon:<I.tiktok/>, color:'#000', brandColor:'#25F4EE' },
    { id:'youtube', name:'YouTube Shorts', hint:'9:16 upload to channel', icon:<I.youtube/>, color:'#FF0000', brandColor:'#FF0000' },
    { id:'instagram', name:'Instagram Reels', hint:'9:16, cover frame auto', icon:<I.instagram/>, color:'#E1306C', brandColor:'#E1306C' },
    { id:'photos', name:'Save to Photos', hint:'Downloads to camera roll', icon:<I.download/>, color:'var(--sage)', brandColor:'var(--sage)' },
    { id:'airdrop', name:'AirDrop', hint:'Send to a nearby device', icon:<I.airdrop/>, color:'#007AFF', brandColor:'#007AFF' },
    { id:'link', name:'Shareable link', hint:'Public TeachCue link', icon:<I.copy/>, color:'var(--accent)', brandColor:'var(--accent)' },
  ];

  if (stage === 'exporting') return <ExportingView progress={progress} title={state.title}/>;
  if (stage === 'done') return <DoneView destinations={destinations} dests={dests} onShare={()=>nav.go('home')} onNew={()=>nav.go('home')}/>;

  return (
    <div style={{display:'flex', flexDirection:'column', height:'100%', background:'var(--bone)'}}>
      <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', padding:'54px 10px 8px'}}>
        <button onClick={()=>nav.go('edit')} style={{padding:8, color:'var(--ink-2)'}}><I.back/></button>
        <div style={{textAlign:'center'}}>
          <div style={{fontSize:14.5, fontWeight:600, letterSpacing:-0.2, color:'var(--ink)'}}>Share</div>
          <div style={{fontSize:10.5, color:'var(--ink-3)', marginTop:1, fontFamily:'var(--mono)', letterSpacing:1}}>STEP 4 / 4</div>
        </div>
        <div style={{width:40}}/>
      </div>
      <div style={{padding:'0 var(--pad) 14px'}}><Stepper step={3}/></div>

      <div className="scroll" style={{flex:1, overflow:'auto', padding:'0 var(--pad) 130px'}}>
        {/* Preview tile */}
        <div style={{
          background:'var(--cream)', border:'1px solid var(--rule)', borderRadius:18, padding:14, marginBottom:16,
          display:'flex', gap:12, boxShadow:'0 1px 2px rgba(56,40,20,0.04)',
        }}>
          <div style={{
            width:86, aspectRatio: state.aspect==='16:9'?'16/9':state.aspect==='1:1'?'1/1':'9/16',
            borderRadius:10, overflow:'hidden', flexShrink:0,
            background:'linear-gradient(160deg, #EBD9BE 0%, #D9C29F 100%)',
            position:'relative',
          }}>
            <div style={{position:'absolute', bottom:4, left:4, right:4, padding:'3px 5px', fontSize:8, fontWeight:500, color:'var(--ink)', background:'rgba(255,251,245,0.85)', borderRadius:3, textAlign:'center', fontFamily:'var(--serif)', fontStyle:'italic'}}>
              {state.slides[0]?.text?.slice(0,20) || 'SLIDE 01'}
            </div>
          </div>
          <div style={{flex:1, minWidth:0}}>
            <div style={{fontFamily:'var(--serif)', fontSize:20, letterSpacing:-0.3, marginBottom:4, color:'var(--ink)', lineHeight:1.15}}>{state.title}</div>
            <div style={{fontSize:11, color:'var(--ink-3)', marginBottom:10, fontFamily:'var(--mono)', letterSpacing:0.3}}>
              {state.slides.length} slides · 0:{String(state.slides.length*3).padStart(2,'0')} · {state.aspect}
            </div>
            <div style={{display:'flex', gap:5, flexWrap:'wrap'}}>
              <Pill color="var(--accent)">HD</Pill>
              <Pill color="var(--sage)">AI IMG</Pill>
              <Pill color="var(--plum)">FURIGANA</Pill>
            </div>
          </div>
        </div>

        {/* Caption */}
        <SectionHead label="Caption & hashtags"/>
        <div style={{padding:'0 var(--pad) 16px'}}>
          <div style={{
            background:'var(--cream)', border:'1px solid var(--rule)', borderRadius:12, padding:'10px 12px',
          }}>
            <textarea
              defaultValue={`Today's Japanese lesson — new vocabulary with furigana.\n\n#japanese #languagelearning #nihongo #teachcue`}
              style={{width:'100%', minHeight:76, resize:'none', fontSize:13, lineHeight:1.5, color:'var(--ink)'}}
            />
            <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', borderTop:'1px solid var(--rule)', paddingTop:8, marginTop:6}}>
              <button style={{fontSize:11.5, color:'var(--accent-deep)', fontWeight:500, display:'inline-flex', alignItems:'center', gap:5}}>
                <I.sparkle s={12}/> Generate caption
              </button>
              <span style={{fontSize:10.5, color:'var(--ink-3)', fontFamily:'var(--mono)'}}>108 / 2200</span>
            </div>
          </div>
        </div>

        {/* Quality */}
        <SectionHead label="Quality"/>
        <div style={{display:'flex', gap:8, padding:'0 var(--pad) 16px'}}>
          {[
            {id:'720p', name:'720p', hint:'Smaller file'},
            {id:'1080p', name:'1080p', hint:'Recommended'},
            {id:'4k', name:'4K', hint:'Pro'},
          ].map(q => (
            <button key={q.id} onClick={()=>setQuality(q.id)} style={{
              flex:1, padding:'10px 8px', borderRadius:10,
              background: quality===q.id ? 'var(--accent-soft)' : 'var(--cream)',
              border:'1px solid '+ (quality===q.id ? 'var(--accent)' : 'var(--rule)'),
              textAlign:'center',
            }}>
              <div style={{fontFamily:'var(--serif)', fontSize:18, fontWeight:500, color: quality===q.id ? 'var(--accent-deep)' : 'var(--ink)', letterSpacing:-0.3, lineHeight:1}}>{q.name}</div>
              <div style={{fontSize:10, color:'var(--ink-3)', marginTop:4, fontFamily:'var(--mono)', letterSpacing:0.3}}>{q.hint}</div>
            </button>
          ))}
        </div>

        {/* Destinations */}
        <SectionHead label="Destinations" trailing={<span style={{fontSize:10, color:'var(--ink-3)', fontStyle:'italic', fontFamily:'var(--serif)'}}>{destinations.length} selected</span>}/>
        <div style={{display:'flex', flexDirection:'column', gap:8, padding:'0 var(--pad) 16px'}}>
          {dests.map(d => {
            const on = destinations.includes(d.id);
            return (
              <button key={d.id} onClick={()=>toggleDest(d.id)} style={{
                display:'flex', alignItems:'center', gap:12, padding:12,
                background: on ? 'var(--accent-soft)' : 'var(--cream)',
                border:'1px solid '+ (on ? 'var(--accent)' : 'var(--rule)'),
                borderRadius:12, textAlign:'left',
              }}>
                <div style={{
                  width:40, height:40, borderRadius:10,
                  background: on ? d.brandColor : 'var(--bone-2)',
                  color: on ? '#fff' : 'var(--ink-2)',
                  display:'inline-flex', alignItems:'center', justifyContent:'center',
                }}>{d.icon}</div>
                <div style={{flex:1}}>
                  <div style={{fontSize:13.5, fontWeight:500, letterSpacing:-0.2, color:'var(--ink)'}}>{d.name}</div>
                  <div style={{fontSize:11, color:'var(--ink-3)', marginTop:1}}>{d.hint}</div>
                </div>
                <div style={{
                  width:22, height:22, borderRadius:6,
                  background: on ? 'var(--accent)' : 'transparent',
                  border:'1.5px solid '+ (on ? 'var(--accent)' : 'var(--rule-2)'),
                  color:'#fff', display:'inline-flex', alignItems:'center', justifyContent:'center',
                }}>{on && <I.check s={14}/>}</div>
              </button>
            );
          })}
        </div>
      </div>

      {/* Bottom */}
      <div style={{
        position:'absolute', bottom:0, left:0, right:0, padding:'14px var(--pad) 30px',
        background:'linear-gradient(to top, var(--bone) 70%, transparent)',
      }}>
        <PrimaryBtn onClick={()=>setStage('exporting')} icon={<I.share s={18}/>}>
          Export & Share
        </PrimaryBtn>
      </div>
    </div>
  );
}

function ExportingView({ progress, title }) {
  return (
    <div style={{display:'flex', flexDirection:'column', height:'100%', background:'var(--bone)',
      alignItems:'center', justifyContent:'center', padding:'40px 30px', textAlign:'center'}}>
      {/* Radial progress */}
      <div style={{width:148, height:148, position:'relative', marginBottom:28}}>
        <svg width="148" height="148" viewBox="0 0 148 148" style={{transform:'rotate(-90deg)'}}>
          <circle cx="74" cy="74" r="66" stroke="var(--rule)" strokeWidth="6" fill="none"/>
          <circle cx="74" cy="74" r="66" stroke="var(--accent)" strokeWidth="6" fill="none"
            strokeLinecap="round"
            strokeDasharray={414.7}
            strokeDashoffset={414.7 * (1 - progress/100)}
            style={{transition:'stroke-dashoffset .3s linear'}}/>
        </svg>
        <div style={{position:'absolute', inset:0, display:'flex', alignItems:'center', justifyContent:'center', flexDirection:'column'}}>
          <div style={{fontFamily:'var(--serif)', fontSize:42, fontWeight:400, letterSpacing:-1, color:'var(--accent-deep)', lineHeight:1}}>
            {Math.round(progress)}<span style={{fontSize:18, opacity:0.7}}>%</span>
          </div>
          <div style={{marginTop:6}}><Waveform bars={14} height={12} color="var(--accent)"/></div>
        </div>
      </div>
      <div style={{fontFamily:'var(--serif)', fontSize:26, fontWeight:400, letterSpacing:-0.5, marginBottom:8, color:'var(--ink)'}}>Rendering your <span style={{fontStyle:'italic', color:'var(--accent-deep)'}}>tutorial</span></div>
      <div style={{fontSize:13, color:'var(--ink-3)', maxWidth:260, lineHeight:1.55}}>
        Compositing “{title}” with furigana, AI images, and captions. Keep this screen open.
      </div>

      <div style={{marginTop:32, display:'flex', flexDirection:'column', gap:8, width:'100%', maxWidth:300}}>
        <StepLine done label="Audio mastered" />
        <StepLine done={progress > 30} label="Video composited" />
        <StepLine done={progress > 65} label="Overlays rendered" />
        <StepLine done={progress > 90} label="H.264 encode" />
      </div>

      <button style={{
        marginTop:28, padding:'10px 16px', borderRadius:10,
        background:'var(--cream)', border:'1px solid var(--rule)',
        fontSize:12.5, fontWeight:500, color:'var(--ink-3)',
      }}>Cancel</button>
    </div>
  );
}

function StepLine({ done, label }) {
  return (
    <div style={{display:'flex', alignItems:'center', gap:10, padding:'8px 10px',
      background:'var(--cream)', border:'1px solid var(--rule)', borderRadius:10}}>
      <div style={{
        width:18, height:18, borderRadius:'50%',
        background: done ? 'var(--accent)' : 'transparent',
        border:'1.5px solid '+ (done ? 'var(--accent)' : 'var(--rule-2)'),
        color:'#fff', display:'inline-flex', alignItems:'center', justifyContent:'center',
      }}>{done && <I.check s={11}/>}</div>
      <div style={{fontSize:12, fontWeight:500, color: done ? 'var(--ink)' : 'var(--ink-3)'}}>{label}</div>
      {!done && <div style={{marginLeft:'auto'}}><Waveform bars={4} height={8} color="var(--ink-3)"/></div>}
    </div>
  );
}

function DoneView({ destinations, dests, onShare, onNew }) {
  return (
    <div style={{display:'flex', flexDirection:'column', height:'100%', background:'var(--bone)',
      padding:'48px 26px 30px', textAlign:'center'}}>
      <div style={{flex:1, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center'}}>
        <div style={{
          width:92, height:92, borderRadius:'50%',
          background:'var(--accent-soft)',
          border:'2px solid var(--accent)',
          display:'inline-flex', alignItems:'center', justifyContent:'center',
          color:'var(--accent-deep)', marginBottom:24,
          animation:'fade-up .4s cubic-bezier(.22,1,.36,1)',
        }}><I.check s={44} w={2.8}/></div>
        <div style={{fontFamily:'var(--serif)', fontSize:34, fontWeight:400, letterSpacing:-0.8, marginBottom:8, color:'var(--ink)', lineHeight:1.05}}>All <span style={{fontStyle:'italic', color:'var(--accent-deep)'}}>done</span></div>
        <div style={{fontSize:13.5, color:'var(--ink-2)', maxWidth:290, lineHeight:1.55, marginBottom:22}}>
          Your tutorial has been exported. Shared to {destinations.length} {destinations.length===1?'destination':'destinations'}.
        </div>

        <div style={{display:'flex', gap:8, marginBottom:24, flexWrap:'wrap', justifyContent:'center', maxWidth:280}}>
          {destinations.map(id => {
            const d = dests.find(x=>x.id===id);
            if (!d) return null;
            return (
              <div key={id} style={{
                padding:'6px 11px', borderRadius:999,
                background:'var(--cream)', border:'1px solid var(--rule)',
                display:'inline-flex', alignItems:'center', gap:6,
                fontSize:11.5, fontWeight:500, color:'var(--ink)',
              }}>
                <span style={{color: d.brandColor}}>{React.cloneElement(d.icon, {s:14})}</span>
                {d.name}
              </div>
            );
          })}
        </div>
      </div>

      <div style={{display:'flex', gap:10}}>
        <GhostBtn onClick={onShare} flex icon={<I.copy s={16}/>}>Copy link</GhostBtn>
        <PrimaryBtn onClick={onNew} icon={<I.plus s={16}/>} style={{flex:1}}>New</PrimaryBtn>
      </div>
    </div>
  );
}

window.ScreenShare = ScreenShare;