// screens-b.jsx — Pronunciation, Podcast player, Progress
// Each screen takes (theme T, t tweaks).

// ════════════════════════════════════════════════════════════════════════
// 4 · PRONUNCIATION PRACTICE  (play native → record → compare)
// ════════════════════════════════════════════════════════════════════════
function PronounceScreen({ T, t }) {
  const head = ppHeadFont(t);
  const [recorded, setRecorded] = React.useState(true); // show the compared state by default
  const [rec, setRec] = React.useState(false);
  const [speed, setSpeed] = React.useState(1);

  // pitch-curve comparison (two smooth lines)
  const Pitch = ({ seed, color, dashed }) => {
    const pts = ppBars(ppSeed(seed), 24).map((v, i) => `${(i / 23) * 300},${(42 - v * 30 - 4).toFixed(1)}`);
    // smooth-ish via polyline
    return <polyline points={pts.join(' ')} fill="none" stroke={color} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" strokeDasharray={dashed ? '1 6' : '0'} opacity={dashed ? 0.9 : 1} />;
  };

  const Row = ({ icon, label, who, seed, color, active }) => (
    <div style={{
      background: T.surface, borderRadius: 22, padding: '16px 18px', boxShadow: T.shadow,
      border: `0.5px solid ${active ? hexA(T.primary, 0.4) : T.hair}`,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 13 }}>
        <div style={{ width: 30, height: 30, borderRadius: 9, background: who === 'you' ? T.primarySoft : T.sunken, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <Icon name={icon} size={17} color={who === 'you' ? T.primary : T.sub} />
        </div>
        <span style={{ fontFamily: PP_UI, fontSize: 14, fontWeight: 600, color: T.ink, flex: 1 }}>{label}</span>
        <span style={{ fontFamily: PP_UI, fontSize: 12.5, color: T.faint, fontVariantNumeric: 'tabular-nums' }}>0:01</span>
      </div>
      <Waveform seed={seed} played={0} height={42} count={40} theme={T}
        playedColor={color} restColor={color} style={t.wave || 'bars'} />
    </div>
  );

  return (
    <Screen theme={T}>
      <SessionTop theme={T} step={8} total={12} />

      <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
        {/* word */}
        <div style={{ textAlign: 'center', marginTop: 18, marginBottom: 22 }}>
          <div style={{ fontFamily: PP_UI, fontSize: 12, fontWeight: 600, letterSpacing: 1.4, textTransform: 'uppercase', color: T.faint, marginBottom: 8 }}>Say it back</div>
          <div style={{ fontFamily: head, fontSize: 52, fontWeight: 500, letterSpacing: -0.8, lineHeight: 1 }}>paldies</div>
          <div style={{ fontFamily: PP_UI, fontSize: 16, color: T.sub, marginTop: 8 }}>thank you · <span style={{ color: T.faint }}>pal-DYES</span></div>
        </div>

        {/* two waveforms to compare */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          <Row icon="speaker" label="Native" who="native" seed="paldies-native" color={T.waveRest} />
          {recorded
            ? <Row icon="mic" label="You" who="you" seed="paldies-you" color={hexA(T.primary, 0.85)} active />
            : (
              <div style={{ background: T.surface, borderRadius: 22, padding: '22px 18px', textAlign: 'center', border: `1px dashed ${T.hair}` }}>
                <span style={{ fontFamily: PP_UI, fontSize: 14, color: T.faint }}>Record yourself to compare</span>
              </div>
            )}
        </div>

        {/* speech speed — slows the native model only */}
        <div style={{ display: 'flex', justifyContent: 'center', marginTop: 12 }}>
          <SpeedChip theme={T} size="sm" value={speed} onChange={setSpeed} />
        </div>

        {/* pitch-curve overlay comparison */}
        {recorded && (
          <div style={{ background: T.surface, borderRadius: 22, padding: '14px 18px 12px', marginTop: 12, boxShadow: T.shadow, border: `0.5px solid ${T.hair}` }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 6 }}>
              <span style={{ fontFamily: PP_UI, fontSize: 11.5, fontWeight: 600, letterSpacing: 1, textTransform: 'uppercase', color: T.faint }}>Pitch</span>
              <div style={{ display: 'flex', gap: 14, fontFamily: PP_UI, fontSize: 11.5, fontWeight: 600 }}>
                <span style={{ display: 'flex', alignItems: 'center', gap: 5, color: T.sub }}><span style={{ width: 14, height: 2.5, background: T.waveRest, borderRadius: 2 }} />Native</span>
                <span style={{ display: 'flex', alignItems: 'center', gap: 5, color: T.primary }}><span style={{ width: 14, height: 2.5, background: T.primary, borderRadius: 2 }} />You</span>
              </div>
            </div>
            <svg width="100%" height="46" viewBox="0 0 300 46" preserveAspectRatio="none" style={{ display: 'block', overflow: 'visible' }}>
              <Pitch seed="paldies-native-p" color={T.waveRest} dashed />
              <Pitch seed="paldies-you-p" color={T.primary} />
            </svg>
          </div>
        )}

        <div style={{ flex: 1 }} />

        {/* match note */}
        {recorded && (
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, marginBottom: 16 }}>
            <div style={{ width: 22, height: 22, borderRadius: '50%', background: T.goodSoft, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <Icon name="check" size={13} color={T.good} sw={2.4} />
            </div>
            <span style={{ fontFamily: PP_UI, fontSize: 14, fontWeight: 500, color: T.sub }}>Close. Lengthen the <b style={{ color: T.ink }}>ie</b> a touch.</span>
          </div>
        )}
      </div>

      {/* record + compare controls */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, paddingBottom: 30 }}>
        <button onClick={() => { setRecorded(false); setRec(true); }} style={{
          flex: 1, height: 56, borderRadius: 18, border: `1.5px solid ${rec ? hexA('#C0485A',0.5) : T.hair}`, cursor: 'pointer',
          background: rec ? (T.dark ? 'rgba(224,116,138,0.12)' : 'rgba(158,43,58,0.06)') : 'transparent',
          color: rec ? '#C0485A' : T.sub, fontFamily: PP_UI, fontSize: 16, fontWeight: 600,
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 9,
        }}>
          <span style={{ width: 11, height: 11, borderRadius: '50%', background: '#C0485A', display: 'inline-block' }} />
          {rec ? 'Recording…' : 'Record'}
        </button>
        <button onClick={() => { setRecorded(true); setRec(false); }} style={{
          flex: 1, height: 56, borderRadius: 18, border: 'none', cursor: 'pointer',
          background: T.primary, color: T.onPrimary, fontFamily: PP_UI, fontSize: 16, fontWeight: 600,
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 9,
          boxShadow: `0 8px 20px ${hexA(T.primary, 0.24)}`,
        }}>
          <svg width="17" height="17" viewBox="0 0 24 24" fill={T.onPrimary}><path d="M6 4.5v15a1 1 0 0 0 1.5.87l12-7.5a1 1 0 0 0 0-1.74l-12-7.5A1 1 0 0 0 6 4.5z" /></svg>
          Compare
        </button>
      </div>
    </Screen>
  );
}

// ════════════════════════════════════════════════════════════════════════
// 5 · AI PODCAST PLAYER  (built from known words) + transcript toggle
// ════════════════════════════════════════════════════════════════════════
function PodcastScreen({ T, t }) {
  const head = ppHeadFont(t);
  const [playing, setPlaying] = React.useState(true);
  const [showT, setShowT] = React.useState(true);
  const [speed, setSpeed] = React.useState(1);
  const progress = 0.38;

  const lines = [
    { lv: 'Labrīt! Šodien ir silta diena.', en: 'Good morning! Today is a warm day.', done: true },
    { lv: 'Es dzeru kafiju un lasu grāmatu.', en: 'I drink coffee and read a book.', cur: true },
    { lv: 'Vēlāk es eju uz tirgu.', en: 'Later I go to the market.' },
    { lv: 'Tur pērku maizi un ābolus.', en: 'There I buy bread and apples.' },
  ];

  return (
    <Screen theme={T} pad={24}>
      {/* header */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingTop: 66 }}>
        <button style={{ width: 34, height: 34, borderRadius: '50%', border: 'none', cursor: 'pointer', background: T.dark ? 'rgba(255,255,255,0.06)' : 'rgba(26,39,51,0.05)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <Icon name="chevD" size={19} color={T.sub} />
        </button>
        <span style={{ fontFamily: PP_UI, fontSize: 12, fontWeight: 600, letterSpacing: 1.4, textTransform: 'uppercase', color: T.faint }}>AI Episode</span>
        <button style={{ width: 34, height: 34, borderRadius: '50%', border: 'none', cursor: 'pointer', background: 'transparent', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <Icon name="settings" size={19} color={T.sub} />
        </button>
      </div>

      {/* title block */}
      <div style={{ textAlign: 'center', marginTop: 22 }}>
        <div style={{ fontFamily: head, fontSize: 30, fontWeight: 500, letterSpacing: -0.4, lineHeight: 1.1 }}>Rīta saruna</div>
        <div style={{ fontFamily: PP_UI, fontSize: 14, color: T.sub, marginTop: 8 }}>3 min · built from <b style={{ color: T.primary, fontWeight: 600 }}>92 words</b> you know</div>
      </div>

      {/* circular voice animation — the hero */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 24, marginTop: 26 }}>
        <button style={{ background: 'none', border: 'none', cursor: 'pointer', display: 'flex', flexDirection: 'column', alignItems: 'center', color: T.sub, flexShrink: 0 }}>
          <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke={T.sub} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M11 4a8 8 0 1 0 5 1.5" /><path d="M11 1.5l-2.5 2.5L11 6.5" /></svg>
          <span style={{ fontFamily: PP_UI, fontSize: 10, fontWeight: 600, marginTop: 1 }}>15</span>
        </button>
        <VoiceOrb theme={T} size={184} playing={playing} onClick={() => setPlaying(p => !p)} />
        <button style={{ background: 'none', border: 'none', cursor: 'pointer', display: 'flex', flexDirection: 'column', alignItems: 'center', color: T.sub, flexShrink: 0 }}>
          <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke={T.sub} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M13 4a8 8 0 1 1-5 1.5" /><path d="M13 1.5l2.5 2.5L13 6.5" /></svg>
          <span style={{ fontFamily: PP_UI, fontSize: 10, fontWeight: 600, marginTop: 1 }}>15</span>
        </button>
      </div>

      {/* speech speed */}
      <div style={{ display: 'flex', justifyContent: 'center', marginTop: 14 }}>
        <SpeedChip theme={T} size="sm" value={speed} onChange={setSpeed} />
      </div>

      {/* slim progress line */}
      <div style={{ marginTop: 18 }}>
        <div style={{ height: 4, borderRadius: 99, background: T.dark ? 'rgba(255,255,255,0.09)' : 'rgba(26,39,51,0.08)', overflow: 'hidden' }}>
          <div style={{ width: `${progress * 100}%`, height: '100%', background: T.primary, borderRadius: 99 }} />
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 9, fontFamily: PP_UI, fontSize: 12.5, color: T.faint, fontVariantNumeric: 'tabular-nums' }}>
          <span>1:09</span><span>3:04</span>
        </div>
      </div>

      {/* transcript toggle */}
      <div style={{ display: 'flex', justifyContent: 'center', marginTop: 22 }}>
        <button onClick={() => setShowT(s => !s)} style={{
          display: 'flex', alignItems: 'center', gap: 8, padding: '9px 16px', borderRadius: 99, cursor: 'pointer',
          background: showT ? T.primarySoft : 'transparent', border: `1px solid ${showT ? 'transparent' : T.hair}`,
          color: showT ? T.primary : T.sub, fontFamily: PP_UI, fontSize: 13.5, fontWeight: 600,
        }}>
          <Icon name="text" size={16} color={showT ? T.primary : T.sub} /> Transcript
        </button>
      </div>

      {/* transcript */}
      <div style={{ flex: 1, minHeight: 0, marginTop: 16, overflow: 'hidden', maskImage: 'linear-gradient(to bottom, #000 84%, transparent)', WebkitMaskImage: 'linear-gradient(to bottom, #000 84%, transparent)' }}>
        {showT && (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16, paddingBottom: 30 }}>
            {lines.map((l, i) => (
              <div key={i} style={{ opacity: l.done ? 0.4 : 1 }}>
                <div style={{ fontFamily: head, fontSize: 19, fontWeight: 500, lineHeight: 1.32, letterSpacing: -0.1, color: l.cur ? T.primary : T.ink }}>{l.lv}</div>
                <div style={{ fontFamily: PP_UI, fontSize: 13.5, color: T.sub, marginTop: 3 }}>{l.en}</div>
              </div>
            ))}
          </div>
        )}
      </div>
    </Screen>
  );
}

