/* Screen — Admin / CMS · Content Management
   Unified editor for Courses, Articles, Quizzes.
   Layout: admin nav → page header w/ type switch → 3-pane (filters · list · editor) */

function ScreenAdminContent() {
  const [type, setType] = React.useState('article'); // article | course | quiz
  const [selected, setSelected] = React.useState(0);

  // — Sample inventory per type —
  const ITEMS = {
    article: [
      { id: 1, title: 'HFpEF in the clinic: phenotypes and pathways', subj: 'Cardiology', author: 'P. Reyes', status: 'Peer review', updated: '2h ago', words: 4120, reviewers: '2 / 3' },
      { id: 2, title: 'Disease-Modifying Therapies for Early Alzheimer\u2019s', subj: 'Neurology', author: 'M. Ahuja', status: 'Draft', updated: 'Yesterday', words: 2840, reviewers: '—' },
      { id: 3, title: 'Antimicrobial Stewardship in 2026', subj: 'Infectious Disease', author: 'J. Mendez', status: 'Copy edit', updated: '3d ago', words: 5210, reviewers: '3 / 3' },
      { id: 4, title: 'AKI Biomarkers: When (and when not)', subj: 'Nephrology', author: 'O. Thomas', status: 'Draft', updated: '4d ago', words: 1980, reviewers: '—' },
      { id: 5, title: 'RSV Prevention in the Under-Twos', subj: 'Pediatrics', author: 'T. Choi', status: 'Published', updated: 'May 8', words: 2110, reviewers: '3 / 3' },
      { id: 6, title: 'Reading the New Hypertension Guidelines Critically', subj: 'Public Health', author: 'L. Bauer', status: 'Scheduled', updated: 'May 14', words: 3540, reviewers: '3 / 3' },
    ],
    course: [
      { id: 11, title: 'Updates in Heart Failure Management 2026', subj: 'Cardiology', author: 'P. Reyes', status: 'Published', updated: 'May 6', modules: 7, credits: '4.0 AMA PRA' },
      { id: 12, title: 'Acute Stroke: Door-to-Needle in 30', subj: 'Emergency Med', author: 'EM Editorial', status: 'Copy edit', updated: '1d ago', modules: 5, credits: '1.5 AMA PRA' },
      { id: 13, title: 'Type 2 Diabetes: Beyond Metformin', subj: 'Endocrinology', author: 'K. Park', status: 'Draft', updated: '6h ago', modules: 6, credits: '3.0 AMA PRA' },
      { id: 14, title: 'Antimicrobial Stewardship — full course', subj: 'Infectious Disease', author: 'Stewardship Team', status: 'Peer review', updated: 'Today', modules: 8, credits: '3.0 AMA PRA' },
    ],
    quiz: [
      { id: 21, title: 'HFpEF · post-read assessment', linked: 'Article #1', subj: 'Cardiology', status: 'Linked', updated: 'Today', questions: 6, passing: '80%' },
      { id: 22, title: 'Heart Failure Mgmt 2026 · Module 3', linked: 'Course #11 / M3', subj: 'Cardiology', status: 'Published', updated: 'May 6', questions: 10, passing: '70%' },
      { id: 23, title: 'Sepsis recognition · bedside', linked: 'Course #14 / M2', subj: 'Critical Care', status: 'Draft', updated: '2d ago', questions: 8, passing: '75%' },
      { id: 24, title: 'GLP-1 Safety in Adolescents', linked: '—', subj: 'Endocrinology', status: 'Unlinked', updated: '5d ago', questions: 5, passing: '70%' },
    ]
  };

  const items = ITEMS[type];
  const sel = items[selected] || items[0];

  const typeLabel = { article: 'Article', course: 'Course', quiz: 'Quiz' }[type];

  // — Sample sections per content type, shown in the editor —
  const articleSections = [
    { h: '1 · Defining HFpEF in 2026', body: 'Heart failure with preserved ejection fraction is, in 2026, less of a diagnostic puzzle and more of a phenotyping problem.' },
    { h: '2 · The H2FPEF score, used well', body: 'Six variables, two decimal places, a probability. The trap is treating it as a binary; it isn\u2019t.' },
    { h: '3 · Imaging — what actually changes management', body: 'Strain imaging — global longitudinal strain with apical sparing — has become the screening test most clinicians can actually obtain…' },
  ];

  const courseModules = [
    { n: 1, title: 'Introduction & 2025 guideline diff', dur: '20 min', state: 'Published', items: 3 },
    { n: 2, title: 'GDMT in 2026 — what changed', dur: '38 min', state: 'Published', items: 5 },
    { n: 3, title: 'Device therapy decision pathways', dur: '52 min', state: 'In review', items: 7 },
    { n: 4, title: 'Advanced HF & referral triggers', dur: '34 min', state: 'Draft', items: 4 },
    { n: 5, title: 'Palliative integration', dur: '22 min', state: 'Draft', items: 3 },
    { n: 6, title: 'Patient counseling scripts', dur: '18 min', state: 'Draft', items: 2 },
    { n: 7, title: 'Final assessment', dur: '20 min', state: 'Draft', items: 1, quiz: true },
  ];

  const quizQuestions = [
    { n: 1, type: 'Single choice', q: 'Which of the following is most consistent with HFpEF rather than HFrEF?', opts: [
      'EF 28% with global hypokinesis', 'EF 58% with elevated E/e\u2019 and left atrial enlargement (correct)', 'EF 45% with anteroseptal akinesis', 'EF 60% with mid-cavity obstruction'
    ], correct: 1 },
    { n: 2, type: 'Multiple choice', q: 'Which agents have Class I evidence in HFpEF as of 2026?', opts: ['SGLT2 inhibitors', 'Loop diuretics for congestion', 'Beta blockers (routine)', 'MRAs (selected)'], correct: '1, 2, 4' },
    { n: 3, type: 'Short answer', q: 'Name two H2FPEF score variables.', correct: 'Any two of: Heavy (BMI > 30) · Hypertensive (≥ 2 agents) · AF · Pulm HTN · Elder · Filling pressure' },
  ];

  // — Status pill colors —
  const statusTone = (s) => {
    const t = s.toLowerCase();
    if (t.includes('publish')) return { bg: '#eaf6ef', fg: '#14804a', bd: '#bfe3cb' };
    if (t.includes('schedul')) return { bg: 'var(--sky-tint)', fg: 'var(--sky-deep)', bd: 'var(--sky-tint-2)' };
    if (t.includes('review') || t.includes('copy')) return { bg: 'var(--warn-tint)', fg: 'var(--warn)', bd: '#f1d4a1' };
    if (t.includes('draft')) return { bg: 'var(--paper-2)', fg: 'var(--ink-2)', bd: 'var(--line)' };
    if (t.includes('unlink')) return { bg: '#fdecec', fg: '#b1413f', bd: '#f5c5c4' };
    return { bg: 'var(--paper-2)', fg: 'var(--ink-2)', bd: 'var(--line)' };
  };

  const StatusPill = ({ label }) => {
    const c = statusTone(label);
    return (
      <span style={{
        display: 'inline-flex', alignItems: 'center', gap: 6,
        padding: '3px 8px', fontSize: 11, fontWeight: 500,
        background: c.bg, color: c.fg,
        border: `1px solid ${c.bd}`, borderRadius: 999,
        fontFamily: "'IBM Plex Mono', monospace", letterSpacing: '0.04em', textTransform: 'uppercase'
      }}>
        <span style={{ width: 6, height: 6, borderRadius: '50%', background: c.fg }} />
        {label}
      </span>
    );
  };

  // — Editor panel — chooses layout per content type —
  function Editor() {
    if (type === 'article') return <EditorArticle />;
    if (type === 'course') return <EditorCourse />;
    return <EditorQuiz />;
  }

  function EditorHeader({ title, kind, status, lastSaved }) {
    return (
      <div style={{ padding: '20px 24px', borderBottom: '1px solid var(--line)', background: 'var(--paper)', position: 'sticky', top: 0, zIndex: 2 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
          <div className="sec-tag">Editing · {kind} #{sel.id}</div>
          <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
            <span className="mono" style={{ fontSize: 11, color: 'var(--muted)' }}>{lastSaved}</span>
            <button className="btn">Preview</button>
            <button className="btn">Save draft</button>
            <button className="btn btn-primary">Publish →</button>
          </div>
        </div>
        <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
          <input defaultValue={title} className="hand"
            style={{
              flex: 1, fontFamily: "'Newsreader', serif", fontSize: 30, fontWeight: 500,
              lineHeight: 1.1, border: 'none', outline: 'none', background: 'transparent',
              color: 'var(--ink)', padding: 0, letterSpacing: '-0.01em'
            }} />
          <StatusPill label={status} />
        </div>
      </div>
    );
  }

  function MetaField({ label, value, w = '1fr', mono = false }) {
    return (
      <div style={{ minWidth: 0 }}>
        <div className="sec-tag" style={{ marginBottom: 4 }}>{label}</div>
        <div className="wf-border-thin" style={{
          padding: '8px 10px', fontSize: 13,
          fontFamily: mono ? "'IBM Plex Mono', monospace" : "'IBM Plex Sans', sans-serif",
          color: 'var(--ink)', display: 'flex', justifyContent: 'space-between', alignItems: 'center'
        }}>
          <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{value}</span>
        </div>
      </div>
    );
  }

  // ── ARTICLE EDITOR ─────────────────────────────────────────────
  function EditorArticle() {
    return (
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
        <EditorHeader title={sel.title} kind="Article" status={sel.status} lastSaved={`Saved ${sel.updated}`} />

        {/* Meta grid */}
        <div style={{ padding: '18px 24px', background: 'var(--paper-2)', borderBottom: '1px solid var(--line)' }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
            <MetaField label="Specialty" value={sel.subj} />
            <MetaField label="Sub-specialty" value="Heart Failure" />
            <MetaField label="Author" value={sel.author} />
            <MetaField label="Co-authors" value="T. Okafor, MD" />
            <MetaField label="Reading time" value="14 min" mono />
            <MetaField label="Word count" value={`${sel.words.toLocaleString()} words`} mono />
            <MetaField label="CME credits" value="1.5 AMA PRA Cat 1™" mono />
            <MetaField label="Linked quiz" value="HFpEF · post-read (Q#21)" />
          </div>
        </div>

        {/* Body editor */}
        <div style={{ padding: '24px', flex: 1 }}>
          {/* Toolbar */}
          <div style={{ display: 'flex', gap: 4, marginBottom: 16, padding: '6px 10px', background: 'var(--paper-2)', border: '1px solid var(--line)', borderRadius: 'var(--radius-sm)', alignItems: 'center', flexWrap: 'wrap' }}>
            {[
              { l: 'H1', w: 'bold' }, { l: 'H2', w: 'bold' }, { l: 'H3', w: 'bold' },
              '·', { l: 'B', w: 800 }, { l: 'I', w: 'italic' }, { l: 'U', w: 'underline' },
              '·', '“ Quote', '— List', '1. Numbered', '◇ Callout',
              '·', '↗ Link', '🖼 Figure', '📎 Reference', '⚕ Drug', '🧪 Lab value',
              '·', { l: '↶ Undo' }, { l: '↷ Redo' },
            ].map((t, i) => typeof t === 'string' && t === '·' ? (
              <span key={i} style={{ width: 1, height: 18, background: 'var(--line-2)', margin: '0 4px' }} />
            ) : (
              <button key={i} className="btn" style={{
                padding: '4px 9px', fontSize: 12,
                fontWeight: t.w === 'bold' || t.w === 800 ? 700 : 500,
                fontStyle: t.w === 'italic' ? 'italic' : 'normal',
                textDecoration: t.w === 'underline' ? 'underline' : 'none',
                minHeight: 26
              }}>{typeof t === 'string' ? t : t.l}</button>
            ))}
            <div style={{ flex: 1 }} />
            <span className="mono" style={{ fontSize: 11, color: 'var(--muted)' }}>Markdown · WYSIWYG · HTML</span>
          </div>

          {/* Featured image */}
          <div className="ph hatch-sky" style={{ height: 160, marginBottom: 18, position: 'relative' }}>
            <span>Featured figure · drop image or paste URL · 1280×340</span>
            <button className="btn" style={{ position: 'absolute', top: 10, right: 10, padding: '4px 10px', fontSize: 12 }}>Replace</button>
          </div>

          {/* Deck / standfirst */}
          <div style={{ marginBottom: 18 }}>
            <div className="sec-tag" style={{ marginBottom: 6 }}>Deck · 1–2 sentences shown above the article</div>
            <div className="wf-border-thin" style={{ padding: 12, fontSize: 16, fontStyle: 'italic', color: 'var(--ink-2)', lineHeight: 1.4 }}>
              The diagnosis is easier than the management. A pragmatic, phenotype-first approach to heart failure with preserved ejection fraction, written for the generalist.
            </div>
          </div>

          {/* Sections */}
          <div className="sec-tag" style={{ marginBottom: 10 }}>Sections</div>
          {articleSections.map((s, i) => (
            <div key={i} className="wf-border" style={{ marginBottom: 14, padding: 16, background: 'var(--paper)' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
                <input defaultValue={s.h}
                  className="hand"
                  style={{ fontSize: 22, fontWeight: 500, border: 'none', outline: 'none', background: 'transparent', flex: 1, fontFamily: "'Newsreader', serif" }} />
                <div style={{ display: 'flex', gap: 4 }}>
                  <button className="btn" style={{ padding: '3px 7px', fontSize: 12 }}>⇅</button>
                  <button className="btn" style={{ padding: '3px 7px', fontSize: 12 }}>⧉</button>
                  <button className="btn" style={{ padding: '3px 7px', fontSize: 12 }}>✕</button>
                </div>
              </div>
              <div style={{ fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.55, padding: '6px 0', borderTop: '1px dashed var(--line)' }}>{s.body}</div>
              <div style={{ display: 'flex', gap: 6, marginTop: 10, fontFamily: "'IBM Plex Mono', monospace", fontSize: 10, color: 'var(--muted)' }}>
                <span>{Math.floor(s.body.length / 5)} words</span>
                <span>·</span>
                <span>{i === 0 ? '2 references' : i === 1 ? '1 reference' : '4 references'}</span>
              </div>
            </div>
          ))}
          <button className="btn" style={{ width: '100%', padding: '10px' }}>+ Add section</button>

          {/* References */}
          <div className="wf-border" style={{ marginTop: 22, padding: 18, background: 'var(--paper)' }}>
            <div className="sec-tag" style={{ marginBottom: 10 }}>References · 24</div>
            <div style={{ fontSize: 13, color: 'var(--ink-2)', display: 'grid', gridTemplateColumns: '24px 1fr 100px', gap: '8px 12px', alignItems: 'center' }}>
              <span className="mono" style={{ color: 'var(--muted)' }}>[1]</span>
              <span>Shah SJ, et al. <em>Phenotype-specific treatment of HFpEF</em>. Lancet 2024;404:1029–41.</span>
              <span className="mono" style={{ fontSize: 11, color: 'var(--sky-deep)' }}>DOI ↗</span>
              <span className="mono" style={{ color: 'var(--muted)' }}>[2]</span>
              <span>Reddy YNV, Borlaug BA. <em>H2FPEF: a probabilistic approach</em>. Circulation 2018;138:861–870.</span>
              <span className="mono" style={{ fontSize: 11, color: 'var(--sky-deep)' }}>DOI ↗</span>
              <span className="mono" style={{ color: 'var(--muted)' }}>[3]</span>
              <span>Solomon SD, et al. <em>Dapagliflozin in HF with preserved EF (DELIVER)</em>. N Engl J Med 2022;387:1089–1098.</span>
              <span className="mono" style={{ fontSize: 11, color: 'var(--sky-deep)' }}>DOI ↗</span>
            </div>
            <button className="btn" style={{ marginTop: 12, padding: '4px 10px', fontSize: 12 }}>+ Add reference · DOI / PubMed ID</button>
          </div>
        </div>
      </div>
    );
  }

  // ── COURSE EDITOR ──────────────────────────────────────────────
  function EditorCourse() {
    return (
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
        <EditorHeader title={sel.title} kind="Course" status={sel.status} lastSaved={`Saved ${sel.updated}`} />

        {/* Meta */}
        <div style={{ padding: '18px 24px', background: 'var(--paper-2)', borderBottom: '1px solid var(--line)' }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
            <MetaField label="Specialty" value={sel.subj} />
            <MetaField label="Difficulty" value="Intermediate" />
            <MetaField label="Course lead" value={sel.author} />
            <MetaField label="Total runtime" value="4h 20m" mono />
            <MetaField label="Modules" value={`${sel.modules} modules`} mono />
            <MetaField label="CME credits" value={sel.credits} mono />
            <MetaField label="Accreditation" value="ACCME · AANP · ANCC" />
            <MetaField label="Pass threshold" value="70% on final assessment" />
          </div>
        </div>

        {/* Hero / cover */}
        <div style={{ padding: '20px 24px 0' }}>
          <div className="sec-tag" style={{ marginBottom: 8 }}>Cover &amp; description</div>
          <div style={{ display: 'grid', gridTemplateColumns: '240px 1fr', gap: 16 }}>
            <div className="ph hatch-sky" style={{ height: 140 }}>Cover image · 480×280</div>
            <div className="wf-border-thin" style={{ padding: 12, fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.5 }}>
              Latest guidelines on GDMT, SGLT2 inhibitors, and device therapy with clinical decision pathways. A practical, case-based course for the generalist and hospitalist. Includes downloadable bedside cards and a 10-question final assessment.
            </div>
          </div>
        </div>

        {/* Module list */}
        <div style={{ padding: '20px 24px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
            <div className="sec-tag">Modules · {sel.modules}</div>
            <span className="mono" style={{ fontSize: 11, color: 'var(--muted)' }}>Drag to reorder · click to edit</span>
          </div>
          <div className="wf-border" style={{ background: 'var(--paper)', overflow: 'hidden' }}>
            <div style={{ display: 'grid', gridTemplateColumns: '40px 1fr 100px 110px 130px 80px', gap: 0, padding: '10px 14px', background: 'var(--paper-2)', borderBottom: '1px solid var(--line)', fontFamily: "'IBM Plex Mono', monospace", fontSize: 10, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>
              <span>#</span><span>Title</span><span>Duration</span><span>Items</span><span>Status</span><span></span>
            </div>
            {courseModules.map((m, i) => (
              <div key={i} style={{
                display: 'grid', gridTemplateColumns: '40px 1fr 100px 110px 130px 80px',
                gap: 0, padding: '12px 14px', alignItems: 'center',
                borderBottom: i < courseModules.length - 1 ? '1px solid var(--line)' : 'none',
                background: m.quiz ? 'var(--sky-tint)' : 'var(--paper)'
              }}>
                <span className="mono" style={{ color: 'var(--muted)', fontSize: 12 }}>{String(m.n).padStart(2, '0')}</span>
                <span>
                  <div style={{ fontSize: 14, fontWeight: 500 }}>{m.title}</div>
                  {m.quiz && <span className="stamp" style={{ marginTop: 4, fontSize: 9, background: 'var(--paper)' }}>Linked quiz · Q#22</span>}
                </span>
                <span className="mono" style={{ fontSize: 12, color: 'var(--muted)' }}>{m.dur}</span>
                <span className="mono" style={{ fontSize: 12, color: 'var(--muted)' }}>{m.items} {m.items === 1 ? 'item' : 'items'}</span>
                <span><StatusPill label={m.state} /></span>
                <span style={{ display: 'flex', gap: 4, justifyContent: 'flex-end' }}>
                  <button className="btn" style={{ padding: '3px 7px', fontSize: 11 }}>⇅</button>
                  <button className="btn" style={{ padding: '3px 7px', fontSize: 11 }}>✎</button>
                </span>
              </div>
            ))}
          </div>
          <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
            <button className="btn" style={{ flex: 1 }}>+ Add module</button>
            <button className="btn">+ Linked quiz</button>
            <button className="btn">+ Resource (PDF)</button>
          </div>
        </div>

        {/* Learning outcomes */}
        <div style={{ padding: '0 24px 24px' }}>
          <div className="wf-border" style={{ padding: 16, background: 'var(--paper)' }}>
            <div className="sec-tag" style={{ marginBottom: 10 }}>Learning outcomes · shown on the course page</div>
            {[
              'Apply the 2026 GDMT framework to a new HF diagnosis.',
              'Stratify patients for device therapy using current criteria.',
              'Recognize when to refer to advanced HF and palliative care.',
              'Counsel patients on SGLT2 inhibitor initiation and monitoring.',
            ].map((o, i) => (
              <div key={i} style={{ display: 'flex', gap: 10, padding: '8px 0', borderTop: i ? '1px dashed var(--line)' : 'none', fontSize: 14 }}>
                <span className="mono" style={{ color: 'var(--sky)', width: 22 }}>{i + 1}.</span>
                <span style={{ flex: 1 }}>{o}</span>
                <button className="btn" style={{ padding: '2px 6px', fontSize: 11 }}>✕</button>
              </div>
            ))}
            <button className="btn" style={{ marginTop: 10, padding: '4px 10px', fontSize: 12 }}>+ Add outcome</button>
          </div>
        </div>
      </div>
    );
  }

  // ── QUIZ EDITOR ────────────────────────────────────────────────
  function EditorQuiz() {
    return (
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
        <EditorHeader title={sel.title} kind="Quiz" status={sel.status} lastSaved={`Saved ${sel.updated}`} />

        {/* Meta */}
        <div style={{ padding: '18px 24px', background: 'var(--paper-2)', borderBottom: '1px solid var(--line)' }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
            <MetaField label="Linked to" value={sel.linked} />
            <MetaField label="Specialty" value={sel.subj} />
            <MetaField label="Questions" value={`${sel.questions} questions`} mono />
            <MetaField label="Passing score" value={sel.passing} mono />
            <MetaField label="Time limit" value="No limit" mono />
            <MetaField label="Attempts" value="Unlimited" mono />
            <MetaField label="Randomize" value="Order &amp; options" />
            <MetaField label="CME on pass" value="0.5 AMA PRA Cat 1™" mono />
          </div>
        </div>

        {/* Questions */}
        <div style={{ padding: '24px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
            <div className="sec-tag">Questions · {sel.questions}</div>
            <div style={{ display: 'flex', gap: 6 }}>
              <button className="btn" style={{ padding: '4px 10px', fontSize: 12 }}>↑ Import CSV</button>
              <button className="btn" style={{ padding: '4px 10px', fontSize: 12 }}>⌖ AI suggest</button>
            </div>
          </div>

          {quizQuestions.map((q, i) => (
            <div key={i} className="wf-border" style={{ marginBottom: 14, padding: 18, background: 'var(--paper)' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12, marginBottom: 12 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, flex: 1 }}>
                  <span style={{ width: 28, height: 28, borderRadius: '50%', background: 'var(--sky-tint)', color: 'var(--sky-deep)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 600, fontSize: 13 }}>Q{q.n}</span>
                  <span className="chip chip-sky">{q.type}</span>
                  <span className="mono" style={{ fontSize: 11, color: 'var(--muted)' }}>· Cardiology · Difficulty: medium</span>
                </div>
                <div style={{ display: 'flex', gap: 4 }}>
                  <button className="btn" style={{ padding: '3px 7px', fontSize: 12 }}>⇅</button>
                  <button className="btn" style={{ padding: '3px 7px', fontSize: 12 }}>⧉</button>
                  <button className="btn" style={{ padding: '3px 7px', fontSize: 12 }}>✕</button>
                </div>
              </div>

              <div className="wf-border-thin" style={{ padding: 12, marginBottom: 12, fontSize: 15, lineHeight: 1.5 }}>
                {q.q}
              </div>

              {q.opts ? (
                <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                  {q.opts.map((opt, j) => {
                    const isCorrect = String(q.correct).split(',').map(s => s.trim()).includes(String(j)) || j === q.correct;
                    return (
                      <div key={j} style={{
                        display: 'flex', alignItems: 'center', gap: 10,
                        padding: '10px 12px',
                        border: `1px solid ${isCorrect ? '#bfe3cb' : 'var(--line)'}`,
                        borderRadius: 'var(--radius-sm)',
                        background: isCorrect ? '#eaf6ef' : 'var(--paper)'
                      }}>
                        <span style={{
                          width: 18, height: 18, borderRadius: q.type.includes('Multiple') ? 4 : '50%',
                          border: `1.5px solid ${isCorrect ? '#14804a' : 'var(--line-2)'}`,
                          background: isCorrect ? '#14804a' : 'transparent',
                          display: 'flex', alignItems: 'center', justifyContent: 'center',
                          color: '#fff', fontSize: 11, flexShrink: 0
                        }}>{isCorrect ? '✓' : ''}</span>
                        <span style={{ flex: 1, fontSize: 14 }}>{opt.replace(' (correct)', '')}</span>
                        <span className="mono" style={{ fontSize: 10, color: 'var(--muted)' }}>{String.fromCharCode(65 + j)}</span>
                      </div>
                    );
                  })}
                  <button className="btn" style={{ alignSelf: 'flex-start', padding: '4px 10px', fontSize: 12, marginTop: 2 }}>+ Add option</button>
                </div>
              ) : (
                <div className="wf-border-thin" style={{ padding: 12, fontSize: 13, background: '#eaf6ef', borderColor: '#bfe3cb', color: 'var(--ink-2)' }}>
                  <span className="sec-tag" style={{ marginBottom: 4 }}>Accepted answer</span>
                  <div style={{ marginTop: 4 }}>{q.correct}</div>
                </div>
              )}

              <div style={{ marginTop: 12, paddingTop: 12, borderTop: '1px dashed var(--line)' }}>
                <div className="sec-tag" style={{ marginBottom: 4 }}>Rationale · shown after answer</div>
                <div style={{ fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.5 }}>
                  Per ACC/AHA 2025, the diagnostic phenotype is defined by EF ≥ 50% with evidence of elevated filling pressures. Strain imaging and H2FPEF support the diagnosis when ambiguous.
                </div>
              </div>
            </div>
          ))}

          <button className="btn" style={{ width: '100%', padding: '10px' }}>+ Add question</button>
        </div>
      </div>
    );
  }

  return (
    <div className="wf" style={{ background: 'var(--paper-2)', minHeight: '100vh' }}>
      {/* Admin nav */}
      <div style={{ borderBottom: '1.5px solid var(--ink)', padding: '12px 28px', display: 'flex', alignItems: 'center', gap: 22, background: 'var(--ink)', color: 'var(--paper)' }}>
        <div className="hand" style={{ fontSize: 22, display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ display: 'inline-flex', width: 26, height: 26, alignItems: 'center', justifyContent: 'center', border: '1.5px solid var(--paper)', borderRadius: '50%', fontSize: 14, background: 'var(--sky-tint)', color: 'var(--ink)' }}>+</span>
          OpenMedEdu <span style={{ opacity: 0.5, fontSize: 16 }}>· admin</span>
        </div>
        <div style={{ display: 'flex', gap: 18, fontSize: 14, marginLeft: 20 }}>
          <span style={{ opacity: 0.7 }}>Overview</span>
          <span style={{ borderBottom: '1.5px solid var(--paper)', paddingBottom: 2 }}>Content</span>
          <span style={{ opacity: 0.7 }}>Reviews</span>
          <span style={{ opacity: 0.7 }}>Members</span>
          <span style={{ opacity: 0.7 }}>CME &amp; accreditation</span>
          <span style={{ opacity: 0.7 }}>Settings</span>
          <span style={{ opacity: 0.7 }}>Audit log</span>
        </div>
        <div style={{ flex: 1 }} />
        <span className="mono" style={{ fontSize: 12, opacity: 0.7 }}>env: prod · v 2026.05.12</span>
        <div style={{ width: 28, height: 28, borderRadius: '50%', background: 'var(--sky-tint)', color: 'var(--ink)', display: 'flex', alignItems: 'center', justifyContent: 'center' }} className="hand">PR</div>
      </div>

      {/* Page header */}
      <div style={{ padding: '28px 28px 18px', borderBottom: '1px solid var(--line)', background: 'var(--paper)' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 18 }}>
          <div>
            <div className="sec-tag" style={{ marginBottom: 4 }}>Admin · Content</div>
            <div className="hand" style={{ fontSize: 38, lineHeight: 1 }}>Content library</div>
            <div style={{ fontSize: 14, color: 'var(--ink-2)', marginTop: 4 }}>Create &amp; edit articles, courses, and quizzes. Linked items stay in sync.</div>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <button className="btn">↑ Import (CSV / DOCX)</button>
            <button className="btn btn-primary">+ New {typeLabel.toLowerCase()}</button>
          </div>
        </div>

        {/* Type switch — segmented control */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 18 }}>
          <div style={{ display: 'inline-flex', border: '1px solid var(--line-2)', borderRadius: 'var(--radius-sm)', background: 'var(--paper-2)', padding: 3 }}>
            {[
              { id: 'article', label: 'Articles', n: ITEMS.article.length },
              { id: 'course', label: 'Courses', n: ITEMS.course.length },
              { id: 'quiz', label: 'Quizzes', n: ITEMS.quiz.length },
            ].map((tp) => (
              <button
                key={tp.id}
                onClick={() => { setType(tp.id); setSelected(0); }}
                style={{
                  padding: '8px 18px', border: 'none', cursor: 'pointer',
                  background: type === tp.id ? 'var(--paper)' : 'transparent',
                  color: type === tp.id ? 'var(--ink)' : 'var(--muted)',
                  boxShadow: type === tp.id ? 'var(--shadow-sm)' : 'none',
                  borderRadius: 4,
                  fontFamily: "'IBM Plex Sans', sans-serif",
                  fontSize: 14, fontWeight: type === tp.id ? 600 : 500,
                  display: 'inline-flex', alignItems: 'center', gap: 8,
                }}
              >
                {tp.label}
                <span className="mono" style={{
                  fontSize: 11, color: type === tp.id ? 'var(--sky-deep)' : 'var(--muted-2)',
                  background: type === tp.id ? 'var(--sky-tint)' : 'transparent',
                  padding: '1px 6px', borderRadius: 4
                }}>{tp.n}</span>
              </button>
            ))}
          </div>

          <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
            <div className="search" style={{ padding: '6px 12px', minWidth: 280, boxShadow: 'none' }}>
              <span className="mono" style={{ fontSize: 13, color: 'var(--muted)' }}>⌕</span>
              <span style={{ fontSize: 13, color: 'var(--muted)' }}>Search {typeLabel.toLowerCase()}s…</span>
            </div>
            <span className="chip chip-sky">All status</span>
            <span className="chip">All specialties</span>
            <span className="chip">Last 30d</span>
          </div>
        </div>
      </div>

      {/* Body: List + Editor */}
      <div style={{ display: 'grid', gridTemplateColumns: '380px 1fr', minHeight: 1400 }}>
        {/* LEFT — list */}
        <aside style={{ borderRight: '1px solid var(--line)', background: 'var(--paper)' }}>
          <div style={{ padding: '14px 18px', borderBottom: '1px solid var(--line)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <span className="sec-tag">{items.length} {typeLabel.toLowerCase()}s</span>
            <span className="mono" style={{ fontSize: 11, color: 'var(--muted)' }}>Sort: Recently edited ▾</span>
          </div>
          {items.map((it, i) => (
            <div
              key={it.id}
              onClick={() => setSelected(i)}
              style={{
                padding: '14px 18px',
                borderBottom: '1px solid var(--line)',
                borderLeft: selected === i ? '3px solid var(--sky)' : '3px solid transparent',
                background: selected === i ? 'var(--sky-tint)' : 'var(--paper)',
                cursor: 'pointer',
                transition: 'background 0.15s',
              }}
            >
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 10, marginBottom: 6 }}>
                <span className="mono" style={{ fontSize: 10, color: 'var(--muted)', letterSpacing: '0.06em' }}>{typeLabel.toUpperCase()} #{it.id}</span>
                <StatusPill label={it.status} />
              </div>
              <div className="hand" style={{ fontSize: 17, lineHeight: 1.2, marginBottom: 6, color: 'var(--ink)' }}>{it.title}</div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 12, color: 'var(--muted)' }}>
                <span>{it.subj} · {it.author || it.linked}</span>
                <span className="mono">{it.updated}</span>
              </div>
              {type === 'article' && (
                <div className="mono" style={{ fontSize: 10, color: 'var(--muted-2)', marginTop: 4 }}>
                  {it.words.toLocaleString()} words · Reviewers {it.reviewers}
                </div>
              )}
              {type === 'course' && (
                <div className="mono" style={{ fontSize: 10, color: 'var(--muted-2)', marginTop: 4 }}>
                  {it.modules} modules · {it.credits}
                </div>
              )}
              {type === 'quiz' && (
                <div className="mono" style={{ fontSize: 10, color: 'var(--muted-2)', marginTop: 4 }}>
                  {it.questions} questions · {it.passing} pass
                </div>
              )}
            </div>
          ))}
          <div style={{ padding: '14px 18px' }}>
            <button className="btn" style={{ width: '100%' }}>+ New {typeLabel.toLowerCase()}</button>
          </div>
        </aside>

        {/* RIGHT — editor */}
        <main>
          <Editor />
        </main>
      </div>
    </div>
  );
}

window.ScreenAdminContent = ScreenAdminContent;