// screens-lesson.jsx — 課程內容頁（多模組組合：影片＋振假名＋單字卡＋測驗等）

const LessonScreen = ({ bookId, lessonId, dark, onBack, onOpenVideo, onOpenQuiz, onOpenKana, onOpenFlash, onOpenConv, fontScale = 1, showFurigana = 'auto' }) => {
  const T = useTheme(dark);
  const book = BOOKS.find(b => b.id === bookId) || BOOKS[0];

  // furigana resolved
  const furi = showFurigana === 'always' || showFurigana === 'auto';

  return (
    <PaperBg dark={dark} style={{ minHeight: '100%', paddingBottom: 100 }}>
      <PaperAppBar onBack={onBack} dark={dark} sub={`${book.tag} · LESSON ${lessonId}`} title="動詞て形的變化與用法" accent={book.ink}
        right={<button style={{ width: 38, height: 38, borderRadius: 19, border: 'none', background: 'transparent', cursor: 'pointer' }}>
          <svg width="20" height="20" viewBox="0 0 20 20"><circle cx="5" cy="10" r="1.5" fill={T.inkSoft}/><circle cx="10" cy="10" r="1.5" fill={T.inkSoft}/><circle cx="15" cy="10" r="1.5" fill={T.inkSoft}/></svg>
        </button>}/>

      {/* Lesson hero */}
      <div style={{ padding: '4px 20px 0' }}>
        <div style={{ position: 'relative', padding: '12px 0' }}>
          <div style={{ fontFamily: FONTS.jpHand, fontSize: 28 * fontScale, fontWeight: 700, color: T.ink, lineHeight: 1.2, position: 'relative', display: 'inline-block' }}>
            動詞 <span style={{ color: book.ink, position: 'relative' }}>て形<HandCircle color={TOKENS.red} size={70} sw={1.6} style={{ left: -8, top: -6 }}/></span> の<br/>使い方
          </div>
          <div style={{ marginTop: 8, fontFamily: FONTS.zh, fontSize: 14 * fontScale, color: T.inkSoft }}>
            學會動詞「て形」變化與 18 種句型用法
          </div>
        </div>
      </div>

      {/* Section navigation pills */}
      <div style={{ padding: '8px 20px', display: 'flex', gap: 8, overflowX: 'auto' }}>
        {['全部','影片','文法','例句','單字','測驗'].map((s, i) => (
          <button key={s} style={{
            padding: '6px 14px', borderRadius: 999, whiteSpace: 'nowrap',
            background: i === 0 ? T.ink : 'transparent',
            color: i === 0 ? T.paper : T.inkSoft,
            border: i === 0 ? 'none' : `1px solid ${T.rule}`,
            fontFamily: FONTS.zh, fontSize: 12, fontWeight: 600, cursor: 'pointer',
          }}>{s}</button>
        ))}
      </div>

      {/* MODULE 1: Video */}
      <div style={{ padding: '16px 20px 0' }}>
        <ModuleHeader num="01" label="VIDEO" title="課程影片" book={book}/>
        <div onClick={onOpenVideo} style={{
          marginTop: 10, position: 'relative', borderRadius: 16, overflow: 'hidden',
          aspectRatio: '16/9', cursor: 'pointer',
          background: `linear-gradient(135deg, ${book.ink}, ${book.color})`,
        }}>
          {/* Mock video thumb */}
          <div style={{ position: 'absolute', inset: 0, opacity: 0.25,
            backgroundImage: `repeating-linear-gradient(135deg, #fff 0 1px, transparent 1px 22px)` }}/>
          <div style={{ position: 'absolute', top: 12, left: 12, padding: '4px 8px', borderRadius: 4, background: '#E53935', fontFamily: FONTS.mono, fontSize: 10, color: '#fff', fontWeight: 700 }}>YOUTUBE</div>
          <div style={{ position: 'absolute', bottom: 12, right: 12, padding: '4px 8px', borderRadius: 4, background: 'rgba(0,0,0,0.7)', fontFamily: FONTS.mono, fontSize: 11, color: '#fff' }}>32:18</div>
          <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <div style={{ width: 64, height: 64, borderRadius: 32, background: 'rgba(255,255,255,0.95)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <svg width="22" height="26" viewBox="0 0 22 26"><path d="M0 0l22 13L0 26z" fill={book.ink}/></svg>
            </div>
          </div>
          <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, padding: 14, background: 'linear-gradient(transparent, rgba(0,0,0,0.6))' }}>
            <div style={{ fontFamily: FONTS.jp, fontSize: 14, fontWeight: 700, color: '#fff' }}>第5課 動詞て形の変化と使い方</div>
            <div style={{ fontFamily: FONTS.mono, fontSize: 10, color: '#fff', opacity: 0.85, marginTop: 2 }}>井上一宏先生 · 32:18</div>
          </div>
        </div>
      </div>

      {/* MODULE 2: Reading with furigana */}
      <div style={{ padding: '24px 20px 0' }}>
        <ModuleHeader num="02" label="READING" title="本文を読む" book={book}/>
        <PaperCard dark={dark} padding={18} style={{ marginTop: 10, position: 'relative' }}>
          <div style={{ position: 'absolute', top: 10, right: 10, display: 'flex', gap: 4 }}>
            <Stamp char="読" color={TOKENS.ochre} size={32}/>
          </div>
          <SectionLabel color={book.ink}>5-1 て形の変化方式</SectionLabel>
          <div style={{ marginTop: 14, lineHeight: 2.4, fontSize: 18 * fontScale }}>
            <Furigana size={18 * fontScale} show={furi} pairs={[
              ['動詞', 'どうし'], 'の', ['「て形」', null], 'は、',
              ['会話', 'かいわ'], 'で', ['一番', 'いちばん'], 'よく',
              ['使', 'つか'], 'われる', ['形', 'かたち'], 'です。'
            ]}/>
          </div>
          <div style={{ marginTop: 8, fontFamily: FONTS.zh, fontSize: 13 * fontScale, color: T.inkSoft, fontStyle: 'italic', borderLeft: `2px solid ${book.color}`, paddingLeft: 10 }}>
            動詞的「て形」是會話中最常使用的形態。
          </div>
          <div style={{ marginTop: 16, lineHeight: 2.4, fontSize: 18 * fontScale }}>
            <Furigana size={18 * fontScale} show={furi} pairs={[
              ['例', 'たと'], 'えば、「', ['食', 'た'], 'べて」、「',
              ['飲', 'の'], 'んで」、「', ['行', 'い'], 'って」など。'
            ]}/>
          </div>
        </PaperCard>
        <div style={{ marginTop: 8, display: 'flex', gap: 6, justifyContent: 'flex-end' }}>
          <button style={{ padding: '6px 10px', borderRadius: 999, border: `1px solid ${T.rule}`, background: 'transparent', fontFamily: FONTS.zh, fontSize: 11, color: T.inkSoft, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 4 }}>
            <svg width="14" height="14" viewBox="0 0 14 14"><path d="M3 8v3h3l5 4V4l-5 4H3z" fill={T.inkSoft}/></svg>
            朗讀
          </button>
        </div>
      </div>

      {/* MODULE 3: Conjugation table */}
      <div style={{ padding: '24px 20px 0' }}>
        <ModuleHeader num="03" label="TABLE" title="變化規則表" book={book}/>
        <PaperCard dark={dark} padding={0} style={{ marginTop: 10, overflow: 'hidden' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '70px 1fr 1fr', background: book.soft }}>
            {['類型','原形','て形'].map((h, i) => (
              <div key={i} style={{ padding: '10px 12px', fontFamily: FONTS.mono, fontSize: 11, fontWeight: 700, color: book.ink, letterSpacing: 1, borderRight: i < 2 ? `1px solid ${book.color}55` : 'none' }}>{h}</div>
            ))}
          </div>
          {[
            ['Ⅰ', [['会','あ'],['う']], [['会','あ'],['って']], 'う→って'],
            ['Ⅰ', [['書','か'],['く']], [['書','か'],['いて']], 'く→いて'],
            ['Ⅰ', [['泳','およ'],['ぐ']], [['泳','およ'],['いで']], 'ぐ→いで'],
            ['Ⅱ', [['食','た'],['べる']], [['食','た'],['べて']], '〜る→〜て'],
            ['Ⅲ', ['する'], ['して'], '不規則'],
            ['Ⅲ', [['来','く'],['る']], [['来','き'],['て']], '不規則'],
          ].map((row, i) => (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: '70px 1fr 1fr', borderTop: `1px solid ${T.rule}`, alignItems: 'center' }}>
              <div style={{ padding: '12px', fontFamily: FONTS.mono, fontSize: 14, fontWeight: 700, color: book.ink, textAlign: 'center', borderRight: `1px solid ${T.rule}`, background: T.paperDeep }}>{row[0]}</div>
              <div style={{ padding: '12px', borderRight: `1px solid ${T.rule}` }}>
                <Furigana size={16} show={furi} pairs={row[1]}/>
              </div>
              <div style={{ padding: '12px', position: 'relative' }}>
                <Furigana size={16} show={furi} pairs={row[2]}/>
                <div style={{ fontFamily: FONTS.mono, fontSize: 9, color: T.inkMute, marginTop: 2 }}>{row[3]}</div>
              </div>
            </div>
          ))}
        </PaperCard>
      </div>

      {/* MODULE 4: Vocab cards mini */}
      <div style={{ padding: '24px 20px 0' }}>
        <ModuleHeader num="04" label="VOCAB" title="本課單字" book={book}
          right={<button onClick={onOpenFlash} style={{ background: 'none', border: 'none', fontFamily: FONTS.zh, fontSize: 12, color: book.ink, cursor: 'pointer' }}>單字卡 →</button>}/>
        <div style={{ marginTop: 10, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
          {[
            { jp: [['食','た'],['べる']], romaji: 'taberu', zh: '吃' },
            { jp: [['飲','の'],['む']], romaji: 'nomu', zh: '喝' },
            { jp: [['行','い'],['く']], romaji: 'iku', zh: '去' },
            { jp: [['見','み'],['る']], romaji: 'miru', zh: '看' },
          ].map((v, i) => (
            <div key={i} style={{
              background: T.ivory, borderRadius: 12, padding: 12,
              border: `1px solid ${T.rule}`, position: 'relative',
            }}>
              <div style={{ position: 'absolute', top: 8, right: 10, fontFamily: FONTS.mono, fontSize: 9, color: T.inkMute }}>0{i+1}</div>
              <Furigana size={20} show={furi} pairs={v.jp}/>
              <div style={{ fontFamily: FONTS.mono, fontSize: 10, color: T.inkMute, marginTop: 2, fontStyle: 'italic' }}>{v.romaji}</div>
              <div style={{ fontFamily: FONTS.zh, fontSize: 12, color: T.inkSoft, marginTop: 4 }}>{v.zh}</div>
            </div>
          ))}
        </div>
      </div>

      {/* MODULE 5: Examples */}
      <div style={{ padding: '24px 20px 0' }}>
        <ModuleHeader num="05" label="EXAMPLES" title="例句" book={book}/>
        <div style={{ marginTop: 10, display: 'flex', flexDirection: 'column', gap: 10 }}>
          {[
            { jp: [['朝','あさ'],['ご', null],['飯','はん'],'を', ['食','た'],['べて'],'、', ['学','がっ'],['校','こう'],'へ', ['行','い'],['きます。']], zh: '吃完早餐後去學校。' },
            { jp: [['本','ほん'],'を', ['読','よ'],['んで'],'、', ['寝','ね'],['ます。']], zh: '看完書後睡覺。' },
          ].map((e, i) => (
            <PaperCard key={i} dark={dark} padding={14} accent={book.color}>
              <div style={{ paddingLeft: 8 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 6 }}>
                  <span style={{ fontFamily: FONTS.mono, fontSize: 10, color: book.ink, fontWeight: 700 }}>例 {i+1}</span>
                  <button style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0 }}>
                    <svg width="14" height="14" viewBox="0 0 14 14"><path d="M2 5v4h3l5 4V1L5 5H2z" fill={T.inkSoft}/></svg>
                  </button>
                </div>
                <div style={{ lineHeight: 2.2, fontSize: 16 * fontScale }}>
                  <Furigana size={16 * fontScale} show={furi} pairs={e.jp}/>
                </div>
                <div style={{ marginTop: 4, fontFamily: FONTS.zh, fontSize: 13, color: T.inkSoft }}>{e.zh}</div>
              </div>
            </PaperCard>
          ))}
        </div>
      </div>

      {/* MODULE 6: Quick CTA grid */}
      <div style={{ padding: '24px 20px 0' }}>
        <ModuleHeader num="06" label="PRACTICE" title="練習與測驗" book={book}/>
        <div style={{ marginTop: 10, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
          <CTACard onClick={onOpenFlash} icon="cards" title="單字卡背誦" sub="12 張" color={TOKENS.book2} ink={TOKENS.book2Ink}/>
          <CTACard onClick={onOpenQuiz} icon="quiz" title="本課測驗" sub="10 題" color={TOKENS.book4} ink={TOKENS.book4Ink}/>
          <CTACard onClick={onOpenConv} icon="speak" title="會話跟讀" sub="5 組" color={TOKENS.book2} ink={TOKENS.book2Ink}/>
          <CTACard onClick={onOpenKana} icon="kana" title="五十音複習" sub="46 字" color={TOKENS.book1} ink={TOKENS.book1Ink}/>
        </div>
      </div>

      {/* Lesson nav */}
      <div style={{ padding: '24px 20px 0', display: 'flex', gap: 8 }}>
        <PaperButton size="md" style={{ flex: 1 }}>← 上一課</PaperButton>
        <PaperButton size="md" bg={book.color} color={book.ink} style={{ flex: 1.4, borderColor: book.ink }}>下一課 →</PaperButton>
      </div>
    </PaperBg>
  );
};

