// Shared components

const Sidebar = ({ role, current, onNav, onRoleChange }) => {
  const menus = {
    student: [
      { id: 'dashboard', label: 'Trang chính', icon: 'home' },
      { id: 'roadmap', label: 'Lộ trình học', icon: 'branch' },
      { id: 'subject', label: 'Môn đang học', icon: 'book', count: 2 },
      { id: 'video', label: 'Bài giảng video', icon: 'video' },
      { id: 'exam', label: 'Phòng thi', icon: 'shield' },
      { id: 'result', label: 'Kết quả & điểm', icon: 'award' },
    ],
    teacher: [
      { id: 't-dashboard', label: 'Trang chính', icon: 'home' },
      { id: 't-bank', label: 'Ngân hàng câu hỏi', icon: 'library' },
      { id: 't-subjects', label: 'Môn phụ trách', icon: 'book', count: 3 },
      { id: 't-exams', label: 'Đề thi & lịch thi', icon: 'file' },
      { id: 't-students', label: 'Học viên', icon: 'users' },
    ],
    admin: [
      { id: 'a-dashboard', label: 'Tổng quan', icon: 'chart' },
      { id: 'a-programs', label: 'Chương trình đào tạo', icon: 'folder' },
      { id: 'a-users', label: 'Người dùng', icon: 'users' },
      { id: 'a-settings', label: 'Cài đặt hệ thống', icon: 'settings' },
    ],
  };
  const items = menus[role] || menus.student;
  return (
    <aside className="sidebar">
      <div className="side-logo">
        <div className="mark">C</div>
        <div>
          <div style={{ fontFamily: 'var(--serif)', fontSize: 17, lineHeight: 1 }}>CĐ Công Thương</div>
          <div style={{ fontSize: 10.5, color: 'var(--muted)', marginTop: 2, letterSpacing: '0.05em', textTransform: 'uppercase' }}>Hệ thống học online</div>
        </div>
      </div>

      <div style={{ padding: '4px 6px 12px' }}>
        <div className="role-switch">
          <button className={role === 'student' ? 'active' : ''} onClick={() => onRoleChange('student')}>Học viên</button>
          <button className={role === 'teacher' ? 'active' : ''} onClick={() => onRoleChange('teacher')}>Giáo viên</button>
          <button className={role === 'admin' ? 'active' : ''} onClick={() => onRoleChange('admin')}>Admin</button>
        </div>
      </div>

      <div className="side-section">Điều hướng</div>
      {items.map(it => (
        <div key={it.id} className={`side-item ${current === it.id ? 'active' : ''}`} onClick={() => onNav(it.id)}>
          <Icon name={it.icon} />
          <span>{it.label}</span>
          {it.count && <span className="count">{it.count}</span>}
        </div>
      ))}

      {role === 'student' && (
        <>
          <div className="side-section">Chương trình</div>
          <div style={{ padding: '6px 10px' }}>
            <div style={{ fontSize: 12.5, fontWeight: 600 }}>{PROGRAM.name}</div>
            <div style={{ fontSize: 11, color: 'var(--muted)', marginTop: 3, fontFamily: 'var(--mono)' }}>{PROGRAM.code}</div>
            <div style={{ marginTop: 10 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: 'var(--muted)', marginBottom: 4 }}>
                <span>Tín chỉ tích luỹ</span>
                <span className="mono">{PROGRAM.earnedCredits}/{PROGRAM.totalCredits}</span>
              </div>
              <div className="progress-track"><div className="progress-fill accent" style={{ width: `${PROGRAM.earnedCredits/PROGRAM.totalCredits*100}%` }}/></div>
            </div>
            <div style={{ marginTop: 10 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: 'var(--muted)', marginBottom: 4 }}>
                <span>Môn bắt buộc đỗ</span>
                <span className="mono">{PROGRAM.requiredPassed}/{PROGRAM.requiredTotal}</span>
              </div>
              <div className="progress-track"><div className="progress-fill green" style={{ width: `${PROGRAM.requiredPassed/PROGRAM.requiredTotal*100}%` }}/></div>
            </div>
          </div>
        </>
      )}

      <div style={{ position: 'absolute', bottom: 18, left: 18, right: 18 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 8px', borderTop: '1px solid var(--line)' }}>
          <div style={{ width: 32, height: 32, borderRadius: 999, background: 'var(--accent-soft)', color: 'var(--accent-ink)', display: 'grid', placeItems: 'center', fontWeight: 600, fontSize: 12 }}>
            {role === 'student' ? STUDENT.avatar : role === 'teacher' ? 'TH' : 'AD'}
          </div>
          <div style={{ minWidth: 0, flex: 1 }}>
            <div style={{ fontSize: 12.5, fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
              {role === 'student' ? STUDENT.name : role === 'teacher' ? 'TS. Lê Thu Hằng' : 'Phạm Quang Admin'}
            </div>
            <div style={{ fontSize: 10.5, color: 'var(--muted)', fontFamily: 'var(--mono)' }}>
              {role === 'student' ? STUDENT.id : role === 'teacher' ? 'GV · Khoa CNTT' : 'Super Admin'}
            </div>
          </div>
          <Icon name="logout" size={14} className="" style={{ color: 'var(--muted)' }} />
        </div>
      </div>
    </aside>
  );
};

const Topbar = ({ title, breadcrumb, children }) => (
  <div className="topbar">
    <div>
      {breadcrumb && (
        <div style={{ fontSize: 12, color: 'var(--muted)', marginBottom: 2, display: 'flex', alignItems: 'center', gap: 6 }}>
          {breadcrumb.map((b, i) => (
            <React.Fragment key={i}>
              <span>{b}</span>
              {i < breadcrumb.length - 1 && <Icon name="chevronRight" size={12} />}
            </React.Fragment>
          ))}
        </div>
      )}
      <div style={{ fontFamily: 'var(--serif)', fontSize: 22, letterSpacing: '-0.01em' }}>{title}</div>
    </div>
    <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
      {children}
      <button className="btn btn-ghost btn-sm" style={{ padding: 8 }}><Icon name="search" size={15} /></button>
      <button className="btn btn-ghost btn-sm" style={{ padding: 8, position: 'relative' }}>
        <Icon name="bell" size={15} />
        <span style={{ position: 'absolute', top: 6, right: 6, width: 6, height: 6, borderRadius: 999, background: 'var(--accent)' }}/>
      </button>
    </div>
  </div>
);

const StatCard = ({ label, value, unit, sub, tone }) => (
  <div className="card" style={{ padding: 18 }}>
    <div style={{ fontSize: 11, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600 }}>{label}</div>
    <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginTop: 10 }}>
      <div className="serif" style={{ fontSize: 38, lineHeight: 1, color: tone === 'accent' ? 'var(--accent)' : 'var(--ink)' }}>{value}</div>
      {unit && <div style={{ fontSize: 13, color: 'var(--muted)' }}>{unit}</div>}
    </div>
    {sub && <div style={{ fontSize: 11.5, color: 'var(--muted)', marginTop: 8 }}>{sub}</div>}
  </div>
);

Object.assign(window, { Sidebar, Topbar, StatCard });