// page-owner.jsx — Page 8: Owner Dashboard

function PageOwner({ dark, lang, headingFont }) {
  const p = palette(dark);
  const en = lang === 'en';
  const [tab, setTab] = React.useState('overview');
  const navItems = en ? [
    { id: 'overview', label: 'Overview' },
    { id: 'enroll', label: 'Enrollment' },
    { id: 'revenue', label: 'Revenue' },
    { id: 'students', label: 'Students', badge: '420' },
    { id: 'faculty', label: 'Faculty' },
    { id: 'reports', label: 'Reports' },
  ] : [
    { id: 'overview', label: '概览' },
    { id: 'enroll', label: '招生' },
    { id: 'revenue', label: '营收' },
    { id: 'students', label: '学生', badge: '420' },
    { id: 'faculty', label: '教师' },
    { id: 'reports', label: '报表' },
  ];

  // Tiny bar chart helper
  const Bars = ({ data, height = 100 }) => (
    <div style={{ display: 'flex', alignItems: 'flex-end', gap: 4, height, paddingTop: 8 }}>
      {data.map((v, i) => (
        <div key={i} style={{ flex: 1, height: `${v}%`, background: i === data.length - 1 ? p.gold : p.goldSoft, borderRadius: 1 }} />
      ))}
    </div>
  );
  const Sparkline = () => {
    const pts = [40, 38, 45, 50, 48, 56, 62, 58, 66, 72, 70, 78];
    const w = 280, h = 60;
    const path = pts.map((v, i) => `${i === 0 ? 'M' : 'L'} ${(i / (pts.length - 1)) * w},${h - (v / 100) * h}`).join(' ');
    return (
      <svg width={w} height={h} style={{ display: 'block' }}>
        <path d={path} fill="none" stroke={p.gold} strokeWidth="1.5" />
        <path d={`${path} L ${w},${h} L 0,${h} Z`} fill={p.gold} opacity="0.08" />
      </svg>
    );
  };

  return (
    <Page dark={dark}>
      <div style={{ display: 'flex' }}>
        <PortalNav dark={dark} items={navItems} active={tab} onSelect={setTab} brand={en ? 'Owner · Mastery' : 'Owner · 总台'} />
        <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 ? 'Spring term · Mar 4 — Jun 14' : '春季学期 · 3/4 — 6/14'}</Mono>
              <H as="h1" dark={dark} font={headingFont} size={32}>{en ? 'Studio at a glance' : '学校速览'}</H>
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <Pill dark={dark}>{en ? 'Last 30 days' : '近 30 天'} ▾</Pill>
              <Button dark={dark} variant="secondary" size="sm">{en ? 'Export CSV' : '导出 CSV'}</Button>
            </div>
          </div>

          {/* KPI row */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 1, background: p.line, border: `0.5px solid ${p.line}`, borderRadius: TOKENS.radius.md, overflow: 'hidden', marginBottom: 24 }}>
            {[
              { l: en ? 'MRR' : '月度收入', n: '$148.2k', delta: '+8.4%', tone: 'gold' },
              { l: en ? 'Active students' : '在校学生', n: '420', delta: '+12', tone: 'success' },
              { l: en ? 'Trial → enroll' : '试听转化', n: '94%', delta: '+3pp', tone: 'success' },
              { l: en ? 'Churn (term)' : '学期流失', n: '2.1%', delta: '−0.5pp', tone: 'success' },
            ].map((k, i) => (
              <div key={i} style={{ background: p.paper, padding: '24px 28px' }}>
                <Mono dark={dark} style={{ marginBottom: 14, display: 'inline-block' }}>{k.l}</Mono>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
                  <H as="div" dark={dark} font={headingFont} size={32} weight={500} style={{ letterSpacing: -0.6 }}>{k.n}</H>
                  <span style={{ fontFamily: TOKENS.font.mono, fontSize: 11, color: k.tone === 'success' ? p.success : p.gold }}>{k.delta}</span>
                </div>
              </div>
            ))}
          </div>

          {/* Charts row */}
          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 16, marginBottom: 24 }}>
            <Card dark={dark}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 18 }}>
                <H as="h3" dark={dark} font={headingFont} size={18}>{en ? 'Monthly recurring revenue' : '月度经常性收入'}</H>
                <Mono dark={dark}>last 12 mo</Mono>
              </div>
              <Sparkline />
              <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 8, fontFamily: TOKENS.font.mono, fontSize: 10, color: p.inkMuted }}>
                <span>Apr</span><span>Jun</span><span>Aug</span><span>Oct</span><span>Dec</span><span>Feb</span><span>Mar</span>
              </div>
            </Card>
            <Card dark={dark}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 18 }}>
                <H as="h3" dark={dark} font={headingFont} size={18}>{en ? 'New trials / week' : '每周新增试听'}</H>
                <Mono dark={dark}>+18%</Mono>
              </div>
              <Bars data={[40, 55, 48, 62, 58, 72, 80, 68, 75, 82, 78, 92]} />
            </Card>
          </div>

          {/* Two-up: payments to chase / faculty load */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            <Card dark={dark} padding={0}>
              <div style={{ padding: '16px 20px', borderBottom: `0.5px solid ${p.line}`, display: 'flex', justifyContent: 'space-between' }}>
                <H as="h3" dark={dark} font={headingFont} size={16}>{en ? 'Payments to chase' : '需催收账单'}</H>
                <Pill dark={dark} tone="danger">3 overdue</Pill>
              </div>
              {[
                ['Wong, A.', '$360', '4d'],
                ['Patel, R.', '$520', '2d'],
                ['Garcia, M.', '$240', '1d'],
              ].map((r, i) => (
                <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '14px 20px', borderTop: i ? `0.5px solid ${p.lineSoft}` : 'none' }}>
                  <span style={{ fontFamily: TOKENS.font.sans, fontSize: 13, color: p.ink }}>{r[0]}</span>
                  <span style={{ display: 'flex', gap: 14 }}>
                    <span style={{ fontFamily: TOKENS.font.sans, fontSize: 13, color: p.ink, fontWeight: 500 }}>{r[1]}</span>
                    <span style={{ fontFamily: TOKENS.font.mono, fontSize: 11, color: p.danger, minWidth: 24, textAlign: 'right' }}>{r[2]}</span>
                  </span>
                </div>
              ))}
            </Card>
            <Card dark={dark} padding={0}>
              <div style={{ padding: '16px 20px', borderBottom: `0.5px solid ${p.line}`, display: 'flex', justifyContent: 'space-between' }}>
                <H as="h3" dark={dark} font={headingFont} size={16}>{en ? 'Faculty utilization' : '教师课时占用'}</H>
                <Mono dark={dark}>spring</Mono>
              </div>
              {[
                ['Ji-eun Park', 92], ['Marcus Wei', 78], ['Anna Tremblay', 84], ['Daniel Cho', 56],
              ].map((r, i) => (
                <div key={i} style={{ padding: '14px 20px', borderTop: i ? `0.5px solid ${p.lineSoft}` : 'none' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
                    <span style={{ fontFamily: TOKENS.font.sans, fontSize: 13, color: p.ink }}>{r[0]}</span>
                    <span style={{ fontFamily: TOKENS.font.mono, fontSize: 11, color: p.inkMuted }}>{r[1]}%</span>
                  </div>
                  <div style={{ height: 4, background: p.lineSoft, borderRadius: 2 }}>
                    <div style={{ height: '100%', width: `${r[1]}%`, background: r[1] > 85 ? p.gold : p.goldSoft, borderRadius: 2 }} />
                  </div>
                </div>
              ))}
            </Card>
          </div>
        </div>
      </div>
    </Page>
  );
}

window.PageOwner = PageOwner;