// screens-modules.jsx — 五十音、單字卡、會話/振假名、影片、測驗

// ─────────────────────────────────────────────────────────────
// 五十音模組
// ─────────────────────────────────────────────────────────────
const KanaScreen = ({ dark, onBack, fontScale = 1 }) => {
  const T = useTheme(dark);
  const [selected, setSelected] = React.useState({ k: 'あ', r: 'a' });
  const [tab, setTab] = React.useState('hira');

  const HIRA = [
    ['あ','a'],['い','i'],['う','u'],['え','e'],['お','o'],
    ['か','ka'],['き','ki'],['く','ku'],['け','ke'],['こ','ko'],
    ['さ','sa'],['し','shi'],['す','su'],['せ','se'],['そ','so'],
    ['た','ta'],['ち','chi'],['つ','tsu'],['て','te'],['と','to'],
    ['な','na'],['に','ni'],['ぬ','nu'],['ね','ne'],['の','no'],
    ['は','ha'],['ひ','hi'],['ふ','fu'],['へ','he'],['ほ','ho'],
    ['ま','ma'],['み','mi'],['む','mu'],['め','me'],['も','mo'],
    ['や','ya'],['',''],['ゆ','yu'],['',''],['よ','yo'],
    ['ら','ra'],['り','ri'],['る','ru'],['れ','re'],['ろ','ro'],
    ['わ','wa'],['',''],['',''],['',''],['を','wo'],
    ['ん','n'],['',''],['',''],['',''],['',''],
  ];
  const KATA = [
    ['ア','a'],['イ','i'],['ウ','u'],['エ','e'],['オ','o'],
    ['カ','ka'],['キ','ki'],['ク','ku'],['ケ','ke'],['コ','ko'],
    ['サ','sa'],['シ','shi'],['ス','su'],['セ','se'],['ソ','so'],
    ['タ','ta'],['チ','chi'],['ツ','tsu'],['テ','te'],['ト','to'],
    ['ナ','na'],['ニ','ni'],['ヌ','nu'],['ネ','ne'],['ノ','no'],
    ['ハ','ha'],['ヒ','hi'],['フ','fu'],['ヘ','he'],['ホ','ho'],
    ['マ','ma'],['ミ','mi'],['ム','mu'],['メ','me'],['モ','mo'],
    ['ヤ','ya'],['',''],['ユ','yu'],['',''],['ヨ','yo'],
    ['ラ','ra'],['リ','ri'],['ル','ru'],['レ','re'],['ロ','ro'],
    ['ワ','wa'],['',''],['',''],['',''],['ヲ','wo'],
    ['ン','n'],['',''],['',''],['',''],['',''],
  ];
  const data = tab === 'hira' ? HIRA : KATA;

  return (
    <PaperBg dark={dark} style={{ minHeight: '100%', paddingBottom: 100 }}>
      <PaperAppBar onBack={onBack} dark={dark} sub="BOOK 1 · 第1課" title="五十音" accent={TOKENS.book1Ink}/>

      {/* selected card */}
      <div style={{ padding: '8px 20px 0' }}>
        <div style={{
          background: TOKENS.book1Soft, borderRadius: 20,
          padding: 24, position: 'relative', overflow: 'hidden',
          border: `1px solid ${TOKENS.book1}`,
        }}>
          <WashiTape color={TOKENS.book1} w={44} h={16} rot={-5} pattern="dots" style={{ position: 'absolute', top: -8, left: 16 }}/>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
            <div style={{
              width: 110, height: 110, borderRadius: 16,
              background: '#fff', border: `2px solid ${TOKENS.book1Ink}`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              position: 'relative', overflow: 'hidden',
            }}>
              {/* mock 田字格 */}
              <div style={{ position: 'absolute', top: '50%', left: 8, right: 8, borderTop: `1px dashed ${TOKENS.book1Ink}55` }}/>
              <div style={{ position: 'absolute', left: '50%', top: 8, bottom: 8, borderLeft: `1px dashed ${TOKENS.book1Ink}55` }}/>
              <div style={{ fontFamily: FONTS.jpHand, fontSize: 76, fontWeight: 700, color: TOKENS.book1Ink, lineHeight: 1 }}>{selected.k || 'あ'}</div>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: FONTS.mono, fontSize: 11, color: TOKENS.book1Ink, letterSpacing: 1.5, fontWeight: 600 }}>HIRAGANA</div>
              <div style={{ fontFamily: FONTS.jpHand, fontSize: 36, fontWeight: 700, color: TOKENS.book1Ink, marginTop: 4 }}>{selected.r || 'a'}</div>
              <div style={{ marginTop: 8, display: 'flex', gap: 6 }}>
                <button style={{ padding: '8px 12px', borderRadius: 999, background: TOKENS.book1Ink, color: '#fff', border: 'none', fontFamily: FONTS.zh, fontSize: 12, fontWeight: 600, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 4 }}>
                  <svg width="12" height="12" viewBox="0 0 12 12"><path d="M2 4v4h2l4 3V1L4 4H2z" fill="#fff"/></svg>
                  聽發音
                </button>
                <button style={{ padding: '8px 12px', borderRadius: 999, background: 'transparent', color: TOKENS.book1Ink, border: `1px solid ${TOKENS.book1Ink}`, fontFamily: FONTS.zh, fontSize: 12, fontWeight: 600, cursor: 'pointer' }}>筆順</button>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* tab */}
      <div style={{ padding: '20px 20px 0', display: 'flex', gap: 6 }}>
        {[['hira','清音 ひらがな'],['kata','片假名 カタカナ'],['daku','濁・拗音']].map(([id, label]) => (
          <button key={id} onClick={() => setTab(id)} style={{
            flex: 1, padding: '8px', borderRadius: 10,
            background: tab === id ? T.ink : T.ivory,
            color: tab === id ? T.paper : T.inkSoft,
            border: tab === id ? 'none' : `1px solid ${T.rule}`,
            fontFamily: FONTS.zh, fontSize: 11, fontWeight: 600, cursor: 'pointer',
          }}>{label}</button>
        ))}
      </div>

      {/* Grid */}
      <div style={{ padding: '16px 20px 0' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 6,
        }}>
          {data.map(([k, r], i) => k ? (
            <button key={i} onClick={() => setSelected({ k, r })} style={{
              aspectRatio: '1',
              background: selected.k === k ? TOKENS.book1 : T.ivory,
              border: `1px solid ${selected.k === k ? TOKENS.book1Ink : T.rule}`,
              borderRadius: 10, cursor: 'pointer', position: 'relative',
              display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
              padding: 0,
            }}>
              <div style={{ fontFamily: FONTS.jpHand, fontSize: 22, fontWeight: 700, color: selected.k === k ? TOKENS.book1Ink : T.ink, lineHeight: 1 }}>{k}</div>
              <div style={{ fontFamily: FONTS.mono, fontSize: 9, color: selected.k === k ? TOKENS.book1Ink : T.inkMute, marginTop: 2 }}>{r}</div>
            </button>
          ) : (
            <div key={i} style={{ aspectRatio: '1', background: T.paperDeep + '60', borderRadius: 10, opacity: 0.4 }}/>
          ))}
        </div>
      </div>

      {/* Quick links */}
      <div style={{ padding: '20px' }}>
        <SectionLabel>練習</SectionLabel>
        <div style={{ marginTop: 10, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
          <CTACardSmall icon="✏️" title="筆順練習" sub="跟著寫" color={TOKENS.book1} ink={TOKENS.book1Ink}/>
          <CTACardSmall icon="👂" title="聽寫測驗" sub="50 題" color={TOKENS.book3} ink={TOKENS.book3Ink}/>
        </div>
      </div>
    </PaperBg>
  );
};

