// screens-home.jsx — 首頁 / 書架 + 個人首頁

const HomeScreen = ({ dark, onOpenBook, onGoTeacher, onGoBookPromo, fontScale = 1 }) => {
  const T = useTheme(dark);
  const [greeting] = React.useState(() => {
    const h = new Date().getHours();
    if (h < 11) return { jp: 'おはよう', zh: '早安' };
    if (h < 18) return { jp: 'こんにちは', zh: '午安' };
    return { jp: 'こんばんは', zh: '晚上好' };
  });

  return (
    <PaperBg dark={dark} style={{ minHeight: '100%', paddingBottom: 120 }}>
      {/* Top bar */}
      <div style={{ paddingTop: 56, paddingLeft: 20, paddingRight: 20, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <div style={{
            width: 32, height: 32, borderRadius: 8, background: TOKENS.red,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: FONTS.jpHand, color: '#fff', fontWeight: 700, fontSize: 16,
            transform: 'rotate(-3deg)',
          }}>井</div>
          <div>
            <div style={{ fontFamily: FONTS.mono, fontSize: 10, color: T.inkMute, letterSpacing: 1.5 }}>ILOVEJP</div>
            <div style={{ fontFamily: FONTS.zhHand, fontSize: 13, fontWeight: 700, color: T.ink, letterSpacing: 0.5 }}>井上老師の日本語教室</div>
          </div>
        </div>
        <button style={{
          width: 38, height: 38, borderRadius: 19, border: `1px solid ${T.rule}`,
          background: T.ivory, cursor: 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <svg width="18" height="18" viewBox="0 0 20 20" fill="none">
            <path d="M10 2v2M10 16v2M3 10h2M15 10h2M4.9 4.9l1.4 1.4M13.7 13.7l1.4 1.4M4.9 15.1l1.4-1.4M13.7 6.3l1.4-1.4" stroke={T.inkSoft} strokeWidth="1.6" strokeLinecap="round"/>
            <circle cx="10" cy="10" r="3" stroke={T.inkSoft} strokeWidth="1.6"/>
          </svg>
        </button>
      </div>

      {/* Greeting */}
      <div style={{ padding: '20px 20px 8px', position: 'relative' }}>
        <SectionLabel>{new Date().toLocaleDateString('ja-JP', { month: 'long', day: 'numeric', weekday: 'long' })}</SectionLabel>
        <div style={{ marginTop: 10, position: 'relative', display: 'inline-block' }}>
          <div style={{ fontFamily: FONTS.jpHand, fontSize: 32 * fontScale, fontWeight: 700, color: T.ink, lineHeight: 1.15 }}>
            {greeting.jp}、<br/>頑張ってる？
          </div>
          <Squiggle color={TOKENS.red} w={68} h={6} style={{ position: 'absolute', left: 95, top: 24 }}/>
        </div>
        <div style={{ marginTop: 4, fontFamily: FONTS.zh, fontSize: 14 * fontScale, color: T.inkSoft }}>
          {greeting.zh}，今天也來學一點日文吧 ☕️
        </div>
      </div>

      {/* Streak strip */}
      <div style={{ margin: '16px 20px' }}>
        <PaperCard dark={dark} padding={14} style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <Stamp char="続" color={TOKENS.ochre} size={42}/>
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: FONTS.mono, fontSize: 10, color: T.inkMute, letterSpacing: 1.2 }}>STREAK · 連続学習</div>
            <div style={{ fontFamily: FONTS.zh, fontSize: 14, fontWeight: 600, color: T.ink, marginTop: 2 }}>已經連續學習 <span style={{ color: TOKENS.red, fontSize: 18 }}>12</span> 天</div>
          </div>
          {/* mini week */}
          <div style={{ display: 'flex', gap: 4 }}>
            {['月','火','水','木','金','土','日'].map((d, i) => (
              <div key={d} style={{
                width: 16, height: 22, borderRadius: 4,
                background: i < 5 ? TOKENS.book1 : T.rule,
                display: 'flex', alignItems: 'flex-end', justifyContent: 'center',
                fontFamily: FONTS.jp, fontSize: 8, color: i < 5 ? TOKENS.book1Ink : T.inkMute,
                paddingBottom: 2,
              }}>{d}</div>
            ))}
          </div>
        </PaperCard>
      </div>

      {/* Continue learning */}
      <div style={{ padding: '8px 20px 0' }}>
        <SectionLabel color={TOKENS.book2Ink}>継続 · CONTINUE LEARNING</SectionLabel>
        <div style={{ marginTop: 12, display: 'flex', gap: 12, overflowX: 'auto', margin: '12px -20px 0', padding: '4px 20px 12px' }}>
          {[
            { book: BOOKS[0], lesson: '5-7', title: '動詞て形＋みます', prog: 0.65 },
            { book: BOOKS[1], lesson: '6-2', title: '家庭會話50篇', prog: 0.32 },
            { book: BOOKS[3], lesson: '01', title: '花粉症（花粉症）', prog: 0.10 },
          ].map((c, i) => (
            <div key={i} onClick={() => onOpenBook(c.book.id, c.lesson)} style={{
              flex: '0 0 240px', background: c.book.soft, borderRadius: 18,
              padding: 16, position: 'relative', overflow: 'hidden', cursor: 'pointer',
              border: `1px solid ${c.book.color}55`,
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                <div style={{ fontFamily: FONTS.mono, fontSize: 10, color: c.book.ink, letterSpacing: 1 }}>{c.book.tag} · L{c.lesson}</div>
                <WashiTape color={c.book.color} w={32} h={14} rot={4} pattern="stripe"/>
              </div>
              <div style={{ marginTop: 10, fontFamily: FONTS.jp, fontSize: 17, fontWeight: 700, color: c.book.ink, lineHeight: 1.3 }}>{c.title}</div>
              <div style={{ marginTop: 12, height: 4, background: '#fff8', borderRadius: 2, overflow: 'hidden' }}>
                <div style={{ width: `${c.prog * 100}%`, height: '100%', background: c.book.ink }}/>
              </div>
              <div style={{ marginTop: 6, fontFamily: FONTS.mono, fontSize: 10, color: c.book.ink }}>{Math.round(c.prog*100)}% · 繼續</div>
            </div>
          ))}
        </div>
      </div>

      {/* Bookshelf */}
      <div style={{ padding: '20px 20px 0' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
          <SectionLabel>本棚 · BOOKSHELF</SectionLabel>
          <button onClick={onGoBookPromo} style={{ background: 'none', border: 'none', fontFamily: FONTS.zh, fontSize: 12, color: T.inkMute, cursor: 'pointer' }}>全部書籍 →</button>
        </div>
        <div style={{ marginTop: 14, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          {BOOKS.map(b => (
            <BookSpine key={b.id} book={b} dark={dark} onClick={() => onOpenBook(b.id)}/>
          ))}
        </div>
      </div>

      {/* Teacher card */}
      <div style={{ padding: '24px 20px 0' }}>
        <SectionLabel>先生 · YOUR TEACHER</SectionLabel>
        <PaperCard dark={dark} style={{ marginTop: 12, padding: 0, overflow: 'hidden' }} onClick={onGoTeacher}>
          <div style={{ display: 'flex', alignItems: 'center', padding: 14, gap: 14 }}>
            <div style={{
              width: 56, height: 56, borderRadius: 28, flexShrink: 0,
              background: `repeating-linear-gradient(135deg, ${TOKENS.book1} 0 6px, ${TOKENS.book1Soft} 6px 12px)`,
              border: `2px solid ${TOKENS.book1Ink}`, position: 'relative',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: FONTS.jpHand, fontSize: 22, fontWeight: 700, color: TOKENS.book1Ink,
            }}>井<div style={{ position: 'absolute', inset: 0, borderRadius: 28, background: 'rgba(255,253,247,0.6)' }}/><span style={{ position: 'relative' }}>井</span></div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontFamily: FONTS.jp, fontSize: 16, fontWeight: 700, color: T.ink }}>井上 一宏 / イノウエ</div>
              <div style={{ fontFamily: FONTS.zh, fontSize: 12, color: T.inkSoft, marginTop: 2 }}>1981 神戶出生 · 台師大政治學碩士</div>
              <div style={{ marginTop: 6, display: 'flex', gap: 6 }}>
                <span style={{ fontSize: 10, fontFamily: FONTS.mono, padding: '2px 6px', borderRadius: 4, background: TOKENS.book1Soft, color: TOKENS.book1Ink }}>4 BOOKS</span>
                <span style={{ fontSize: 10, fontFamily: FONTS.mono, padding: '2px 6px', borderRadius: 4, background: TOKENS.book3Soft, color: TOKENS.book3Ink }}>YT 30M+</span>
              </div>
            </div>
            <svg width="14" height="14" viewBox="0 0 14 14"><path d="M4 2l5 5-5 5" stroke={T.inkMute} strokeWidth="1.8" fill="none" strokeLinecap="round"/></svg>
          </div>
        </PaperCard>
      </div>
    </PaperBg>
  );
};

const BookSpine = ({ book, dark, onClick }) => {
  const T = useTheme(dark);
  return (
    <div onClick={onClick} style={{
      cursor: 'pointer', position: 'relative',
      borderRadius: 14, overflow: 'hidden',
      background: book.color,
      aspectRatio: '0.72',
      boxShadow: '0 4px 12px rgba(60,40,20,0.12), 0 1px 2px rgba(0,0,0,0.06)',
      padding: 10,
      border: `1px solid ${book.ink}30`,
    }}>
      {/* arrow tape pattern from cover */}
      <div style={{
        position: 'absolute', inset: 0, opacity: 0.18,
        backgroundImage: `repeating-linear-gradient(135deg, ${book.ink} 0 1px, transparent 1px 18px)`,
      }}/>
      <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', height: '100%' }}>
        <div style={{ fontFamily: FONTS.mono, fontSize: 9, color: book.ink, letterSpacing: 1.2, fontWeight: 600 }}>{book.tag}</div>
        <div style={{
          fontFamily: FONTS.zhHand, fontSize: 15, fontWeight: 700, lineHeight: 1.2,
          color: book.ink, marginTop: 6, letterSpacing: 0.3,
        }}>從零開始<br/>學日文 {book.id > 1 ? book.id : ''}</div>
        <div style={{ flex: 1 }}/>
        <div style={{
          background: 'rgba(255,255,255,0.85)', borderRadius: 6,
          padding: '4px 6px', alignSelf: 'flex-start',
          fontFamily: FONTS.zh, fontSize: 10, color: book.ink, fontWeight: 600,
        }}>{book.short}</div>
        <div style={{ marginTop: 6, fontFamily: FONTS.mono, fontSize: 9, color: book.ink, opacity: 0.7 }}>{book.lessons} 課 · {book.date}</div>
      </div>
      {/* dog-ear corner */}
      <div style={{
        position: 'absolute', top: 0, right: 0, width: 16, height: 16,
        background: `linear-gradient(225deg, ${T.paper} 50%, transparent 50%)`,
      }}/>
    </div>
  );
};

window.HomeScreen = HomeScreen;