// Dashboard, Skill Matrix, Nurse Detail, Login
const { useState: _us1 } = React;

// ===================== Login =====================
const LoginScreen = ({ onEnter }) => {
  const hasSupabase = !!window.supabaseClient;
  const [mode, setMode]         = _us1('login'); // 'login' | 'register'
  const [email, setEmail]       = _us1('');
  const [password, setPassword] = _us1('');
  const [loading, setLoading]   = _us1(false);
  const [err, setErr]           = _us1('');

  // ── Register state ──
  const [reg, setReg] = _us1({ title: 'น.ส.', name: '', email: '', password: '', confirm: '', position: 'rn', years: '' });
  const [regLoading, setRegLoading] = _us1(false);
  const [regErr, setRegErr] = _us1('');
  const [regDone, setRegDone] = _us1(false);
  const setR = (k, v) => setReg(p => ({ ...p, [k]: v }));

  async function handleRegister(e) {
    e.preventDefault();
    if (!reg.name.trim()) { setRegErr('กรุณากรอกชื่อ-นามสกุล'); return; }
    if (!reg.email.trim()) { setRegErr('กรุณากรอกอีเมล'); return; }
    if (reg.password.length < 4) { setRegErr('รหัสผ่านต้องมีอย่างน้อย 4 ตัวอักษร'); return; }
    if (reg.password !== reg.confirm) { setRegErr('รหัสผ่านไม่ตรงกัน'); return; }
    setRegLoading(true); setRegErr('');
    try {
      const res = await fetch('/api/auth/register', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          name: reg.name.trim(), title: reg.title,
          email: reg.email.trim(), password: reg.password,
          position: reg.position, years_experience: reg.years || 0,
        }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || 'สมัครไม่สำเร็จ');
      setRegDone(true);
    } catch (ex) {
      setRegErr(ex.message);
    }
    setRegLoading(false);
  }

  async function handleLogin(e) {
    e.preventDefault();
    setLoading(true);
    setErr('');
    try {
      const data = await window.DB.auth.signIn(email, password);
      const profile = await window.DB.auth.getProfile(data.user.id);
      const role    = profile?.role    || 'supervisee';
      const staffId = profile?.staff_id || 'n11';
      onEnter(role, staffId);
    } catch (ex) {
      setErr(ex.message || 'ล็อกอินไม่สำเร็จ กรุณาตรวจสอบอีเมลและรหัสผ่าน');
    }
    setLoading(false);
  }

  const Hero = () => (
    <div className="login-hero">
      <div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 28 }}>
          <div style={{ width: 44, height: 44, borderRadius: 11, background: 'rgba(255,255,255,0.15)', display: 'grid', placeItems: 'center', fontWeight: 700, fontSize: 18 }}>ห</div>
          <div style={{ fontSize: 13, opacity: 0.9 }}>โรงพยาบาลศรีสะเกษ</div>
        </div>
        <h2>การนิเทศทางการพยาบาล<small>งานห้องคลอด · Labor Room Supervision</small></h2>
        <p className="tagline">ระบบติดตามสมรรถนะ วางแผนการนิเทศ และประเมินทักษะของพยาบาลห้องคลอด</p>
      </div>
      <div className="login-features">
        <div className="login-feature"><span className="dot" /><span>Competency tracking ครอบคลุม 5 ด้านเฉพาะห้องคลอด</span></div>
        <div className="login-feature"><span className="dot" /><span>Digital checklist 360° ครบทุก protocol</span></div>
        <div className="login-feature"><span className="dot" /><span>RCA · M&M case review เชื่อมโยงกับการแก้ไขระบบ</span></div>
      </div>
    </div>
  );

  const inputSt = { padding: '10px 12px', borderRadius: 8, border: '1.5px solid var(--border)', fontSize: 14, background: 'var(--surface)', color: 'var(--ink)' };

  if (hasSupabase) {
    return (
      <div className="login">
        <div className="login-card">
          <Hero />
          <div className="login-form">

            {/* ── REGISTER SUCCESS ── */}
            {mode === 'register' && regDone ? (
              <div style={{ textAlign: 'center' }}>
                <div style={{ fontSize: 52, marginBottom: 12 }}>✅</div>
                <h3 style={{ margin: '0 0 8px' }}>สมัครสำเร็จ!</h3>
                <p className="sub" style={{ marginBottom: 20 }}>บัญชีของคุณถูกสร้างแล้ว<br />เข้าสู่ระบบด้วยอีเมลและรหัสผ่านที่กำหนด</p>
                <button className="btn btn-primary" style={{ width: '100%', padding: 12, fontSize: 15, fontWeight: 600 }}
                  onClick={() => { setMode('login'); setEmail(reg.email); setRegDone(false); }}>
                  เข้าสู่ระบบ →
                </button>
              </div>

            /* ── REGISTER FORM ── */
            ) : mode === 'register' ? (
              <>
                <h3>สมัครใช้งาน</h3>
                <p className="sub">สำหรับบุคลากรห้องคลอด โรงพยาบาลศรีสะเกษ</p>
                <form onSubmit={handleRegister} style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                  <div style={{ display: 'grid', gridTemplateColumns: '90px 1fr', gap: 8 }}>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                      <label style={{ fontSize: 13, fontWeight: 500 }}>คำนำหน้า</label>
                      <select value={reg.title} onChange={e => setR('title', e.target.value)} style={inputSt}>
                        {['นาง','น.ส.','นาย','ว่าที่ ร.ต.'].map(t => <option key={t} value={t}>{t}</option>)}
                      </select>
                    </div>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                      <label style={{ fontSize: 13, fontWeight: 500 }}>ชื่อ-นามสกุล *</label>
                      <input value={reg.name} onChange={e => setR('name', e.target.value)} placeholder="สมใจ มีใจดี" style={inputSt} />
                    </div>
                  </div>
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                      <label style={{ fontSize: 13, fontWeight: 500 }}>ตำแหน่ง</label>
                      <select value={reg.position} onChange={e => setR('position', e.target.value)} style={inputSt}>
                        <option value="snr_special">พยาบาลวิชาชีพชำนาญการพิเศษ</option>
                        <option value="snr">พยาบาลวิชาชีพชำนาญการ</option>
                        <option value="rn">พยาบาลวิชาชีพ</option>
                        <option value="operational">พยาบาลวิชาชีพปฏิบัติการ</option>
                        <option value="assistant">ผู้ช่วยพยาบาล</option>
                        <option value="aide">พนักงานช่วยเหลือคนไข้</option>
                      </select>
                    </div>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                      <label style={{ fontSize: 13, fontWeight: 500 }}>ประสบการณ์ (ปี)</label>
                      <input type="number" min={0} max={40} value={reg.years} onChange={e => setR('years', e.target.value)} placeholder="0" style={inputSt} />
                    </div>
                  </div>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                    <label style={{ fontSize: 13, fontWeight: 500 }}>อีเมล *</label>
                    <input type="email" required value={reg.email} onChange={e => setR('email', e.target.value)} placeholder="nurse@sskh.go.th" style={inputSt} />
                  </div>
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                      <label style={{ fontSize: 13, fontWeight: 500 }}>รหัสผ่าน *</label>
                      <input type="password" value={reg.password} onChange={e => setR('password', e.target.value)} placeholder="อย่างน้อย 4 ตัวอักษร" style={inputSt} />
                    </div>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                      <label style={{ fontSize: 13, fontWeight: 500 }}>ยืนยันรหัสผ่าน *</label>
                      <input type="password" value={reg.confirm} onChange={e => setR('confirm', e.target.value)} placeholder="พิมพ์อีกครั้ง" style={inputSt} />
                    </div>
                  </div>
                  {regErr && <div style={{ background: '#fee2e2', color: '#991b1b', borderRadius: 8, padding: '10px 12px', fontSize: 13 }}>{regErr}</div>}
                  <button type="submit" className="btn btn-primary" disabled={regLoading} style={{ padding: 12, fontSize: 15, fontWeight: 600 }}>
                    {regLoading ? 'กำลังสมัคร…' : 'สมัครใช้งาน'}
                  </button>
                </form>
                <div style={{ textAlign: 'center', marginTop: 16 }}>
                  <span className="muted txt-sm">มีบัญชีแล้ว? </span>
                  <button onClick={() => setMode('login')} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--c-primary)', fontWeight: 600, fontSize: 13 }}>เข้าสู่ระบบ</button>
                </div>
              </>

            /* ── LOGIN FORM ── */
            ) : (
              <>
                <h3>เข้าสู่ระบบ</h3>
                <p className="sub">ใช้อีเมลและรหัสผ่านที่ได้รับหรือสมัครไว้</p>
                <form onSubmit={handleLogin} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                    <label style={{ fontSize: 13, fontWeight: 500 }}>อีเมล</label>
                    <input type="email" required autoComplete="email" value={email} onChange={e => setEmail(e.target.value)} placeholder="nurse@sskh.go.th" style={inputSt} />
                  </div>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                    <label style={{ fontSize: 13, fontWeight: 500 }}>รหัสผ่าน</label>
                    <input type="password" required autoComplete="current-password" value={password} onChange={e => setPassword(e.target.value)} placeholder="••••••••" style={inputSt} />
                  </div>
                  {err && (
                    <div style={{ background: '#fee2e2', color: '#991b1b', borderRadius: 8, padding: '10px 12px', fontSize: 13 }}>
                      {err}
                      {err.includes('localhost') && (
                        <div style={{ marginTop: 8 }}>
                          <a href="http://localhost:3000" style={{ color: '#991b1b', fontWeight: 700, textDecoration: 'underline' }}>→ คลิกที่นี่เพื่อเปิดผ่าน http://localhost:3000</a>
                        </div>
                      )}
                    </div>
                  )}
                  <button type="submit" className="btn btn-primary" disabled={loading} style={{ padding: '12px', fontSize: 15, fontWeight: 600 }}>
                    {loading ? 'กำลังเข้าสู่ระบบ…' : 'เข้าสู่ระบบ'}
                  </button>
                </form>
                <div style={{ textAlign: 'center', marginTop: 16 }}>
                  <span className="muted txt-sm">ยังไม่มีบัญชี? </span>
                  <button onClick={() => setMode('register')} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--c-primary)', fontWeight: 600, fontSize: 13 }}>สมัครใช้งาน</button>
                </div>
                <div className="divider" />
                <div className="muted txt-xs" style={{ textAlign: 'center' }}>
                  PDPA Compliant · v1.0 · SQLite · <a href="http://localhost:3000" style={{ color: 'inherit' }}>localhost:3000</a>
                </div>
              </>
            )}
          </div>
        </div>
      </div>
    );
  }

  // Demo mode: original role picker
  return (
    <div className="login">
      <div className="login-card">
        <Hero />
        <div className="login-form">
          <h3>เข้าสู่ระบบ</h3>
          <p className="sub">เลือกบทบาทเพื่อเริ่มต้นใช้งาน <span style={{ background: '#fef9c3', color: '#92400e', padding: '2px 8px', borderRadius: 4, fontSize: 11 }}>Demo Mode</span></p>
          <div className="role-pick">
            <div className="role-pick-item" onClick={() => onEnter('dept_head', 'n01')}>
              <div className="role-ic"><Icon name="target" /></div>
              <div style={{ flex: 1 }}>
                <h4>Supervisor</h4>
                <span>หัวหน้าหอผู้ป่วย · APN · พยาบาลนิเทศ</span>
              </div>
              <Icon name="chevronRight" size={16} />
            </div>
            <div className="role-pick-item" onClick={() => onEnter('supervisee', 'n11')}>
              <div className="role-ic"><Icon name="user" /></div>
              <div style={{ flex: 1 }}>
                <h4>Supervisee</h4>
                <span>พยาบาลผู้รับการนิเทศ · พยาบาลจบใหม่</span>
              </div>
              <Icon name="chevronRight" size={16} />
            </div>
          </div>
          <div className="divider" />
          <div className="muted txt-xs" style={{ textAlign: 'center' }}>
            PDPA Compliant · v1.0 — ตั้งค่า supabase-config.js เพื่อใช้งานจริง
          </div>
        </div>
      </div>
    </div>
  );
};

