// Admin pages

const AdminDashboard = () => (
  <>
    <Topbar title="Tổng quan hệ thống" breadcrumb={['Admin']}>
      <button className="btn btn-ghost btn-sm"><Icon name="download" size={13} /> Xuất báo cáo</button>
      <button className="btn btn-primary btn-sm"><Icon name="plus" size={13} /> Chương trình mới</button>
    </Topbar>
    <div className="page">
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 14, marginBottom: 24 }}>
        <StatCard label="Học viên" value={ADMIN_STATS.students.toLocaleString()} sub="+128 tuần này" />
        <StatCard label="Giáo viên" value={ADMIN_STATS.teachers} sub="12 khoa" />
        <StatCard label="Chương trình" value={ADMIN_STATS.programs} sub="Hệ CĐ + LT" />
        <StatCard label="Môn học" value={ADMIN_STATS.subjects} sub="Đang hoạt động" />
        <StatCard label="Thi đang diễn ra" value={ADMIN_STATS.activeExams} tone="accent" sub="Cần giám sát" />
        <StatCard label="Tiến độ TB" value={ADMIN_STATS.avgProgress} unit="%" sub="Toàn trường" />
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 16, marginBottom: 16 }}>
        <div className="card" style={{ padding: 22 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 16 }}>
            <div className="serif" style={{ fontSize: 20 }}>Học viên theo chương trình</div>
            <button className="btn btn-ghost btn-sm">Xem chi tiết</button>
          </div>
          {[
            { c: 'CNTT-K47', t: 'Công nghệ thông tin', n: 842, p: 78 },
            { c: 'KT-K47', t: 'Kế toán', n: 514, p: 82 },
            { c: 'QTKD-K47', t: 'Quản trị kinh doanh', n: 476, p: 70 },
            { c: 'DL-K47', t: 'Du lịch & khách sạn', n: 312, p: 65 },
            { c: 'TA-K47', t: 'Tiếng Anh thương mại', n: 268, p: 74 },
          ].map((p, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '12px 0', borderBottom: i < 4 ? '1px solid var(--line)' : 'none' }}>
              <div className="mono" style={{ fontSize: 11, color: 'var(--muted)', width: 80 }}>{p.c}</div>
              <div style={{ width: 190, fontSize: 13, fontWeight: 500 }}>{p.t}</div>
              <div style={{ flex: 1 }}>
                <div className="progress-track" style={{ height: 6 }}><div className="progress-fill" style={{ width: `${p.p}%`, background: `oklch(0.55 0.12 ${20 + i * 40})` }}/></div>
              </div>
              <div className="mono" style={{ fontSize: 12, width: 40, textAlign: 'right' }}>{p.p}%</div>
              <div className="mono" style={{ fontSize: 13, width: 50, textAlign: 'right', fontWeight: 600 }}>{p.n}</div>
            </div>
          ))}
        </div>

        <div className="card" style={{ padding: 22 }}>
          <div className="serif" style={{ fontSize: 20, marginBottom: 14 }}>Thi đang diễn ra</div>
          {[
            { c: 'IT202', t: 'Cơ sở dữ liệu', n: 48, w: 2 },
            { c: 'KT201', t: 'Kế toán tài chính', n: 36, w: 0 },
            { c: 'EN102', t: 'Tiếng Anh cơ bản', n: 52, w: 1 },
          ].map((e, i) => (
            <div key={i} style={{ padding: '12px 0', borderBottom: i < 2 ? '1px solid var(--line)' : 'none' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}>
                <div>
                  <div style={{ fontWeight: 600, fontSize: 13.5 }}>{e.t}</div>
                  <div style={{ fontSize: 11.5, color: 'var(--muted)' }} className="mono">{e.c} · {e.n} thí sinh</div>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  <span className="hdot pulse" style={{ background: 'var(--accent)' }}/>
                  <span style={{ fontSize: 11, color: 'var(--accent)', fontWeight: 600 }}>LIVE</span>
                </div>
              </div>
              <div style={{ display: 'flex', gap: 10, fontSize: 11, color: 'var(--muted)' }}>
                <span>{e.n} camera bật</span>
                {e.w > 0 && <span style={{ color: 'var(--rose)' }}>• {e.w} cảnh báo</span>}
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="card" style={{ padding: 22 }}>
        <div className="serif" style={{ fontSize: 20, marginBottom: 14 }}>Log hệ thống gần nhất</div>
        {[
          { ic: 'alert', s: 'warn', t: 'SV 2251120156 chuyển tab 3 lần khi thi IT202', time: '08:42' },
          { ic: 'user', s: 'info', t: 'GV Trần Văn Long đăng nhập từ IP mới', time: '08:30' },
          { ic: 'plus', s: 'info', t: 'Thêm 25 câu hỏi vào ngân hàng IT301', time: '07:55' },
          { ic: 'shield', s: 'ok', t: 'Sao lưu dữ liệu tự động thành công (3.2 GB)', time: '02:00' },
        ].map((l, i) => (
          <div key={i} style={{ display: 'grid', gridTemplateColumns: '30px 1fr 70px', padding: '10px 0', borderBottom: i < 3 ? '1px solid var(--line)' : 'none', alignItems: 'center' }}>
            <Icon name={l.ic} size={14} style={{ color: l.s === 'warn' ? 'var(--rose)' : l.s === 'ok' ? 'var(--green)' : 'var(--muted)' }} />
            <div style={{ fontSize: 13 }}>{l.t}</div>
            <div className="mono" style={{ fontSize: 11, color: 'var(--muted)', textAlign: 'right' }}>{l.time}</div>
          </div>
        ))}
      </div>
    </div>
  </>
);

const AdminPrograms = () => (
  <>
    <Topbar title="Chương trình đào tạo" breadcrumb={['Admin']}>
      <button className="btn btn-primary btn-sm"><Icon name="plus" size={13} /> Thêm chương trình</button>
    </Topbar>
    <div className="page">
      <div className="card">
        <div style={{ display: 'grid', gridTemplateColumns: '40px 140px 1fr 120px 110px 110px 110px 100px', padding: '12px 20px', fontSize: 11, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600, borderBottom: '1px solid var(--line)' }}>
          <div></div><div>Mã</div><div>Tên chương trình</div><div>Thời gian</div><div>Tín chỉ</div><div>Môn BB/TC</div><div>Học viên</div><div></div>
        </div>
        {[
          { c: 'CNTT-K47', t: 'Công nghệ thông tin', d: '2.5 năm', credits: 85, r: '24/18', n: 842 },
          { c: 'KT-K47', t: 'Kế toán', d: '2.5 năm', credits: 82, r: '22/16', n: 514 },
          { c: 'QTKD-K47', t: 'Quản trị kinh doanh', d: '2.5 năm', credits: 84, r: '23/17', n: 476 },
          { c: 'DL-K47', t: 'Du lịch & khách sạn', d: '2 năm', credits: 72, r: '20/14', n: 312 },
        ].map((p, i) => (
          <div key={p.c} style={{ display: 'grid', gridTemplateColumns: '40px 140px 1fr 120px 110px 110px 110px 100px', padding: '16px 20px', borderBottom: i < 3 ? '1px solid var(--line)' : 'none', alignItems: 'center', fontSize: 13 }}>
            <div style={{ width: 28, height: 28, borderRadius: 7, background: `oklch(0.95 0.03 ${40 + i * 60})`, display: 'grid', placeItems: 'center', fontFamily: 'var(--serif)', fontSize: 14 }}>{p.t.charAt(0)}</div>
            <div className="mono" style={{ color: 'var(--muted)', fontSize: 12 }}>{p.c}</div>
            <div style={{ fontWeight: 500 }}>{p.t}</div>
            <div style={{ color: 'var(--muted)' }}>{p.d}</div>
            <div className="mono">{p.credits}</div>
            <div className="mono">{p.r}</div>
            <div className="mono" style={{ fontWeight: 600 }}>{p.n.toLocaleString()}</div>
            <div style={{ display: 'flex', gap: 4 }}>
              <button className="btn btn-ghost btn-sm" style={{ padding: 6 }}><Icon name="edit" size={12}/></button>
              <button className="btn btn-ghost btn-sm" style={{ padding: 6 }}><Icon name="eye" size={12}/></button>
            </div>
          </div>
        ))}
      </div>
    </div>
  </>
);

Object.assign(window, { AdminDashboard, AdminPrograms });