// screens-book.jsx — 書籍課程章節列表 + 課程內容（多模組）

const BookOverviewScreen = ({ bookId, dark, onBack, onOpenLesson, fontScale = 1 }) => {
  const T = useTheme(dark);
  const book = BOOKS.find(b => b.id === bookId) || BOOKS[0];

  // Mock parts/lessons by book
  const PARTS = {
    1: [
      { id: 'p1', label: 'Part 1', title: '五十音與基礎文法', lessons: [
        { id: '01', title: '五十音入門', sub: '清音 / 濁音 / 拗音 / 片假名', mods: ['五十音','音檔','測驗'], done: true },
        { id: '02', title: '問候語', sub: '24句常見問候語', mods: ['單字卡','音檔','測驗'], done: true },
        { id: '03', title: '基礎文法', sub: '基本句型・指示代名詞', mods: ['文法','例句','測驗'] },
      ]},
      { id: 'p2', label: 'Part 2', title: '動詞變化', lessons: [
        { id: '04', title: '動詞ます形的用法', sub: '想V・容易V・一邊V', mods: ['文法','例句'] },
        { id: '05', title: '動詞て形的變化與用法', sub: '請你V・許可・嘗試', mods: ['文法','例句','影片'], current: true },
        { id: '06', title: '動詞た形的變化與用法', sub: '經驗・建議・狀態', mods: ['文法'] },
      ]},
      { id: 'p3', label: 'Part 3', title: '進階句型', lessons: [
        { id: '12', title: '變化的用法', sub: 'V得可以・變得不V', mods: ['文法'] },
        { id: '14', title: '授受表現的用法', sub: 'あげる / もらう / くれる', mods: ['文法','會話'] },
        { id: '20', title: '尊敬語和謙讓語', sub: '尊敬・謙讓表現', mods: ['文法'] },
      ]},
    ],
    2: [
      { id: 'p1', label: '12課', title: '對話口語大特訓', lessons: [
        { id: '01', title: '生活重要單字250個', sub: '背單字的秘訣', mods: ['單字卡','測驗'] },
        { id: '06', title: '四種情境對話', sub: '朋友・家庭・公司・觀光', mods: ['會話','音檔'] },
        { id: '12', title: '精選慣用句100', sub: '日本人會話常出現', mods: ['慣用句','例句'] },
      ]},
    ],
    3: [
      { id: 'p1', label: 'Part 1', title: '出發前的準備', lessons: [
        { id: '1-1', title: '用日文打招呼與自我介紹', sub: '基礎招呼用語', mods: ['會話'] },
        { id: '1-3', title: '日幣金額、折扣與計算', sub: '購物必備', mods: ['練習'] },
      ]},
      { id: 'p2', label: 'Part 2', title: '日本旅遊各種情境', lessons: [
        { id: '2-1', title: '觀光日語：電車篇', sub: '車站・購票・轉乘', mods: ['會話','音檔'] },
        { id: '2-5', title: '觀光日語：購物篇', sub: '免稅・尺寸・退換', mods: ['會話'] },
      ]},
    ],
    4: [
      { id: 'p1', label: 'Part 1', title: '日語讀解：60篇', lessons: [
        { id: '01', title: '花粉症', sub: '花粉症（はなふんしょう）', mods: ['短文','振假名','音檔'] },
        { id: '07', title: 'ラーメン①', sub: '拉麵①', mods: ['短文','振假名'] },
        { id: '28', title: '花見', sub: '賞花', mods: ['短文','振假名','音檔'] },
      ]},
      { id: 'p2', label: 'Part 2', title: '語法解說：A 和 B 的差別', lessons: [
        { id: 'g1', title: '「～たい」VS「～欲しい」', sub: '想要做 vs 想要', mods: ['文法'] },
        { id: 'g4', title: '「～らしい」VS「～っぽい」VS「～みたい」', sub: '相似用法比較', mods: ['文法'] },
      ]},
    ],
  }[bookId] || [];

  return (
    <PaperBg dark={dark} style={{ minHeight: '100%', paddingBottom: 100 }}>
      <PaperAppBar onBack={onBack} dark={dark} sub={book.tag} title={book.short} 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" fill="none"><path d="M5 3v14l5-3 5 3V3z" stroke={T.inkSoft} strokeWidth="1.8" strokeLinejoin="round"/></svg>
        </button>}/>

      {/* Hero card — book cover */}
      <div style={{ padding: '4px 20px 0' }}>
        <div style={{
          background: book.color, borderRadius: 20,
          padding: 22, position: 'relative', overflow: 'hidden',
          border: `1px solid ${book.ink}40`,
        }}>
          {/* arrow pattern */}
          <div style={{ position: 'absolute', inset: 0, opacity: 0.16,
            backgroundImage: `repeating-linear-gradient(135deg, ${book.ink} 0 1px, transparent 1px 22px)` }}/>
          <div style={{ position: 'relative' }}>
            <WashiTape color="#fff" w={56} h={18} rot={-5} pattern="dots" style={{ position: 'absolute', top: -32, left: -8 }}/>
            <div style={{ fontFamily: FONTS.mono, fontSize: 10, color: book.ink, letterSpacing: 1.5 }}>{book.tag} · {book.date} 上市</div>
            <div style={{ marginTop: 8, fontFamily: FONTS.zhHand, fontSize: 26 * fontScale, fontWeight: 700, color: book.ink, lineHeight: 1.2 }}>
              {book.title}
            </div>
            <div style={{ marginTop: 8, fontFamily: FONTS.zh, fontSize: 13, color: book.ink, opacity: 0.85 }}>{book.subtitle}</div>
            <div style={{ marginTop: 14, display: 'flex', gap: 8 }}>
              <Pill bg="rgba(255,255,255,0.6)" c={book.ink}>{book.lessons} 堂課</Pill>
              <Pill bg="rgba(255,255,255,0.6)" c={book.ink}>{book.parts} 大部分</Pill>
              <Pill bg="rgba(255,255,255,0.6)" c={book.ink}>YouTube 影片</Pill>
            </div>
          </div>
        </div>
      </div>

      {/* Progress strip */}
      <div style={{ padding: '20px 20px 8px' }}>
        <PaperCard dark={dark} padding={14}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
            <div style={{ fontFamily: FONTS.zh, fontSize: 13, fontWeight: 600, color: T.ink }}>整體進度</div>
            <div style={{ fontFamily: FONTS.mono, fontSize: 12, color: book.ink }}>4 / {book.lessons} 課</div>
          </div>
          <div style={{ marginTop: 10, height: 6, background: T.rule, borderRadius: 3, overflow: 'hidden', position: 'relative' }}>
            <div style={{ width: `${(4/book.lessons)*100}%`, height: '100%', background: book.color }}/>
            <div style={{ position: 'absolute', left: `${(4/book.lessons)*100}%`, top: -3, width: 12, height: 12, borderRadius: 6, background: book.ink, transform: 'translateX(-50%)' }}/>
          </div>
        </PaperCard>
      </div>

      {/* Parts & lessons */}
      {PARTS.map(part => (
        <div key={part.id} style={{ padding: '20px 20px 0' }}>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 12 }}>
            <div style={{
              fontFamily: FONTS.mono, fontSize: 11, fontWeight: 700, padding: '3px 8px',
              background: book.soft, color: book.ink, borderRadius: 4, letterSpacing: 1,
            }}>{part.label}</div>
            <div style={{ fontFamily: FONTS.zhHand, fontSize: 16, fontWeight: 700, color: T.ink }}>{part.title}</div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {part.lessons.map(l => (
              <LessonRow key={l.id} lesson={l} book={book} dark={dark} onClick={() => onOpenLesson(book.id, l.id)}/>
            ))}
          </div>
        </div>
      ))}

      {/* PDF & YouTube section */}
      <div style={{ padding: '24px 20px 0' }}>
        <SectionLabel>RESOURCES · 教材資源</SectionLabel>
        <div style={{ marginTop: 12, display: 'flex', flexDirection: 'column', gap: 10 }}>
          <ResourceRow type="youtube" title="完整影片播放清單" sub={`${book.lessons} 部影片 · YouTube`} dark={dark}/>
          <ResourceRow type="pdf" title="完整課程 PDF 講義" sub="可下載 · 共 240 頁" dark={dark}/>
          <ResourceRow type="audio" title="全課程音檔（MP3）" sub={`${book.lessons * 8} 個音檔`} dark={dark}/>
        </div>
      </div>
    </PaperBg>
  );
};

