// pages-eval.jsx — CCD, KPI, CoreValues, Competency

const { useState: useStateEv, useMemo: useMemoEv } = React;

// ─────────────────────────────────────────────────────────────
// CCD - 20 question color-code detection
// ─────────────────────────────────────────────────────────────
function CCDPage() {
  const { CCD_QUESTIONS, CCD_PROFILES } = window.RTDC_DATA;
  const [step, setStep]         = useStateEv('intro'); // intro | quiz | result | history
  const [idx, setIdx]           = useStateEv(0);
  const [answers, setAnswers]   = useStateEv({});       // {qIdx: 'R'}
  const [viewing, setViewing]   = useStateEv(null);     // a past attempt being viewed
  const [saveState, setSaveState] = useStateEv('idle'); // idle | saving | saved | error
  const [history, setHistory]   = useStateEv(null);     // attempts[] | null (loading)
  const [historyErr, setHistoryErr] = useStateEv('');

  const total = CCD_QUESTIONS.length;

  const reset = () => { setStep('intro'); setIdx(0); setAnswers({}); setViewing(null); setSaveState('idle'); };

  const tallyFrom = (ans) => {
    const t = { R: 0, B: 0, Y: 0, G: 0 };
    Object.values(ans).forEach(c => { if (t[c] != null) t[c]++; });
    return t;
  };
  const resultOf = (t) => ({
    tally: t,
    dominant: ['R','B','Y','G'].reduce((b, c) => t[c] > t[b] ? c : b, 'R'),
    sorted: ['R','B','Y','G'].slice().sort((a, b) => t[b] - t[a]),
  });

  // Finished the quiz → show result and save it to ccd_data.
  const finish = (finalAnswers) => {
    const t = tallyFrom(finalAnswers);
    setViewing(null);
    setStep('result');
    setSaveState('saving');
    window.RTDC_SHEETS.ccdSave({ dominant: resultOf(t).dominant, tally: t })
      .then(r => setSaveState(r && r.ok ? 'saved' : 'error'))
      .catch(() => setSaveState('error'));
  };

  const select = (qIdx, color) => {
    const next = { ...answers, [qIdx]: color };
    setAnswers(next);
    setTimeout(() => {
      if (qIdx < total - 1) setIdx(qIdx + 1);
      else finish(next);
    }, 220);
  };

  const loadHistory = () => {
    setHistory(null); setHistoryErr(''); setStep('history');
    window.RTDC_SHEETS.ccdHistory()
      .then(a => setHistory(a))
      .catch(() => setHistoryErr('Could not load your past results.'));
  };

  // Active result for the result step: a past attempt, or the just-finished one.
  const activeTally = viewing
    ? { R: viewing.R, B: viewing.B, Y: viewing.Y, G: viewing.G }
    : tallyFrom(answers);
  const active = resultOf(activeTally);

  return (
    <div>
      <div className="page-head">
        <div>
          <div className="breadcrumb">Evaluation System / Color Code Detection</div>
          <h1>Color Code Detection (CCD)</h1>
          <div className="muted">A 20-question assessment that maps your working style to a color profile.</div>
        </div>
        <div className="page-actions">
          {step !== 'history' && <button className="btn" onClick={loadHistory}>My results</button>}
          {step !== 'intro' && <button className="btn" onClick={reset}>Start over</button>}
        </div>
      </div>

      {step === 'intro' && <CCDIntro onStart={() => setStep('quiz')} onViewPast={loadHistory} />}

      {step === 'quiz' && (
        <CCDQuiz
          questions={CCD_QUESTIONS}
          idx={idx} setIdx={setIdx}
          answers={answers}
          onSelect={select}
        />
      )}

      {step === 'result' && (
        <CCDResult
          tally={active.tally} sorted={active.sorted} dominant={active.dominant}
          profiles={CCD_PROFILES}
          onRetake={reset}
          historical={viewing}
          saveState={viewing ? null : saveState}
          onViewHistory={loadHistory}
          onBack={viewing ? loadHistory : null}
        />
      )}

      {step === 'history' && (
        <CCDHistory
          attempts={history} error={historyErr} profiles={CCD_PROFILES}
          onView={(a) => { setViewing(a); setStep('result'); }}
          onStart={() => { setIdx(0); setAnswers({}); setViewing(null); setStep('quiz'); }}
        />
      )}
    </div>
  );
}

