// ===========================================================================
// hueve-screens.jsx — faithful reconstructions of the app's key screens.
// Reused by LP hero, onboarding, and App Store screenshots.
// Mirrors components/EditorView.tsx, app/index.tsx, app/onboarding.tsx.
// ===========================================================================

// ---- a single palette swatch (components/Swatch.tsx) — oil-paint dab -------
function Swatch({ p, selected, weight, locked, size = 50, onClick }) {
  return (
    <div onClick={onClick} style={{ width: size, display:'flex', flexDirection:'column', alignItems:'center', gap:6, cursor: onClick?'pointer':'default', flex:'0 0 auto' }}>
      <div style={{
        width: size, height: size, borderRadius: '50%', position:'relative',
        boxShadow: selected ? '0 0 0 2px var(--bg), 0 0 0 4px var(--accent)' : 'none',
        transition:'box-shadow .2s ease',
      }}>
        <PaintDab id={p.id} size={size} style={{ opacity: locked ? 0.5 : 1 }} />
        {locked && (
          <div style={{ position:'absolute', inset:0, borderRadius:'50%', display:'flex', alignItems:'center', justifyContent:'center' }}>
            <Icon name="lock" size={15} color="#fff" sw={2} />
          </div>
        )}
        {selected && weight != null && (
          <div style={{ position:'absolute', bottom:-3, right:-3, background:'var(--accent)', color:'var(--on-accent)', fontFamily:'var(--mono)', fontSize:9, fontWeight:600, padding:'1px 4px', borderRadius:6, lineHeight:1.3, boxShadow:'0 0 0 1.5px var(--bg)' }}>{Math.round(weight*100)}</div>
        )}
      </div>
      <span style={{ fontFamily:'var(--mono)', fontSize:9.5, letterSpacing:'0.06em', color: selected?'var(--text)':'var(--text-mute)', textTransform:'uppercase' }}>{p.name}</span>
    </div>
  );
}

// ---- a finishing slider row (components/SliderRow.tsx) --------------------
function SliderRow({ label, value, pro, locked }) {
  const pct = Math.round(value * 100);
  return (
    <div style={{ marginBottom: 16 }}>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:8 }}>
        <span style={{ fontSize:13, color: locked?'var(--text-mute)':'var(--text-soft)', fontWeight:500 }}>{label}</span>
        {locked
          ? <span style={{ fontFamily:'var(--mono)', fontSize:10, fontWeight:600, color:'var(--accent)', background:'var(--accent-soft)', padding:'2px 8px', borderRadius:999 }}>Pro</span>
          : <span style={{ fontFamily:'var(--mono)', fontSize:11, color:'var(--text-mute)' }}>{pct}%</span>}
      </div>
      {!locked && (
        <div style={{ position:'relative', height:3, background:'var(--divider)', borderRadius:2 }}>
          <div style={{ position:'absolute', left:0, top:0, height:3, width:`${pct}%`, background:'var(--accent)', borderRadius:2 }} />
          <div style={{ position:'absolute', left:`${pct}%`, top:'50%', transform:'translate(-50%,-50%)', width:13, height:13, borderRadius:'50%', background:'#fff', boxShadow:'0 1px 4px rgba(0,0,0,0.5)' }} />
        </div>
      )}
    </div>
  );
}