const Pill = ({ children, bg, c }) => (
  <span style={{
    fontFamily: FONTS.zh, fontSize: 11, fontWeight: 600,
    padding: '4px 10px', borderRadius: 999,
    background: bg, color: c,
  }}>{children}</span>
);

const LessonRow = ({ lesson, book, dark, onClick }) => {
  const T = useTheme(dark);
  return (
    <div onClick={onClick} style={{
      background: T.ivory, borderRadius: 14,
      border: `1px solid ${lesson.current ? book.color : T.rule}`,
      padding: 14, cursor: 'pointer', position: 'relative',
      boxShadow: lesson.current ? `0 0 0 3px ${book.color}33` : 'none',
    }}>
      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
        <div style={{
          width: 40, height: 40, flexShrink: 0, borderRadius: 10,
          background: lesson.done ? book.color : (lesson.current ? book.soft : T.paperDeep),
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: FONTS.mono, fontSize: 13, fontWeight: 700,
          color: lesson.done ? book.ink : (lesson.current ? book.ink : T.inkMute),
          border: lesson.current ? `1.5px dashed ${book.ink}` : 'none',
        }}>
          {lesson.done ? <svg width="18" height="18" viewBox="0 0 18 18"><path d="M3 9l4 4 8-9" stroke={book.ink} strokeWidth="2.4" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg> : lesson.id}
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <div style={{ fontFamily: FONTS.zh, fontSize: 14, fontWeight: 700, color: T.ink }}>{lesson.title}</div>
            {lesson.current && <span style={{ fontFamily: FONTS.mono, fontSize: 9, padding: '2px 5px', background: book.color, color: book.ink, borderRadius: 3, fontWeight: 700 }}>NOW</span>}
          </div>
          <div style={{ marginTop: 2, fontFamily: FONTS.zh, fontSize: 12, color: T.inkSoft }}>{lesson.sub}</div>
          <div style={{ marginTop: 8, display: 'flex', gap: 4, flexWrap: 'wrap' }}>
            {lesson.mods.map(m => (
              <span key={m} style={{
                fontFamily: FONTS.zh, fontSize: 10, padding: '2px 6px',
                background: T.paperDeep, color: T.inkSoft, borderRadius: 4,
              }}>{m}</span>
            ))}
          </div>
        </div>
        <svg width="12" height="12" viewBox="0 0 14 14" style={{ marginTop: 14 }}><path d="M4 2l5 5-5 5" stroke={T.inkMute} strokeWidth="1.8" fill="none" strokeLinecap="round"/></svg>
      </div>
    </div>
  );
};