const CTACardSmall = ({ icon, title, sub, color, ink }) => {
  const T = useTheme(false);
  return (
    <div style={{
      background: color + '30', border: `1px solid ${color}`, borderRadius: 12,
      padding: 12, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 10,
    }}>
      <div style={{ fontSize: 20 }}>{icon}</div>
      <div>
        <div style={{ fontFamily: FONTS.zh, fontSize: 12, fontWeight: 700, color: ink }}>{title}</div>
        <div style={{ fontFamily: FONTS.mono, fontSize: 9, color: ink, opacity: 0.7 }}>{sub}</div>
      </div>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────
// 單字卡模組（翻面）
// ─────────────────────────────────────────────────────────────
const FlashcardScreen = ({ dark, onBack, fontScale = 1 }) => {
  const T = useTheme(dark);
  const cards = [
    { jp: [['食','た'],['べる']], rom: 'taberu', en: 'to eat', zh: '吃', ex: '朝ごはんを食べます。', ko: 'たべる' },
    { jp: [['飲','の'],['む']], rom: 'nomu', en: 'to drink', zh: '喝', ex: '水を飲みます。' },
    { jp: [['見','み'],['る']], rom: 'miru', en: 'to see', zh: '看', ex: '映画を見ます。' },
  ];
  const [idx, setIdx] = React.useState(0);
  const [flipped, setFlipped] = React.useState(false);
  const card = cards[idx];

  return (
    <PaperBg dark={dark} style={{ minHeight: '100%', paddingBottom: 100 }}>
      <PaperAppBar onBack={onBack} dark={dark} sub="LESSON 5 · VOCAB" title="單字卡背誦" accent={TOKENS.book2Ink}/>

      {/* progress dots */}
      <div style={{ padding: '0 20px', display: 'flex', justifyContent: 'center', gap: 6, marginTop: 8 }}>
        {cards.map((_, i) => (
          <div key={i} style={{
            flex: 1, height: 3, borderRadius: 2,
            background: i < idx ? TOKENS.book2 : (i === idx ? TOKENS.book2Ink : T.rule),
          }}/>
        ))}
      </div>
      <div style={{ padding: '4px 20px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{ fontFamily: FONTS.mono, fontSize: 11, color: T.inkMute }}>{idx + 1} / {cards.length}</div>
        <div style={{ fontFamily: FONTS.mono, fontSize: 11, color: T.inkMute }}>{flipped ? '已揭曉' : '點擊翻面'}</div>
      </div>

      {/* Card */}
      <div style={{ padding: '20px', perspective: 1200 }}>
        <div onClick={() => setFlipped(!flipped)} style={{
          height: 380, position: 'relative', cursor: 'pointer',
          transformStyle: 'preserve-3d',
          transition: 'transform 0.6s',
          transform: flipped ? 'rotateY(180deg)' : 'rotateY(0)',
        }}>
          {/* Front */}
          <div style={{
            position: 'absolute', inset: 0, backfaceVisibility: 'hidden',
            background: T.ivory, borderRadius: 20,
            border: `1px solid ${T.rule}`,
            boxShadow: '0 8px 24px rgba(60,40,20,0.08)',
            padding: 24, display: 'flex', flexDirection: 'column',
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
              <SectionLabel color={TOKENS.book2Ink}>動詞 · VERB</SectionLabel>
              <div style={{ fontFamily: FONTS.mono, fontSize: 10, color: T.inkMute }}>0{idx+1}</div>
            </div>
            <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', gap: 16 }}>
              <Furigana size={56 * fontScale} show={true} pairs={card.jp} ruby={TOKENS.book2Ink}/>
              <div style={{ fontFamily: FONTS.mono, fontSize: 14, color: T.inkSoft, fontStyle: 'italic' }}>/{card.rom}/</div>
              <button style={{
                marginTop: 8, width: 56, height: 56, borderRadius: 28,
                background: TOKENS.book2Soft, border: `2px solid ${TOKENS.book2Ink}`,
                cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <svg width="20" height="20" viewBox="0 0 20 20"><path d="M3 7v6h3l5 4V3L6 7H3z" fill={TOKENS.book2Ink}/><path d="M14 6a4 4 0 010 8" stroke={TOKENS.book2Ink} strokeWidth="1.5" fill="none"/></svg>
              </button>
            </div>
            <div style={{ textAlign: 'center', fontFamily: FONTS.zh, fontSize: 12, color: T.inkMute }}>點擊查看中文意思</div>
          </div>
          {/* Back */}
          <div style={{
            position: 'absolute', inset: 0, backfaceVisibility: 'hidden',
            transform: 'rotateY(180deg)',
            background: TOKENS.book2Soft, borderRadius: 20,
            border: `1px solid ${TOKENS.book2}`,
            padding: 24, display: 'flex', flexDirection: 'column',
          }}>
            <SectionLabel color={TOKENS.book2Ink}>意味</SectionLabel>
            <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', gap: 14 }}>
              <div style={{ fontFamily: FONTS.zhHand, fontSize: 48, fontWeight: 700, color: TOKENS.book2Ink }}>{card.zh}</div>
              <div style={{ fontFamily: FONTS.mono, fontSize: 14, color: TOKENS.book2Ink, fontStyle: 'italic' }}>{card.en}</div>
            </div>
            <div style={{ borderTop: `1px dashed ${TOKENS.book2Ink}55`, paddingTop: 12 }}>
              <div style={{ fontFamily: FONTS.mono, fontSize: 9, color: TOKENS.book2Ink, letterSpacing: 1, marginBottom: 4 }}>EXAMPLE</div>
              <div style={{ fontFamily: FONTS.jp, fontSize: 14, color: TOKENS.book2Ink }}>{card.ex}</div>
            </div>
          </div>
        </div>
      </div>

      {/* Self-rate */}
      <div style={{ padding: '8px 20px 0', display: 'flex', gap: 8 }}>
        {[
          { l: '不熟', c: '#C8553D' },
          { l: '普通', c: TOKENS.ochre },
          { l: '熟練', c: TOKENS.book4Ink },
        ].map(b => (
          <button key={b.l} onClick={() => { setFlipped(false); setIdx(Math.min(idx + 1, cards.length - 1)); }} style={{
            flex: 1, padding: '12px', borderRadius: 12,
            border: `1.5px solid ${b.c}`, background: 'transparent', color: b.c,
            fontFamily: FONTS.zh, fontSize: 13, fontWeight: 700, cursor: 'pointer',
          }}>{b.l}</button>
        ))}
      </div>
    </PaperBg>
  );
};

window.KanaScreen = KanaScreen;
window.FlashcardScreen = FlashcardScreen;