// Prepare — warm editorial
function ScreenPrepare({ state, set, nav }) {
  const [activeIdx, setActiveIdx] = React.useState(0);
  const [sheet, setSheet] = React.useState(null);

  const slides = state.slides;
  const active = slides[activeIdx];

  const updateSlide = (patch) => set({ slides: slides.map((s,i) => i===activeIdx ? {...s, ...patch} : s) });
  const addSlide = () => {
    const next = [...slides, { id: Date.now(), text:'', explanation:'', lang:'auto', hasImage:false }];
    set({ slides: next });
    setActiveIdx(next.length - 1);
  };
  const dupSlide = (i) => {
    const s = slides[i];
    set({ slides: [...slides.slice(0,i+1), {...s, id: Date.now()}, ...slides.slice(i+1)] });
  };
  const delSlide = (i) => {
    if (slides.length <= 1) return;
    const next = slides.filter((_,j)=>j!==i);
    set({ slides: next });
    setActiveIdx(Math.min(activeIdx, next.length-1));
  };

  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('home')} 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)'}}>Prepare</div>
          <div style={{fontSize:10.5, color:'var(--ink-3)', marginTop:1, fontFamily:'var(--mono)', letterSpacing:1}}>STEP 1 / 4</div>
        </div>
        <button onClick={()=>nav.go('record')} style={{
          padding:'8px 14px', borderRadius:10, background:'var(--ink)', color:'var(--bone)',
          fontSize:13, fontWeight:500, display:'inline-flex', alignItems:'center', gap:5,
        }}>Next<I.chevR s={14} w={2.2}/></button>
      </div>
      <div style={{padding:'0 var(--pad) 14px'}}><Stepper step={0}/></div>

      <div className="scroll" style={{flex:1, overflow:'auto', padding:'0 var(--pad) 120px'}}>
        {/* Slide preview */}
        <div style={{
          background:'var(--cream)', border:'1px solid var(--rule)', borderRadius:18,
          overflow:'hidden', marginBottom:14, boxShadow:'0 1px 2px rgba(56,40,20,0.04)',
        }}>
          <div style={{
            aspectRatio: state.aspect === '16:9' ? '16/9' : state.aspect === '1:1' ? '1/1' : '9/14',
            background:'linear-gradient(160deg, #EBD9BE 0%, #D9C29F 100%)',
            position:'relative', overflow:'hidden',
            display:'flex', alignItems:'center', justifyContent:'center',
          }}>
            {active.hasImage && (
              <div style={{position:'absolute', inset:0, background:'linear-gradient(140deg, #E4C3A3, #C9A585)'}}>
                <div style={{
                  position:'absolute', inset:20, borderRadius:10,
                  background:'repeating-linear-gradient(135deg, rgba(30,26,21,0.06) 0 8px, rgba(30,26,21,0.02) 8px 16px)',
                  display:'flex', alignItems:'center', justifyContent:'center',
                  fontFamily:'var(--mono)', fontSize:10, color:'rgba(30,26,21,0.5)',
                  letterSpacing:1.5,
                }}>AI IMAGE</div>
              </div>
            )}
            <div style={{
              position:'relative', zIndex:2, padding:'24px 20px', textAlign:'center', maxWidth:'92%',
              background: active.hasImage ? 'rgba(255,251,245,0.82)' : 'transparent',
              backdropFilter: active.hasImage ? 'blur(6px)' : 'none',
              borderRadius: active.hasImage ? 12 : 0,
            }}>
              {active.lang === 'ja' && active.text ? (
                <RubyText pairs={[
                  {b:'今日', r:'きょう'}, {b:'は', r:''}, {b:'新', r:'あたら'}, {b:'しい', r:''},
                  {b:'単語', r:'たんご'}, {b:'を', r:''}, {b:'勉強', r:'べんきょう'}, {b:'します', r:''},
                ]} baseSize={22} color="var(--ink)"/>
              ) : active.text ? (
                <div style={{fontFamily:'var(--serif)', fontSize:24, letterSpacing:-0.3, lineHeight:1.25, color:'var(--ink)'}}>{active.text}</div>
              ) : (
                <div style={{fontFamily:'var(--serif)', fontStyle:'italic', fontSize:16, color:'var(--ink-3)'}}>Slide {activeIdx+1} · Write your script below</div>
              )}
            </div>

            <div style={{position:'absolute', top:10, left:10, display:'flex', gap:6}}>
              <button onClick={()=>setSheet('aspect')} style={chipBtn}>{state.aspect}</button>
              <button onClick={()=>setSheet('composition')} style={chipBtn}>
                {state.composition === 'cameraOnly' && <><I.full s={11}/> Camera</>}
                {state.composition === 'cameraSlide' && <><I.card s={11}/> Camera+Slide</>}
                {state.composition === 'slideCamera' && <><I.pip s={11}/> Slide+PiP</>}
              </button>
            </div>

            {state.composition === 'slideCamera' && (
              <div style={{
                position:'absolute', bottom:14, right:14,
                width:68, height:90, borderRadius:10,
                background:'linear-gradient(160deg, #C9A88A, #9D7E62)',
                border:'2px solid var(--cream)', overflow:'hidden',
                display:'flex', alignItems:'center', justifyContent:'center',
                fontFamily:'var(--mono)', fontSize:8, color:'rgba(255,251,245,0.7)',
              }}>CAM</div>
            )}
          </div>

          <div style={{padding:'12px 14px', display:'flex', alignItems:'center', justifyContent:'space-between', borderTop:'1px solid var(--rule)'}}>
            <div style={{fontSize:12, color:'var(--ink-2)', display:'inline-flex', alignItems:'center', gap:8}}>
              <span style={{padding:'3px 7px', borderRadius:999, background:'var(--accent-soft)', color:'var(--accent-deep)', fontSize:9.5, fontWeight:600, letterSpacing:1.2, fontFamily:'var(--mono)'}}>SLIDE {String(activeIdx+1).padStart(2,'0')}</span>
              <span style={{fontFamily:'var(--mono)', fontSize:11, color:'var(--ink-3)'}}>{active.text ? `${active.text.length} chars` : 'Empty'}</span>
            </div>
            <div style={{display:'flex', gap:4}}>
              <IconBtn onClick={()=>dupSlide(activeIdx)}><I.duplicate/></IconBtn>
              <IconBtn onClick={()=>delSlide(activeIdx)}><I.trash/></IconBtn>
            </div>
          </div>
        </div>

        {/* Script */}
        <div style={{
          background:'var(--cream)', border:'1px solid var(--rule)', borderRadius:16, padding:14, marginBottom:12,
        }}>
          <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:10}}>
            <div style={{fontSize:10.5, fontWeight:500, letterSpacing:1.4, color:'var(--ink-3)', textTransform:'uppercase', fontFamily:'var(--mono)'}}>Script</div>
            <div style={{display:'flex', gap:4}}>
              {['auto','ja','zh','en'].map(l => (
                <button key={l} onClick={()=>updateSlide({lang:l})} style={{
                  padding:'3px 8px', borderRadius:6, fontSize:10, fontWeight:600, letterSpacing:0.8,
                  background: active.lang===l ? 'var(--accent-soft)' : 'transparent',
                  color: active.lang===l ? 'var(--accent-deep)' : 'var(--ink-3)',
                  border:'1px solid '+ (active.lang===l ? 'var(--accent)' : 'var(--rule)'),
                  textTransform:'uppercase', fontFamily:'var(--mono)',
                }}>{l}</button>
              ))}
            </div>
          </div>
          <textarea
            value={active.text}
            onChange={e=>updateSlide({text: e.target.value})}
            placeholder="What will you say on this slide?"
            style={{
              width:'100%', minHeight:72, resize:'none',
              fontSize:15, lineHeight:1.5, color:'var(--ink)',
              letterSpacing:-0.2,
            }}
          />
          <div style={{display:'flex', alignItems:'center', gap:6, marginTop:10, flexWrap:'wrap'}}>
            <TagChip active icon={<I.furigana s={12}/>}>Furigana on</TagChip>
            <TagChip icon={<I.book s={12}/>}>Dictionary</TagChip>
            <TagChip icon={<I.wand s={12}/>}>Auto-prompt</TagChip>
          </div>
        </div>

        {/* AI image */}
        <div style={{
          background:'var(--cream)', border:'1px solid var(--rule)', borderRadius:16, padding:14, marginBottom:14,
        }}>
          <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:10}}>
            <div style={{fontSize:10.5, fontWeight:500, letterSpacing:1.4, color:'var(--ink-3)', textTransform:'uppercase', fontFamily:'var(--mono)'}}>AI Image</div>
            <span style={{fontSize:10, color:'var(--ink-3)', fontStyle:'italic', fontFamily:'var(--serif)'}}>Optional</span>
          </div>
          <div style={{display:'flex', gap:10}}>
            <div style={{
              width:74, height:74, flexShrink:0, borderRadius:10, overflow:'hidden',
              background: active.hasImage ? 'linear-gradient(140deg, #E0C5A7, #B89878)' : 'var(--bone-2)',
              border:'1px dashed var(--rule-2)',
              display:'flex', alignItems:'center', justifyContent:'center',
              color: active.hasImage ? 'transparent' : 'var(--ink-3)',
            }}>{!active.hasImage && <I.image s={22}/>}</div>
            <div style={{flex:1, display:'flex', flexDirection:'column', gap:7}}>
              <div style={{
                background:'var(--bone)', border:'1px solid var(--rule)', borderRadius:8, padding:'8px 10px',
                fontSize:12.5, color: active.text ? 'var(--ink-2)' : 'var(--ink-3)',
                fontStyle: active.text ? 'normal' : 'italic', fontFamily: active.text ? 'var(--sans)' : 'var(--serif)',
                lineHeight:1.4, minHeight:34,
              }}>{active.text ? `Japanese classroom, warm light, student writing kanji, pastel palette…` : 'Write your script first, then auto-generate a prompt.'}</div>
              <button onClick={()=>updateSlide({hasImage:!active.hasImage})} style={{
                padding:'9px 10px', borderRadius:9,
                background: active.hasImage ? 'var(--bone-2)' : 'var(--accent)',
                color: active.hasImage ? 'var(--ink)' : '#fff',
                border:'1px solid '+ (active.hasImage ? 'var(--rule)' : 'var(--accent)'),
                fontSize:12, fontWeight:500, display:'inline-flex', alignItems:'center', justifyContent:'center', gap:5,
              }}>
                <I.sparkle s={13}/> {active.hasImage ? 'Regenerate' : 'Generate with Krea AI'}
              </button>
            </div>
          </div>
        </div>

        {/* Slide strip */}
        <SectionHead label={`${slides.length} slides`} trailing={<span style={{fontSize:10, color:'var(--ink-3)', fontStyle:'italic', fontFamily:'var(--serif)'}}>Drag to reorder</span>}/>
        <div className="scroll" style={{display:'flex', gap:8, overflow:'auto', padding:'0 var(--pad)', margin:'0 calc(-1*var(--pad))'}}>
          {slides.map((s,i) => (
            <button key={s.id} onClick={()=>setActiveIdx(i)} style={{
              flexShrink:0, width:72, height:108, borderRadius:10,
              background: i===activeIdx ? 'var(--accent-soft)' : 'var(--cream)',
              border:'1.5px solid '+ (i===activeIdx ? 'var(--accent)' : 'var(--rule)'),
              padding:7, textAlign:'left', display:'flex', flexDirection:'column', justifyContent:'space-between',
              position:'relative',
            }}>
              <div style={{fontSize:9, fontWeight:500, color: i===activeIdx ? 'var(--accent-deep)' : 'var(--ink-3)', letterSpacing:1, fontFamily:'var(--mono)'}}>
                {String(i+1).padStart(2,'0')}
              </div>
              <div style={{fontSize:10, color:'var(--ink-2)', lineHeight:1.2, overflow:'hidden', textOverflow:'ellipsis', display:'-webkit-box', WebkitLineClamp:3, WebkitBoxOrient:'vertical'}}>
                {s.text || <span style={{fontStyle:'italic', opacity:0.5, fontFamily:'var(--serif)'}}>Empty</span>}
              </div>
              {s.hasImage && <div style={{position:'absolute', top:6, right:6, color:'var(--sage)'}}><I.image s={11}/></div>}
            </button>
          ))}
          <button onClick={addSlide} style={{
            flexShrink:0, width:72, height:108, borderRadius:10,
            background:'var(--bone-2)', border:'1.5px dashed var(--rule-2)',
            color:'var(--ink-3)', display:'inline-flex', alignItems:'center', justifyContent:'center',
            flexDirection:'column', gap:4, fontSize:10.5, fontWeight:500,
          }}><I.plus s={18}/>Add</button>
        </div>
      </div>

      <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={()=>nav.go('record')} icon={<I.record s={18}/>}>Start Recording</PrimaryBtn>
      </div>

      {sheet === 'composition' && <CompositionSheet state={state} set={set} onClose={()=>setSheet(null)}/>}
      {sheet === 'aspect' && <AspectSheet state={state} set={set} onClose={()=>setSheet(null)}/>}
    </div>
  );
}

