// Student pages: Dashboard, Roadmap, Subject detail, Results

const StudentDashboard = ({ onNav }) => {
  return (
    <>
      <Topbar title={`Xin chào, ${STUDENT.name.split(' ').slice(-1)[0]}`} breadcrumb={['Trang chính']}>
        <button className="btn btn-ghost btn-sm"><Icon name="calendar" size={14} /> Lịch học</button>
        <button className="btn btn-primary btn-sm"><Icon name="play" size={14} /> Tiếp tục học</button>
      </Topbar>
      <div className="page">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 22 }}>
          <StatCard label="Tín chỉ tích luỹ" value={PROGRAM.earnedCredits} unit={`/${PROGRAM.totalCredits}`} sub={`${Math.round(PROGRAM.earnedCredits/PROGRAM.totalCredits*100)}% chương trình`} />
          <StatCard label="Môn bắt buộc đỗ" value={`${PROGRAM.requiredPassed}/${PROGRAM.requiredTotal}`} sub="Còn 2 môn bắt buộc" tone="accent" />
          <StatCard label="Điểm trung bình" value={STUDENT.gpa} unit="/4.0" sub="Xếp loại: Khá" />
          <StatCard label="Môn đang học" value="2" sub="Cơ sở dữ liệu, OOP" />
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 16 }}>
          <div className="card" style={{ padding: 22 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 18 }}>
              <div>
                <div className="serif" style={{ fontSize: 22 }}>Tiếp tục học</div>
                <div style={{ fontSize: 12.5, color: 'var(--muted)', marginTop: 4 }}>Bài học gần nhất bạn đã dừng lại</div>
              </div>
              <button className="btn btn-ghost btn-sm" onClick={() => onNav('subject')}>Xem tất cả <Icon name="chevronRight" size={12} /></button>
            </div>
            <div style={{ display: 'flex', gap: 18, padding: 18, background: 'var(--bg-2)', borderRadius: 12 }}>
              <div style={{ width: 180, aspectRatio: '16/10', background: '#0a0a0a', borderRadius: 8, position: 'relative', flexShrink: 0, overflow: 'hidden' }}>
                <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(135deg, rgba(200,90,60,0.25), transparent)' }}/>
                <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%,-50%)', width: 38, height: 38, borderRadius: 999, background: 'rgba(255,255,255,0.95)', display: 'grid', placeItems: 'center' }}>
                  <Icon name="play" size={14} style={{ color: 'var(--ink)', marginLeft: 2 }} />
                </div>
                <div style={{ position: 'absolute', bottom: 8, right: 8, background: 'rgba(0,0,0,0.7)', color: '#fff', padding: '2px 6px', borderRadius: 4, fontSize: 10.5, fontFamily: 'var(--mono)' }}>14:22 / 22:10</div>
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 11, color: 'var(--muted)', fontFamily: 'var(--mono)', marginBottom: 4 }}>IT202 · CHƯƠNG 3 · BÀI 4</div>
                <div className="serif" style={{ fontSize: 20, marginBottom: 6 }}>JOIN nhiều bảng trong SQL</div>
                <div style={{ fontSize: 12.5, color: 'var(--muted)', marginBottom: 14 }}>Cơ sở dữ liệu · TS. Lê Thu Hằng</div>
                <div className="progress-track"><div className="progress-fill accent" style={{ width: '64%' }}/></div>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 6, fontSize: 11, color: 'var(--muted)' }}>
                  <span>64% bài học</span>
                  <span className="mono">3/5 chương</span>
                </div>
                <div style={{ display: 'flex', gap: 8, marginTop: 14 }}>
                  <button className="btn btn-accent btn-sm" onClick={() => onNav('video')}><Icon name="play" size={13} /> Tiếp tục xem</button>
                  <button className="btn btn-ghost btn-sm" onClick={() => onNav('subject')}>Chi tiết môn học</button>
                </div>
              </div>
            </div>
          </div>

          <div className="card" style={{ padding: 22 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 14 }}>
              <div className="serif" style={{ fontSize: 20 }}>Lịch thi sắp tới</div>
              <Icon name="calendar" size={16} style={{ color: 'var(--muted)' }} />
            </div>
            {[
              { code: 'IT202', title: 'Cơ sở dữ liệu', date: '25/04/2026', time: '08:00', room: 'Phòng trực tuyến 01', soon: true },
              { code: 'IT301', title: 'Lập trình hướng đối tượng', date: '08/05/2026', time: '14:00', room: 'Phòng trực tuyến 02' },
            ].map((e, i) => (
              <div key={i} style={{ padding: '14px 0', borderBottom: i === 0 ? '1px solid var(--line)' : 'none' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
                  <span className="mono" style={{ fontSize: 11, color: 'var(--muted)' }}>{e.code}</span>
                  {e.soon && <span className="chip chip-accent">6 ngày nữa</span>}
                </div>
                <div style={{ fontWeight: 600, marginBottom: 6 }}>{e.title}</div>
                <div style={{ display: 'flex', gap: 12, fontSize: 11.5, color: 'var(--muted)' }}>
                  <span><Icon name="calendar" size={11} /> {e.date}</span>
                  <span><Icon name="clock" size={11} /> {e.time}</span>
                </div>
              </div>
            ))}
            <button className="btn btn-ghost btn-sm" style={{ width: '100%', marginTop: 14, justifyContent: 'center' }}>Xem toàn bộ lịch thi</button>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 16, marginTop: 16 }}>
          {[
            { ic: 'branch', title: 'Lộ trình học', desc: 'Xem cây môn học & môn tiên quyết', action: 'roadmap' },
            { ic: 'award', title: 'Kết quả học tập', desc: 'Bảng điểm & chứng chỉ đã đạt', action: 'result' },
            { ic: 'shield', title: 'Phòng thi online', desc: 'Thi trực tuyến có giám sát camera', action: 'exam' },
          ].map((c, i) => (
            <div key={i} className="card" style={{ padding: 20, cursor: 'pointer' }} onClick={() => onNav(c.action)}>
              <div style={{ width: 36, height: 36, borderRadius: 8, background: 'var(--bg-2)', display: 'grid', placeItems: 'center', marginBottom: 12 }}><Icon name={c.ic} size={18} /></div>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 18, marginBottom: 4 }}>{c.title}</div>
              <div style={{ fontSize: 12.5, color: 'var(--muted)' }}>{c.desc}</div>
            </div>
          ))}
        </div>
      </div>
    </>
  );
};