const ResourceRow = ({ type, title, sub, dark }) => {
  const T = useTheme(dark);
  const config = {
    youtube: { c: '#E53935', icon: <svg width="20" height="14" viewBox="0 0 20 14"><rect width="20" height="14" rx="3" fill="#E53935"/><path d="M8 4l5 3-5 3z" fill="#fff"/></svg> },
    pdf: { c: TOKENS.book2Ink, icon: <svg width="16" height="20" viewBox="0 0 16 20"><path d="M2 0h9l5 5v15H2z" fill={TOKENS.book2}/><path d="M11 0v5h5" fill="none" stroke={TOKENS.book2Ink} strokeWidth="1"/><text x="8" y="14" textAnchor="middle" fontSize="6" fontWeight="700" fill={TOKENS.book2Ink}>PDF</text></svg> },
    audio: { c: TOKENS.book3Ink, icon: <svg width="20" height="20" viewBox="0 0 20 20"><path d="M3 8v4h3l5 4V4l-5 4H3z" fill={TOKENS.book3Ink}/><path d="M14 6a4 4 0 010 8M16 4a7 7 0 010 12" stroke={TOKENS.book3Ink} strokeWidth="1.5" fill="none" strokeLinecap="round"/></svg> },
  }[type];
  return (
    <PaperCard dark={dark} padding={12}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <div style={{ width: 40, height: 40, borderRadius: 10, background: T.paperDeep, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{config.icon}</div>
        <div style={{ flex: 1 }}>
          <div style={{ fontFamily: FONTS.zh, fontSize: 13, fontWeight: 600, color: T.ink }}>{title}</div>
          <div style={{ fontFamily: FONTS.zh, fontSize: 11, color: T.inkMute, marginTop: 1 }}>{sub}</div>
        </div>
        <PaperButton size="sm" color={config.c}>開啟</PaperButton>
      </div>
    </PaperCard>
  );
};

window.BookOverviewScreen = BookOverviewScreen;