const chipBtn = {
  padding:'4px 8px', borderRadius:6,
  background:'rgba(255,251,245,0.85)', backdropFilter:'blur(4px)',
  border:'1px solid rgba(30,26,21,0.08)',
  fontSize:10.5, fontWeight:500, color:'var(--ink)',
  display:'inline-flex', alignItems:'center', gap:4,
  fontFamily:'var(--mono)', letterSpacing:0.5,
};

function TagChip({ children, icon, active }) {
  return (
    <span style={{
      display:'inline-flex', alignItems:'center', gap:5, padding:'5px 10px', borderRadius:999,
      background: active ? 'var(--accent-soft)' : 'var(--bone-2)',
      color: active ? 'var(--accent-deep)' : 'var(--ink-2)',
      border:'1px solid '+ (active ? 'var(--accent)' : 'var(--rule)'),
      fontSize:11.5, fontWeight:500,
    }}>{icon}{children}</span>
  );
}

function IconBtn({ children, onClick }) {
  return <button onClick={onClick} style={{
    width:32, height:32, borderRadius:8,
    background:'var(--bone-2)', border:'1px solid var(--rule)',
    color:'var(--ink-2)', display:'inline-flex', alignItems:'center', justifyContent:'center'
  }}>{children}</button>;
}

function Stepper({ step }) {
  const steps = ['Prepare','Record','Edit','Share'];
  return (
    <div style={{display:'flex', alignItems:'center', gap:6}}>
      {steps.map((s,i) => (
        <div key={s} style={{
          flex:1, height:3, borderRadius:2,
          background: i <= step ? 'var(--accent)' : 'var(--rule)',
        }}/>
      ))}
    </div>
  );
}

