// pages-overview.jsx — Home, TalentBox, TalentReport

const { useState: useStateOv, useMemo: useMemoOv, useEffect: useEffectOv } = React;

// ─────────────────────────────────────────────────────────────
// HOME / DASHBOARD
// ─────────────────────────────────────────────────────────────
function HomePage({ user, onNavigate }) {
  const { EMPLOYEES, KPI_DATA, RECENT_ACTIVITIES } = window.RTDC_DATA;
  const I = window.Icons;
  const totalTalents = EMPLOYEES.length;
  const highPotential = EMPLOYEES.filter(e => e.performance >= 85 && e.potential >= 80).length;
  const evaluated = Math.round(totalTalents * 0.85);
  const pending = totalTalents - evaluated;

  return (
    <div>
      <div className="page-head">
        <div>
          <div className="breadcrumb">Dashboard / Overview</div>
          <h1>Welcome back, {user.name.split(' ')[0]}</h1>
          <div className="muted">Here's what's happening across talent development this week.</div>
        </div>
        <div className="page-actions">
          <button className="btn"><I.download size={14}/> Export</button>
          <button className="btn btn-primary"><I.plus size={14}/> New Evaluation</button>
        </div>
      </div>

      {/* Stat tiles */}
      <div className="stat-grid">
        <div className="stat" data-accent="blue">
          <span className="label">Total Talent</span>
          <span className="value">{totalTalents.toLocaleString()}</span>
          <span className="delta up"><I.up size={12}/> +4 this quarter</span>
        </div>
        <div className="stat" data-accent="green">
          <span className="label">High Potential</span>
          <span className="value">{highPotential}</span>
          <span className="delta up"><I.up size={12}/> +2 vs last quarter</span>
        </div>
        <div className="stat" data-accent="amber">
          <span className="label">Pending Evaluation</span>
          <span className="value">{pending}</span>
          <span className="delta down"><I.down size={12}/> -3 vs last week</span>
        </div>
        <div className="stat" data-accent="purple">
          <span className="label">Avg Performance</span>
          <span className="value">84.2<span style={{fontSize:14,color:'var(--text-muted)',marginLeft:4}}>%</span></span>
          <span className="delta up"><I.up size={12}/> +1.8% YoY</span>
        </div>
      </div>

      <div className="grid-2" style={{ marginBottom: 'var(--density-gap)' }}>
        {/* KPI summary chart */}
        <div className="card">
          <div className="card-head">
            <h3>KPI Performance Trend</h3>
            <span className="hint">Last 5 quarters · target vs actual</span>
          </div>
          <div className="card-pad">
            <KPIChart data={KPI_DATA} />
            <div style={{ display: 'flex', gap: 18, marginTop: 12, fontSize: 12 }}>
              <span style={{ display:'inline-flex', alignItems:'center', gap:6 }}>
                <span style={{ width: 10, height: 10, borderRadius: 2, background: 'var(--rtdc-blue-500)' }}></span>
                Actual
              </span>
              <span style={{ display:'inline-flex', alignItems:'center', gap:6 }}>
                <span style={{ width: 10, height: 2, background: 'var(--text-muted)' }}></span>
                Target
              </span>
            </div>
          </div>
        </div>

        {/* Recent activity */}
        <div className="card">
          <div className="card-head">
            <h3>Recent Activity</h3>
            <a href="#" style={{ fontSize: 12 }}>View all</a>
          </div>
          <div className="card-pad" style={{ paddingTop: 6, paddingBottom: 6 }}>
            <div className="notif-list">
              {RECENT_ACTIVITIES.map((n, i) => {
                const Ico = I[n.icon] || I.bell;
                return (
                  <div className="notif-item" key={i}>
                    <span className="ico"><Ico size={14} /></span>
                    <div className="body">
                      <p className="title">{n.title}</p>
                      <span className="time">{n.time}</span>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </div>

      {/* Quick access */}
      <div className="card-head" style={{ padding: 0, borderBottom: 0, marginBottom: 12 }}>
        <h3 style={{ margin: 0, fontSize: 13.5 }}>Quick Access</h3>
      </div>
      <div className="qa-grid">
        <QATile icon="box"      title="Talent Box"           desc="9-box matrix & talent pool" onClick={() => onNavigate('talent-box')} />
        <QATile icon="palette"  title="Take CCD Assessment"  desc="20-question color profile" onClick={() => onNavigate('ccd')} />
        <QATile icon="gauge"    title="Review KPIs"          desc="Quarterly performance metrics" onClick={() => onNavigate('kpi')} />
        <QATile icon="star"     title="Competency Map"       desc="Skills & development areas" onClick={() => onNavigate('comp')} />
      </div>

      {/* Top talent */}
      <div className="card" style={{ marginTop: 'var(--density-gap)' }}>
        <div className="card-head">
          <h3>Top Performing Talent</h3>
          <a href="#" style={{ fontSize: 12 }} onClick={(e) => { e.preventDefault(); onNavigate('talent-box'); }}>Open Talent Box →</a>
        </div>
        <table className="table">
          <thead>
            <tr>
              <th>Employee</th>
              <th>Department</th>
              <th>Location</th>
              <th className="num">Performance</th>
              <th className="num">Potential</th>
              <th>CCD</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {[...EMPLOYEES].sort((a,b)=>b.performance-a.performance).slice(0,5).map(e => (
              <tr key={e.id}>
                <td>
                  <div className="row">
                    <div className="avatar">{e.name.split(' ').map(s=>s[0]).join('').slice(0,2)}</div>
                    <div>
                      <div style={{ fontWeight: 500 }}>{e.name}</div>
                      <div className="muted text-xs">{e.role}</div>
                    </div>
                  </div>
                </td>
                <td>{e.dept}</td>
                <td>{e.loc}</td>
                <td className="num bold">{e.performance}</td>
                <td className="num bold">{e.potential}</td>
                <td><CCDPill color={e.ccd} /></td>
                <td><button className="btn btn-sm">View</button></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function QATile({ icon, title, desc, onClick }) {
  const I = window.Icons[icon] || window.Icons.home;
  return (
    <button className="qa-tile" onClick={onClick}>
      <span className="ico"><I size={20} /></span>
      <h4>{title}</h4>
      <p>{desc}</p>
    </button>
  );
}

function CCDPill({ color }) {
  const map = { Red: 'red', Blue: 'blue', Green: 'green', Yellow: 'amber' };
  return <span className={'badge ' + (map[color] || 'gray')}><span className="dot"></span>{color}</span>;
}

// Simple KPI chart with SVG
function KPIChart({ data }) {
  const W = 540, H = 180, P = 28;
  const max = 100, min = 60;
  const x = (i) => P + (i / (data.length - 1)) * (W - P * 2);
  const y = (v) => H - P - ((v - min) / (max - min)) * (H - P * 2);

  const targetPath = data.map((d,i) => (i===0 ? 'M' : 'L') + x(i) + ',' + y(d.target)).join(' ');
  const actualPath = data.map((d,i) => (i===0 ? 'M' : 'L') + x(i) + ',' + y(d.actual)).join(' ');
  const actualArea = actualPath + ' L' + x(data.length-1) + ',' + (H-P) + ' L' + x(0) + ',' + (H-P) + ' Z';

  return (
    <svg viewBox={`0 0 ${W} ${H}`} style={{ width: '100%', height: 180, display:'block' }}>
      <defs>
        <linearGradient id="grad-blue" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="var(--rtdc-blue-500)" stopOpacity="0.22"/>
          <stop offset="100%" stopColor="var(--rtdc-blue-500)" stopOpacity="0"/>
        </linearGradient>
      </defs>
      {/* gridlines */}
      {[0, 0.25, 0.5, 0.75, 1].map(t => (
        <line key={t} x1={P} y1={P + t*(H-P*2)} x2={W-P} y2={P + t*(H-P*2)} stroke="var(--border-soft)" strokeWidth="1"/>
      ))}
      {/* target dashed */}
      <path d={targetPath} stroke="var(--text-muted)" strokeWidth="1.5" strokeDasharray="4 4" fill="none"/>
      {/* actual area + line */}
      <path d={actualArea} fill="url(#grad-blue)"/>
      <path d={actualPath} stroke="var(--rtdc-blue-500)" strokeWidth="2.5" fill="none" strokeLinejoin="round"/>
      {/* dots */}
      {data.map((d,i) => (
        <circle key={i} cx={x(i)} cy={y(d.actual)} r="4" fill="var(--surface)" stroke="var(--rtdc-blue-500)" strokeWidth="2"/>
      ))}
      {/* labels */}
      {data.map((d,i) => (
        <text key={i} x={x(i)} y={H-8} textAnchor="middle"
              fontSize="10.5" fill="var(--text-muted)" fontFamily="var(--font-sans)">{d.quarter}</text>
      ))}
    </svg>
  );
}

// ─────────────────────────────────────────────────────────────
// TALENT BOX — 9-box + Talent Pool
// ─────────────────────────────────────────────────────────────
function TalentBoxPage() {
  const [tab, setTab]           = useStateOv('matrix');
  const [talents, setTalents]   = useStateOv(null);   // null = loading
  const [err, setErr]           = useStateOv('');
  const [quad, setQuad]         = useStateOv('1');     // active Talent-Pool filter
  const [selected, setSelected] = useStateOv(null);    // talent shown in detail modal

  useEffectOv(() => {
    let cancelled = false;
    window.RTDC_SHEETS.loadTalents()
      .then((d) => { if (!cancelled) setTalents(d); })
      .catch(() => { if (!cancelled) setErr('Could not load talent data from the "datatalent" sheet.'); });
    return () => { cancelled = true; };
  }, []);

  return (
    <div>
      <div className="page-head">
        <div>
          <div className="breadcrumb">Talent / Talent Box</div>
          <h1>Talent Box</h1>
          <div className="muted">Talent mapped across the four Talent-Box quadrants, plus the full talent pool.</div>
        </div>
        <div className="page-actions">
          <button className="btn"><window.Icons.download size={14}/> Export</button>
        </div>
      </div>

      <div className="tabs">
        <button className={'tab ' + (tab==='matrix'?'active':'')} onClick={() => setTab('matrix')}>Talent Box</button>
        <button className={'tab ' + (tab==='pool'?'active':'')} onClick={() => setTab('pool')}>Talent Pool</button>
      </div>

      {err && <div className="card card-pad" style={{ color: 'var(--rtdc-red)' }}>{err}</div>}
      {!talents && !err && <div className="card card-pad muted">Loading talent data…</div>}

      {talents && !err && tab === 'matrix' && (
        <TalentMatrix
          talents={talents}
          onSelect={setSelected}
          onViewAll={(q) => { setQuad(q); setTab('pool'); }}
        />
      )}
      {talents && !err && tab === 'pool' && (
        <TalentPool talents={talents} quad={quad} setQuad={setQuad} onSelect={setSelected} />
      )}

      {selected && <TalentDetailModal talent={selected} onClose={() => setSelected(null)} />}
    </div>
  );
}

const quadKeyOf = (t) => { const m = (t.talentBox || '').match(/\((\d)\)/); return m ? m[1] : ''; };

// 2×2 Talent Box — vertical = readiness for higher position, horizontal = regional/global mobility.
function TalentMatrix({ talents, onSelect, onViewAll }) {
  const groups = useMemoOv(() => {
    const g = { '1': [], '2': [], '3': [], '4': [] };
    talents.forEach((t) => { const q = quadKeyOf(t); if (g[q]) g[q].push(t); });
    return g;
  }, [talents]);
  const byKey = (k) => TALENT_QUADRANTS.find((q) => q.key === k);

  const Box = ({ qk }) => {
    const q = byKey(qk);
    const list = groups[qk];
    const hipo = list.filter((t) => (t.hipo || '').toLowerCase().indexOf('high potential') !== -1).length;
    const kc   = list.filter((t) => (t.hipo || '').toLowerCase().indexOf('key') !== -1).length;
    return (
      <div style={{ border: '1px solid var(--border)', borderTop: '3px solid ' + q.color, borderRadius: 8,
                    background: 'var(--surface)', padding: 14, display: 'flex', flexDirection: 'column', minHeight: 198 }}>
        <div className="row-between" style={{ alignItems: 'flex-start' }}>
          <div>
            <span className="badge" style={{ background: 'transparent', color: q.color, border: '1px solid ' + q.color, fontWeight: 700 }}>({q.key})</span>
            <div style={{ fontWeight: 600, fontSize: 13, marginTop: 6 }}>{q.short}</div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div style={{ fontSize: 26, fontWeight: 700, lineHeight: 1, color: q.color }}>{list.length}</div>
            <div className="muted text-xs">talents</div>
          </div>
        </div>

        <div className="muted text-xs" style={{ margin: '8px 0 10px' }}>
          {hipo} High Potential · {kc} Key Contributor
        </div>

        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4, marginTop: 'auto' }}>
          {list.slice(0, 10).map((t, i) => (
            <button key={i} onClick={() => onSelect(t)} title={t.name}
                    style={{ border: 0, background: 'transparent', padding: 0, cursor: 'pointer', lineHeight: 0 }}>
              <TalentPhoto src={t.photo} name={t.name} size="md" />
            </button>
          ))}
          {list.length > 10 && (
            <span className="avatar" style={{ background: 'var(--bg-alt)', color: 'var(--text-muted)', fontSize: 10 }}>
              +{list.length - 10}
            </span>
          )}
        </div>

        <button className="btn btn-sm" style={{ marginTop: 12, alignSelf: 'flex-start' }} onClick={() => onViewAll(q.key)}>
          View all {list.length} <window.Icons.arrowRight size={12}/>
        </button>
      </div>
    );
  };

  const axisCol = (txt) => (
    <div style={{ textAlign: 'center', fontSize: 10.5, fontWeight: 600, color: 'var(--text-muted)',
                  textTransform: 'uppercase', letterSpacing: '0.06em', alignSelf: 'end', paddingBottom: 4 }}>{txt}</div>
  );
  const axisRow = (txt) => (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', textAlign: 'right',
                  fontSize: 10.5, fontWeight: 600, color: 'var(--text-muted)', textTransform: 'uppercase',
                  letterSpacing: '0.06em', paddingRight: 6 }}>{txt}</div>
  );

  return (
    <div className="card card-pad">
      <div className="row-between" style={{ marginBottom: 14 }}>
        <div>
          <h3 style={{ margin: 0, fontSize: 14 }}>Talent Box · 4 Quadrants</h3>
          <div className="muted text-xs" style={{ marginTop: 2 }}>
            Vertical: readiness for a higher position ↑ · Horizontal: regional / global mobility →
          </div>
        </div>
        <span className="hint">{talents.length} talents</span>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '96px 1fr 1fr', gridTemplateRows: 'auto 1fr 1fr', gap: 10 }}>
        <div></div>
        {axisCol('National scope')}
        {axisCol('Regional / Global scope')}
        {axisRow('Higher position')}
        <Box qk="2" />
        <Box qk="4" />
        {axisRow('Current job')}
        <Box qk="1" />
        <Box qk="3" />
      </div>
    </div>
  );
}

function DistRow({ label, count, color, total }) {
  const pct = Math.round(count / total * 100);
  return (
    <div>
      <div className="row-between" style={{ marginBottom: 4 }}>
        <span style={{ fontSize: 12.5 }}>{label}</span>
        <span style={{ fontSize: 12, fontWeight: 600 }}>{count} <span className="muted">({pct}%)</span></span>
      </div>
      <div className="bar"><span className="fill" style={{ '--w': pct + '%', background: color }}></span></div>
    </div>
  );
}

// The 4 quadrants of the "Talent Box" (filter options), keyed by the leading "(n)".
const TALENT_QUADRANTS = [
  { key: '1', short: 'Current job', color: 'var(--rtdc-amber)',
    full: '(1) Expected to display ability in current job' },
  { key: '2', short: 'Higher position', color: 'var(--rtdc-blue-500)',
    full: '(2) Expected to display ability in a higher position' },
  { key: '3', short: 'Current job · Regional / Global', color: 'var(--rtdc-purple)',
    full: '(3) Expected to display ability in current job and across national boundaries on a regional and global scale' },
  { key: '4', short: 'Higher position · Regional / Global', color: 'var(--rtdc-green)',
    full: '(4) Expected to display ability in a higher position and across national boundaries on a regional and global scale.' },
];

// Round photo with initials fallback (Drive image via lh3 CDN + no-referrer).
// size: 'sm' (22px) · 'md' (28px) · default 'lg' (40px)
function TalentPhoto({ src, name, size }) {
  const initials = (name || '?').split(' ').map(s => s[0]).join('').slice(0, 2).toUpperCase();
  const cls = size === 'sm' ? 'avatar avatar-sm' : size === 'md' ? 'avatar' : 'avatar avatar-lg';
  const px = size === 'sm' ? 48 : size === 'md' ? 64 : 96;
  return (
    <div className={cls} style={{ position: 'relative', overflow: 'hidden' }}>
      <span>{initials}</span>
      {src && (
        <img
          src={window.RTDC_SHEETS.driveImageUrl(src, px)}
          alt=""
          loading="lazy"
          referrerPolicy="no-referrer"
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }}
          onError={(e) => { e.target.style.display = 'none'; }}
        />
      )}
    </div>
  );
}

function HipoBadge({ value }) {
  if (!value) return <span className="muted">—</span>;
  const v = value.toLowerCase();
  const cls = v.indexOf('high potential') !== -1 ? 'green'
            : v.indexOf('key') !== -1 ? 'blue' : 'gray';
  return <span className={'badge ' + cls}><span className="dot"></span>{value}</span>;
}

const cellOrDash = (v) => (v && String(v).trim() !== '' ? v : <span className="muted">—</span>);

function TalentPool({ talents, quad, setQuad, onSelect }) {
  const counts = useMemoOv(() => {
    const c = { '1': 0, '2': 0, '3': 0, '4': 0 };
    talents.forEach((t) => { const q = quadKeyOf(t); if (c[q] != null) c[q]++; });
    return c;
  }, [talents]);

  const activeQuad = TALENT_QUADRANTS.find((q) => q.key === quad);
  const filtered = talents.filter((t) => quadKeyOf(t) === quad);

  return (
    <div className="card">
      <div className="card-head">
        <h3>Talent Pool</h3>
        <span className="hint">{talents.length} talents · Source: datatalent</span>
      </div>

      <div className="card-pad" style={{ paddingBottom: 0 }}>
        {/* 4-quadrant filter (Talent Box) */}
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
          {TALENT_QUADRANTS.map((q) => {
            const active = quad === q.key;
            return (
              <button
                key={q.key}
                onClick={() => setQuad(q.key)}
                title={q.full}
                className={'btn ' + (active ? 'btn-primary' : '')}
                style={{ flexDirection: 'column', alignItems: 'flex-start', height: 'auto',
                         padding: '8px 12px', gap: 2, maxWidth: 210, textAlign: 'left' }}
              >
                <span style={{ fontWeight: 700, fontSize: 13 }}>
                  ({q.key})
                  <span style={{ fontWeight: 400, opacity: 0.8, marginLeft: 6 }}>{counts[q.key]} talents</span>
                </span>
                <span style={{ fontSize: 11, opacity: 0.9, whiteSpace: 'normal', lineHeight: 1.3 }}>
                  {q.short}
                </span>
              </button>
            );
          })}
        </div>
        <div className="muted text-sm" style={{ margin: '10px 2px 0' }}>{activeQuad && activeQuad.full}</div>
      </div>

      <div style={{ overflowX: 'auto' }}>
        <table className="table" style={{ minWidth: 1180 }}>
          <thead>
            <tr>
              <th>Photo</th>
              <th>Talent Name</th>
              <th>Company</th>
              <th className="num">Age</th>
              <th className="num">Service Years</th>
              <th>Current Position</th>
              <th>High Potential / Key Contributor</th>
              <th>Next Successor</th>
              <th>Readiness Time Frame</th>
              <th>Program</th>
              <th className="num">Year of Attendance</th>
              <th>Next Leadership Dev. Program</th>
            </tr>
          </thead>
          <tbody>
            {filtered.map((t, i) => (
              <tr key={i}>
                <td>
                  <button onClick={() => onSelect(t)} title={'View ' + t.name}
                          style={{ border: 0, background: 'transparent', padding: 0, cursor: 'pointer', lineHeight: 0 }}>
                    <TalentPhoto src={t.photo} name={t.name} />
                  </button>
                </td>
                <td style={{ whiteSpace: 'nowrap' }}>
                  <button onClick={() => onSelect(t)}
                          style={{ border: 0, background: 'transparent', padding: 0, font: 'inherit',
                                   fontWeight: 500, color: 'var(--rtdc-blue-600)', cursor: 'pointer' }}>
                    {cellOrDash(t.name)}
                  </button>
                </td>
                <td>{cellOrDash(t.company)}</td>
                <td className="num">{cellOrDash(t.age)}</td>
                <td className="num">{cellOrDash(t.serviceYears)}</td>
                <td style={{ minWidth: 160 }}>{cellOrDash(t.position)}</td>
                <td><HipoBadge value={t.hipo} /></td>
                <td>{cellOrDash(t.successor)}</td>
                <td>{cellOrDash(t.readiness)}</td>
                <td>{cellOrDash(t.program)}</td>
                <td className="num">{cellOrDash(t.yearAttend)}</td>
                <td style={{ minWidth: 160 }}>{cellOrDash(t.nextProgram)}</td>
              </tr>
            ))}
            {filtered.length === 0 && (
              <tr><td colSpan={12} className="muted" style={{ textAlign: 'center', padding: 24 }}>
                No talents in this quadrant.
              </td></tr>
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
}

// Full-detail modal for a single talent (shows every non-empty column from the sheet).
function TalentDetailModal({ talent, onClose }) {
  useEffectOv(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    return () => document.removeEventListener('keydown', onKey);
  }, []);

  const skip = ['photo', 'no.', 'talent name', 'company name', 'current position (designation)',
                'talent box (refer to 4 quadrant "talent box")'];
  const fields = (talent.all || []).filter((f) => skip.indexOf(f.label.toLowerCase()) === -1);

  return (
    <div onClick={onClose}
         style={{ position: 'fixed', inset: 0, background: 'rgba(15,23,32,0.5)', zIndex: 1000,
                  display: 'flex', alignItems: 'flex-start', justifyContent: 'center',
                  padding: '40px 20px', overflowY: 'auto' }}>
      <div onClick={(e) => e.stopPropagation()} className="card"
           style={{ maxWidth: 780, width: '100%', maxHeight: '88vh', display: 'flex', flexDirection: 'column' }}>
        <div className="card-head" style={{ position: 'sticky', top: 0, background: 'var(--surface)', zIndex: 1 }}>
          <div className="row" style={{ gap: 12 }}>
            <TalentPhoto src={talent.photo} name={talent.name} />
            <div>
              <h3 style={{ margin: 0 }}>{talent.name}</h3>
              <div className="muted text-sm">
                {[talent.position, talent.company].filter(Boolean).join(' · ')}
              </div>
            </div>
          </div>
          <button className="btn btn-ghost btn-icon" onClick={onClose} title="Close">
            <window.Icons.x size={16} />
          </button>
        </div>

        <div className="card-pad" style={{ overflowY: 'auto' }}>
          {talent.talentBox && (
            <div style={{ marginBottom: 14 }}><HipoBadge value={talent.hipo} />{' '}
              <span className="badge gray" style={{ marginLeft: 6 }}>{talent.talentBox}</span>
            </div>
          )}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px 24px' }}>
            {fields.map((f, i) => (
              <div key={i} style={{ borderBottom: '1px solid var(--border-soft)', paddingBottom: 8 }}>
                <div className="text-xs muted" style={{ textTransform: 'uppercase', letterSpacing: '0.04em', fontWeight: 600, marginBottom: 2 }}>
                  {f.label}
                </div>
                <div style={{ fontSize: 13, whiteSpace: 'pre-wrap' }}>{f.value}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// TALENT REPORT
// ─────────────────────────────────────────────────────────────
function TalentReportPage() {
  const { EMPLOYEES, CCD_PROFILES } = window.RTDC_DATA;
  const I = window.Icons;
  const byCCD = ['Red','Blue','Yellow','Green'].map(c => ({
    color: c,
    count: EMPLOYEES.filter(e => e.ccd === c).length
  }));
  const total = EMPLOYEES.length;
  const byDept = Object.entries(
    EMPLOYEES.reduce((a,e) => { a[e.dept]=(a[e.dept]||0)+1; return a; }, {})
  ).map(([k,v])=>({ dept:k, count:v }));

  return (
    <div>
      <div className="page-head">
        <div>
          <div className="breadcrumb">Reports / Talent Report</div>
          <h1>Talent Report</h1>
          <div className="muted">Quarterly snapshot of talent distribution, profiles, and pipeline health.</div>
        </div>
        <div className="page-actions">
          <button className="btn"><I.filter size={14}/> Q1 2026</button>
          <button className="btn btn-primary"><I.download size={14}/> Export PDF</button>
        </div>
      </div>

      <div className="stat-grid cols-3" style={{ marginBottom: 'var(--density-gap)' }}>
        <div className="stat" data-accent="blue">
          <span className="label">Total Workforce</span>
          <span className="value">{total}</span>
          <span className="delta up"><I.up size={12}/> +4 vs Q4</span>
        </div>
        <div className="stat" data-accent="green">
          <span className="label">CCD Completion</span>
          <span className="value">94<span style={{fontSize:14,color:'var(--text-muted)',marginLeft:4}}>%</span></span>
          <span className="delta up"><I.up size={12}/> +6% QoQ</span>
        </div>
        <div className="stat" data-accent="purple">
          <span className="label">Avg Engagement</span>
          <span className="value">4.2<span style={{fontSize:14,color:'var(--text-muted)',marginLeft:4}}>/5</span></span>
          <span className="delta up"><I.up size={12}/> +0.3 QoQ</span>
        </div>
      </div>

      <div className="grid-1-1" style={{ marginBottom: 'var(--density-gap)' }}>
        <div className="card">
          <div className="card-head"><h3>CCD Distribution</h3><span className="hint">Color profile across workforce</span></div>
          <div className="card-pad row" style={{ alignItems:'center', gap: 28 }}>
            <DonutCCD data={byCCD} total={total} />
            <div className="stack flex-1" style={{ gap: 10 }}>
              {byCCD.map(d => {
                const pct = Math.round(d.count/total*100);
                const map = { Red:'#C5221F', Blue:'#0066B3', Yellow:'#C77700', Green:'#1E8E3E' };
                return (
                  <div key={d.color}>
                    <div className="row-between text-sm" style={{ marginBottom: 4 }}>
                      <span className="row gap-sm">
                        <span style={{ width:10, height:10, borderRadius:2, background:map[d.color] }}></span>
                        <strong>{d.color}</strong>
                        <span className="muted">· {CCD_PROFILES[d.color[0]].subtitle}</span>
                      </span>
                      <span className="bold">{d.count} <span className="muted">({pct}%)</span></span>
                    </div>
                    <div className="bar"><span className="fill" style={{ '--w': pct+'%', background: map[d.color] }}></span></div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>

        <div className="card">
          <div className="card-head"><h3>Workforce by Department</h3></div>
          <div className="card-pad stack" style={{ gap: 12 }}>
            {byDept.map(d => {
              const pct = Math.round(d.count/total*100);
              return (
                <div key={d.dept}>
                  <div className="row-between text-sm" style={{ marginBottom: 4 }}>
                    <span>{d.dept}</span>
                    <span className="bold">{d.count} <span className="muted">({pct}%)</span></span>
                  </div>
                  <div className="bar"><span className="fill" style={{ '--w': pct+'%' }}></span></div>
                </div>
              );
            })}
          </div>
        </div>
      </div>

      <div className="card">
        <div className="card-head">
          <h3>Pipeline Readiness</h3>
          <span className="hint">Candidates ready for next-level roles</span>
        </div>
        <div className="card-pad">
          <div className="stat-grid">
            {[
              {label:'Ready now',           value:3, color:'var(--rtdc-green)'},
              {label:'Ready in 1–2 years',  value:5, color:'var(--rtdc-blue-500)'},
              {label:'Ready in 2–3 years',  value:2, color:'var(--rtdc-amber)'},
              {label:'Development needed',  value:2, color:'var(--text-muted)'},
            ].map((p,i)=>(
              <div key={i} className="stat" style={{ borderLeft: `4px solid ${p.color}` }}>
                <span className="label">{p.label}</span>
                <span className="value" style={{color:p.color}}>{p.value}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function DonutCCD({ data, total }) {
  const map = { Red:'#C5221F', Blue:'#0066B3', Yellow:'#C77700', Green:'#1E8E3E' };
  const r = 60, c = 2 * Math.PI * r;
  let offset = 0;
  return (
    <svg viewBox="0 0 160 160" style={{ width: 160, height: 160, flexShrink:0 }}>
      <g transform="translate(80,80) rotate(-90)">
        <circle r={r} fill="none" stroke="var(--border-soft)" strokeWidth="22"/>
        {data.map((d,i) => {
          const frac = d.count / total;
          const len = c * frac;
          const seg = (
            <circle key={i} r={r} fill="none" stroke={map[d.color]} strokeWidth="22"
                    strokeDasharray={`${len} ${c-len}`} strokeDashoffset={-offset}/>
          );
          offset += len;
          return seg;
        })}
      </g>
      <text x="80" y="78" textAnchor="middle" fontSize="22" fontWeight="600" fill="var(--text)">{total}</text>
      <text x="80" y="96" textAnchor="middle" fontSize="10" fill="var(--text-muted)">EMPLOYEES</text>
    </svg>
  );
}

Object.assign(window, {
  HomePage, TalentBoxPage, TalentReportPage, CCDPill, DonutCCD, KPIChart, QATile, DistRow,
});