/* global React */
const { useState: useStateScorer, useMemo } = React;

/* ============================================================
   Scorer, interactive demo
   ============================================================ */

const CANDIDATES = [
{
  id: 'rian',
  name: 'R. Atri',
  role: 'Self Taught, 3 YoE',
  tags: 'Incoming frontier AI lab · 9 published papers · multiple shipped products',
  signals: {
    brandSchool: { legacy: 0, skills: 0, desc: 'University on resume', kw: 'No top-25 university listed' },
    brandEmployer: { legacy: -10, skills: 0, desc: 'Employer brand match', kw: 'No FAANG / unicorn on prior roles' },
    keywordDensity: { legacy: 8, skills: 2, desc: 'Keyword match to JD', kw: 'Hits 7 of 10 buzzwords' },
    gpa: { legacy: 6, skills: 1, desc: 'GPA threshold', kw: '4.0 GPA, passes 3.5 cutoff' },
    shippedProduct: { legacy: 0, skills: 26, desc: 'Deployed product with users', kw: 'Multiple production AI/ML products in the wild' },
    openSourceContrib: { legacy: 0, skills: 22, desc: 'OSS contributions', kw: 'Co-authored a widely-used clinical ML toolkit' },
    readableCommitLog: { legacy: 0, skills: 14, desc: 'Commit hygiene', kw: 'Clean, atomic history with written PR descriptions' },
    interviewConversion: { legacy: 0, skills: 22, desc: 'Past interview success', kw: '85% offer rate once humans interview' }
  }
},
{
  id: 'maya',
  name: 'J. Doe',
  role: 'Stanford CS · Google intern',
  tags: 'Brand-heavy resume · few personal projects · GPA 3.9',
  signals: {
    brandSchool: { legacy: 18, skills: 4, desc: 'University on resume', kw: 'Stanford, top-5 weight' },
    brandEmployer: { legacy: 22, skills: 4, desc: 'Employer brand match', kw: 'Google SWE intern last summer' },
    keywordDensity: { legacy: 9, skills: 2, desc: 'Keyword match to JD', kw: 'Hits 9 of 10 buzzwords' },
    gpa: { legacy: 8, skills: 1, desc: 'GPA threshold', kw: '3.9, top bracket' },
    shippedProduct: { legacy: 0, skills: 4, desc: 'Deployed product with users', kw: 'Coursework + one demo, no live users' },
    openSourceContrib: { legacy: 0, skills: 2, desc: 'OSS contributions', kw: 'None' },
    readableCommitLog: { legacy: 0, skills: 5, desc: 'Commit hygiene', kw: 'Mostly "wip" commits' },
    interviewConversion: { legacy: 0, skills: 12, desc: 'Past interview success', kw: 'Strong interviewer, prepped well' }
  }
},
{
  id: 'jordan',
  name: 'A. Aderinawale',
  role: 'CMU CS · ships side projects',
  tags: 'Top school + active GitHub · maintainer of small OSS library',
  signals: {
    brandSchool: { legacy: 17, skills: 4, desc: 'University on resume', kw: 'CMU, top-5 weight' },
    brandEmployer: { legacy: 4, skills: 2, desc: 'Employer brand match', kw: 'Mid-size startup, no FAANG' },
    keywordDensity: { legacy: 7, skills: 2, desc: 'Keyword match to JD', kw: 'Hits 6 of 10 buzzwords' },
    gpa: { legacy: 7, skills: 1, desc: 'GPA threshold', kw: '3.8' },
    shippedProduct: { legacy: 0, skills: 18, desc: 'Deployed product with users', kw: 'Two live tools, real adoption' },
    openSourceContrib: { legacy: 0, skills: 22, desc: 'OSS contributions', kw: 'Maintains a 2k★ library' },
    readableCommitLog: { legacy: 0, skills: 12, desc: 'Commit hygiene', kw: 'Clean history, signed commits' },
    interviewConversion: { legacy: 0, skills: 14, desc: 'Past interview success', kw: 'Three prior offers' }
  }
},
{
  id: 'lola',
  name: 'L. Okafor',
  role: 'Bootcamp grad · 2 deployed products',
  tags: 'Non-traditional path · strong portfolio · keyword-sparse resume',
  signals: {
    brandSchool: { legacy: -8, skills: 0, desc: 'University on resume', kw: 'Bootcamp not whitelisted' },
    brandEmployer: { legacy: -6, skills: 0, desc: 'Employer brand match', kw: 'Freelance only' },
    keywordDensity: { legacy: 4, skills: 1, desc: 'Keyword match to JD', kw: 'Hits 4 of 10, uses different terms' },
    gpa: { legacy: -5, skills: 0, desc: 'GPA threshold', kw: 'No GPA field' },
    shippedProduct: { legacy: 0, skills: 24, desc: 'Deployed product with users', kw: 'Two SaaS tools, paying customers' },
    openSourceContrib: { legacy: 0, skills: 10, desc: 'OSS contributions', kw: '2 merged PRs' },
    readableCommitLog: { legacy: 0, skills: 11, desc: 'Commit hygiene', kw: 'Tests on every PR' },
    interviewConversion: { legacy: 0, skills: 16, desc: 'Past interview success', kw: 'High when reached; rarely reached' }
  }
}];