// ════════════════════════════════════════════════════════════════════════
// 6 · PROGRESS  (coverage of the 1,000 most common words)
// ════════════════════════════════════════════════════════════════════════
function ProgressScreen({ T, t }) {
  const head = ppHeadFont(t);
  const known = 615, total = 1000;
  const cols = 40, rows = 25; // 1000 dots — wide & short so bands fit below
  const dots = [];
  for (let i = 0; i < cols * rows; i++) dots.push(i < known);

  const bands = [
    { label: 'Top 100', sub: 'the everyday core', pct: 100 },
    { label: '101 – 300', sub: 'common conversation', pct: 92 },
    { label: '301 – 600', sub: 'broader topics', pct: 64 },
    { label: '601 – 1000', sub: 'fuller fluency', pct: 18 },
  ];

  return (
    <Screen theme={T}>
      <div style={{ flex: 1, minHeight: 0, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
        {/* header */}
        <div style={{ paddingTop: 70 }}>
          <div style={{ fontFamily: head, fontSize: 32, fontWeight: 500, letterSpacing: -0.3 }}>Progress</div>
          {t.folk && <div style={{ marginTop: 14 }}><FolkSeam color={T.primary} w={130} h={12} opacity={T.dark ? 0.55 : 0.6} /></div>}
        </div>

        {/* hero stat */}
        <div style={{ marginTop: 22 }}>
          <div style={{ display: 'flex', alignItems: 'flex-end', gap: 6 }}>
            <span style={{ fontFamily: head, fontSize: 72, fontWeight: 500, lineHeight: 0.85, letterSpacing: -2, color: T.primary }}>62</span>
            <span style={{ fontFamily: head, fontSize: 34, fontWeight: 500, color: T.primary, lineHeight: 1, paddingBottom: 4 }}>%</span>
          </div>
          <div style={{ fontFamily: PP_UI, fontSize: 16.5, color: T.ink, marginTop: 12, lineHeight: 1.4, maxWidth: 300 }}>
            of everyday Latvian speech you can already follow.
          </div>
          <div style={{ fontFamily: PP_UI, fontSize: 14, color: T.sub, marginTop: 6 }}>
            <b style={{ color: T.ink, fontWeight: 600 }}>615</b> of the 1,000 most common words
          </div>
        </div>

        {/* 1000-dot coverage grid */}
        <div style={{ marginTop: 20, background: T.surface, borderRadius: 22, padding: '16px 16px 14px', boxShadow: T.shadow, border: `0.5px solid ${T.hair}` }}>
          <div style={{ display: 'grid', gridTemplateColumns: `repeat(${cols}, 1fr)`, gap: 3 }}>
            {dots.map((on, i) => (
              <div key={i} style={{ width: '100%', aspectRatio: '1', borderRadius: '50%', background: on ? T.primary : (T.dark ? 'rgba(255,255,255,0.08)' : 'rgba(26,39,51,0.07)'), opacity: on ? (0.5 + 0.5 * (1 - i / known)) : 1 }} />
            ))}
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 11, fontFamily: PP_UI, fontSize: 11.5, color: T.faint, fontWeight: 500 }}>
            <span>most common</span><span>rarer</span>
          </div>
        </div>

        {/* frequency bands */}
        <div style={{ marginTop: 16, display: 'flex', flexDirection: 'column', gap: 13, paddingBottom: 96 }}>
          {bands.map((b, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
              <div style={{ width: 78, flexShrink: 0 }}>
                <div style={{ fontFamily: PP_UI, fontSize: 14, fontWeight: 600, color: T.ink, fontVariantNumeric: 'tabular-nums' }}>{b.label}</div>
                <div style={{ fontFamily: PP_UI, fontSize: 11.5, color: T.faint }}>{b.sub}</div>
              </div>
              <div style={{ flex: 1, height: 7, borderRadius: 99, background: T.dark ? 'rgba(255,255,255,0.07)' : 'rgba(26,39,51,0.06)', overflow: 'hidden' }}>
                <div style={{ width: `${b.pct}%`, height: '100%', background: b.pct === 100 ? T.good : T.primary, borderRadius: 99 }} />
              </div>
              <span style={{ fontFamily: PP_UI, fontSize: 13, fontWeight: 600, color: b.pct === 100 ? T.good : T.sub, width: 38, display: 'flex', justifyContent: 'flex-end', alignItems: 'center', fontVariantNumeric: 'tabular-nums' }}>
                {b.pct === 100 ? <Icon name="check" size={16} color={T.good} sw={2.4} /> : `${b.pct}%`}
              </span>
            </div>
          ))}
        </div>
      </div>

      <TabBar theme={T} active="progress" />
    </Screen>
  );
}

Object.assign(window, { PronounceScreen, PodcastScreen, ProgressScreen });