const ModuleHeader = ({ num, label, title, book, right }) => {
  const T = useTheme(false);
  return (
    <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
      <div style={{ display: 'flex', alignItems: 'flex-end', gap: 10 }}>
        <div style={{
          fontFamily: FONTS.mono, fontSize: 24, fontWeight: 700,
          color: book.color, lineHeight: 1, opacity: 0.9,
        }}>{num}</div>
        <div>
          <SectionLabel color={book.ink}>{label}</SectionLabel>
          <div style={{ fontFamily: FONTS.zhHand, fontSize: 17, fontWeight: 700, color: TOKENS.ink, marginTop: 2 }}>{title}</div>
        </div>
      </div>
      {right}
    </div>
  );
};

const CTACard = ({ icon, title, sub, color, ink, onClick }) => {
  const icons = {
    cards: <svg width="22" height="22" viewBox="0 0 22 22"><rect x="3" y="6" width="13" height="14" rx="2" stroke={ink} strokeWidth="1.6" fill="none"/><rect x="6" y="3" width="13" height="14" rx="2" stroke={ink} strokeWidth="1.6" fill="#fff5"/></svg>,
    quiz: <svg width="22" height="22" viewBox="0 0 22 22"><circle cx="11" cy="11" r="8.5" stroke={ink} strokeWidth="1.6" fill="none"/><path d="M8 9c0-2 1.5-3 3-3s3 1 3 2.5-1.5 2-3 2.5M11 14.5v0.5" stroke={ink} strokeWidth="1.6" strokeLinecap="round" fill="none"/></svg>,
    speak: <svg width="22" height="22" viewBox="0 0 22 22"><path d="M3 5h13v9H8l-5 4v-4H3z" stroke={ink} strokeWidth="1.6" fill="none" strokeLinejoin="round"/><path d="M7 8h6M7 11h4" stroke={ink} strokeWidth="1.6" strokeLinecap="round"/></svg>,
    kana: <svg width="22" height="22" viewBox="0 0 22 22"><text x="11" y="16" textAnchor="middle" fontFamily="serif" fontSize="14" fontWeight="700" fill={ink}>あ</text></svg>,
  };
  return (
    <button onClick={onClick} style={{
      background: color + '40', borderRadius: 14, padding: 14,
      border: `1px solid ${color}`, cursor: 'pointer', textAlign: 'left',
      display: 'flex', flexDirection: 'column', gap: 8, alignItems: 'flex-start',
    }}>
      <div style={{ width: 36, height: 36, borderRadius: 10, background: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        {icons[icon]}
      </div>
      <div>
        <div style={{ fontFamily: FONTS.zh, fontSize: 13, fontWeight: 700, color: ink }}>{title}</div>
        <div style={{ fontFamily: FONTS.mono, fontSize: 10, color: ink, opacity: 0.7, marginTop: 2 }}>{sub}</div>
      </div>
    </button>
  );
};

window.LessonScreen = LessonScreen;