function Sheet({ title, children, onClose }) {
  return (
    <div style={{position:'absolute', inset:0, zIndex:50}}>
      <div onClick={onClose} style={{position:'absolute', inset:0, background:'rgba(30,26,21,0.35)', backdropFilter:'blur(2px)'}}/>
      <div style={{
        position:'absolute', bottom:0, left:0, right:0,
        background:'var(--bone)', borderTop:'1px solid var(--rule)',
        borderTopLeftRadius:22, borderTopRightRadius:22,
        padding:'14px 0 30px', animation:'fade-up .28s cubic-bezier(.22,1,.36,1)',
      }}>
        <div style={{width:36, height:4, borderRadius:2, background:'var(--rule-2)', margin:'0 auto 14px'}}/>
        <div style={{padding:'0 var(--pad) 10px', display:'flex', alignItems:'center', justifyContent:'space-between'}}>
          <div style={{fontFamily:'var(--serif)', fontSize:22, letterSpacing:-0.3, color:'var(--ink)'}}>{title}</div>
          <button onClick={onClose} style={{padding:4, color:'var(--ink-3)'}}><I.close/></button>
        </div>
        <div style={{padding:'6px var(--pad) 0'}}>{children}</div>
      </div>
    </div>
  );
}

function CompositionSheet({ state, set, onClose }) {
  const opts = [
    { id:'cameraOnly', title:'Camera only', desc:'Full-screen camera; text overlays added in edit.', icon:<I.full/> },
    { id:'cameraSlide', title:'Camera + Slide card', desc:'Camera background with your slide content as a floating card.', icon:<I.card/> },
    { id:'slideCamera', title:'Slide + Camera PiP', desc:'Your slide fills the screen; camera floats in a corner.', icon:<I.pip/> },
  ];
  return (
    <Sheet title="Composition" onClose={onClose}>
      <div style={{display:'flex', flexDirection:'column', gap:8}}>
        {opts.map(o => (
          <button key={o.id} onClick={()=>{set({composition:o.id}); onClose();}} style={{
            display:'flex', alignItems:'center', gap:12, padding:13,
            background: state.composition===o.id ? 'var(--accent-soft)' : 'var(--cream)',
            border:'1px solid '+ (state.composition===o.id ? 'var(--accent)' : 'var(--rule)'),
            borderRadius:12, textAlign:'left',
          }}>
            <div style={{
              width:44, height:44, borderRadius:10,
              background:'var(--bone-2)', color: state.composition===o.id ? 'var(--accent-deep)' : 'var(--ink-2)',
              display:'inline-flex', alignItems:'center', justifyContent:'center',
            }}>{o.icon}</div>
            <div style={{flex:1}}>
              <div style={{fontSize:14, fontWeight:500, letterSpacing:-0.2, color:'var(--ink)'}}>{o.title}</div>
              <div style={{fontSize:11.5, color:'var(--ink-3)', marginTop:2, lineHeight:1.4}}>{o.desc}</div>
            </div>
            {state.composition===o.id && <div style={{color:'var(--accent-deep)'}}><I.check/></div>}
          </button>
        ))}
      </div>
    </Sheet>
  );
}

