// Edit / Preview screen — WYSIWYG overlay editor with scrubber & controls
function ScreenEdit({ state, set, nav }) {
  const [selIdx, setSelIdx] = React.useState(0);
  const [tool, setTool] = React.useState('style'); // style | layout | slides
  const [sheet, setSheet] = React.useState(false);
  const slide = state.slides[selIdx];
  const cfg = state.overlayConfigs[selIdx] || {
    font:'system', size:28, color:'#ffffff', bg:'rgba(0,0,0,0.55)', radius:10, x:0.5, y:0.82
  };
  const setCfg = (patch) => {
    const next = { ...state.overlayConfigs, [selIdx]: { ...cfg, ...patch } };
    set({ overlayConfigs: next });
  };

  const presets = [
    { id:'clean', name:'Clean', color:'#fff', bg:'transparent' },
    { id:'sub', name:'Subtitle', color:'#fff', bg:'rgba(0,0,0,0.6)' },
    { id:'cinema', name:'Cinematic', color:'#fff', bg:'rgba(0,0,0,0.85)' },
    { id:'bold', name:'Bold', color:'#000', bg:'#fff' },
    { id:'teal', name:'Teal', color:'#fff', bg:'var(--accent)' },
    { id:'mini', name:'Minimal', color:'#E6EAF0', bg:'transparent' },
  ];

  const layouts = [
    { id:'top', name:'Title Top', x:0.5, y:0.15 },
    { id:'sub', name:'Subtitle', x:0.5, y:0.82 },
    { id:'center', name:'Center', x:0.5, y:0.5 },
    { id:'split', name:'Split', x:0.5, y:0.72 },
  ];

  return (
    <div style={{display:'flex', flexDirection:'column', height:'100%', background:'var(--bone)'}}>
      {/* Top nav */}
      <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', padding:'54px 10px 8px'}}>
        <button onClick={()=>nav.go('record')} 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)'}}>Edit</div>
          <div style={{fontSize:10.5, color:'var(--ink-3)', marginTop:1, fontFamily:'var(--mono)', letterSpacing:1}}>STEP 3 / 4</div>
        </div>
        <button onClick={()=>nav.go('share')} style={{
          padding:'8px 14px', borderRadius:10, background:'var(--ink)', color:'var(--bone)',
          fontSize:13, fontWeight:500, display:'inline-flex', alignItems:'center', gap:5,
        }}>Export<I.chevR s={14} w={2.2}/></button>
      </div>
      <div style={{padding:'0 var(--pad) 10px'}}><Stepper step={2}/></div>

      {/* Canvas */}
      <div style={{padding:'0 var(--pad)', marginBottom:12}}>
        <div style={{
          aspectRatio: state.aspect === '16:9' ? '16/9' : state.aspect === '1:1' ? '1/1' : '9/16',
          borderRadius:16, overflow:'hidden', position:'relative',
          background:'linear-gradient(160deg, #EBD9BE 0%, #D9C29F 100%)',
          border:'1px solid var(--rule)',
          maxHeight: 430,
          boxShadow:'0 1px 2px rgba(56,40,20,0.04)',
        }}>
          {/* Video mock — warm studio tone */}
          <div style={{position:'absolute', inset:0,
            background: 'radial-gradient(circle at 50% 40%, #E4C3A3 0%, #C9A585 55%, #A6866A 100%)'}}/>
          {/* Silhouette */}
          <div style={{position:'absolute', bottom:'18%', left:'50%', transform:'translateX(-50%)',
            width:'42%', aspectRatio:'1', borderRadius:'50%', background:'rgba(90,70,55,0.55)', filter:'blur(2px)'}}/>
          {/* Play */}
          <div style={{position:'absolute', inset:0, display:'flex', alignItems:'center', justifyContent:'center', zIndex:3}}>
            <div style={{width:56, height:56, borderRadius:999, background:'rgba(255,251,245,0.88)', backdropFilter:'blur(10px)',
              border:'1px solid rgba(30,26,21,0.08)', display:'flex', alignItems:'center', justifyContent:'center', color:'var(--ink)'}}>
              <I.play s={22}/>
            </div>
          </div>
          {/* Draggable text overlay */}
          <div style={{
            position:'absolute',
            left: `${cfg.x*100}%`, top: `${cfg.y*100}%`,
            transform:'translate(-50%, -50%)',
            maxWidth: '86%', textAlign:'center',
            zIndex:4,
          }}>
            <div style={{
              display:'inline-block',
              padding: cfg.bg === 'transparent' ? 0 : '8px 12px',
              borderRadius: cfg.radius,
              background: cfg.bg === 'rgba(0,0,0,0.55)' ? 'rgba(255,251,245,0.85)' : cfg.bg,
              border: cfg.bg === 'transparent' ? 'none' : '1px dashed rgba(30,26,21,0.25)',
              color: cfg.color === '#ffffff' ? 'var(--ink)' : cfg.color,
              fontFamily:'var(--serif)',
              fontSize: cfg.size * 0.55, fontWeight:500, letterSpacing:-0.3, lineHeight:1.25,
              textShadow: cfg.bg === 'transparent' ? '0 2px 10px rgba(255,251,245,0.65)' : 'none',
            }}>
              {slide.text || '今日は新しい単語を勉強します'}
            </div>
          </div>
          {/* Timestamp badge */}
          <div style={{position:'absolute', top:10, left:10, zIndex:5,
            padding:'4px 8px', borderRadius:6, background:'rgba(255,251,245,0.85)', backdropFilter:'blur(8px)',
            fontSize:10.5, fontWeight:500, color:'var(--ink)', fontFamily:'var(--mono)', letterSpacing:0.5}}>
            00:0{selIdx+1} · SLIDE {selIdx+1}
          </div>
          {/* Fullscreen button */}
          <div style={{position:'absolute', top:10, right:10, zIndex:5,
            width:30, height:30, borderRadius:8, background:'rgba(255,251,245,0.85)', backdropFilter:'blur(8px)',
            display:'flex', alignItems:'center', justifyContent:'center', color:'var(--ink)'}}>
            <I.full s={14}/>
          </div>
        </div>
      </div>

      {/* Scrubber */}
      <div style={{padding:'0 var(--pad) 10px'}}>
        <div style={{
          background:'var(--cream)', border:'1px solid var(--rule)', borderRadius:12,
          padding:'10px 12px', display:'flex', alignItems:'center', gap:10,
        }}>
          <button style={{width:28, height:28, borderRadius:999, background:'var(--accent)', color:'#fff', display:'inline-flex', alignItems:'center', justifyContent:'center'}}><I.play s={14}/></button>
          <div style={{flex:1, height:26, position:'relative'}}>
            {/* Track */}
            <div style={{position:'absolute', top:'50%', left:0, right:0, height:4, borderRadius:2, background:'var(--rule)', transform:'translateY(-50%)'}}/>
            {/* Progress */}
            <div style={{position:'absolute', top:'50%', left:0, width:`${((selIdx+1)/state.slides.length)*60}%`, height:4, borderRadius:2, background:'var(--accent)', transform:'translateY(-50%)'}}/>
            {/* Slide markers */}
            {state.slides.map((_,i) => (
              <div key={i} onClick={()=>setSelIdx(i)} style={{
                position:'absolute', top:'50%', left:`${(i/(state.slides.length-1||1))*100}%`,
                transform:'translate(-50%, -50%)',
                width: i===selIdx ? 14 : 8, height: i===selIdx ? 14 : 8,
                borderRadius:'50%',
                background: i===selIdx ? 'var(--accent)' : 'var(--rule-2)',
                boxShadow: i===selIdx ? '0 0 0 4px var(--accent-soft)' : 'none',
                cursor:'pointer',
              }}/>
            ))}
          </div>
          <span style={{fontSize:11, fontFamily:'var(--mono)', color:'var(--ink-3)', letterSpacing:0.5}}>00:{String((selIdx+1)*3).padStart(2,'0')}/00:{String(state.slides.length*3).padStart(2,'0')}</span>
        </div>
      </div>

      {/* Tool tabs */}
      <div style={{padding:'0 var(--pad) 10px', display:'flex', gap:6}}>
        {[
          {id:'style', label:'Style', icon:<I.type s={14}/>},
          {id:'layout', label:'Layout', icon:<I.align s={14}/>},
          {id:'slides', label:'Slides', icon:<I.layer s={14}/>},
        ].map(t => (
          <button key={t.id} onClick={()=>setTool(t.id)} style={{
            flex:1, padding:'9px 10px', borderRadius:10,
            background: tool===t.id ? 'var(--cream)' : 'transparent',
            border:'1px solid '+ (tool===t.id ? 'var(--rule-2)' : 'var(--rule)'),
            color: tool===t.id ? 'var(--ink)' : 'var(--ink-3)',
            fontSize:12.5, fontWeight:500, display:'inline-flex', alignItems:'center', justifyContent:'center', gap:6,
          }}>{t.icon}{t.label}</button>
        ))}
      </div>

      {/* Tool panel */}
      <div className="scroll" style={{flex:1, overflow:'auto', padding:'0 var(--pad) 100px'}}>
        {tool === 'style' && (
          <div>
            <SectionHead label="Presets"/>
            <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:8, padding:'0 var(--pad) 16px'}}>
              {presets.map(p => (
                <button key={p.id} onClick={()=>setCfg({color:p.color, bg:p.bg})} style={{
                  padding:'14px 8px', borderRadius:10, background:'var(--cream)',
                  border:'1px solid var(--rule)', textAlign:'center',
                }}>
                  <div style={{height:28, borderRadius:6, background:p.bg==='transparent'?'var(--bone-2)':p.bg,
                    display:'flex', alignItems:'center', justifyContent:'center', marginBottom:6,
                    border:p.bg==='transparent'?'1px dashed var(--rule-2)':'none'}}>
                    <span style={{fontFamily:'var(--serif)', fontSize:14, fontWeight:500, color:p.color}}>Aa</span>
                  </div>
                  <div style={{fontSize:10.5, color:'var(--ink-3)', fontWeight:500, fontFamily:'var(--mono)', letterSpacing:0.5}}>{p.name}</div>
                </button>
              ))}
            </div>

            <SectionHead label="Font size"/>
            <div style={{padding:'0 var(--pad) 16px'}}>
              <div style={{
                background:'var(--cream)', border:'1px solid var(--rule)', borderRadius:12,
                padding:'12px 14px', display:'flex', alignItems:'center', gap:12,
              }}>
                <span style={{fontSize:11, color:'var(--ink-3)', fontFamily:'var(--mono)', minWidth:32, letterSpacing:0.5}}>{cfg.size}pt</span>
                <input type="range" className="accent" style={{flex:1}} min="20" max="80" value={cfg.size}
                  onChange={e=>setCfg({size: Number(e.target.value)})}/>
              </div>
            </div>

            <SectionHead label="Text color"/>
            <div style={{display:'flex', gap:8, padding:'0 var(--pad) 16px', flexWrap:'wrap'}}>
              {['#1E1A15','#FFFBF5','#E87B4E','#7BA896','#C45E33','#6B4F6B','#F0D78A'].map(c => (
                <button key={c} onClick={()=>setCfg({color:c})} style={{
                  width:34, height:34, borderRadius:10,
                  background:c, border: cfg.color===c ? '2px solid var(--bone)' : '1px solid var(--rule)',
                  boxShadow: cfg.color===c ? '0 0 0 2px var(--accent)' : 'none',
                }}/>
              ))}
            </div>

            <SectionHead label="Ruby (furigana/pinyin)"/>
            <div style={{padding:'0 var(--pad) 16px'}}>
              <ToggleRow label="Show ruby annotations" hint="Japanese 漢字 → furigana · Chinese → pinyin" active={true}/>
              <ToggleRow label="Apply style to all slides" hint="Copy this slide's font, color, and position." active={false}/>
            </div>
          </div>
        )}

        {tool === 'layout' && (
          <div>
            <SectionHead label="Position presets"/>
            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:8, padding:'0 var(--pad) 16px'}}>
              {layouts.map(l => (
                <button key={l.id} onClick={()=>setCfg({x:l.x, y:l.y})} style={{
                  padding:'10px', borderRadius:10, background:'var(--surface)',
                  border:'1px solid '+ (Math.abs(cfg.y - l.y) < 0.02 ? 'var(--accent)' : 'var(--border)'),
                }}>
                  <div style={{aspectRatio:'9/16', position:'relative', background:'rgba(255,255,255,0.03)', borderRadius:6, marginBottom:6}}>
                    <div style={{
                      position:'absolute', left:`${l.x*100}%`, top:`${l.y*100}%`,
                      transform:'translate(-50%, -50%)', width:'60%', height:6, background: 'var(--accent)', borderRadius:3,
                    }}/>
                  </div>
                  <div style={{fontSize:11, fontWeight:600, color:'var(--text-dim)', textAlign:'center'}}>{l.name}</div>
                </button>
              ))}
            </div>
            <SectionHead label="Fine adjust"/>
            <div style={{padding:'0 var(--pad) 16px', display:'flex', flexDirection:'column', gap:8}}>
              <SliderRow label="X position" val={Math.round(cfg.x*100)} unit="%" min={0} max={100} onChange={v=>setCfg({x: v/100})}/>
              <SliderRow label="Y position" val={Math.round(cfg.y*100)} unit="%" min={0} max={100} onChange={v=>setCfg({y: v/100})}/>
              <SliderRow label="Corner radius" val={cfg.radius} unit="px" min={0} max={30} onChange={v=>setCfg({radius:v})}/>
            </div>
          </div>
        )}

        {tool === 'slides' && (
          <div>
            <SectionHead label="Slide timeline" trailing={<span style={{fontSize:10, color:'var(--ink-3)', fontStyle:'italic', fontFamily:'var(--serif)'}}>{state.slides.length} clips</span>}/>
            <div style={{display:'flex', flexDirection:'column', gap:8, padding:'0 var(--pad) 16px'}}>
              {state.slides.map((s,i) => (
                <button key={s.id} onClick={()=>setSelIdx(i)} style={{
                  display:'flex', alignItems:'center', gap:10, padding:9,
                  background: i===selIdx ? 'var(--accent-soft)' : 'var(--cream)',
                  border:'1px solid '+ (i===selIdx ? 'var(--accent)' : 'var(--rule)'),
                  borderRadius:10, textAlign:'left',
                }}>
                  <div style={{
                    width:56, height:38, borderRadius:6, flexShrink:0,
                    background:'linear-gradient(140deg, #E4C3A3, #C9A585)',
                    display:'flex', alignItems:'center', justifyContent:'center',
                    fontSize:9, fontFamily:'var(--mono)', color:'rgba(30,26,21,0.55)', letterSpacing:0.5,
                  }}>0:0{i+1}</div>
                  <div style={{flex:1, minWidth:0}}>
                    <div style={{fontSize:12, fontWeight:500, color:'var(--ink)', overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap'}}>
                      {s.text || `Slide ${i+1}`}
                    </div>
                    <div style={{fontSize:10.5, color:'var(--ink-3)', marginTop:2, fontFamily:'var(--mono)', letterSpacing:0.3}}>3.0s · {s.lang === 'ja' ? 'Japanese' : 'Auto-detect'}</div>
                  </div>
                  <I.chevR s={14}/>
                </button>
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

function ToggleRow({ label, hint, active }) {
  const [on, setOn] = React.useState(active);
  return (
    <div style={{display:'flex', alignItems:'center', gap:12, padding:'11px 12px', background:'var(--cream)',
      border:'1px solid var(--rule)', borderRadius:10, marginBottom:6}}>
      <div style={{flex:1}}>
        <div style={{fontSize:13, fontWeight:500, color:'var(--ink)'}}>{label}</div>
        {hint && <div style={{fontSize:10.5, color:'var(--ink-3)', marginTop:2}}>{hint}</div>}
      </div>
      <button onClick={()=>setOn(!on)} style={{
        width:40, height:24, borderRadius:999, padding:2,
        background: on ? 'var(--accent)' : 'var(--rule-2)',
        display:'flex', alignItems:'center', transition:'all .18s',
      }}>
        <div style={{width:20, height:20, borderRadius:'50%', background:'#fff',
          transform: on ? 'translateX(16px)' : 'translateX(0)', transition:'transform .18s',
          boxShadow:'0 1px 2px rgba(30,26,21,0.15)'}}/>
      </button>
    </div>
  );
}

function SliderRow({ label, val, unit, min, max, onChange }) {
  return (
    <div style={{background:'var(--cream)', border:'1px solid var(--rule)', borderRadius:10, padding:'10px 12px'}}>
      <div style={{display:'flex', justifyContent:'space-between', marginBottom:6}}>
        <span style={{fontSize:12, fontWeight:500, color:'var(--ink-2)'}}>{label}</span>
        <span style={{fontSize:11, fontFamily:'var(--mono)', color:'var(--ink-3)', letterSpacing:0.5}}>{val}{unit}</span>
      </div>
      <input type="range" className="accent" style={{width:'100%'}} min={min} max={max} value={val}
        onChange={e=>onChange(Number(e.target.value))}/>
    </div>
  );
}

window.ScreenEdit = ScreenEdit;