// page-teacher.jsx — Page 7: Teacher Portal

function PageTeacher({ dark, lang, headingFont }) {
  const p = palette(dark);
  const en = lang === 'en';
  const [tab, setTab] = React.useState('today');
  const navItems = en ? [
    { id: 'today', label: 'Today' },
    { id: 'roster', label: 'My roster', badge: '24' },
    { id: 'avail', label: 'Availability' },
    { id: 'notes', label: 'Lesson notes' },
    { id: 'pay', label: 'Pay statements' },
  ] : [
    { id: 'today', label: '今日' },
    { id: 'roster', label: '我的学生', badge: '24' },
    { id: 'avail', label: '可上课时间' },
    { id: 'notes', label: '上课记录' },
    { id: 'pay', label: '工资单' },
  ];
  const lessons = en ? [
    { t: '3:30 pm', name: 'Aiden W.', age: 7, dur: '30 min', note: 'Last lesson: Czerny 599 #18, ready to advance', status: 'next' },
    { t: '4:15 pm', name: 'Mia C.', age: 8, dur: '30 min', note: 'Trial lesson — first time', status: 'trial' },
    { t: '5:00 pm', name: 'Sofia R.', age: 11, dur: '45 min', note: 'Bach Invention #4, recital prep', status: 'upcoming' },
    { t: '5:45 pm', name: 'Ethan L.', age: 13, dur: '60 min', note: 'RCM 8 mock exam — no makeup remaining', status: 'flag' },
    { t: '6:45 pm', name: 'Hana T.', age: 16, dur: '60 min', note: 'Chopin Nocturne Op. 9 No. 2', status: 'upcoming' },
  ] : [
    { t: '15:30', name: 'Aiden W.', age: 7, dur: '30 分钟', note: '上次：车尔尼 599 #18，可进阶', status: 'next' },
    { t: '16:15', name: 'Mia C.', age: 8, dur: '30 分钟', note: '试听 — 初次', status: 'trial' },
    { t: '17:00', name: 'Sofia R.', age: 11, dur: '45 分钟', note: '巴赫创意曲 #4，演出准备', status: 'upcoming' },
    { t: '17:45', name: 'Ethan L.', age: 13, dur: '60 分钟', note: 'RCM 8 模拟考 — 无补课额度', status: 'flag' },
    { t: '18:45', name: 'Hana T.', age: 16, dur: '60 分钟', note: '肖邦夜曲 Op.9 No.2', status: 'upcoming' },
  ];

  return (
    <Page dark={dark}>
      <div style={{ display: 'flex' }}>
        <PortalNav dark={dark} items={navItems} active={tab} onSelect={setTab} brand={en ? 'Teacher · Ji-eun' : '教师 · 朴智恩'} />
        <div style={{ padding: '40px 48px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 32 }}>
            <div>
              <Mono dark={dark} style={{ marginBottom: 8, display: 'inline-block' }}>{en ? 'Wed · Mar 6' : '3 月 6 日 周三'}</Mono>
              <H as="h1" dark={dark} font={headingFont} size={32}>{en ? '5 lessons today, 4 hours' : '今日 5 节课，共 4 小时'}</H>
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <Button dark={dark} variant="secondary" size="sm">{en ? 'Mark unavailable' : '标为不可用'}</Button>
              <Button dark={dark} variant="primary" size="sm">{en ? 'Start 3:30 lesson' : '开始 15:30 课程'}</Button>
            </div>
          </div>

          {/* Today schedule */}
          <Card dark={dark} padding={0}>
            <div style={{ padding: '16px 24px', borderBottom: `0.5px solid ${p.line}`, display: 'flex', justifyContent: 'space-between' }}>
              <Mono dark={dark}>{en ? 'Today\u2019s roster' : '今日学生'}</Mono>
              <Mono dark={dark}>5 / 5 {en ? 'attending' : '出席'}</Mono>
            </div>
            {lessons.map((l, i) => (
              <div key={i} style={{
                display: 'grid', gridTemplateColumns: '90px 1fr 200px 120px 100px',
                padding: '20px 24px', alignItems: 'center', gap: 16,
                borderTop: i ? `0.5px solid ${p.lineSoft}` : 'none',
                background: l.status === 'next' ? 'rgba(183,146,90,0.06)' : 'transparent',
              }}>
                <div style={{ fontFamily: TOKENS.font.mono, fontSize: 13, color: p.ink, fontWeight: 500 }}>{l.t}</div>
                <div>
                  <div style={{ fontFamily: TOKENS.font.sans, fontSize: 14, color: p.ink, fontWeight: 500 }}>{l.name} <span style={{ color: p.inkMuted, fontWeight: 400, fontSize: 12 }}>· {l.age}</span></div>
                  <div style={{ fontFamily: TOKENS.font.sans, fontSize: 12, color: p.inkMuted, marginTop: 4 }}>{l.note}</div>
                </div>
                <div style={{ fontFamily: TOKENS.font.sans, fontSize: 12, color: p.inkSoft }}>{l.dur}</div>
                <div>
                  {l.status === 'next' && <Pill dark={dark} tone="gold">{en ? 'Up next' : '下一节'}</Pill>}
                  {l.status === 'trial' && <Pill dark={dark} tone="gold">{en ? 'Trial' : '试听'}</Pill>}
                  {l.status === 'flag' && <Pill dark={dark} tone="danger">{en ? 'No makeup' : '无补课额度'}</Pill>}
                  {l.status === 'upcoming' && <Pill dark={dark}>{en ? 'Upcoming' : '即将'}</Pill>}
                </div>
                <div style={{ textAlign: 'right' }}>
                  <span style={{ fontFamily: TOKENS.font.sans, fontSize: 12, color: p.gold, fontWeight: 500, cursor: 'pointer' }}>{en ? 'Notes' : '笔记'} →</span>
                </div>
              </div>
            ))}
          </Card>

          {/* Quick stats */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginTop: 24 }}>
            {[
              { n: '24', l: en ? 'Active students' : '在带学生' },
              { n: '92%', l: en ? 'Attendance MoM' : '月度出勤率' },
              { n: '4', l: en ? 'Makeups this week' : '本周补课' },
              { n: '$2,840', l: en ? 'Earnings this period' : '本期工资' },
            ].map((s, i) => (
              <Card key={i} dark={dark}>
                <Mono dark={dark} style={{ marginBottom: 10, display: 'inline-block' }}>{s.l}</Mono>
                <H as="div" dark={dark} font={headingFont} size={28} weight={500}>{s.n}</H>
              </Card>
            ))}
          </div>
        </div>
      </div>
    </Page>
  );
}

window.PageTeacher = PageTeacher;