function AspectSheet({ state, set, onClose }) {
  const opts = [
    { id:'9:16', title:'9:16 · Portrait', desc:'TikTok, Reels, Shorts', icon:<I.aspect916 s={20}/> },
    { id:'16:9', title:'16:9 · Landscape', desc:'YouTube, Vimeo', icon:<I.aspect169 s={20}/> },
    { id:'1:1', title:'1:1 · Square', desc:'Instagram feed', icon:<I.aspect11 s={20}/> },
  ];
  return (
    <Sheet title="Aspect ratio" onClose={onClose}>
      <div style={{display:'flex', flexDirection:'column', gap:8}}>
        {opts.map(o => (
          <button key={o.id} onClick={()=>{set({aspect:o.id}); onClose();}} style={{
            display:'flex', alignItems:'center', gap:12, padding:13,
            background: state.aspect===o.id ? 'var(--accent-soft)' : 'var(--cream)',
            border:'1px solid '+ (state.aspect===o.id ? 'var(--accent)' : 'var(--rule)'),
            borderRadius:12, textAlign:'left',
          }}>
            <div style={{width:44, height:44, borderRadius:10, background:'var(--bone-2)',
              color: state.aspect===o.id ? 'var(--accent-deep)' : 'var(--ink-2)',
              display:'inline-flex', alignItems:'center', justifyContent:'center',
            }}>{o.icon}</div>
            <div style={{flex:1}}>
              <div style={{fontSize:14, fontWeight:500, letterSpacing:-0.2, color:'var(--ink)'}}>{o.title}</div>
              <div style={{fontSize:11.5, color:'var(--ink-3)', marginTop:2}}>{o.desc}</div>
            </div>
            {state.aspect===o.id && <div style={{color:'var(--accent-deep)'}}><I.check/></div>}
          </button>
        ))}
      </div>
    </Sheet>
  );
}

Object.assign(window, { ScreenPrepare, Stepper, Sheet });