function CCDIntro({ onStart, onViewPast }) {
  const I = window.Icons;
  const colors = [
    { c: 'R', name: 'Red',    sub: 'The Driver',     desc: 'Action-oriented, decisive, goal-driven.' },
    { c: 'B', name: 'Blue',   sub: 'The Analyst',    desc: 'Methodical, precise, quality-focused.' },
    { c: 'Y', name: 'Yellow', sub: 'The Influencer', desc: 'Expressive, energetic, people-focused.' },
    { c: 'G', name: 'Green',  sub: 'The Supporter',  desc: 'Patient, steady, team-oriented.' },
  ];
  const swatch = { R:'#C5221F', B:'#0066B3', Y:'#C77700', G:'#1E8E3E' };
  return (
    <div className="grid-2">
      <div className="card card-pad">
        <h2 style={{ margin: '0 0 6px', fontSize: 18, fontWeight: 600 }}>Discover your working style</h2>
        <p className="muted" style={{ marginTop: 0 }}>
          This assessment identifies how you operate, communicate, and solve problems.
          Your results are kept private and used to recommend roles, growth areas and team pairings.
        </p>

        <div className="divider"></div>

        <div className="stack" style={{ gap: 12 }}>
          <InfoRow icon="check"   label="20 multiple-choice questions" sub="No right or wrong answers — choose what feels most true." />
          <InfoRow icon="check"   label="Takes about 5–7 minutes"      sub="Your progress is saved as you go." />
          <InfoRow icon="check"   label="Identifies one primary color profile" sub="With secondary tendencies and growth areas." />
          <InfoRow icon="shield"  label="Confidential by default"      sub="Only you and HR Admin can view your detailed result." />
        </div>

        <div className="row gap-md" style={{ marginTop: 22 }}>
          <button className="btn btn-primary" onClick={onStart}>
            Start Assessment <I.arrowRight size={14}/>
          </button>
          <button className="btn" onClick={onViewPast}>View past results</button>
        </div>
      </div>

      <div className="card">
        <div className="card-head"><h3>The Four Profiles</h3></div>
        <div className="card-pad stack" style={{ gap: 14 }}>
          {colors.map(c => (
            <div className="row" key={c.c} style={{ alignItems: 'flex-start' }}>
              <span style={{ width: 40, height: 40, borderRadius: 8, background: swatch[c.c], flexShrink: 0, position:'relative' }}>
                <span style={{ position:'absolute', inset:0, display:'flex', alignItems:'center', justifyContent:'center', color:'#fff', fontWeight:700, fontSize:13 }}>{c.c}</span>
              </span>
              <div>
                <div style={{ fontWeight: 600, fontSize: 13.5 }}>{c.name} <span style={{ color:'var(--text-muted)', fontWeight:400 }}>· {c.sub}</span></div>
                <div className="muted text-sm">{c.desc}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function InfoRow({ icon, label, sub }) {
  const I = window.Icons[icon] || window.Icons.check;
  return (
    <div className="row" style={{ alignItems: 'flex-start' }}>
      <span style={{ width: 26, height: 26, borderRadius: 6, background: 'var(--rtdc-blue-50)', color: 'var(--rtdc-blue-500)', display: 'inline-flex', alignItems:'center', justifyContent:'center', flexShrink: 0 }}>
        <I size={14}/>
      </span>
      <div>
        <div style={{ fontWeight: 500, fontSize: 13 }}>{label}</div>
        <div className="muted text-sm">{sub}</div>
      </div>
    </div>
  );
}

function CCDQuiz({ questions, idx, setIdx, answers, onSelect }) {
  const total = questions.length;
  const q = questions[idx];
  const answered = Object.keys(answers).length;
  const pct = (answered / total) * 100;

  return (
    <div>
      <div className="ccd-progress">
        <span className="label">Question {idx + 1} of {total}</span>
        <div className="bar"><span className="fill" style={{ '--w': pct + '%' }}></span></div>
        <span style={{ fontSize: 12, color: 'var(--text-muted)', fontWeight: 600, minWidth: 50, textAlign:'right' }}>
          {Math.round(pct)}%
        </span>
      </div>

      <div className="ccd-question">
        <div style={{ fontSize: 11.5, color:'var(--text-muted)', textTransform:'uppercase', letterSpacing:'0.08em', fontWeight:600, marginBottom:8 }}>
          Section {Math.floor(idx/5)+1} · Working style
        </div>
        <h2 style={{ margin:'0 0 4px', fontSize: 20, fontWeight: 600, letterSpacing:'-0.01em' }}>
          {q.q}
        </h2>
        <div className="muted text-sm">Choose the option that best describes you.</div>

        <div className="ccd-options">
          {q.options.map((opt, i) => {
            const selected = answers[idx] === opt.color;
            return (
              <button key={i}
                      className={'ccd-option' + (selected ? ' selected' : '')}
                      onClick={() => onSelect(idx, opt.color)}>
                <span className="key">{String.fromCharCode(65 + i)}</span>
                <span>{opt.text}</span>
              </button>
            );
          })}
        </div>

        <div className="row-between" style={{ marginTop: 22, paddingTop: 16, borderTop: '1px solid var(--border-soft)' }}>
          <button className="btn" disabled={idx===0} onClick={() => setIdx(Math.max(0, idx-1))}
                  style={{ opacity: idx===0 ? 0.4 : 1 }}>
            ← Previous
          </button>
          <span className="muted text-sm">{Object.keys(answers).length} of {total} answered</span>
          <button className="btn btn-primary" disabled={!(idx in answers)} onClick={() => setIdx(Math.min(total-1, idx+1))}
                  style={{ opacity: (idx in answers) ? 1 : 0.4 }}>
            Next →
          </button>
        </div>
      </div>
    </div>
  );
}

function fmtDateTime(iso) {
  if (!iso) return '—';
  const d = new Date(iso);
  return isNaN(d.getTime()) ? String(iso) : d.toLocaleString();
}

function CCDSection({ title, items, color }) {
  return (
    <div>
      <div style={{ fontSize: 11.5, textTransform: 'uppercase', letterSpacing: '0.06em', color: color, fontWeight: 600, marginBottom: 8 }}>{title}</div>
      <ul style={{ margin: 0, paddingLeft: 18, fontSize: 13, lineHeight: 1.7 }}>
        {(items || []).map((s, i) => (<li key={i}>{s}</li>))}
      </ul>
    </div>
  );
}

function CCDResult({ tally, sorted, dominant, profiles, onRetake, historical, saveState, onViewHistory, onBack }) {
  const I = window.Icons;
  const swatch = { R:'#C5221F', B:'#0066B3', Y:'#C77700', G:'#1E8E3E' };
  const cls    = { R:'ccd-red', B:'ccd-blue', Y:'ccd-yellow', G:'ccd-green' };
  const total = Object.values(tally).reduce((a,b)=>a+b,0) || 1;
  const profile = profiles[dominant];

  return (
    <div>
      <div className={'ccd-result-card ' + cls[dominant]}>
        <span className="crown">{historical ? 'PAST RESULT' : 'YOUR DOMINANT PROFILE'}</span>
        <h2>{profile.name} · {profile.subtitle}</h2>
        <p style={{ margin: 0, fontSize: 14, color: 'var(--text-2)', maxWidth: 640 }}>
          {profile.summary}
        </p>
        {historical && (
          <div style={{ marginTop: 10, fontSize: 12.5, color: 'var(--text-2)' }}>
            Taken on {fmtDateTime(historical.timestamp)}
          </div>
        )}
      </div>

      <div className="grid-2" style={{ marginTop: 'var(--density-gap)' }}>
        <div className="card">
          <div className="card-head"><h3>Profile Breakdown</h3><span className="hint">Distribution of your 20 answers</span></div>
          <div className="card-pad stack" style={{ gap: 14 }}>
            {sorted.map(c => {
              const pct = Math.round(tally[c]/total*100);
              const p = profiles[c];
              return (
                <div key={c}>
                  <div className="row-between text-sm" style={{ marginBottom: 4 }}>
                    <span className="row gap-sm">
                      <span style={{ width:12, height:12, borderRadius:3, background:swatch[c] }}></span>
                      <strong>{p.name}</strong>
                      <span className="muted">· {p.subtitle}</span>
                    </span>
                    <span className="bold">{tally[c]}/{total} <span className="muted">({pct}%)</span></span>
                  </div>
                  <div className="bar"><span className="fill" style={{ '--w': pct+'%', background: swatch[c] }}></span></div>
                </div>
              );
            })}
          </div>
        </div>

        <div className="card">
          <div className="card-head"><h3>Development Insights</h3><span className="hint">For your dominant profile</span></div>
          <div className="card-pad" style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:'16px 20px' }}>
            <CCDSection title="Strengths"         items={profile.strengths}       color="var(--rtdc-green)" />
            <CCDSection title="Weaknesses"        items={profile.weaknesses}      color="var(--rtdc-red)" />
            <CCDSection title="Skills to Develop" items={profile.skillsToDevelop} color="var(--rtdc-blue-600)" />
            <CCDSection title="Cautions"          items={profile.cautions}        color="var(--rtdc-amber)" />
          </div>
        </div>
      </div>

      <div className="card" style={{ marginTop: 'var(--density-gap)' }}>
        <div className="card-head"><h3>Suited Roles</h3><span className="hint">Based on your dominant profile</span></div>
        <div className="card-pad" style={{ display:'flex', gap: 10, flexWrap:'wrap' }}>
          {profile.suitedRoles.map((r,i)=>(
            <span key={i} className="badge blue" style={{ padding: '6px 12px', fontSize: 12 }}>
              <I.briefcase size={11}/> {r}
            </span>
          ))}
        </div>
      </div>

      <div className="row-between" style={{ marginTop: 18, flexWrap: 'wrap', gap: 12 }}>
        <div className="row gap-md">
          {historical
            ? <button className="btn" onClick={onBack}>← Back to my results</button>
            : <button className="btn" onClick={onViewHistory}>View my past results</button>}
          <button className="btn btn-primary" onClick={onRetake}>Retake assessment</button>
        </div>
        {!historical && (
          <span className="text-sm" style={{ color: saveState === 'error' ? 'var(--rtdc-red)' : 'var(--text-muted)' }}>
            {saveState === 'saving' && 'Saving result…'}
            {saveState === 'saved'  && '✓ Saved to your history'}
            {saveState === 'error'  && '⚠ Could not save (retake to retry)'}
          </span>
        )}
      </div>
    </div>
  );
}

function CCDHistory({ attempts, error, profiles, onView, onStart }) {
  const swatch = { R:'#C5221F', B:'#0066B3', Y:'#C77700', G:'#1E8E3E' };
  const sorted = attempts ? attempts.slice().sort((a,b) => new Date(b.timestamp) - new Date(a.timestamp)) : null;
  return (
    <div className="card">
      <div className="card-head">
        <h3>My Past Results</h3>
        <button className="btn btn-sm btn-primary" onClick={onStart}>
          <window.Icons.plus size={13}/> Take new assessment
        </button>
      </div>
      {error && <div className="card-pad" style={{ color:'var(--rtdc-red)' }}>{error}</div>}
      {!attempts && !error && <div className="card-pad muted">Loading your history…</div>}
      {sorted && !error && sorted.length === 0 && (
        <div className="card-pad muted">No results yet — take the assessment and it will appear here.</div>
      )}
      {sorted && sorted.length > 0 && (
        <table className="table">
          <thead>
            <tr><th>Date &amp; Time</th><th>Dominant Profile</th><th>Breakdown</th><th></th></tr>
          </thead>
          <tbody>
            {sorted.map((a, i) => {
              const p = profiles[a.dominant] || {};
              return (
                <tr key={i}>
                  <td style={{ whiteSpace:'nowrap' }}>{fmtDateTime(a.timestamp)}</td>
                  <td>
                    <span className="row gap-sm">
                      <span style={{ width:12, height:12, borderRadius:3, background:swatch[a.dominant] || '#999' }}></span>
                      <strong>{p.name || a.dominant}</strong>
                      <span className="muted">· {p.subtitle || ''}</span>
                    </span>
                  </td>
                  <td className="muted text-xs" style={{ whiteSpace:'nowrap' }}>R {a.R} · B {a.B} · Y {a.Y} · G {a.G}</td>
                  <td><button className="btn btn-sm" onClick={() => onView(a)}>View</button></td>
                </tr>
              );
            })}
          </tbody>
        </table>
      )}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// KPI PAGE
// ─────────────────────────────────────────────────────────────
function KPIPage() {
  const { KPI_DATA, KPI_ITEMS } = window.RTDC_DATA;
  const I = window.Icons;

  // overall score = weighted avg of (actual/target normalised to 100)
  const overall = useMemoEv(() => {
    let totalW = 0, totalS = 0;
    KPI_ITEMS.forEach(k => {
      const score = Math.min(120, (k.actual / k.target) * 100);
      totalS += score * k.weight;
      totalW += k.weight;
    });
    return Math.round(totalS / totalW);
  }, []);

  return (
    <div>
      <div className="page-head">
        <div>
          <div className="breadcrumb">Evaluation System / KPI</div>
          <h1>Key Performance Indicators</h1>
          <div className="muted">Track quarterly performance against target across talent development metrics.</div>
        </div>
        <div className="page-actions">
          <button className="btn"><I.filter size={14}/> Q1 2026</button>
          <button className="btn"><I.download size={14}/> Export</button>
          <button className="btn btn-primary"><I.edit size={14}/> Update KPI</button>
        </div>
      </div>

      <div className="stat-grid cols-3" style={{ marginBottom: 'var(--density-gap)' }}>
        <div className="stat" data-accent="blue">
          <span className="label">Overall KPI Score</span>
          <span className="value">{overall}<span style={{fontSize:14,color:'var(--text-muted)',marginLeft:4}}>%</span></span>
          <span className="delta up"><I.up size={12}/> +5% vs Q4 target</span>
        </div>
        <div className="stat" data-accent="green">
          <span className="label">On Target</span>
          <span className="value">{KPI_ITEMS.filter(k => k.actual >= k.target).length}<span style={{fontSize:14,color:'var(--text-muted)',marginLeft:4}}>/{KPI_ITEMS.length}</span></span>
          <span className="delta up">5 metrics meeting goal</span>
        </div>
        <div className="stat" data-accent="amber">
          <span className="label">Below Target</span>
          <span className="value">{KPI_ITEMS.filter(k => k.actual < k.target).length}</span>
          <span className="delta">Requires attention</span>
        </div>
      </div>

      <div className="grid-2" style={{ marginBottom: 'var(--density-gap)' }}>
        <div className="card">
          <div className="card-head">
            <h3>Performance Trend</h3>
            <span className="hint">Quarterly target vs actual</span>
          </div>
          <div className="card-pad">
            <window.KPIChart data={KPI_DATA} />
          </div>
        </div>

        <div className="card">
          <div className="card-head"><h3>Distribution</h3></div>
          <div className="card-pad stack" style={{ gap: 12 }}>
            <div className="kv"><span className="k">Exceeding target (+10% or more)</span><span className="v" style={{ color: 'var(--rtdc-green)' }}>2 metrics</span></div>
            <div className="kv"><span className="k">Meeting target</span><span className="v" style={{ color: 'var(--rtdc-blue-500)' }}>3 metrics</span></div>
            <div className="kv"><span className="k">Within 10% of target</span><span className="v" style={{ color: 'var(--rtdc-amber)' }}>1 metric</span></div>
            <div className="kv"><span className="k">Below 90% of target</span><span className="v" style={{ color: 'var(--rtdc-red)' }}>0 metrics</span></div>
            <div className="divider"></div>
            <div className="kv"><span className="k">Review window</span><span className="v">Apr 1 – Jun 30, 2026</span></div>
            <div className="kv"><span className="k">Next review</span><span className="v">Jul 12, 2026</span></div>
          </div>
        </div>
      </div>

      <div className="card">
        <div className="card-head"><h3>KPI Details</h3><span className="hint">Weighted by importance</span></div>
        <table className="table">
          <thead>
            <tr>
              <th style={{ width: 70 }}>ID</th>
              <th>Metric</th>
              <th className="num">Target</th>
              <th className="num">Actual</th>
              <th className="num">Weight</th>
              <th>Progress</th>
              <th>Status</th>
            </tr>
          </thead>
          <tbody>
            {KPI_ITEMS.map(k => {
              const pct = Math.min(120, (k.actual / k.target) * 100);
              const onTarget = k.actual >= k.target;
              return (
                <tr key={k.id}>
                  <td className="muted">{k.id}</td>
                  <td>
                    <div style={{ fontWeight: 500 }}>{k.name}</div>
                  </td>
                  <td className="num">{k.target}{k.unit && <span className="muted"> {k.unit}</span>}</td>
                  <td className="num bold">{k.actual}{k.unit && <span className="muted"> {k.unit}</span>}</td>
                  <td className="num">{k.weight}%</td>
                  <td style={{ width: 200 }}>
                    <div className="row gap-sm">
                      <div className="bar flex-1"><span className="fill" style={{ '--w': Math.min(100, pct) + '%', background: onTarget ? 'var(--rtdc-green)' : 'var(--rtdc-amber)' }}></span></div>
                      <span className="text-xs muted bold" style={{ minWidth: 36, textAlign: 'right' }}>{Math.round(pct)}%</span>
                    </div>
                  </td>
                  <td>
                    {onTarget ? (
                      <span className="badge green"><span className="dot"></span>On Track</span>
                    ) : (
                      <span className="badge amber"><span className="dot"></span>Behind</span>
                    )}
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// CORE VALUES
// ─────────────────────────────────────────────────────────────
function CoreValuesPage() {
  const { CORE_VALUES } = window.RTDC_DATA;
  const I = window.Icons;
  // Self-assessment scores
  const scores = { absolute_credibility: 4.4, enterprising: 3.9, harmonious_growth: 4.2 };

  return (
    <div>
      <div className="page-head">
        <div>
          <div className="breadcrumb">Evaluation System / Core Values</div>
          <h1>Core Values</h1>
          <div className="muted">The principles every member of the organization commits to, and how you live them.</div>
        </div>
        <div className="page-actions">
          <button className="btn btn-primary"><I.edit size={14}/> Self-Assess</button>
        </div>
      </div>

      <div className="stat-grid cols-3" style={{ marginBottom: 'var(--density-gap)' }}>
        {CORE_VALUES.map((v, i) => {
          const score = scores[v.key];
          const accent = ['blue','green','purple'][i];
          return (
            <div className="stat" data-accent={accent} key={v.key}>
              <span className="label">{v.label}</span>
              <span className="value">{score.toFixed(1)}<span style={{ fontSize:14, color:'var(--text-muted)', marginLeft:4 }}>/5</span></span>
              <div className="bar" style={{ marginTop: 4 }}>
                <span className="fill" style={{ '--w': (score/5*100)+'%' }}></span>
              </div>
            </div>
          );
        })}
      </div>

      <div className="stack" style={{ gap: 'var(--density-gap)' }}>
        {CORE_VALUES.map((v, i) => {
          const score = scores[v.key];
          return (
            <div className="card card-pad" key={v.key}>
              <div className="row gap-md" style={{ alignItems: 'flex-start' }}>
                <div style={{
                  width: 48, height: 48, borderRadius: 10,
                  background: 'var(--rtdc-blue-50)', color: 'var(--rtdc-blue-600)',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  fontWeight: 700, fontSize: 20, flexShrink: 0,
                }}>{i+1}</div>
                <div style={{ flex: 1 }}>
                  <div className="row-between">
                    <div>
                      <div style={{ fontSize: 16, fontWeight: 600 }}>{v.label}</div>
                      <div className="muted text-sm" style={{ maxWidth: 560 }}>{v.desc}</div>
                    </div>
                    <div style={{ textAlign:'right' }}>
                      <div style={{ fontSize: 22, fontWeight: 600 }}>{score.toFixed(1)}<span style={{ fontSize: 12, color:'var(--text-muted)' }}>/5</span></div>
                      <div className="muted text-xs">Self · Manager · Peer avg</div>
                    </div>
                  </div>

                  <div className="divider"></div>

                  <div style={{ display:'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 16 }}>
                    <Behavior label="Lived consistently" value="92%" desc="Self assessment frequency" />
                    <Behavior label="Manager rating" value={(score-0.2).toFixed(1) + '/5'} desc="Last review cycle" />
                    <Behavior label="Peer rating" value={(score+0.1).toFixed(1) + '/5'} desc="360° aggregate" />
                  </div>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function Behavior({ label, value, desc }) {
  return (
    <div>
      <div className="text-xs muted" style={{ textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 600, marginBottom: 2 }}>{label}</div>
      <div style={{ fontSize: 18, fontWeight: 600 }}>{value}</div>
      <div className="text-xs muted">{desc}</div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// COMPETENCY
// ─────────────────────────────────────────────────────────────
function CompetencyPage() {
  const { COMPETENCIES } = window.RTDC_DATA;
  const I = window.Icons;
  const grouped = COMPETENCIES.reduce((a, c) => { (a[c.group] = a[c.group] || []).push(c); return a; }, {});
  const avg = Math.round(COMPETENCIES.reduce((a,c)=>a+c.score,0)/COMPETENCIES.length);

  return (
    <div>
      <div className="page-head">
        <div>
          <div className="breadcrumb">Evaluation System / Competency</div>
          <h1>Competency</h1>
          <div className="muted">Your skill profile across core, functional and behavioral dimensions.</div>
        </div>
        <div className="page-actions">
          <button className="btn"><I.download size={14}/> Export</button>
          <button className="btn btn-primary"><I.edit size={14}/> Update Assessment</button>
        </div>
      </div>

      <div className="stat-grid cols-3" style={{ marginBottom: 'var(--density-gap)' }}>
        <div className="stat" data-accent="blue">
          <span className="label">Overall Competency</span>
          <span className="value">{avg}<span style={{ fontSize:14, color:'var(--text-muted)', marginLeft:4 }}>/100</span></span>
          <span className="delta up"><I.up size={12}/> +3 vs last cycle</span>
        </div>
        <div className="stat" data-accent="green">
          <span className="label">Strengths</span>
          <span className="value">{COMPETENCIES.filter(c=>c.score>=85).length}</span>
          <span className="delta">Score ≥ 85</span>
        </div>
        <div className="stat" data-accent="amber">
          <span className="label">Development Areas</span>
          <span className="value">{COMPETENCIES.filter(c=>c.score<75).length}</span>
          <span className="delta">Score below 75</span>
        </div>
      </div>

      <div className="grid-2">
        <div className="card">
          <div className="card-head"><h3>Competency Radar</h3><span className="hint">Visualised skill profile</span></div>
          <div className="card-pad" style={{ display:'flex', justifyContent:'center' }}>
            <RadarChart data={COMPETENCIES} />
          </div>
        </div>

        <div className="card">
          <div className="card-head"><h3>By Category</h3></div>
          <div className="card-pad stack" style={{ gap: 18 }}>
            {Object.entries(grouped).map(([g, items]) => (
              <div key={g}>
                <div className="row-between" style={{ marginBottom: 8 }}>
                  <span className="bold" style={{ fontSize: 13 }}>{g}</span>
                  <span className="muted text-xs">{items.length} competencies</span>
                </div>
                <div className="stack" style={{ gap: 8 }}>
                  {items.map(c => {
                    const tone = c.score >= 85 ? 'var(--rtdc-green)' : c.score >= 75 ? 'var(--rtdc-blue-500)' : 'var(--rtdc-amber)';
                    return (
                      <div key={c.key}>
                        <div className="row-between text-sm" style={{ marginBottom: 3 }}>
                          <span>{c.label}</span>
                          <span className="bold">{c.score}/100</span>
                        </div>
                        <div className="bar"><span className="fill" style={{ '--w': c.score + '%', background: tone }}></span></div>
                      </div>
                    );
                  })}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="card" style={{ marginTop: 'var(--density-gap)' }}>
        <div className="card-head"><h3>Recommended Development Plan</h3><span className="hint">Generated from your lowest-scoring areas</span></div>
        <table className="table">
          <thead>
            <tr>
              <th>Competency</th>
              <th>Current</th>
              <th>Target</th>
              <th>Recommended Action</th>
              <th>Timeline</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><strong>Innovation</strong></td>
              <td>71/100</td>
              <td>80/100</td>
              <td>Enroll in "Design Thinking for Engineers" workshop</td>
              <td><span className="badge blue"><span className="dot"></span>Q2 2026</span></td>
            </tr>
            <tr>
              <td><strong>Adaptability</strong></td>
              <td>74/100</td>
              <td>82/100</td>
              <td>Cross-functional rotation with Product team</td>
              <td><span className="badge blue"><span className="dot"></span>Q2–Q3 2026</span></td>
            </tr>
            <tr>
              <td><strong>Problem Solving</strong></td>
              <td>76/100</td>
              <td>85/100</td>
              <td>Mentorship pairing with senior architect</td>
              <td><span className="badge amber"><span className="dot"></span>Ongoing</span></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  );
}

function RadarChart({ data }) {
  const cx = 180, cy = 170, R = 130;
  const n = data.length;
  const angle = (i) => (Math.PI * 2 * i) / n - Math.PI / 2;
  const pt = (i, r) => [cx + Math.cos(angle(i)) * r, cy + Math.sin(angle(i)) * r];

  const grid = [0.25, 0.5, 0.75, 1].map(t => (
    Array.from({ length: n }).map((_, i) => pt(i, R * t).join(',')).join(' ')
  ));

  const polyPts = data.map((d, i) => pt(i, R * (d.score / 100)).join(',')).join(' ');

  return (
    <svg viewBox="0 0 360 340" style={{ width: '100%', maxWidth: 360 }}>
      {/* grid */}
      {grid.map((g, i) => (
        <polygon key={i} points={g} fill="none" stroke="var(--border-soft)" strokeWidth="1"/>
      ))}
      {/* axes */}
      {data.map((d, i) => {
        const [px, py] = pt(i, R);
        return <line key={i} x1={cx} y1={cy} x2={px} y2={py} stroke="var(--border-soft)" strokeWidth="1"/>;
      })}
      {/* data polygon */}
      <polygon points={polyPts} fill="var(--rtdc-blue-500)" fillOpacity="0.18"
               stroke="var(--rtdc-blue-500)" strokeWidth="2" strokeLinejoin="round"/>
      {data.map((d, i) => {
        const [px, py] = pt(i, R * (d.score / 100));
        return <circle key={i} cx={px} cy={py} r="3.5" fill="var(--rtdc-blue-500)" stroke="var(--surface)" strokeWidth="2"/>;
      })}
      {/* labels */}
      {data.map((d, i) => {
        const [px, py] = pt(i, R + 18);
        return (
          <text key={i} x={px} y={py} textAnchor="middle" dominantBaseline="middle"
                fontSize="10.5" fontFamily="var(--font-sans)" fill="var(--text-2)" fontWeight="500">
            {d.label}
          </text>
        );
      })}
    </svg>
  );
}

Object.assign(window, {
  CCDPage, KPIPage, CoreValuesPage, CompetencyPage,
});