function AdminPage({ onNavigate, toast, onStartTour }) {
  const [tab, setTab] = useState('lessons');
  const [modal, setModal] = useState(false);

  const content = {
    lessons: [
      { title: 'Recognizing phishing in clinical email', tags: ['All clinical'], status: 'Published', version: 'v2.3', updated: 'Apr 14, 2026' },
      { title: 'Protecting ePHI on shared workstations', tags: ['Nurse', 'Physician'], status: 'Published', version: 'v1.4', updated: 'Apr 02, 2026' },
      { title: 'Medical device security basics', tags: ['All clinical'], status: 'Published', version: 'v1.1', updated: 'Mar 21, 2026' },
      { title: 'Ransomware: first-response playbook', tags: ['All staff'], status: 'Approved', version: 'v1.0', updated: 'Apr 17, 2026' },
      { title: 'Secure texting for clinical care', tags: ['Nurse', 'Physician'], status: 'Review', version: 'v0.6', updated: 'Apr 18, 2026' },
      { title: 'Vendor access & BAA awareness', tags: ['Admin'], status: 'Draft', version: 'v0.2', updated: 'Apr 19, 2026' },
    ],
    quizzes: [
      { title: 'Phishing knowledge check (3Q)', tags: ['All clinical'], status: 'Published', version: 'v2.0', updated: 'Apr 14, 2026' },
      { title: 'ePHI workstation scenarios (5Q)', tags: ['Nurse'], status: 'Published', version: 'v1.2', updated: 'Apr 02, 2026' },
      { title: 'Ransomware response check (4Q)', tags: ['All staff'], status: 'Approved', version: 'v1.0', updated: 'Apr 17, 2026' },
    ],
    scenarios: [
      { title: 'Inbox sim — unusual login alert', tags: ['All clinical'], status: 'Published', version: 'v3.1', updated: 'Apr 10, 2026' },
      { title: 'Inbox sim — chief requesting MRI', tags: ['Radiology'], status: 'Published', version: 'v1.4', updated: 'Mar 28, 2026' },
      { title: 'Inbox sim — vendor invoice update', tags: ['Admin'], status: 'Review', version: 'v0.9', updated: 'Apr 18, 2026' },
    ],
    policies: [
      { title: 'Acceptable use of clinical workstations', tags: ['All staff'], status: 'Published', version: 'v4.0', updated: 'Jan 12, 2026' },
      { title: 'Incident reporting & non-retaliation', tags: ['All staff'], status: 'Published', version: 'v2.1', updated: 'Feb 08, 2026' },
      { title: 'Mobile device management (MDM)', tags: ['All staff'], status: 'Draft', version: 'v0.4', updated: 'Apr 16, 2026' },
    ],
  };

  const statusChip = (s) => {
    const m = {
      'Draft': 'chip-outline',
      'Review': 'chip-amber',
      'Approved': 'chip',
      'Published': 'chip-green',
    };
    return <span className={`chip ${m[s]}`}><span className="dot"/> {s}</span>;
  };

  const rows = content[tab];
  const stats = {
    draft: Object.values(content).flat().filter(r => r.status === 'Draft').length,
    review: Object.values(content).flat().filter(r => r.status === 'Review').length,
    approved: Object.values(content).flat().filter(r => r.status === 'Approved').length,
    published: Object.values(content).flat().filter(r => r.status === 'Published').length,
  };

  return (
    <div className="page-enter">
      <div className="row-between" style={{marginBottom: 20}}>
        <div>
          <h1>Content Library</h1>
          <p className="muted">Curate lessons, quizzes, scenarios, and policies · Draft → Review → Approved → Published</p>
        </div>
        <div style={{display: 'flex', gap: 8, alignItems: 'center'}}>
          <span data-tour="tour-button"><TakeTourButton onClick={onStartTour}/></span>
          <button className="btn btn-outline"><I.Upload size={14}/> Import</button>
          <span data-tour="admin-new">
            <button className="btn btn-primary" onClick={() => setModal(true)}><I.Plus size={14}/> New content</button>
          </span>
        </div>
      </div>

      {/* Lifecycle pipeline */}
      <div className="card" style={{marginBottom: 20}}>
        <div className="card-body" style={{padding: 20}}>
          <div style={{display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0}}>
            {[
              { label: 'Draft', count: stats.draft, color: 'var(--ink-3)', bg: 'var(--bg)' },
              { label: 'Review', count: stats.review, color: 'var(--amber)', bg: 'var(--amber-100)' },
              { label: 'Approved', count: stats.approved, color: 'var(--teal)', bg: 'var(--teal-100)' },
              { label: 'Published', count: stats.published, color: 'var(--green)', bg: 'var(--green-100)' },
            ].map((s, i, arr) => (
              <div key={s.label} style={{padding: '12px 16px', borderRight: i < arr.length - 1 ? '1px solid var(--border-2)' : 'none', position: 'relative'}}>
                <div style={{display: 'flex', alignItems: 'center', gap: 10, marginBottom: 6}}>
                  <span style={{width: 10, height: 10, borderRadius: '50%', background: s.color}}/>
                  <span style={{fontSize: 12, color: 'var(--ink-3)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em'}}>{s.label}</span>
                </div>
                <div style={{fontSize: 26, fontWeight: 700, color: 'var(--navy)', letterSpacing: '-0.02em'}}>{s.count}</div>
                <div className="muted" style={{fontSize: 12}}>items</div>
                {i < arr.length - 1 && (
                  <div style={{position: 'absolute', right: -7, top: '50%', transform: 'translateY(-50%)', background: 'white', padding: '2px', borderRadius: '50%', color: 'var(--ink-4)', zIndex: 1}}>
                    <I.ChevronRight size={12}/>
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="tabs" data-tour="admin-tabs">
        {[
          { id: 'lessons', label: 'Lessons', count: content.lessons.length },
          { id: 'quizzes', label: 'Quizzes', count: content.quizzes.length },
          { id: 'scenarios', label: 'Scenarios', count: content.scenarios.length },
          { id: 'policies', label: 'Policies', count: content.policies.length },
        ].map(t => (
          <button key={t.id} className={`tab ${tab === t.id ? 'active' : ''}`} onClick={() => setTab(t.id)}>
            {t.label} <span style={{marginLeft: 6, fontSize: 11, color: 'var(--ink-4)', fontWeight: 500}}>{t.count}</span>
          </button>
        ))}
      </div>

      <div className="card">
        <table className="data-table">
          <thead>
            <tr>
              <th>Title</th>
              <th>Role tags</th>
              <th data-tour="admin-status">Status</th>
              <th data-tour="admin-version">Version</th>
              <th>Last updated</th>
              <th style={{textAlign: 'right'}}>Actions</th>
            </tr>
          </thead>
          <tbody>
            {rows.map((r, i) => (
              <tr key={i}>
                <td>
                  <div style={{display: 'flex', gap: 10, alignItems: 'center'}}>
                    <div style={{width: 32, height: 32, borderRadius: 8, background: 'var(--teal-100)', color: 'var(--teal)', display: 'grid', placeItems: 'center'}}>
                      {tab === 'lessons' ? <I.BookOpen size={14}/> : tab === 'quizzes' ? <I.CheckCircle size={14}/> : tab === 'scenarios' ? <I.Target size={14}/> : <I.FileText size={14}/>}
                    </div>
                    <div style={{fontWeight: 600, color: 'var(--navy)'}}>{r.title}</div>
                  </div>
                </td>
                <td>
                  <div style={{display: 'flex', gap: 4, flexWrap: 'wrap'}}>
                    {r.tags.map(t => <span key={t} className="chip chip-outline" style={{fontSize: 11, padding: '2px 8px'}}>{t}</span>)}
                  </div>
                </td>
                <td>{statusChip(r.status)}</td>
                <td><span className="mono" style={{fontSize: 12.5, color: 'var(--ink-2)'}}>{r.version}</span></td>
                <td className="muted">{r.updated}</td>
                <td style={{textAlign: 'right'}}>
                  <button className="icon-btn" aria-label="More" onClick={() => toast('Content actions — demo', 'success')}><I.MoreH size={16}/></button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {modal && (
        <div className="modal-backdrop" onClick={() => setModal(false)}>
          <div className="modal" onClick={e => e.stopPropagation()} style={{width: 640, maxWidth: '92vw'}}>
            <div style={{padding: '20px 24px', borderBottom: '1px solid var(--border-2)'}}>
              <h2 style={{margin: 0}}>New content</h2>
              <p className="muted" style={{fontSize: 13, marginTop: 4}}>Start from a blank template today. AI-assisted drafting arrives in Phase 2 behind the same Draft → Review → Approved → Published gate.</p>
            </div>

            <div style={{padding: '20px 24px 8px'}}>
              <div style={{fontSize: 10.5, fontWeight: 700, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 10}}>
                Manual draft · available now
              </div>
              <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10}}>
                {[
                  { icon: I.BookOpen, label: 'Lesson', desc: 'Multi-section learning module' },
                  { icon: I.CheckCircle, label: 'Quiz', desc: 'Knowledge check with explanations' },
                  { icon: I.Target, label: 'Scenario', desc: 'Interactive phishing simulation' },
                  { icon: I.FileText, label: 'Policy', desc: 'Read-and-acknowledge doc' },
                ].map(t => {
                  const Icon = t.icon;
                  return (
                    <button key={t.label} className="card hover" style={{padding: 14, textAlign: 'left', cursor: 'pointer', border: '1px solid var(--border)'}} onClick={() => {setModal(false); toast(`${t.label} draft created`, 'success');}}>
                      <div style={{width: 30, height: 30, borderRadius: 6, background: 'var(--teal-100)', color: 'var(--teal)', display: 'grid', placeItems: 'center', marginBottom: 8}}>
                        <Icon size={15}/>
                      </div>
                      <div style={{fontWeight: 600, color: 'var(--navy)', fontSize: 13}}>{t.label}</div>
                      <div className="muted" style={{fontSize: 11.5, marginTop: 2}}>{t.desc}</div>
                    </button>
                  );
                })}
              </div>
            </div>

            <div style={{padding: '16px 24px 8px'}}>
              <div style={{display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10}}>
                <span style={{fontSize: 10.5, fontWeight: 700, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.06em'}}>
                  AI-assisted draft
                </span>
                <Phase2Badge/>
              </div>
              <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10}}>
                {[
                  { icon: I.BookOpen, label: 'Lesson', desc: 'Draft remediation text + quiz questions from a topic prompt' },
                  { icon: I.CheckCircle, label: 'Quiz', desc: 'Generate role-specific knowledge check questions' },
                  { icon: I.Target, label: 'Scenario', desc: 'Synthesize branching phishing or clinical-security scenario' },
                  { icon: I.FileText, label: 'Policy', desc: 'Draft policy acknowledgement copy from source doc' },
                ].map(t => {
                  const Icon = t.icon;
                  return (
                    <button
                      key={t.label}
                      className="card phase2-card phase2-disabled"
                      style={{padding: 14, textAlign: 'left', position: 'relative'}}
                      onClick={() => toast('Available in Phase 2 — requires AI orchestration service', 'success')}
                    >
                      <div style={{width: 30, height: 30, borderRadius: 6, background: 'var(--bg)', color: 'var(--navy-500)', display: 'grid', placeItems: 'center', marginBottom: 8, border: '1px solid var(--border)'}}>
                        <Icon size={15}/>
                      </div>
                      <div style={{fontWeight: 600, color: 'var(--navy)', fontSize: 13}}>{t.label}</div>
                      <div className="muted" style={{fontSize: 11.5, marginTop: 2, lineHeight: 1.4}}>{t.desc}</div>
                    </button>
                  );
                })}
              </div>
            </div>

            <div style={{padding: '14px 24px'}}>
              <div className="callout callout-gray" style={{fontSize: 12}}>
                <I.ShieldCheck size={16} style={{flexShrink: 0, marginTop: 1}}/>
                <div>
                  <div className="callout-title">Non-negotiable AI boundary</div>
                  AI never owns authentication, authorization, final scoring, incident severity, compliance evidence, or audit logs. All AI-generated content moves through <b>Draft → Review → Approved → Published</b>, same as manual content.
                </div>
              </div>
            </div>

            <div style={{padding: '12px 24px', borderTop: '1px solid var(--border-2)', display: 'flex', justifyContent: 'flex-end', gap: 8, background: 'var(--bg)'}}>
              <button className="btn btn-outline" onClick={() => setModal(false)}>Cancel</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

window.AdminPage = AdminPage;