function ManagerPage({ onNavigate, toast, onStartTour }) {
  const deptData = [
    { name: 'Nursing', value: 92 },
    { name: 'Radiology', value: 88 },
    { name: 'Lab', value: 84 },
    { name: 'Pharmacy', value: 79 },
    { name: 'Front Desk', value: 73 },
    { name: 'Admin', value: 96 },
  ];
  const simData = [
    { label: 'Nov', click: 14.2 },
    { label: 'Dec', click: 11.8 },
    { label: 'Jan', click: 9.6 },
    { label: 'Feb', click: 8.4 },
    { label: 'Mar', click: 9.3 },
    { label: 'Apr', click: 6.2 },
  ];
  const followup = [
    { name: 'Nino Tatishvili', role: 'Nurse · Cardiology-3B', overdue: 'Phishing training', result: 'Clicked · 2 campaigns', days: 7 },
    { name: 'Dr. Luka Gelashvili', role: 'Radiologist', overdue: 'ePHI workstation', result: 'Reported late (3m 42s)', days: 4 },
    { name: 'Irakli Maisuradze', role: 'Lab Tech', overdue: 'Device security basics', result: 'Passed', days: 11 },
    { name: 'Salome Kipiani', role: 'Pharmacy', overdue: 'HIPAA refresher', result: 'Not tested yet', days: 14 },
    { name: 'Giorgi Tsereteli', role: 'Admissions', overdue: 'Phishing + HIPAA', result: 'Clicked · 1 campaign', days: 9 },
  ];

  // Bar chart geometry
  const W = 560, H = 220, pad = { l: 36, r: 20, t: 16, b: 36 };
  const maxBar = 100;
  const bw = (W - pad.l - pad.r) / deptData.length;

  // Line chart geometry
  const LW = 560, LH = 200, lpad = { l: 36, r: 20, t: 20, b: 36 };
  const maxLine = 20;
  const px = (i) => lpad.l + (i / (simData.length - 1)) * (LW - lpad.l - lpad.r);
  const py = (v) => lpad.t + (1 - v / maxLine) * (LH - lpad.t - lpad.b);
  const linePath = simData.map((d, i) => `${i === 0 ? 'M' : 'L'} ${px(i)} ${py(d.click)}`).join(' ');
  const areaPath = `${linePath} L ${px(simData.length - 1)} ${LH - lpad.b} L ${px(0)} ${LH - lpad.b} Z`;

  return (
    <div className="page-enter">
      <div className="row-between" style={{marginBottom: 20}}>
        <div>
          <h1>Compliance Dashboard</h1>
          <p className="muted">Cross-ward cybersecurity posture · St. Luke General Hospital · Q2 2026</p>
        </div>
        <div style={{display: 'flex', gap: 8, alignItems: 'center'}}>
          <span data-tour="tour-button"><TakeTourButton onClick={onStartTour}/></span>
          <span data-tour="manager-export" style={{display: 'inline-flex', gap: 8}}>
            <button className="btn btn-outline" onClick={() => toast('Audit-ready evidence exported (CSV)', 'success')}><I.Download size={14}/> CSV</button>
            <button className="btn btn-outline" onClick={() => toast('Audit-ready evidence exported (PDF)', 'success')}><I.FileText size={14}/> PDF</button>
          </span>
          <button className="btn btn-primary"><I.Plus size={14}/> New campaign</button>
        </div>
      </div>

      <div style={{display: 'flex', gap: 8, marginBottom: 24, flexWrap: 'wrap'}}>
        <span className="chip chip-navy">All wards</span>
        <span className="chip chip-outline">Last 30 days</span>
        <span className="chip chip-outline"><I.Filter size={12}/> Filters</span>
      </div>

      <div className="kpi-grid" data-tour="manager-kpis">
        <div className="kpi">
          <div className="kpi-label">Active learners</div>
          <div className="kpi-value">142</div>
          <div className="kpi-sub"><I.TrendingUp size={12} color="var(--green)"/> +12 since March</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Completion rate</div>
          <div className="kpi-value">87%</div>
          <div className="kpi-sub"><I.TrendingUp size={12} color="var(--green)"/> +4% vs Q1</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">
            Phishing click rate
            <HelpIcon title="Phishing click rate" text="Percentage of staff who clicked a simulated phishing link. Industry benchmark: under 10%."/>
          </div>
          <div className="kpi-value">6.2%</div>
          <div className="kpi-sub"><I.TrendingDown size={12} color="var(--green)"/> −3.1% vs last month</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">
            Avg time to report
            <HelpIcon title="Avg time to report" text="Average seconds between receiving a simulated phishing email and reporting it."/>
          </div>
          <div className="kpi-value">22s</div>
          <div className="kpi-sub"><I.TrendingDown size={12} color="var(--green)"/> −8s vs last month</div>
        </div>
      </div>

      <div className="card phase2-card" style={{marginTop: 24}}>
        <div className="card-header">
          <div style={{display: 'flex', alignItems: 'center', gap: 10}}>
            <h2 style={{margin: 0}}>Executive summary</h2>
            <Phase2Badge/>
          </div>
          <button className="btn btn-sm btn-outline phase2-disabled" onClick={() => toast('Available in Phase 2', 'success')}>
            <I.Compass size={12}/> Generate summary
          </button>
        </div>
        <div className="card-body phase2-body" style={{padding: 18, fontSize: 13.5, lineHeight: 1.65, color: 'var(--ink-2)'}}>
          <em>Phase 2 will summarize this quarter's compliance posture, highlight risk clusters by department, and draft manager briefings</em> — with human review before sharing. The current release keeps the numeric metrics above deterministic so that audit evidence remains independent of any model output.
        </div>
      </div>

      <div className="grid-2" style={{marginTop: 20, gap: 20}}>
        <div className="card" data-tour="manager-dept">
          <div className="card-header">
            <div>
              <h2 style={{margin: 0}}>Completion by department</h2>
              <p className="muted" style={{fontSize: 12, marginTop: 2}}>Required assignments, last 30 days</p>
            </div>
            <span className="chip chip-outline">Target 85%</span>
          </div>
          <div className="card-body">
            <svg className="chart" viewBox={`0 0 ${W} ${H}`} role="img" aria-label="Completion by department bar chart">
              <g className="chart-grid">
                {[0, 25, 50, 75, 100].map(v => (
                  <line key={v} x1={pad.l} x2={W - pad.r} y1={pad.t + (1 - v / maxBar) * (H - pad.t - pad.b)} y2={pad.t + (1 - v / maxBar) * (H - pad.t - pad.b)}/>
                ))}
              </g>
              <g className="chart-axis">
                {[0, 25, 50, 75, 100].map(v => (
                  <text key={v} x={pad.l - 6} y={pad.t + (1 - v / maxBar) * (H - pad.t - pad.b) + 3} textAnchor="end">{v}</text>
                ))}
              </g>
              {/* target line */}
              <line x1={pad.l} x2={W - pad.r} y1={pad.t + (1 - 85 / maxBar) * (H - pad.t - pad.b)} y2={pad.t + (1 - 85 / maxBar) * (H - pad.t - pad.b)} stroke="var(--coral)" strokeWidth="1" strokeDasharray="4 3"/>
              {deptData.map((d, i) => {
                const h = (d.value / maxBar) * (H - pad.t - pad.b);
                const x = pad.l + i * bw + 8;
                const y = H - pad.b - h;
                const below = d.value < 85;
                return (
                  <g key={d.name}>
                    <rect x={x} y={y} width={bw - 16} height={h} rx="4" fill={below ? 'var(--coral)' : 'var(--teal)'} opacity={0.85}/>
                    <text x={x + (bw - 16)/2} y={y - 6} textAnchor="middle" fontSize="11" fill="var(--navy)" fontWeight="600">{d.value}%</text>
                    <text x={x + (bw - 16)/2} y={H - pad.b + 16} textAnchor="middle" fontSize="11" fill="var(--ink-3)">{d.name}</text>
                  </g>
                );
              })}
            </svg>
            <div style={{display: 'flex', gap: 16, fontSize: 12, color: 'var(--ink-3)', marginTop: 8}}>
              <span><span style={{display: 'inline-block', width: 10, height: 10, background: 'var(--teal)', borderRadius: 2, marginRight: 6, verticalAlign: -1}}/>At target</span>
              <span><span style={{display: 'inline-block', width: 10, height: 10, background: 'var(--coral)', borderRadius: 2, marginRight: 6, verticalAlign: -1}}/>Below 85% target</span>
            </div>
          </div>
        </div>

        <div className="card" data-tour="manager-phish">
          <div className="card-header">
            <div>
              <h2 style={{margin: 0}}>Phishing click rate · 6 campaigns</h2>
              <p className="muted" style={{fontSize: 12, marginTop: 2}}>Lower is better</p>
            </div>
            <span className="chip chip-green"><I.TrendingDown size={12}/> Trending down</span>
          </div>
          <div className="card-body">
            <svg className="chart" viewBox={`0 0 ${LW} ${LH}`} role="img" aria-label="Phishing click rate line chart">
              <defs>
                <linearGradient id="lineFill" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stopColor="#0F9D9B" stopOpacity="0.25"/>
                  <stop offset="100%" stopColor="#0F9D9B" stopOpacity="0"/>
                </linearGradient>
              </defs>
              <g className="chart-grid">
                {[0, 5, 10, 15, 20].map(v => (
                  <line key={v} x1={lpad.l} x2={LW - lpad.r} y1={py(v)} y2={py(v)}/>
                ))}
              </g>
              <g className="chart-axis">
                {[0, 5, 10, 15, 20].map(v => (
                  <text key={v} x={lpad.l - 6} y={py(v) + 3} textAnchor="end">{v}%</text>
                ))}
                {simData.map((d, i) => (
                  <text key={d.label} x={px(i)} y={LH - lpad.b + 16} textAnchor="middle">{d.label}</text>
                ))}
              </g>
              <path d={areaPath} fill="url(#lineFill)"/>
              <path d={linePath} fill="none" stroke="var(--teal)" strokeWidth="2.5"/>
              {simData.map((d, i) => {
                // All labels sit ABOVE the dot (never below, so they never cut
                // the line). First point offsets right (clears the y-axis text),
                // last point offsets left (keeps inside the plot area), middle
                // points center on the dot.
                const labelText = `${d.click}%`;
                const cx = px(i);
                const cy = py(d.click);
                const isFirst = i === 0;
                const isLast = i === simData.length - 1;
                const textWidth = labelText.length * 6.3 + 4;
                const labelX = isFirst ? cx + 8 : isLast ? cx - 8 : cx;
                const labelY = cy - 12;
                const anchor = isFirst ? 'start' : isLast ? 'end' : 'middle';
                const pillX = isFirst ? labelX - 2 : isLast ? labelX - textWidth + 2 : labelX - textWidth / 2;
                return (
                  <g key={i}>
                    <circle cx={cx} cy={cy} r="4" fill="white" stroke="var(--teal)" strokeWidth="2"/>
                    <rect x={pillX} y={labelY - 10} width={textWidth} height={14} fill="white" rx="2"/>
                    <text x={labelX} y={labelY} textAnchor={anchor} fontSize="11" fill="var(--navy)" fontWeight="600">{labelText}</text>
                  </g>
                );
              })}
            </svg>
          </div>
        </div>
      </div>

      <div className="card" data-tour="manager-followup" style={{marginTop: 20}}>
        <div className="card-header">
          <div>
            <h2 style={{margin: 0}}>Staff needing follow-up</h2>
            <p className="muted" style={{fontSize: 12, marginTop: 2}}>5 of 142 learners · ordered by overdue days</p>
          </div>
          <button className="btn btn-sm btn-outline"><I.Filter size={12}/> Filter</button>
        </div>
        <table className="data-table">
          <thead>
            <tr>
              <th>Staff member</th>
              <th>Overdue training</th>
              <th>Last phishing result</th>
              <th>Days overdue</th>
              <th style={{textAlign: 'right'}}>Action</th>
            </tr>
          </thead>
          <tbody>
            {followup.map((r, i) => (
              <tr key={i}>
                <td>
                  <div style={{display: 'flex', gap: 10, alignItems: 'center'}}>
                    <div style={{width: 32, height: 32, borderRadius: '50%', background: 'var(--bg)', display: 'grid', placeItems: 'center', color: 'var(--ink-2)', fontSize: 11, fontWeight: 600}}>
                      {r.name.split(' ').map(s => s[0]).join('').slice(0, 2).toUpperCase()}
                    </div>
                    <div>
                      <div style={{fontWeight: 600, color: 'var(--navy)'}}>{r.name}</div>
                      <div className="muted" style={{fontSize: 12}}>{r.role}</div>
                    </div>
                  </div>
                </td>
                <td>{r.overdue}</td>
                <td>
                  {r.result.startsWith('Clicked') ? <span className="chip chip-coral"><I.AlertTriangle size={11}/> {r.result}</span>
                    : r.result.startsWith('Passed') ? <span className="chip chip-green"><I.CheckCircle size={11}/> {r.result}</span>
                    : r.result.startsWith('Reported late') ? <span className="chip chip-amber"><I.Clock size={11}/> {r.result}</span>
                    : <span className="chip chip-outline">{r.result}</span>}
                </td>
                <td><b style={{color: r.days > 10 ? 'var(--coral)' : 'var(--navy)'}}>{r.days}</b> days</td>
                <td style={{textAlign: 'right'}}>
                  <button className="btn btn-sm btn-outline" onClick={() => toast(`Reminder sent to ${r.name.split(' ')[0]}`, 'success')}>
                    <I.Send size={12}/> Send reminder
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

window.ManagerPage = ManagerPage;