// ── Export helper ────────────────────────────────────────────
function exportDashboardCSV() {
  const now  = new Date();
  const date = now.toLocaleDateString('th-TH', { year:'numeric', month:'long', day:'numeric' });
  const rows = [];

  const add  = (...cols) => rows.push(cols);
  const sep  = () => rows.push([]);

  add('รายงานภาพรวมการนิเทศทางการพยาบาล');
  add('โรงพยาบาลศรีสะเกษ · งานห้องคลอด');
  add('วันที่ออกรายงาน', date);
  sep();

  add('== ตัวชี้วัดหลัก ==');
  add('อัตราการนิเทศได้ตามแผน', D.KPIS.supervisionRate + '%', 'เป้า', D.KPIS.targetRate + '%');
  add('นิเทศที่ดำเนินการ', D.KPIS.completedThisMonth, 'แผนทั้งหมด', D.KPIS.plannedThisMonth);
  sep();

  add('== รายการนิเทศทั้งหมด ==');
  add('วันที่','เวลา','หัวข้อ','ประเภท','วิธีการ','ผู้นิเทศ','ผู้รับการนิเทศ','สถานะ','คะแนน');
  D.SUPERVISIONS.forEach(s => {
    const ee = Array.isArray(s.supervisee)
      ? s.supervisee.map(id => staffName(id)).join(' / ')
      : s.supervisee === 'group' ? 'ทีมพยาบาล' : staffName(s.supervisee);
    add(s.date, s.time, s.topic, s.type, s.activity||'', staffName(s.supervisor), ee, s.status, s.score||'');
  });
  sep();

  add('== บุคลากรและระดับสมรรถนะ ==');
  add('รหัส','ชื่อ-สกุล','ตำแหน่ง','ระดับ Benner','ประสบการณ์ (ปี)','บทบาท');
  D.STAFF.forEach(s => {
    add(s.id, (s.title||'') + s.name, D.POSITIONS[s.pos]||s.pos, s.level, s.years, s.role);
  });
  sep();

  const gaps = D.topGaps ? D.topGaps() : [];
  if (gaps.length) {
    add('== ทักษะที่ต้องพัฒนา (Top Gaps) ==');
    add('ทักษะ','คะแนนเฉลี่ย');
    gaps.forEach(g => add(g.label || g.name || '', typeof g.avg === 'number' ? g.avg.toFixed(2) : ''));
    sep();
  }

  const toCell = v => {
    const s = String(v ?? '');
    return /[,"\n]/.test(s) ? '"' + s.replace(/"/g,'""') + '"' : s;
  };
  const csv = rows.map(r => r.map(toCell).join(',')).join('\n');
  const blob = new Blob(['\uFEFF' + csv], { type: 'text/csv;charset=utf-8;' });
  const url  = URL.createObjectURL(blob);
  const a    = Object.assign(document.createElement('a'), {
    href: url,
    download: `นิเทศห้องคลอด_${now.toISOString().slice(0,10)}.csv`,
  });
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
}

// ===================== Dashboard =====================
const Dashboard = ({ layout = 'overview' }) => {
  const [planModalOpen, setPlanModalOpen] = React.useState(false);
  const kpi = D.KPIS;
  const todayPlanned = D.SUPERVISIONS.filter(s => s.date === '2026-05-18');
  const upcoming = D.SUPERVISIONS.filter(s => s.status === 'scheduled').slice(0, 5);
  const gaps = D.topGaps();

  if (layout === 'compact') return <DashboardCompact />;
  if (layout === 'focus') return <DashboardFocus />;

  return (
    <div className="page">
      <div className="section-h">
        <div>
          <h2>ภาพรวมการนิเทศ <span className="variant-pill">{new Date('2026-05-18').toLocaleDateString('th-TH', { weekday: 'long', day: 'numeric', month: 'long' })}</span></h2>
          <div className="sub">หัวหน้างานห้องคลอด · กลุ่มงานการพยาบาลผู้คลอด</div>
        </div>
        <div className="flex">
          <button className="btn"><Icon name="filter" size={14} />ตัวกรอง</button>
          <button className="btn" onClick={exportDashboardCSV}><Icon name="download" size={14} />Export</button>
          <button className="btn btn-primary" onClick={() => setPlanModalOpen(true)}><Icon name="plus" size={14} />นัดการนิเทศใหม่</button>
        </div>
      </div>

      {/* KPIs */}
      <div className="kpi-row" style={{ marginBottom: 'var(--sp-5)' }}>
        <div className="kpi accent">
          <div className="label">อัตราการนิเทศได้ตามแผน</div>
          <div className="value">{kpi.supervisionRate}<small>%</small></div>
          <div className="delta up">▲ 4% จากเดือนที่แล้ว · เป้า {kpi.targetRate}%</div>
          <div className="progress"><span style={{ width: `${kpi.supervisionRate}%` }} /></div>
        </div>
        <div className="kpi">
          <div className="label">นิเทศที่ดำเนินการ / แผน</div>
          <div className="value">{kpi.completedThisMonth}<small> / {kpi.plannedThisMonth}</small></div>
          <div className="delta">เดือน พ.ค. 2569</div>
        </div>
        <div className="kpi">
          <div className="label">Bedside Round</div>
          <div className="value">{kpi.bedside}</div>
          <div className="delta">{Math.round((kpi.bedside / kpi.completedThisMonth) * 100)}% ของการนิเทศทั้งหมด</div>
        </div>
        <div className="kpi">
          <div className="label">Case Review / Near miss</div>
          <div className="value">{kpi.cases}<small> · {kpi.nearMiss} near-miss</small></div>
          <div className="delta">{kpi.incidents} incident รออภิปราย</div>
        </div>
      </div>

      <div className="split">
        <div className="stack">
          {/* Today's schedule */}
          <div className="card">
            <div className="card-header">
              <h3>กำหนดการนิเทศวันนี้</h3>
              <span className="sub">· {todayPlanned.length} รายการ</span>
              <div style={{ marginLeft: 'auto' }}>
                <div className="tabs">
                  <button className="tab active">วันนี้</button>
                  <button className="tab">สัปดาห์นี้</button>
                  <button className="tab">เดือนนี้</button>
                </div>
              </div>
            </div>
            <div className="card-body" style={{ paddingTop: 0 }}>
              <div className="activity-list">
                {todayPlanned.map(sv => (
                  <div className="activity-item" key={sv.id}>
                    <div className="activity-time">{sv.time}<br />น.</div>
                    <div className="activity-body">
                      <div className="title">{sv.topic}</div>
                      <div className="meta">
                        <span className="badge info">{sv.type}</span> · {sv.activity} · นิเทศโดย <strong>{staffShort(sv.supervisor)}</strong> · ผู้รับ <strong>{staffShort(sv.supervisee)}</strong>
                      </div>
                    </div>
                    <button className="btn btn-sm">เริ่มนิเทศ</button>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* Competency overview */}
          <div className="card">
            <div className="card-header">
              <h3>ระดับสมรรถนะของบุคลากร</h3>
              <span className="sub">· 21 ท่าน (พยาบาล 15 · ผู้ช่วย 2 · พนง.ช่วยเหลือ 4)</span>
            </div>
            <div className="card-body" style={{ display: 'grid', gridTemplateColumns: '180px 1fr', gap: 24, alignItems: 'center' }}>
              <div style={{ position: 'relative' }}>
                <Donut size={160} segments={[
                  { value: kpi.expertCount, color: 'var(--lvl-5)' },
                  { value: kpi.proficientCount, color: 'var(--lvl-4)' },
                  { value: kpi.competentCount, color: 'var(--lvl-3)' },
                  { value: kpi.advBeginnerCount, color: 'var(--lvl-2)' },
                  { value: kpi.noviceCount, color: 'var(--lvl-1)' },
                ]} />
                <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', textAlign: 'center' }}>
                  <div style={{ fontSize: 28, fontWeight: 700 }}>{kpi.totalStaff}</div>
                  <div className="muted txt-xs">บุคลากร</div>
                </div>
              </div>
              <div className="stack">
                {[
                  { lv: 'expert', count: kpi.expertCount },
                  { lv: 'proficient', count: kpi.proficientCount },
                  { lv: 'competent', count: kpi.competentCount },
                  { lv: 'advanced_beginner', count: kpi.advBeginnerCount },
                  { lv: 'novice', count: kpi.noviceCount },
                ].map(r => {
                  const lv = D.levelById(r.lv);
                  return (
                    <div key={r.lv} className="flex-between">
                      <div className="flex">
                        <span className={`dot dot-${lv.n}`} />
                        <span style={{ fontSize: 13 }}>{lv.label}</span>
                        <span className="muted txt-xs">{lv.th}</span>
                      </div>
                      <div className="flex">
                        <div style={{ width: 140, height: 6, background: 'var(--c-surface-2)', borderRadius: 999 }}>
                          <div style={{ width: `${(r.count / kpi.totalStaff) * 100}%`, height: '100%', background: `var(--lvl-${lv.n})`, borderRadius: 999 }} />
                        </div>
                        <strong className="mono" style={{ width: 24, textAlign: 'right' }}>{r.count}</strong>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          </div>

          {/* Skill gap */}
          <div className="card">
            <div className="card-header">
              <h3>ทักษะที่ทีมยังต้องพัฒนา (Top Gaps)</h3>
              <span className="sub">· ค่าเฉลี่ยต่ำสุด 6 ทักษะ</span>
              <button className="btn btn-sm" style={{ marginLeft: 'auto' }}>วางแผน In-service</button>
            </div>
            <div className="card-body">
              <table className="t">
                <thead>
                  <tr><th>ทักษะ</th><th>หมวด</th><th style={{ width: 120 }}>คะแนนเฉลี่ย</th><th style={{ width: 120 }}>ระดับเฉลี่ย</th></tr>
                </thead>
                <tbody>
                  {gaps.map(g => (
                    <tr key={g.id}>
                      <td><strong>{g.label}</strong><div className="mono txt-xs muted">{g.en}</div></td>
                      <td><span className="muted txt-xs">{g.groupLabel}</span></td>
                      <td>
                        <div className="flex" style={{ gap: 8 }}>
                          <strong className="mono">{g.avg.toFixed(1)}</strong>
                          <div className="progress" style={{ flex: 1, marginTop: 0 }}>
                            <span style={{ width: `${(g.avg / 5) * 100}%` }} />
                          </div>
                        </div>
                      </td>
                      <td><LevelChip level={Math.round(g.avg)} /></td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </div>

        <div className="stack">
          {/* Trend */}
          <div className="card card-tight">
            <div className="card-header">
              <h3>แนวโน้มสมรรถนะ 6 เดือน</h3>
            </div>
            <div className="card-body">
              <div className="muted txt-xs">คะแนนเฉลี่ย (1–5)</div>
              <div style={{ fontSize: 26, fontWeight: 700 }}>3.82 <span className="muted txt-sm" style={{ fontWeight: 400 }}>/ 5.0</span></div>
              <LineChart data={[3.42, 3.51, 3.58, 3.66, 3.74, 3.82]} width={300} height={90} />
              <div className="flex-between mono txt-xs muted" style={{ marginTop: 6 }}>
                <span>ธ.ค.</span><span>ม.ค.</span><span>ก.พ.</span><span>มี.ค.</span><span>เม.ย.</span><span>พ.ค.</span>
              </div>
            </div>
          </div>

          {/* Recent logs */}
          <div className="card card-tight">
            <div className="card-header">
              <h3>Bedside Log ล่าสุด</h3>
              <button className="btn btn-sm btn-ghost" style={{ marginLeft: 'auto' }}>ดูทั้งหมด</button>
            </div>
            <div className="card-body" style={{ paddingTop: 0 }}>
              {D.LOGS.slice(0, 4).map(lg => (
                <div key={lg.id} style={{ padding: '10px 0', borderBottom: '1px solid var(--c-border-soft)' }}>
                  <div className="flex-between">
                    <div style={{ fontSize: 13, fontWeight: 600 }}>{lg.topic}</div>
                    <LevelChip level={lg.score} />
                  </div>
                  <div className="txt-xs muted" style={{ marginTop: 4 }}>
                    {staffShort(lg.supervisor)} → {staffShort(lg.supervisee)} · {lg.activity} · {lg.time}
                  </div>
                  <div className="txt-sm" style={{ marginTop: 4, color: 'var(--c-ink-soft)' }}>“{lg.note}”</div>
                </div>
              ))}
            </div>
          </div>

          {/* Quick actions */}
          <div className="card card-tight">
            <div className="card-header"><h3>การดำเนินการด่วน</h3></div>
            <div className="card-body" style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              <button className="btn"><Icon name="plus" size={14} />บันทึก Bedside Log</button>
              <button className="btn"><Icon name="clipboard" size={14} />เริ่มประเมิน ISBAR</button>
              <button className="btn"><Icon name="alert" size={14} />เปิด Case Review</button>
              <button className="btn"><Icon name="users" size={14} />จัดตารางเวร (Skill Mix)</button>
            </div>
          </div>
        </div>
      </div>
      {planModalOpen && (() => { const PM = window.PlanningModal; return PM ? <PM sv={null} onClose={() => setPlanModalOpen(false)} onSaved={() => setPlanModalOpen(false)} /> : null; })()}
    </div>
  );
};

// Compact dashboard variant: KPI strip + horizontal cards
const DashboardCompact = () => {
  const kpi = D.KPIS;
  return (
    <div className="page">
      <div className="section-h">
        <div>
          <h2>ภาพรวมการนิเทศ <span className="variant-pill">Layout: Compact</span></h2>
          <div className="sub">ดูพร้อมกันในหน้าเดียว · เหมาะกับ tablet แนวนอน</div>
        </div>
      </div>
      <div className="kpi-row" style={{ marginBottom: 'var(--sp-4)' }}>
        {[
          { lab: 'นิเทศตามแผน', val: '87%', sub: 'เป้า 90%' },
          { lab: 'Bedside log', val: 28, sub: 'เดือนนี้' },
          { lab: 'Near miss', val: 3, sub: 'รอ RCA' },
          { lab: 'Novice nurse', val: kpi.noviceCount, sub: 'ต้องนิเทศเข้ม' },
          { lab: 'Expert', val: kpi.expertCount, sub: 'พร้อมเป็น Preceptor' },
          { lab: 'Skill gap', val: 6, sub: 'ทักษะที่ต้องอบรม' },
        ].map((k, i) => (
          <div key={i} className="kpi">
            <div className="label">{k.lab}</div>
            <div className="value">{k.val}</div>
            <div className="delta muted">{k.sub}</div>
          </div>
        ))}
      </div>
      <div className="grid-3">
        <DashboardMiniLogs />
        <DashboardMiniSchedule />
        <DashboardMiniGaps />
      </div>
      <div className="grid-2" style={{ marginTop: 16 }}>
        <DashboardMiniStaff />
        <DashboardMiniTrend />
      </div>
    </div>
  );
};

// Focus dashboard: today + biggest gap big
const DashboardFocus = () => {
  const today = D.SUPERVISIONS.filter(s => s.date === '2026-05-18');
  const gaps = D.topGaps();
  return (
    <div className="page">
      <div className="section-h">
        <div>
          <h2>โฟกัสวันนี้ <span className="variant-pill">Layout: Focus</span></h2>
          <div className="sub">เน้นสิ่งสำคัญที่สุดของวัน</div>
        </div>
      </div>
      <div className="card" style={{ marginBottom: 16, background: 'linear-gradient(120deg, var(--c-primary-soft), var(--c-surface))' }}>
        <div className="card-body" style={{ padding: 28 }}>
          <div className="flex-between" style={{ marginBottom: 18 }}>
            <div>
              <div className="muted">วันนี้ — {new Date('2026-05-18').toLocaleDateString('th-TH', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' })}</div>
              <h1 style={{ fontSize: 36, margin: '4px 0 0' }}>{today.length} การนิเทศที่ต้องดำเนินการ</h1>
            </div>
            <button className="btn btn-primary btn-lg"><Icon name="plus" size={16} />เริ่มนิเทศแรก</button>
          </div>
          <div className="grid-3">
            {today.map(sv => (
              <div key={sv.id} className="card card-tight" style={{ background: 'rgba(255,255,255,0.6)' }}>
                <div className="card-body">
                  <div className="mono txt-xs muted">{sv.time} น.</div>
                  <h4 style={{ margin: '6px 0', fontSize: 15 }}>{sv.topic}</h4>
                  <div className="flex" style={{ marginTop: 8 }}>
                    <Avatar name={D.staffById(sv.supervisor).name} size={26} />
                    <span className="txt-xs muted">→</span>
                    {sv.supervisee !== 'group' && <Avatar name={D.staffById(sv.supervisee).name} size={26} />}
                    <span className="txt-sm">{staffShort(sv.supervisee)}</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <div className="grid-2">
        <div className="card">
          <div className="card-header"><h3>ทักษะที่ต้องเพิ่ม Skill mix</h3></div>
          <div className="card-body">
            {gaps.slice(0, 4).map(g => (
              <div key={g.id} style={{ padding: '10px 0', borderBottom: '1px solid var(--c-border-soft)' }}>
                <div className="flex-between">
                  <strong>{g.label}</strong>
                  <span className="mono">{g.avg.toFixed(1)}/5</span>
                </div>
                <div className="progress" style={{ marginTop: 8 }}><span style={{ width: `${(g.avg/5)*100}%` }} /></div>
              </div>
            ))}
          </div>
        </div>
        <div className="card">
          <div className="card-header"><h3>Novice & Advanced Beginner</h3><span className="sub">· ต้องการนิเทศใกล้ชิด</span></div>
          <div className="card-body" style={{ padding: 0 }}>
            <table className="t">
              <tbody>
                {D.STAFF.filter(s => s.level === 'novice' || s.level === 'advanced_beginner').map(s => (
                  <tr key={s.id}>
                    <td><Avatar name={s.name} size={28} /></td>
                    <td><strong>{s.name}</strong><div className="txt-xs muted">{D.POSITIONS[s.pos]} · {s.years} ปี</div></td>
                    <td><LevelChip level={s.level} /></td>
                    <td><button className="btn btn-sm">นิเทศ</button></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  );
};

// Mini cards for compact dashboard
const DashboardMiniLogs = () => (
  <div className="card card-tight">
    <div className="card-header"><h3>Bedside Log ล่าสุด</h3></div>
    <div className="card-body" style={{ paddingTop: 0 }}>
      {D.LOGS.slice(0, 3).map(lg => (
        <div key={lg.id} style={{ padding: '8px 0', borderBottom: '1px solid var(--c-border-soft)' }}>
          <div className="flex-between"><strong className="txt-sm">{lg.topic}</strong><LevelChip level={lg.score} /></div>
          <div className="txt-xs muted">{staffShort(lg.supervisor)} → {staffShort(lg.supervisee)}</div>
        </div>
      ))}
    </div>
  </div>
);
const DashboardMiniSchedule = () => (
  <div className="card card-tight">
    <div className="card-header"><h3>กำหนดการ 3 วันข้างหน้า</h3></div>
    <div className="card-body" style={{ paddingTop: 0 }}>
      {D.SUPERVISIONS.filter(s => s.status === 'scheduled').slice(0, 4).map(sv => (
        <div key={sv.id} style={{ padding: '8px 0', borderBottom: '1px solid var(--c-border-soft)' }}>
          <div className="flex-between">
            <strong className="txt-sm">{sv.topic}</strong>
            <span className="mono txt-xs muted">{sv.date.slice(5)} {sv.time}</span>
          </div>
          <div className="txt-xs muted">{sv.type} · {staffShort(sv.supervisee)}</div>
        </div>
      ))}
    </div>
  </div>
);
const DashboardMiniGaps = () => (
  <div className="card card-tight">
    <div className="card-header"><h3>Skill Gap</h3></div>
    <div className="card-body" style={{ paddingTop: 0 }}>
      {D.topGaps().slice(0, 4).map(g => (
        <div key={g.id} style={{ padding: '8px 0' }}>
          <div className="flex-between txt-sm"><span>{g.label}</span><span className="mono">{g.avg.toFixed(1)}</span></div>
          <div className="progress"><span style={{ width: `${(g.avg/5)*100}%` }} /></div>
        </div>
      ))}
    </div>
  </div>
);
const DashboardMiniStaff = () => {
  const kpi = D.KPIS;
  const segments = [
    { value: kpi.expertCount, color: 'var(--lvl-5)' },
    { value: kpi.proficientCount, color: 'var(--lvl-4)' },
    { value: kpi.competentCount, color: 'var(--lvl-3)' },
    { value: kpi.advBeginnerCount, color: 'var(--lvl-2)' },
    { value: kpi.noviceCount, color: 'var(--lvl-1)' },
  ];
  return (
    <div className="card card-tight">
      <div className="card-header"><h3>ระดับสมรรถนะ</h3></div>
      <div className="card-body" style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
        <Donut size={120} segments={segments} />
        <div style={{ flex: 1 }}>
          {D.LEVELS.slice().reverse().map(lv => {
            const count = D.STAFF.filter(s => s.level === lv.id).length;
            return (
              <div key={lv.id} className="flex-between txt-sm" style={{ marginBottom: 4 }}>
                <span className="flex"><span className={`dot dot-${lv.n}`} />{lv.label}</span>
                <strong className="mono">{count}</strong>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};
const DashboardMiniTrend = () => (
  <div className="card card-tight">
    <div className="card-header"><h3>แนวโน้มคะแนนรวม</h3></div>
    <div className="card-body">
      <div style={{ fontSize: 24, fontWeight: 700 }}>3.82 / 5.0</div>
      <LineChart data={[3.42, 3.51, 3.58, 3.66, 3.74, 3.82]} width={320} height={80} />
    </div>
  </div>
);

// ===================== Skill Matrix =====================
const SkillMatrix = ({ initialView = 'table' }) => {
  const [view, setView] = useState(initialView); // table | cards | radar
  useEffect(() => { setView(initialView); }, [initialView]);
  const [filter, setFilter] = useState('all');
  const filteredStaff = D.STAFF.filter(s => {
    if (filter === 'all') return true;
    if (filter === 'rn') return ['snr_special','snr','operational','rn'].includes(s.pos);
    if (filter === 'novice') return s.level === 'novice' || s.level === 'advanced_beginner';
    if (filter === 'aide') return s.pos === 'aide' || s.pos === 'assistant';
    return true;
  });

  return (
    <div className="page">
      <div className="section-h">
        <div>
          <h2>Competency & Skill Matrix</h2>
          <div className="sub">สมรรถนะเฉพาะทางห้องคลอด · ติดตามรายบุคคล จัดตารางเวรด้วย Skill Mix</div>
        </div>
        <div className="flex">
          <div className="chips">
            <button className={`chip ${filter==='all'?'active':''}`} onClick={() => setFilter('all')}>ทั้งหมด ({D.STAFF.length})</button>
            <button className={`chip ${filter==='rn'?'active':''}`} onClick={() => setFilter('rn')}>พยาบาลวิชาชีพ</button>
            <button className={`chip ${filter==='novice'?'active':''}`} onClick={() => setFilter('novice')}>Novice + Adv. Beginner</button>
            <button className={`chip ${filter==='aide'?'active':''}`} onClick={() => setFilter('aide')}>ผู้ช่วย/พนง.</button>
          </div>
        </div>
      </div>

      <div className="flex" style={{ marginBottom: 16 }}>
        <div className="tabs">
          <button className={`tab ${view==='table'?'active':''}`} onClick={() => setView('table')}>Heatmap</button>
          <button className={`tab ${view==='cards'?'active':''}`} onClick={() => setView('cards')}>Skill Cards</button>
          <button className={`tab ${view==='radar'?'active':''}`} onClick={() => setView('radar')}>Radar</button>
        </div>
        <span className="variant-pill">3 views</span>
        <div style={{ marginLeft: 'auto' }} className="flex">
          <div className="flex txt-xs muted">
            <span>ระดับ:</span>
            {D.LEVELS.map(l => (
              <span key={l.id} className="flex" style={{ gap: 4 }}>
                <span className={`dot dot-${l.n}`} />{l.n}
              </span>
            ))}
          </div>
          <button className="btn btn-sm"><Icon name="download" size={12} />Export</button>
        </div>
      </div>

      {view === 'table' && <MatrixHeatmap staff={filteredStaff} />}
      {view === 'cards' && <MatrixCards staff={filteredStaff} />}
      {view === 'radar' && <MatrixRadar staff={filteredStaff} />}
    </div>
  );
};

const MatrixHeatmap = ({ staff }) => {
  const skills = D.SKILLS;
  // group columns by category for header
  const catCounts = {};
  skills.forEach(s => { catCounts[s.catLabel] = (catCounts[s.catLabel] || 0) + 1; });
  return (
    <div className="matrix-wrap">
      <table className="matrix-table">
        <thead>
          <tr>
            <th className="cat-header" rowSpan="2" style={{ minWidth: 220 }}>บุคลากร</th>
            {Object.entries(catCounts).map(([cat, n]) => (
              <th key={cat} className="cat-header" colSpan={n}>{cat}</th>
            ))}
          </tr>
          <tr>
            {skills.map(sk => (
              <th key={sk.id} title={sk.label}>{sk.label}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {staff.map(st => (
            <tr key={st.id}>
              <th>
                {st.title}{st.name}
                <span className="pos">{D.POSITIONS[st.pos]} · {st.years} ปี</span>
              </th>
              {skills.map(sk => {
                const v = D.MATRIX[st.id][sk.id];
                return <td key={sk.id} className={`cell lvl-${v}`} title={`${sk.label}: ${levelLabel(v)}`}>{v}</td>;
              })}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

const MatrixCards = ({ staff }) => {
  // group by skill, show distribution
  const groups = D.COMPETENCIES.flatMap(c => c.groups.map(g => ({ cat: c.label, ...g })));
  return (
    <div className="stack">
      {groups.map(g => (
        <div key={g.id} className="card">
          <div className="card-header">
            <h3>{g.label}</h3>
            <span className="sub">· {g.cat}{g.en ? ` · ${g.en}` : ''}</span>
          </div>
          <div className="card-body">
            <div className="skill-cards">
              {g.items.map(item => {
                const scores = staff.map(s => D.MATRIX[s.id][item.id]);
                const a = avg(scores);
                const dist = [1,2,3,4,5].map(lv => scores.filter(s => s === lv).length);
                return (
                  <div className="skill-card" key={item.id}>
                    <h4>{item.label}</h4>
                    <div className="en">{item.en}</div>
                    <div className="flex-between" style={{ marginTop: 12 }}>
                      <span className="muted txt-xs">เฉลี่ย</span>
                      <strong className="mono">{a.toFixed(2)}</strong>
                    </div>
                    <div className="level-stack">
                      {[1,2,3,4,5].map(i => <span key={i} className={i <= Math.round(a) ? 'on' : ''} />)}
                    </div>
                    <div className="flex" style={{ marginTop: 12, gap: 6, flexWrap: 'wrap' }}>
                      {dist.map((c, i) => c > 0 && (
                        <span key={i} className={`lvl lvl-${i+1}`}>{c}</span>
                      ))}
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      ))}
    </div>
  );
};

const MatrixRadar = ({ staff }) => {
  // Group skills into the 5 sub-categories for radar axes
  const radarAxes = D.COMPETENCIES.flatMap(c => c.groups).map(g => ({ id: g.id, label: g.label.length > 14 ? g.label.slice(0, 13) + '…' : g.label, items: g.items }));
  return (
    <div className="grid-3">
      {staff.map(st => {
        const values = radarAxes.map(ax => avg(ax.items.map(it => D.MATRIX[st.id][it.id])));
        const overall = avg(values);
        return (
          <div key={st.id} className="card">
            <div className="card-body">
              <div className="flex" style={{ marginBottom: 8 }}>
                <Avatar name={st.name} size={36} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <strong style={{ fontSize: 14 }}>{st.name}</strong>
                  <div className="txt-xs muted">{D.POSITIONS[st.pos]} · {st.years} ปี</div>
                </div>
                <LevelChip level={st.level} />
              </div>
              <div className="radar-wrap" style={{ padding: 0 }}>
                <Radar axes={radarAxes.map(a => a.label)} values={values} size={220} />
              </div>
              <div className="flex-between txt-sm" style={{ marginTop: 6 }}>
                <span className="muted">เฉลี่ยทุกหมวด</span>
                <strong className="mono">{overall.toFixed(2)}/5</strong>
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
};

Object.assign(window, {
  LoginScreen, Dashboard, SkillMatrix,
});