// page-parent.jsx — Page 6: Parent Portal

function PageParent({ dark, lang, headingFont }) {
  const p = palette(dark);
  const en = lang === 'en';
  const [tab, setTab] = React.useState('overview');
  const [showMakeup, setShowMakeup] = React.useState(false);

  const navItems = en ? [
    { id: 'overview', label: 'Overview' },
    { id: 'schedule', label: 'Schedule' },
    { id: 'invoices', label: 'Invoices', badge: '1' },
    { id: 'progress', label: 'Progress' },
    { id: 'messages', label: 'Messages' },
    { id: 'docs', label: 'Documents' },
  ] : [
    { id: 'overview', label: '概览' },
    { id: 'schedule', label: '课表' },
    { id: 'invoices', label: '账单', badge: '1' },
    { id: 'progress', label: '成长' },
    { id: 'messages', label: '消息' },
    { id: 'docs', label: '文件' },
  ];

  return (
    <Page dark={dark}>
      <div style={{ display: 'flex' }}>
        <PortalNav dark={dark} items={navItems} active={tab} onSelect={setTab} brand={en ? 'Parent · Chen Family' : '家长 · 陈家'} />
        <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 ? 'Welcome back, Lin' : '欢迎回来，Lin'}</Mono>
              <H as="h1" dark={dark} font={headingFont} size={32}>{en ? 'Mia\u2019s week at the studio' : 'Mia 这一周'}</H>
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <Button dark={dark} variant="secondary" size="sm" onClick={() => setShowMakeup(true)}>{STRINGS[lang].cta.request}</Button>
              <Button dark={dark} variant="primary" size="sm">{en ? 'Pay $360' : '支付 ¥360'}</Button>
            </div>
          </div>

          {/* Next lesson card */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginBottom: 24 }}>
            <Card dark={dark} style={{ padding: 0, overflow: 'hidden' }}>
              <div style={{ padding: '20px 24px', borderBottom: `0.5px solid ${p.line}`, display: 'flex', justifyContent: 'space-between' }}>
                <Mono dark={dark}>{en ? 'Next lesson' : '下一节课'}</Mono>
                <Mono dark={dark} style={{ color: p.gold }}>{en ? 'in 2 days' : '2 天后'}</Mono>
              </div>
              <div style={{ padding: 24 }}>
                <H as="div" dark={dark} font={headingFont} size={26}>{en ? 'Wed Mar 6 · 4:15 pm' : '3/6 周三 · 下午 4:15'}</H>
                <div style={{ display: 'flex', gap: 14, marginTop: 12, fontFamily: TOKENS.font.sans, fontSize: 12, color: p.inkMuted }}>
                  <span>{en ? 'Studio B-3' : 'B-3 琴房'}</span><span>·</span>
                  <span>{en ? 'Ji-eun Park' : '朴智恩'}</span><span>·</span>
                  <span>{en ? 'Piano · 30 min' : '钢琴 · 30 分钟'}</span>
                </div>
              </div>
            </Card>
            <Card dark={dark} style={{ padding: 0 }}>
              <div style={{ padding: '20px 24px', borderBottom: `0.5px solid ${p.line}` }}>
                <Mono dark={dark}>{en ? 'This term' : '本学期'}</Mono>
              </div>
              <div style={{ padding: 24, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
                {[
                  { n: '8 / 12', l: en ? 'Lessons attended' : '已出勤' },
                  { n: '2', l: en ? 'Makeup credits' : '补课额度' },
                  { n: 'Apr 12', l: en ? 'Spring recital' : '春季演出' },
                ].map((s, i) => (
                  <div key={i}>
                    <H as="div" dark={dark} font={headingFont} size={22} weight={500}>{s.n}</H>
                    <Mono dark={dark} style={{ marginTop: 4 }}>{s.l}</Mono>
                  </div>
                ))}
              </div>
            </Card>
          </div>

          {/* Invoice table */}
          <Card dark={dark} padding={0}>
            <div style={{ padding: '20px 24px', borderBottom: `0.5px solid ${p.line}`, display: 'flex', justifyContent: 'space-between' }}>
              <H as="h3" dark={dark} font={headingFont} size={18}>{en ? 'Recent invoices' : '近期账单'}</H>
              <Mono dark={dark}>{en ? 'View all' : '查看全部'} →</Mono>
            </div>
            <table style={{ width: '100%', borderCollapse: 'collapse' }}>
              <thead>
                <tr style={{ background: p.paperSoft }}>
                  {[en ? 'Invoice' : '账单号', en ? 'Period' : '周期', en ? 'Amount' : '金额', en ? 'Status' : '状态', ''].map((h, i) => (
                    <th key={i} style={{ textAlign: 'left', padding: '12px 24px', fontFamily: TOKENS.font.mono, fontSize: 10, letterSpacing: 0.6, color: p.inkMuted, textTransform: 'uppercase', fontWeight: 400 }}>{h}</th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {[
                  { id: 'INV-2026-0312', p: 'Mar 2026', a: '$360.00', s: 'due', tone: 'gold' },
                  { id: 'INV-2026-0212', p: 'Feb 2026', a: '$360.00', s: 'paid', tone: 'success' },
                  { id: 'INV-2026-0112', p: 'Jan 2026', a: '$360.00', s: 'paid', tone: 'success' },
                  { id: 'INV-2025-1212', p: 'Dec 2025', a: '$324.00', s: 'paid', tone: 'success' },
                ].map((r, i) => (
                  <tr key={i} style={{ borderTop: `0.5px solid ${p.line}` }}>
                    <td style={{ padding: '14px 24px', fontFamily: TOKENS.font.mono, fontSize: 11, color: p.ink }}>{r.id}</td>
                    <td style={{ padding: '14px 24px', fontFamily: TOKENS.font.sans, fontSize: 12, color: p.inkSoft }}>{r.p}</td>
                    <td style={{ padding: '14px 24px', fontFamily: TOKENS.font.sans, fontSize: 13, color: p.ink, fontWeight: 500 }}>{r.a}</td>
                    <td style={{ padding: '14px 24px' }}><Pill dark={dark} tone={r.tone}>{r.s}</Pill></td>
                    <td style={{ padding: '14px 24px', textAlign: 'right' }}>
                      <span style={{ fontFamily: TOKENS.font.sans, fontSize: 12, color: p.gold, cursor: 'pointer', fontWeight: 500 }}>{r.s === 'due' ? (en ? 'Pay now' : '支付') : (en ? 'Receipt' : '收据')}</span>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </Card>
        </div>
      </div>

      {showMakeup && (
        <Modal dark={dark} title={en ? 'Request a makeup lesson' : '申请补课'} sub={en ? 'Use one of your two credits this term.' : '本学期还有 2 个补课额度。'} onClose={() => setShowMakeup(false)}
          footer={<><Button dark={dark} variant="ghost" onClick={() => setShowMakeup(false)}>{STRINGS[lang].cta.cancel}</Button><Button dark={dark} variant="primary" onClick={() => setShowMakeup(false)}>{STRINGS[lang].cta.submit}</Button></>}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <Select dark={dark} label={en ? 'Missed lesson' : '错过的课程'} value="Wed Feb 28 · 4:15" options={[]} required />
            <Select dark={dark} label={en ? 'Reason' : '原因'} value={en ? 'Family travel' : '家庭出行'} options={[]} />
            <Input dark={dark} label={en ? 'Preferred makeup time' : '希望补课时间'} placeholder={en ? 'e.g. Sat afternoon' : '如：周六下午'} hint={en ? 'We\u2019ll match within 24 hours.' : '我们会在 24 小时内匹配。'} />
          </div>
        </Modal>
      )}
    </Page>
  );
}

window.PageParent = PageParent;