/* Screen — Admin / CMS dashboard
   Internal tooling for editors. Stats, content pipeline, members, audit log. */

function ScreenAdmin() {
  return (
    <div className="wf" style={{ background: 'var(--paper-2)', minHeight: '100vh' }}>
      {/* Admin nav (distinct from public NavBar) */}
      <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={{ borderBottom: '1.5px solid var(--paper)', paddingBottom: 2 }}>Overview</span>
          <span style={{ opacity: 0.7 }}>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 0' }}>
        <div className="sec-tag" style={{ marginBottom: 4 }}>Editorial · Tuesday, May 12</div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
          <div className="hand" style={{ fontSize: 38, lineHeight: 1 }}>Overview</div>
          <div style={{ display: 'flex', gap: 8 }}>
            <button className="btn">⤓ Export</button>
            <button className="btn">+ New article</button>
            <button className="btn btn-primary">+ New course</button>
          </div>
        </div>
      </div>

      {/* Stats row */}
      <div style={{ padding: '20px 28px 0', display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 12 }}>
        {[
          { l: 'Published items', v: '5,108', d: '+ 42 this week' },
          { l: 'In review', v: '38', d: '12 overdue', warn: true },
          { l: 'Active members', v: '14,206', d: '+ 230 / wk' },
          { l: 'MRR', v: '$282K', d: '+ 3.4% MoM' },
          { l: 'CME credits issued', v: '94,820', d: '2026 cycle' },
        ].map((s, i) => (
          <div key={i} className="wf-border" style={{ padding: 14, background: 'var(--paper)' }}>
            <div className="sec-tag" style={{ marginBottom: 4 }}>{s.l}</div>
            <div className="hand" style={{ fontSize: 28, lineHeight: 1 }}>{s.v}</div>
            <div className="mono" style={{ fontSize: 11, color: s.warn ? 'var(--warn)' : 'var(--muted)', marginTop: 4 }}>{s.d}</div>
          </div>
        ))}
      </div>

      {/* Content pipeline (kanban) */}
      <div style={{ padding: '28px 28px 0' }}>
        <SectionHead tag="Content pipeline" title="Editorial board · Q2 2026" action="Open board →" />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
          {[
            {
              col: 'Drafting · 14',
              items: [
                { t: 'Lecanemab in clinic — 6-month data', a: 'M. Ahuja', d: 'Neurology · article' },
                { t: 'AKI biomarkers: when (and when not)', a: 'S. Patel', d: 'Nephrology · article' },
                { t: 'Cardio-renal syndromes (3 modules)', a: 'P. Reyes', d: 'Cardiology · course' },
              ]
            },
            {
              col: 'Peer review · 12',
              items: [
                { t: 'HFpEF phenotypes &amp; pathways', a: 'P. Reyes', d: 'CME · 1.5h · awaiting 2/3 reviewers', warn: true },
                { t: 'Sepsis bundles 2026', a: 'L. Okafor', d: 'Critical Care · article' },
                { t: 'GLP-1 oral · obesity', a: 'J. Ito', d: 'Endo · news brief' },
              ]
            },
            {
              col: 'Copy + accreditation · 7',
              items: [
                { t: 'AMS in 2026 — full course', a: 'Stewardship Team', d: 'ID · ACCME packet attached' },
                { t: 'Ketamine for TRD', a: 'R. Mehta', d: 'Psych · awaiting CoI form', warn: true },
              ]
            },
            {
              col: 'Scheduled · 9',
              items: [
                { t: 'RSV under-twos · update', a: 'T. Choi', d: 'Publishes May 14 · 09:00 ET' },
                { t: 'Door-to-needle in 30', a: 'EM Editorial', d: 'Publishes May 16' },
                { t: 'The Rounds · issue 219', a: 'Editorial', d: 'Publishes Sun · auto' },
              ]
            },
          ].map((col, ci) => (
            <div key={ci} className="wf-border" style={{ padding: 12, background: 'var(--paper)' }}>
              <div className="sec-tag" style={{ marginBottom: 8 }}>{col.col}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                {col.items.map((it, j) => (
                  <div key={j} className="wf-border-thin" style={{ padding: 10, background: it.warn ? 'var(--paper-2)' : 'var(--paper)' }}>
                    <div className="hand" style={{ fontSize: 16, lineHeight: 1.1 }}>{it.t}</div>
                    <div className="mono" style={{ fontSize: 11, color: 'var(--muted)', marginTop: 4 }}>{it.a}</div>
                    <div style={{ fontSize: 12, color: it.warn ? 'var(--warn)' : 'var(--ink-2)', marginTop: 4 }}>{it.d}</div>
                  </div>
                ))}
                <button className="btn" style={{ fontSize: 12, padding: '4px 8px' }}>+ add</button>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Two columns: members table + accreditation status */}
      <div style={{ padding: '28px 28px', display: 'grid', gridTemplateColumns: '1.7fr 1fr', gap: 20 }}>
        <div>
          <SectionHead tag="Members" title="Recent signups" action="All members →" />
          <div className="wf-border" style={{ background: 'var(--paper)', padding: '0 14px' }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr 70px', gap: 14, padding: '10px 0', borderBottom: '1.5px solid var(--ink)', fontFamily: 'JetBrains Mono', fontSize: 11, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: 1.2 }}>
              <span>Name / email</span><span>Role</span><span>Institution</span><span>Plan</span><span>·</span>
            </div>
            {[
              { n: 'Maya Chen', e: 'm.chen@stanford-med.edu', r: 'Student · MS-2', i: 'Stanford SoM', p: 'Free (verified .edu)', flag: 'NEW' },
              { n: 'Dr. Ravi Iyer', e: 'r.iyer@uchicagomed.org', r: 'Practitioner · IM', i: 'UChicago Med', p: 'Practitioner · trial' },
              { n: 'Sarah Kim, NP', e: 'skim@mtsinai.org', r: 'Nurse · NP', i: 'Mt Sinai', p: 'Practitioner' },
              { n: 'Dr. Amos Klein', e: 'a.klein@kaiser.org', r: 'Practitioner · ED', i: 'Kaiser Permanente', p: 'Institution · 240 seats' },
              { n: 'Lisa Park', e: 'lpark@hopkins.edu', r: 'Resident · PGY-2', i: 'Johns Hopkins', p: 'Free (verified .edu)' },
              { n: 'Dr. Y. Tanaka', e: 'y.tanaka@osakam.jp', r: 'Practitioner · Cards', i: 'Osaka U', p: 'Practitioner', flag: 'INTL' },
            ].map((u, i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr 70px', gap: 14, padding: '12px 0', borderBottom: '1px dashed var(--hatch)', alignItems: 'center', fontSize: 13 }}>
                <div>
                  <div className="hand" style={{ fontSize: 16, lineHeight: 1 }}>{u.n} {u.flag && <span className="stamp" style={{ fontSize: 9, marginLeft: 4 }}>{u.flag}</span>}</div>
                  <div className="mono" style={{ fontSize: 11, color: 'var(--muted)' }}>{u.e}</div>
                </div>
                <span>{u.r}</span>
                <span>{u.i}</span>
                <span>{u.p}</span>
                <span className="hand" style={{ fontSize: 18, color: 'var(--sky-deep)', textAlign: 'right' }}>···</span>
              </div>
            ))}
          </div>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div className="wf-border" style={{ padding: 16, background: 'var(--paper)' }}>
            <div className="sec-tag" style={{ marginBottom: 8 }}>Accreditation</div>
            {[
              { l: 'ACCME · re-accreditation', d: 'Nov 2027', pct: 70 },
              { l: 'AANP', d: 'Active', pct: 100 },
              { l: 'ANCC · nursing CE', d: 'May 2028', pct: 85 },
              { l: 'AAFP prescribed', d: 'Sep 2026', pct: 55, warn: true },
            ].map((a, i) => (
              <div key={i} style={{ padding: '8px 0', borderTop: i ? '1px dashed var(--hatch)' : 'none' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <span style={{ fontSize: 14 }}>{a.l}</span>
                  <span className="mono" style={{ fontSize: 11, color: a.warn ? 'var(--warn)' : 'var(--muted)' }}>{a.d}</span>
                </div>
                <div className="wf-rule" style={{ background: 'var(--hatch)', marginTop: 6 }}>
                  <div style={{ width: `${a.pct}%`, height: 4, background: a.warn ? 'var(--warn)' : 'var(--sky-deep)', borderRadius: 2 }} />
                </div>
              </div>
            ))}
          </div>

          <div className="wf-border-soft" style={{ padding: 14, background: 'var(--paper)' }}>
            <div className="sec-tag" style={{ marginBottom: 8 }}>Needs your eye</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, fontSize: 13 }}>
              <div style={{ display: 'flex', gap: 8 }}><span className="stamp stamp-warn">!</span><span>12 reviews overdue &gt; 7 days</span></div>
              <div style={{ display: 'flex', gap: 8 }}><span className="stamp stamp-warn">!</span><span>3 articles missing CoI forms</span></div>
              <div style={{ display: 'flex', gap: 8 }}><span className="stamp">i</span><span>AAFP renewal packet due in 4 months</span></div>
              <div style={{ display: 'flex', gap: 8 }}><span className="stamp">i</span><span>140 students awaiting .edu verification</span></div>
            </div>
          </div>
        </div>
      </div>

      {/* Audit log */}
      <div style={{ padding: '0 28px 36px' }}>
        <SectionHead tag="Audit log" title="System activity" action="Full log →" />
        <div className="wf-border" style={{ background: 'var(--paper)', padding: '6px 18px' }}>
          {[
            { t: '11:42', who: 'p.reyes', a: 'PUBLISHED', what: 'HFpEF phenotypes & pathways', d: 'Article · CME · 1.5h' },
            { t: '11:18', who: 'system', a: 'EXPORT', what: '2,140 CME transcripts → state boards', d: 'CA · NY · TX · IL · WA · scheduled batch' },
            { t: '10:55', who: 'r.mehta', a: 'EDITED', what: 'Ketamine for TRD · v7', d: 'Sections 3, 4 · awaiting CoI' },
            { t: '09:30', who: 'system', a: 'EMAIL', what: 'The Rounds · issue 218 → 14,200 members', d: 'Delivered · 38% open · 9% click' },
            { t: 'Yesterday', who: 'admin', a: 'ROLE CHANGE', what: 'l.okafor → Senior editor', d: 'Critical Care section' },
            { t: 'Yesterday', who: 'system', a: 'BILLING', what: '230 trials converted to paid', d: '$5,520 added to MRR' },
          ].map((r, i) => (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: '70px 100px 120px 1fr 1fr', gap: 12, padding: '10px 0', borderTop: i ? '1px dashed var(--hatch)' : 'none', fontSize: 13, alignItems: 'center' }}>
              <span className="mono" style={{ color: 'var(--muted)', fontSize: 11 }}>{r.t}</span>
              <span className="mono" style={{ fontSize: 11 }}>{r.who}</span>
              <span><span className="stamp">{r.a}</span></span>
              <span className="hand" style={{ fontSize: 16 }}>{r.what}</span>
              <span style={{ color: 'var(--ink-2)', fontSize: 12 }}>{r.d}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

window.ScreenAdmin = ScreenAdmin;