const RoadmapPage = ({ onSelect }) => {
  const layout = window.__TWEAKS__.roadmapLayout || 'tree';
  return (
    <>
      <Topbar title="Lộ trình học" breadcrumb={['Chương trình', PROGRAM.name]}>
        <div className="chip chip-soft"><Icon name="sparkle" size={11} /> Gợi ý: Học "Phát triển Web" sau khi xong CSDL</div>
      </Topbar>
      <div className="page" style={{ paddingTop: 20 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16, flexWrap: 'wrap', gap: 12 }}>
          <div style={{ display: 'flex', gap: 16 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, color: 'var(--muted)' }}><span className="hdot" style={{ background: 'var(--green)' }}/> Đã qua ({CURRICULUM.filter(n => n.status === 'done').length})</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, color: 'var(--muted)' }}><span className="hdot" style={{ background: 'var(--accent)' }}/> Đang học ({CURRICULUM.filter(n => n.status === 'active').length})</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, color: 'var(--muted)' }}><span className="hdot" style={{ background: 'var(--line-2)' }}/> Sẵn sàng ({CURRICULUM.filter(n => n.status === 'available').length})</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, color: 'var(--muted)' }}><span className="hdot" style={{ background: '#c4bfb3' }}/> Chưa mở ({CURRICULUM.filter(n => n.status === 'locked').length})</div>
          </div>
          <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
            <span style={{ fontSize: 12, color: 'var(--muted)' }}>Hiển thị:</span>
            <div className="role-switch" style={{ background: 'var(--card)', border: '1px solid var(--line)' }}>
              <button className={layout === 'tree' ? 'active' : ''} onClick={() => { window.__TWEAKS__.roadmapLayout = 'tree'; window.dispatchEvent(new Event('tweaks-change')); }}>Cây</button>
              <button className={layout === 'timeline' ? 'active' : ''} onClick={() => { window.__TWEAKS__.roadmapLayout = 'timeline'; window.dispatchEvent(new Event('tweaks-change')); }}>Dòng thời gian</button>
              <button className={layout === 'grid' ? 'active' : ''} onClick={() => { window.__TWEAKS__.roadmapLayout = 'grid'; window.dispatchEvent(new Event('tweaks-change')); }}>Lưới</button>
            </div>
          </div>
        </div>
        <div className="card" style={{ overflow: 'hidden' }}>
          {layout === 'tree' && <RoadmapTree onSelect={onSelect} />}
          {layout === 'timeline' && <RoadmapTimeline onSelect={onSelect} />}
          {layout === 'grid' && <RoadmapGrid onSelect={onSelect} />}
        </div>
      </div>
    </>
  );
};

