function DashboardPage({ onNavigate, toast, onStartTour }) {
  const [ackOpen, setAckOpen] = useState(false);
  const [ackDone, setAckDone] = useState(false);
  const [ackChecked, setAckChecked] = useState(false);
  const acknowledge = () => {
    setAckDone(true);
    setAckOpen(false);
    setAckChecked(false);
    toast('Acknowledged — logged to audit record', 'success');
  };

  const kpis = [
    { label: 'Assigned trainings', value: 3, sub: 'Next due Apr 21', delta: null, help: "Courses the compliance team has assigned to you for this reporting period." },
    { label: 'Completed', value: 7, sub: 'FY 2026 to date', delta: null, help: "Trainings you've finished in the current fiscal year." },
    { label: 'Phishing simulations', value: '4 of 5', sub: 'Last: Apr 14', delta: null, help: "Simulated phishing emails you've received and correctly reported this year. Not graded punitively." },
    { label: 'Incident reports filed', value: 2, sub: '1 resolved · 1 open', delta: null, help: "Times you've flagged a suspicious email, lost device, or privacy concern for the security team." },
  ];

  const trainings = [
    { id: 't1', title: 'Recognizing phishing in clinical email', due: 'Due Apr 21, 2026', dueKind: 'soon', progress: 40, action: 'Continue', target: 'lesson', module: 'PHI-201' },
    { id: 't2', title: 'Protecting ePHI on shared workstations', due: 'Due Apr 24, 2026', dueKind: 'ok', progress: 0, action: 'Start', target: 'lesson', module: 'PHI-202' },
    { id: 't3', title: 'Medical device security basics', due: 'Completed Apr 12, 2026', dueKind: 'done', progress: 100, action: 'Review', target: 'lesson', module: 'DEV-101' },
  ];

  return (
    <div className="page-enter">
      <div className="breadcrumbs">
        <a href="#" onClick={e => e.preventDefault()}>Home</a>
        <I.ChevronRight size={10}/>
        <span>My training</span>
      </div>

      <div className="row-between" style={{marginBottom: 16, alignItems: 'flex-start'}}>
        <div>
          <h1>Training dashboard</h1>
          <p className="muted" style={{fontSize: 12.5}}>Cardiology · Ward 3B · Reporting period Apr 1 – Apr 19, 2026</p>
        </div>
        <div style={{display: 'flex', gap: 8, alignItems: 'center'}}>
          <span data-tour="tour-button"><TakeTourButton onClick={onStartTour}/></span>
          <button className="btn btn-outline" onClick={() => onNavigate('incident')}><I.Flag size={13}/> Report incident</button>
          <button className="btn btn-primary" onClick={() => onNavigate('lesson')}><I.BookOpen size={13}/> Continue training</button>
        </div>
      </div>

      <div style={{display: 'flex', gap: 6, marginBottom: 16, flexWrap: 'wrap', fontSize: 11.5, color: 'var(--ink-3)'}}>
        <span className="chip chip-outline">Role · Nurse</span>
        <span className="chip chip-outline">Dept · Cardiology-3B</span>
        <span className="chip chip-outline">Employee ID · SLH-04219</span>
        <span className="chip chip-green" style={{textTransform: 'none', letterSpacing: 0, paddingRight: 4}}>
          Training status · Current
          <HelpIcon title="Compliance status" text="Set to 'Current' when all mandatory training is completed before its deadline."/>
        </span>
      </div>

      <div className="kpi-grid" data-tour="learner-kpis">
        {kpis.map((k, i) => (
          <div key={i} className="kpi">
            <div className="kpi-label">
              {k.label}
              {k.help && <HelpIcon title={k.label} text={k.help}/>}
            </div>
            <div className="kpi-value">{k.value}</div>
            <div className="kpi-sub">{k.sub}</div>
          </div>
        ))}
      </div>

      <div className="split" style={{marginTop: 20, gap: 20}}>
        <div>
          <div className="card" data-tour="learner-list">
            <div className="card-header">
              <div>
                <h3>Assigned training</h3>
                <p className="muted" style={{fontSize: 11.5, marginTop: 2, textTransform: 'none', letterSpacing: 0, fontWeight: 400}}>3 modules · 1 due this week</p>
              </div>
              <a href="#" style={{fontSize: 12, color: 'var(--navy)', fontWeight: 600}} onClick={e => {e.preventDefault(); toast('View all — demo', 'success');}}>View all →</a>
            </div>
            <table className="data-table">
              <thead>
                <tr>
                  <th style={{width: 80}}>Module</th>
                  <th>Title</th>
                  <th style={{width: 120}}>Progress</th>
                  <th style={{width: 140}}>Due date</th>
                  <th style={{width: 110, textAlign: 'right'}}>Action</th>
                </tr>
              </thead>
              <tbody>
                {trainings.map(t => (
                  <tr key={t.id}>
                    <td><span className="mono" style={{fontSize: 11.5, color: 'var(--ink-3)'}}>{t.module}</span></td>
                    <td>
                      <div style={{fontWeight: 600, color: 'var(--navy)'}}>{t.title}</div>
                    </td>
                    <td>
                      <div style={{display: 'flex', alignItems: 'center', gap: 8}}>
                        <div className="progress" style={{flex: 1}}>
                          <div className="progress-bar" style={{width: `${t.progress}%`, background: t.dueKind === 'done' ? 'var(--green)' : 'var(--teal)'}}/>
                        </div>
                        <span style={{fontSize: 11, color: 'var(--ink-3)', minWidth: 32, textAlign: 'right'}}>{t.progress}%</span>
                      </div>
                    </td>
                    <td>
                      <span style={{fontSize: 12, color: t.dueKind === 'soon' ? 'var(--coral-700)' : t.dueKind === 'done' ? 'var(--green)' : 'var(--ink-2)', fontWeight: t.dueKind === 'soon' ? 600 : 400}}>
                        {t.due}
                      </span>
                    </td>
                    <td style={{textAlign: 'right'}}>
                      <button className={`btn btn-sm ${t.dueKind === 'done' ? 'btn-outline' : 'btn-primary'}`} onClick={() => onNavigate(t.target)}>
                        {t.action}
                      </button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          <div className="card" style={{marginTop: 16}}>
            <div className="card-header">
              <div>
                <h3>Upcoming deadlines</h3>
                <p className="muted" style={{fontSize: 11.5, marginTop: 2, textTransform: 'none', letterSpacing: 0, fontWeight: 400}}>Next 30 days</p>
              </div>
              <span className="chip chip-outline"><I.Calendar size={10}/> Apr 19 – May 19</span>
            </div>
            <table className="data-table">
              <thead>
                <tr>
                  <th style={{width: 120}}>Date</th>
                  <th>Item</th>
                  <th style={{width: 160}}>Category</th>
                  <th style={{width: 100}}>Days left</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td className="mono" style={{color: 'var(--coral-700)', fontWeight: 600, fontSize: 12}}>Apr 21, 2026</td>
                  <td style={{fontWeight: 600, color: 'var(--navy)'}}>Phishing training — knowledge check</td>
                  <td>Required training</td>
                  <td><span style={{color: 'var(--coral-700)', fontWeight: 600}}>2 days</span></td>
                </tr>
                <tr>
                  <td className="mono" style={{fontSize: 12}}>Apr 24, 2026</td>
                  <td style={{fontWeight: 600, color: 'var(--navy)'}}>ePHI workstation training</td>
                  <td>Required training</td>
                  <td>5 days</td>
                </tr>
                <tr>
                  <td className="mono" style={{fontSize: 12}}>May 05, 2026</td>
                  <td style={{fontWeight: 600, color: 'var(--navy)'}}>Q2 phishing simulation wave</td>
                  <td>Simulation</td>
                  <td>16 days</td>
                </tr>
                <tr>
                  <td className="mono" style={{fontSize: 12}}>May 16, 2026</td>
                  <td style={{fontWeight: 600, color: 'var(--navy)'}}>Annual HIPAA refresher</td>
                  <td>Policy acknowledgement</td>
                  <td>27 days</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        <div className="stack">
          <div className="card">
            <div className="card-header">
              <h3>Compliance status</h3>
            </div>
            <div className="card-body" style={{padding: 16}}>
              <div style={{display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 10}}>
                <I.CheckCircle size={18} color="var(--green)"/>
                <span style={{fontSize: 14, fontWeight: 600, color: 'var(--navy)'}}>Current</span>
              </div>
              <p style={{fontSize: 12, color: 'var(--ink-2)', lineHeight: 1.55, marginBottom: 12}}>
                All mandatory training requirements for Q2 2026 reporting period are on track. Next review Jun 30, 2026.
              </p>
              <div style={{borderTop: '1px solid var(--border-2)', paddingTop: 10}}>
                <div style={{display: 'flex', justifyContent: 'space-between', fontSize: 11.5, padding: '4px 0'}}>
                  <span style={{color: 'var(--ink-3)'}}>HIPAA Privacy Rule</span>
                  <span style={{color: 'var(--green)', fontWeight: 600}}>Complete</span>
                </div>
                <div style={{display: 'flex', justifyContent: 'space-between', fontSize: 11.5, padding: '4px 0'}}>
                  <span style={{color: 'var(--ink-3)'}}>HIPAA Security Rule</span>
                  <span style={{color: 'var(--green)', fontWeight: 600}}>Complete</span>
                </div>
                <div style={{display: 'flex', justifyContent: 'space-between', fontSize: 11.5, padding: '4px 0'}}>
                  <span style={{color: 'var(--ink-3)'}}>Phishing awareness</span>
                  <span style={{color: 'var(--coral-700)', fontWeight: 600}}>In progress</span>
                </div>
                <div style={{display: 'flex', justifyContent: 'space-between', fontSize: 11.5, padding: '4px 0'}}>
                  <span style={{color: 'var(--ink-3)'}}>Device security</span>
                  <span style={{color: 'var(--green)', fontWeight: 600}}>Complete</span>
                </div>
              </div>
            </div>
          </div>

          <div className="card">
            <div className="card-header">
              <h3>Recent activity</h3>
            </div>
            <div className="card-body" style={{padding: 0}}>
              {[
                { date: 'Apr 14', type: 'Simulation', text: 'Phishing simulation · reported in 18s' },
                { date: 'Apr 12', type: 'Training', text: 'Medical device security — completed' },
                { date: 'Apr 08', type: 'Policy', text: 'Acceptable use v4.0 — acknowledged' },
                { date: 'Apr 03', type: 'Incident', text: 'Report #INC-2026-0384 — closed' },
              ].map((a, i) => (
                <div key={i} style={{padding: '10px 16px', borderBottom: i < 3 ? '1px solid var(--border-2)' : 'none', display: 'grid', gridTemplateColumns: '56px 1fr', gap: 10, alignItems: 'start'}}>
                  <span className="mono" style={{fontSize: 11, color: 'var(--ink-3)'}}>{a.date}</span>
                  <div>
                    <div style={{fontSize: 10.5, textTransform: 'uppercase', letterSpacing: '0.05em', color: 'var(--ink-3)', fontWeight: 600, marginBottom: 2}}>{a.type}</div>
                    <div style={{fontSize: 12.5, color: 'var(--ink-2)'}}>{a.text}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div className="card">
            <div className="card-header">
              <h3>Pending acknowledgements</h3>
              {!ackDone && <span className="chip chip-amber"><I.Clock size={10}/> 1</span>}
              {ackDone && <span className="chip chip-green"><I.CheckCircle size={10}/> All clear</span>}
            </div>
            <div className="card-body" style={{padding: 0}}>
              {!ackDone ? (
                <div style={{padding: '12px 16px', display: 'grid', gridTemplateColumns: '1fr auto', gap: 10, alignItems: 'center'}}>
                  <div>
                    <div style={{fontSize: 13, fontWeight: 600, color: 'var(--navy)'}}>Acceptable Use v4.1</div>
                    <div className="muted" style={{fontSize: 11.5, marginTop: 2}}>Updated Apr 18 · Acknowledge by Apr 25</div>
                  </div>
                  <button className="btn btn-sm btn-primary" onClick={() => setAckOpen(true)}>
                    Review &amp; acknowledge
                  </button>
                </div>
              ) : (
                <div style={{padding: '14px 16px', fontSize: 12.5, color: 'var(--ink-3)'}}>
                  <I.CheckCircle size={13} color="var(--green)" style={{verticalAlign: -2, marginRight: 6}}/>
                  Acceptable Use v4.1 acknowledged. Entry logged to audit record.
                </div>
              )}
            </div>
          </div>

          <div className="callout callout-gray">
            <I.FileText size={14} style={{flexShrink: 0, marginTop: 1}}/>
            <div>
              <div className="callout-title">Policy reminder</div>
              <span style={{fontWeight: 400}}>
                Never share credentials, even with IT. Legitimate support staff will never request your password.
              </span>
            </div>
          </div>
        </div>
      </div>

      {ackOpen && (
        <div className="modal-backdrop" onClick={() => setAckOpen(false)}>
          <div className="modal" onClick={e => e.stopPropagation()} style={{width: 580, maxWidth: '92vw'}}>
            <div style={{padding: '18px 24px', borderBottom: '1px solid var(--border-2)', display: 'flex', alignItems: 'center', justifyContent: 'space-between'}}>
              <div>
                <h2 style={{margin: 0}}>Acceptable Use Policy · v4.1</h2>
                <p className="muted" style={{fontSize: 12.5, marginTop: 4}}>Effective Apr 18, 2026 · Supersedes v4.0</p>
              </div>
              <button className="icon-btn" aria-label="Close" onClick={() => setAckOpen(false)}><I.XCircle size={16}/></button>
            </div>
            <div style={{padding: 24, fontSize: 13.5, lineHeight: 1.65, color: 'var(--ink-2)', maxHeight: '52vh', overflowY: 'auto'}}>
              <p style={{margin: '0 0 12px'}}>
                This policy defines the acceptable use of St. Luke General Hospital information systems, clinical workstations, and ePHI. All staff must acknowledge this policy annually and within 7 days of any material revision.
              </p>
              <p style={{margin: '0 0 12px'}}>
                <b>1. Credentials.</b> Do not share hospital credentials with any party, including IT support. Legitimate IT will never request your password. Report any such request via the Incident flow.
              </p>
              <p style={{margin: '0 0 12px'}}>
                <b>2. Shared workstations.</b> Lock your screen when stepping away, even briefly. Do not connect personal USB devices to clinical endpoints — juice-jacking attacks can exfiltrate data through charging ports.
              </p>
              <p style={{margin: '0 0 12px'}}>
                <b>3. ePHI handling.</b> ePHI leaves clinical systems only through approved channels. Do not include patient names, room numbers, or MRNs in incident descriptions or emails.
              </p>
              <p style={{margin: 0}}>
                <b>4. Changes in v4.1.</b> Updated guidance on mobile device management (MDM) enrollment and new language on vendor access timeouts. See change log on the Compliance intranet.
              </p>
            </div>
            <div style={{padding: '14px 24px', borderTop: '1px solid var(--border-2)', background: 'var(--bg)'}}>
              <label style={{display: 'flex', gap: 10, alignItems: 'center', cursor: 'pointer', fontSize: 13}}>
                <input type="checkbox" checked={ackChecked} onChange={e => setAckChecked(e.target.checked)}/>
                <span>I have read and agree to the Acceptable Use Policy v4.1.</span>
              </label>
            </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={() => setAckOpen(false)}>Cancel</button>
              <button className="btn btn-primary" disabled={!ackChecked} onClick={acknowledge}>
                <I.CheckCircle size={14}/> Acknowledge
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

window.DashboardPage = DashboardPage;