const LEGACY_SIGNALS = ['brandSchool', 'brandEmployer', 'keywordDensity', 'gpa'];
const SKILLS_SIGNALS = ['shippedProduct', 'openSourceContrib', 'readableCommitLog', 'interviewConversion'];

function scoreCandidate(c, mode) {
  const keys = mode === 'legacy' ? LEGACY_SIGNALS : SKILLS_SIGNALS;
  let total = 0;
  for (const k of keys) total += c.signals[k][mode];
  return mode === 'legacy' ? Math.round(total / 55 * 100) : Math.round(total / 90 * 100);
}

function ScorerDemo() {
  const [mode, setMode] = useStateScorer('legacy');
  const [selected, setSelected] = useStateScorer('rian');

  const ranked = useMemo(() => {
    return [...CANDIDATES].
    map((c) => ({ ...c, score: scoreCandidate(c, mode) })).
    sort((a, b) => b.score - a.score);
  }, [mode]);

  const cand = ranked.find((c) => c.id === selected) || ranked[0];
  const keys = mode === 'legacy' ? LEGACY_SIGNALS : SKILLS_SIGNALS;
  const passThreshold = mode === 'legacy' ? 50 : 55;
  const passed = cand.score >= passThreshold;

  return (
    <div className="scorer">
      <div className="scorer-head menu-bar">
        <div className="menu-left">
          <span className="menu-crumb">candidates</span>
          <span className="menu-sep">/</span>
          <span className="menu-crumb active">{mode === 'legacy' ? 'Legacy ATS' : 'Skills-First'}</span>
        </div>
        <div className="toggle" role="tablist">
          <button className={mode === 'legacy' ? 'active' : ''} onClick={() => setMode('legacy')}>Legacy ATS</button>
          <button className={mode === 'skills' ? 'active' : ''} onClick={() => setMode('skills')}>Skills-First</button>
        </div>
      </div>

      <div className="scorer-body">
        <div className="candidate-col">
          <ul className="candidate-list">
            {ranked.map((c) => {
              const isSel = c.id === selected;
              const cls = c.score >= passThreshold ? 'pass' : 'fail';
              return (
                <li
                  key={c.id}
                  className={`candidate ${isSel ? 'selected' : ''} ${cls}`}
                  onClick={() => setSelected(c.id)}>

                  <div>
                    <div className="name">{c.name}</div>
                    <div className="role">{c.role}</div>
                    <div className="tags">{c.tags}</div>
                  </div>
                  <div className="score-pill">{c.score}</div>
                </li>);

            })}
          </ul>
        </div>

        <div className="detail-col">
          <h5>{cand.name}</h5>
          <div className="sub">{cand.role}</div>

          {keys.map((k) => {
            const s = cand.signals[k];
            const v = s[mode];
            return (
              <div key={k} className="signal-row">
                <div className="desc">{s.desc}<small>{s.kw}</small></div>
                <div className="weight">{mode === 'legacy' ? 'ATS' : 'Skills'} weight</div>
                <div className={`pts ${v > 0 ? 'plus' : v < 0 ? 'minus' : ''}`}>{v > 0 ? '+' : ''}{v}</div>
              </div>);

          })}

          <div className="score-final">
            <div>
              <div className="label">Composite score</div>
              <div className={`verdict ${passed ? 'pass' : 'fail'}`}>{passed ? '✓ Advanced to next round' : '✗ Filtered out'}</div>
            </div>
            <div className="val">{cand.score}<span style={{ fontSize: '0.4em', color: 'var(--muted)' }}>/100</span></div>
          </div>
        </div>
      </div>
    </div>);

}

/* ============================================================
   Demo section wrapper
   ============================================================ */
function DemoSection() {
  return (
    <section id="demo" className="section">
      <div className="shell">
        <div className="section-head center">
          <h2 className="section-title">
            The same four candidates. <span className="em">Two different filters.</span>
          </h2>
          <p className="section-kicker">
            Toggle between a brand-and-keyword Legacy ATS and a Skills-First model that weighs shipped artifacts and past interview conversion. Watch who advances. This is a proof-of-concept of the proposed alternative to traditional automated screening.
          </p>
        </div>
        <ScorerDemo />
        <p style={{ fontSize: 12, color: 'var(--muted)', fontFamily: 'var(--mono)', letterSpacing: '0.05em', marginTop: 18, maxWidth: '70ch' }}>
          NOTE · Weights here are illustrative, calibrated against the patterns reported in Source O1. A production scorer would be tuned against historical hire-quality data.
        </p>
      </div>
    </section>);

}

Object.assign(window, { ScorerDemo, DemoSection });