const SubjectPage = ({ onNav }) => {
  const s = ACTIVE_SUBJECT;
  return (
    <>
      <Topbar title={s.title} breadcrumb={['Lộ trình học', 'Học kỳ 2', s.code]}>
        <button className="btn btn-ghost btn-sm"><Icon name="file" size={13} /> Tài liệu</button>
        <button className="btn btn-accent btn-sm" onClick={() => onNav('video')}><Icon name="play" size={13} /> Tiếp tục học</button>
      </Topbar>
      <div className="page" style={{ display: 'grid', gridTemplateColumns: '1fr 320px', gap: 20 }}>
        <div>
          <div className="card" style={{ padding: 24, marginBottom: 20 }}>
            <div style={{ display: 'flex', gap: 16, alignItems: 'flex-start', marginBottom: 18 }}>
              <div style={{ width: 56, height: 56, borderRadius: 10, background: 'var(--accent-soft)', color: 'var(--accent-ink)', display: 'grid', placeItems: 'center', fontFamily: 'var(--serif)', fontSize: 26, fontStyle: 'italic' }}>{s.code.slice(0,2)}</div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 11, color: 'var(--muted)', fontFamily: 'var(--mono)', marginBottom: 4 }}>{s.code} · {s.credits} TÍN CHỈ · BẮT BUỘC</div>
                <div className="serif" style={{ fontSize: 28, lineHeight: 1.15, marginBottom: 6 }}>{s.title}</div>
                <div style={{ fontSize: 12.5, color: 'var(--muted)' }}>Giảng viên: {s.instructor}</div>
              </div>
            </div>
            <p style={{ fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.65, margin: '0 0 18px' }}>{s.description}</p>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, marginBottom: 6 }}>
              <span style={{ fontWeight: 600 }}>Tiến độ học</span>
              <span className="mono" style={{ color: 'var(--accent)' }}>{s.progress}%</span>
            </div>
            <div className="progress-track"><div className="progress-fill accent" style={{ width: `${s.progress}%` }}/></div>
          </div>

          <div className="card">
            <div style={{ padding: '18px 22px', borderBottom: '1px solid var(--line)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <div className="serif" style={{ fontSize: 20 }}>Nội dung môn học</div>
              <div style={{ fontSize: 12, color: 'var(--muted)' }}>{s.chapters.length} chương · 24 bài giảng</div>
            </div>
            {s.chapters.map((c, i) => (
              <div key={c.id} style={{ padding: '16px 22px', borderBottom: i < s.chapters.length - 1 ? '1px solid var(--line)' : 'none', display: 'flex', alignItems: 'center', gap: 16 }}>
                <div style={{ width: 32, height: 32, borderRadius: 999, background: c.done === c.lessons ? 'var(--green)' : c.current ? 'var(--accent)' : 'var(--bg-2)', color: c.done === c.lessons || c.current ? '#fff' : 'var(--muted)', display: 'grid', placeItems: 'center', fontFamily: 'var(--mono)', fontSize: 12, fontWeight: 600, flexShrink: 0 }}>
                  {c.done === c.lessons ? <Icon name="check" size={14} /> : i + 1}
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 14.5, fontWeight: 600, marginBottom: 4 }}>{c.title}</div>
                  <div style={{ fontSize: 12, color: 'var(--muted)', display: 'flex', gap: 12 }}>
                    <span>{c.lessons} bài · {c.duration}</span>
                    <span>{c.done}/{c.lessons} đã hoàn thành</span>
                  </div>
                </div>
                <div style={{ width: 80 }}>
                  <div className="progress-track" style={{ height: 4 }}><div className={`progress-fill ${c.done === c.lessons ? 'green' : 'accent'}`} style={{ width: `${(c.done/c.lessons)*100}%` }}/></div>
                </div>
                <button className="btn btn-ghost btn-sm" onClick={() => onNav('video')} disabled={c.done === 0 && !c.current && i > 2}>
                  {c.current ? 'Tiếp tục' : c.done === c.lessons ? 'Ôn lại' : 'Bắt đầu'}
                </button>
              </div>
            ))}
          </div>
        </div>

        <div>
          <div className="card" style={{ padding: 20, marginBottom: 16 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
              <Icon name="shield" size={16} style={{ color: 'var(--accent)' }} />
              <div style={{ fontFamily: 'var(--serif)', fontSize: 18 }}>Bài thi kết thúc</div>
            </div>
            <div style={{ fontSize: 12.5, color: 'var(--muted)', marginBottom: 14 }}>Hoàn thành các chương để mở khoá quyền làm bài thi kết thúc môn.</div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, fontSize: 12, marginBottom: 14 }}>
              <div><div style={{ color: 'var(--muted)', marginBottom: 2 }}>Số câu hỏi</div><div className="mono" style={{ fontWeight: 600 }}>{s.exam.questions} câu</div></div>
              <div><div style={{ color: 'var(--muted)', marginBottom: 2 }}>Thời gian</div><div className="mono" style={{ fontWeight: 600 }}>{s.exam.duration} phút</div></div>
              <div><div style={{ color: 'var(--muted)', marginBottom: 2 }}>Điểm đạt</div><div className="mono" style={{ fontWeight: 600 }}>≥ {s.exam.passScore.toFixed(1)}/10</div></div>
              <div><div style={{ color: 'var(--muted)', marginBottom: 2 }}>Lần làm</div><div className="mono" style={{ fontWeight: 600 }}>{s.exam.attemptsUsed}/{s.exam.attempts}</div></div>
            </div>
            <button className="btn btn-primary btn-sm" style={{ width: '100%', justifyContent: 'center' }} onClick={() => onNav('exam')}>
              <Icon name="shield" size={13} /> Vào phòng thi
            </button>
            <div style={{ fontSize: 11, color: 'var(--muted)', textAlign: 'center', marginTop: 8 }}>Yêu cầu camera & microphone</div>
          </div>

          <div className="card" style={{ padding: 20 }}>
            <div style={{ fontFamily: 'var(--serif)', fontSize: 18, marginBottom: 10 }}>Môn tiên quyết</div>
            {[{ c: 'IT101', t: 'Nhập môn Lập trình', g: 8.5 }].map((p, i) => (
              <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 0', fontSize: 13 }}>
                <div>
                  <div style={{ fontWeight: 600 }}>{p.t}</div>
                  <div className="mono" style={{ fontSize: 11, color: 'var(--muted)' }}>{p.c}</div>
                </div>
                <span className="chip chip-green">{p.g}/10</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </>
  );
};

const ResultPage = () => {
  const results = [
    { code: 'IT101', title: 'Nhập môn Lập trình', credits: 3, semester: 1, grade: 8.5, letter: 'A', status: 'Đỗ' },
    { code: 'MA102', title: 'Toán rời rạc', credits: 3, semester: 1, grade: 7.8, letter: 'B+', status: 'Đỗ' },
    { code: 'EN101', title: 'Tiếng Anh chuyên ngành 1', credits: 2, semester: 1, grade: 8.0, letter: 'A-', status: 'Đỗ' },
    { code: 'IT201', title: 'Cấu trúc dữ liệu', credits: 4, semester: 2, grade: 8.2, letter: 'A-', status: 'Đỗ' },
  ];
  return (
    <>
      <Topbar title="Kết quả học tập" breadcrumb={['Học tập', 'Bảng điểm']}>
        <button className="btn btn-ghost btn-sm"><Icon name="download" size={13} /> Xuất PDF</button>
      </Topbar>
      <div className="page">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 22 }}>
          <StatCard label="GPA hiện tại" value="3.42" unit="/4.0" sub="Xếp loại: Khá" tone="accent" />
          <StatCard label="Tín chỉ đỗ" value="12" unit="/32" sub="4 môn đã hoàn thành" />
          <StatCard label="Tỉ lệ đỗ" value="100" unit="%" sub="4/4 môn đã thi" />
          <StatCard label="Điểm trung bình" value="8.12" unit="/10" sub="Tất cả các môn" />
        </div>

        <div className="card">
          <div style={{ padding: '18px 22px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: '1px solid var(--line)' }}>
            <div className="serif" style={{ fontSize: 20 }}>Bảng điểm chi tiết</div>
            <div style={{ display: 'flex', gap: 8 }}>
              <button className="btn btn-ghost btn-sm"><Icon name="filter" size={12} /> Lọc</button>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '100px 1fr 80px 90px 90px 70px 90px', padding: '12px 22px', borderBottom: '1px solid var(--line)', fontSize: 11, fontWeight: 600, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>
            <div>Mã môn</div><div>Tên môn học</div><div>TC</div><div>Học kỳ</div><div>Điểm số</div><div>Điểm chữ</div><div>Trạng thái</div>
          </div>
          {results.map((r, i) => (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: '100px 1fr 80px 90px 90px 70px 90px', padding: '14px 22px', borderBottom: i < results.length - 1 ? '1px solid var(--line)' : 'none', alignItems: 'center', fontSize: 13.5 }}>
              <div className="mono" style={{ color: 'var(--muted)' }}>{r.code}</div>
              <div style={{ fontWeight: 500 }}>{r.title}</div>
              <div className="mono">{r.credits}</div>
              <div className="mono">HK{r.semester}</div>
              <div className="mono" style={{ fontWeight: 600 }}>{r.grade.toFixed(1)}</div>
              <div><span className="chip chip-soft" style={{ fontFamily: 'var(--mono)', fontWeight: 600 }}>{r.letter}</span></div>
              <div><span className="chip chip-green">{r.status}</span></div>
            </div>
          ))}
        </div>
      </div>
    </>
  );
};

Object.assign(window, { StudentDashboard, RoadmapPage, SubjectPage, ResultPage });