// ---- the photo preview: image-slot if id given, else abstract look field --
function Preview({ slotId, img, look, h = 220, radius = 12 }) {
  // 固定画像（img）優先：写真を敷き、選択 pigment の look を soft-light で重ねて
  // グレーディング済みに見せる（grain テクスチャ込み）。
  if (img) {
    return (
      <div className="grain" style={{ position:'relative', width:'100%', height:h, borderRadius:radius, overflow:'hidden', background:'#000' }}>
        <img src={img} alt="" draggable="false" style={{ position:'absolute', top:0, left:0, width:'100%', height:'100%', objectFit:'cover', filter:'saturate(1.06) contrast(1.04)' }} />
        <div aria-hidden style={{ position:'absolute', top:0, left:0, right:0, bottom:0, background: lookField(look||['marlow','aurum','reverie']), mixBlendMode:'soft-light', opacity:0.55, pointerEvents:'none' }} />
      </div>
    );
  }
  if (slotId) {
    return <image-slot id={slotId} style={{ display:'block', width:'100%', height:h }} shape="rounded" radius={String(radius)} placeholder={t('sc.dragPhoto')}></image-slot>;
  }
  return (
    <div className="grain" style={{ position:'relative', width:'100%', height:h, borderRadius:radius, background: lookField(look||['aurum','marlow']), overflow:'hidden' }} />
  );
}

// ---- EDITOR screen (components/EditorView.tsx) ----------------------------
// selected: [{id, w}]   slotId: image-slot id or null   compact: trims rows
function EditorScreen({ selected = [{id:'marlow',w:0.62},{id:'aurum',w:0.4}], slotId = null, img = null, look = ['marlow','aurum'], finishing = true }) {
  const selIds = selected.map(s => s.id);
  return (
    <React.Fragment>
      <StatusBar />
      {/* header */}
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', padding:'10px 18px 8px', flex:'0 0 auto' }}>
        <span style={{ fontSize:13, color:'var(--text-mute)' }}>{t('sc.back')}</span>
        <span style={{ fontSize:13, color:'var(--text-mute)' }}>{t('sc.compare')}</span>
        <span style={{ fontSize:13, color:'var(--text-mute)' }}>{t('sc.reset')}</span>
      </div>
      {/* preview */}
      <div style={{ padding:'4px 18px 12px', flex:'0 0 auto' }}>
        <Preview slotId={slotId} img={img} look={look} h={200} />
      </div>
      {/* controls */}
      <div style={{ padding:'0 18px', flex:'1 1 auto', overflow:'hidden' }}>
        <div className="stock" style={{ fontSize:10.5, color:'var(--text-mute)', marginBottom:10 }}>{t('ctl.pigments')}</div>
        <div style={{ display:'flex', gap:10, overflow:'hidden', marginBottom:18, maskImage:'linear-gradient(90deg,#000 86%,transparent)' }}>
          {PIGMENTS.slice(0,7).map(p => (
            <Swatch key={p.id} p={p} size={46}
              selected={selIds.includes(p.id)}
              weight={selected.find(s=>s.id===p.id)?.w}
              locked={!FREE_IDS.includes(p.id) && !selIds.includes(p.id)} />
          ))}
        </div>

        {selected.length > 0 && (
          <React.Fragment>
            <div className="stock" style={{ fontSize:10.5, color:'var(--text-mute)', marginBottom:10 }}>{t('ctl.mix')}</div>
            {selected.map(s => <SliderRow key={s.id} label={PIG[s.id].name} value={s.w} />)}
          </React.Fragment>
        )}

        {finishing && (
          <React.Fragment>
            <div className="stock" style={{ fontSize:10.5, color:'var(--text-mute)', margin:'4px 0 10px' }}>{t('ctl.finishing')}</div>
            <SliderRow label={t('ctl.amount')} value={0.7} />
            <SliderRow label={t('ctl.contrast')} value={0.55} />
            <SliderRow label={t('ctl.aging')} value={0.4} locked />
            <SliderRow label={t('ctl.grain')} value={0.3} locked />
          </React.Fragment>
        )}
      </div>
      {/* footer */}
      <div style={{ padding:'10px 18px 22px', flex:'0 0 auto', borderTop:'1px solid var(--divider)' }}>
        <div style={{ background:'var(--accent)', color:'var(--on-accent)', textAlign:'center', padding:'13px', borderRadius:12, fontWeight:600, fontSize:14 }}>{t('sc.export')}</div>
      </div>
    </React.Fragment>
  );
}

Object.assign(window, { Swatch, SliderRow, Preview, EditorScreen });