/* global React, window */
(function() {
const { useState, useMemo } = React;
const CUSTOMERS = window.VHB_DATA.CUSTOMERS;
const JDS = window.VHB_DATA.JDS;
const CANDIDATES = window.VHB_DATA.CANDIDATES;

// ── Top GNB ──────────────────────────────────────────────
function GNB({ tab, setTab }) {
  const tabs = [
    { id: 'resume', label: '이력서 분석' },
    { id: 'workbench', label: '워크벤치' },
    { id: 'demo', label: '데모' },
    { id: 'kanban', label: '칸반보드' },
    { id: 'pipeline', label: '채용 파이프라인' },
    { id: 'newsletter', label: '마켓 인사이트' }
  ];
  return (
    <header className="vhb-gnb">
      <div className="vhb-gnb-mark">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="#0b0b0d">
          <path d="M4 4 L12 20 L20 4 L16 4 L12 13 L8 4 Z" />
        </svg>
      </div>
      <div className="vhb-gnb-name">ValueHire <span className="vhb-gnb-beta">B2B Beta</span></div>
      <a
        className="vhb-gnb-glance"
        href="#"
        title="ValueConnect 회사 소개 — 준비 중"
        onClick={(e) => e.preventDefault()}
      >
        <span className="vhb-gnb-glance-play">▶</span>
        <span className="vhb-gnb-glance-text">Operated by <b>ValueConnect</b></span>
        <span className="vhb-gnb-glance-arrow">→</span>
      </a>
      <nav className="vhb-gnb-tabs">
        {tabs.map(t => (
          <button
            key={t.id}
            className={`vhb-gnb-tab ${tab === t.id ? 'is-active' : ''}`}
            onClick={() => setTab(t.id)}
          >{t.label}</button>
        ))}
      </nav>
      <div className="vhb-gnb-email">demo@valuehire.cc</div>
      <button className="vhb-gnb-logout">로그아웃</button>
    </header>
  );
}

// ── Demo flow ────────────────────────────────────────────
function DemoFlow() {
  const [selCust, setSelCust] = useState(null);
  const [selJd, setSelJd] = useState(null);
  const [selCand, setSelCand] = useState(null);
  const PROFILES = window.VHB_DATA.PROFILES || {};

  // Step 1: 고객사 선택
  if (!selCust) {
    return (
      <>
        <div className="vhb-step-bar">
          <span className="vhb-step-pill">STEP 1 / 3</span>
          <span className="vhb-step-title">데모 워크벤치 — 고객사 선택</span>
          <span className="vhb-step-sub">시연용 가상 고객사 6곳입니다. 카드를 눌러 채용 중인 JD 목록을 확인하세요.</span>
        </div>
        <div className="vhb-cust-grid">
          {CUSTOMERS.map(c => (
            <div key={c.id} className="vhb-cust-card" style={{ '--accent': c.accent }} onClick={() => setSelCust(c)}>
              <div className="vhb-cust-head">
                <div className="vhb-cust-name">{c.name}</div>
                <div className="vhb-cust-slug">{c.id}</div>
              </div>
              <div className="vhb-cust-tags">
                <span className="vhb-chip">{c.industry}</span>
                <span className="vhb-chip">{c.stage}</span>
                <span className="vhb-chip">{c.location}</span>
              </div>
              <div className="vhb-cust-tagline">{c.tagline}</div>
              <div className="vhb-cust-body">{c.body}</div>
              <div className="vhb-cust-foot">
                <span>JD<b>{c.jdCount}</b></span>
                <span>후보자<b>{c.candCount}</b></span>
              </div>
            </div>
          ))}
        </div>
      </>
    );
  }

  // Step 2: JD 목록
  if (!selJd) {
    const jds = JDS[selCust.id] || JDS.novatalent; // fallback for unbuilt companies
    return (
      <>
        <div className="vhb-step-bar">
          <button className="vhb-step-back" onClick={() => setSelCust(null)}>← 고객사 목록</button>
          <span className="vhb-step-pill">STEP 2 / 3</span>
          <span className="vhb-step-title">{selCust.name} — JD 목록</span>
          <span className="vhb-step-sub">{selCust.tagline}</span>
        </div>
        <div className="vhb-meta-row">
          <span className="vhb-chip">{selCust.industry}</span>
          <span className="vhb-chip">{selCust.stage}</span>
          <span className="vhb-chip">{selCust.location}</span>
          <span className="vhb-meta-text">{selCust.body}</span>
        </div>
        <div className="vhb-jd-grid">
          {jds.map(j => (
            <div key={j.id} className="vhb-jd-card" onClick={() => setSelJd(j)}>
              <div className="vhb-jd-head">
                <div className="vhb-jd-title">{j.title}</div>
                <div className="vhb-jd-cnt">후보자<b>{j.cand}명</b></div>
              </div>
              <div className="vhb-jd-tags">
                <span className="vhb-chip">{j.seniority}</span>
                <span className="vhb-chip">{j.team}</span>
                <span className="vhb-chip">{j.location}</span>
                <span className="vhb-chip">{j.type}</span>
              </div>
              <div className="vhb-jd-desc">{j.desc}</div>
              <div className="vhb-jd-stack">
                {j.stack.map(s => <span key={s} className="vhb-tag">{s}</span>)}
              </div>
            </div>
          ))}
        </div>
      </>
    );
  }

  // Step 3: 후보자 매칭
  const cands = CANDIDATES[selJd.id] || CANDIDATES['nt-be'];
  const trendEl = (t) => {
    if (t === 'up') return <span className="vhb-trend-up">▲ 상향 지원</span>;
    if (t === 'down') return <span className="vhb-trend-down">▼ 하향 지원</span>;
    return <span className="vhb-trend-flat">— 수평 지원</span>;
  };
  const trendIcon = (t) => {
    if (t === 'up') return <span className="vhb-trend-up">▲</span>;
    if (t === 'down') return <span className="vhb-trend-down">▼</span>;
    return <span className="vhb-trend-flat">—</span>;
  };
  return (
    <>
      <div className="vhb-step-bar">
        <button className="vhb-step-back" onClick={() => setSelJd(null)}>← JD 목록</button>
        <span className="vhb-step-pill">STEP 3 / 3</span>
        <span className="vhb-step-title">{selJd.title}</span>
        <span className="vhb-step-sub" style={{ maxWidth: 720, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{selJd.desc}</span>
      </div>
      <div className="vhb-cand-meta">
        <span className="vhb-chip">{selJd.seniority}</span>
        <span className="vhb-chip">{selJd.team}</span>
        <span className="vhb-chip">{selJd.location}</span>
        <span className="vhb-chip">{selJd.type}</span>
        <span className="vhb-meta-text">AI Search 후보자 {cands.length}명 · 매칭점수 높은 순</span>
      </div>
      <div className="vhb-cand-legend">
        <span className="vhb-trend-up">▲ 상향 지원</span>
        <span className="vhb-trend-flat">— 수평 지원</span>
        <span className="vhb-trend-down">▼ 하향 지원</span>
      </div>
      <div className="vhb-cand-grid">
        {cands.map(c => (
          <div key={c.id} className="vhb-cand-card vhb-cand-card-click" onClick={() => setSelCand(c)}>
            <div className="vhb-cand-head">
              {trendIcon(c.trend)}
              <span className="vhb-cand-name">{c.name}</span>
              <span className="vhb-chip" style={{ fontSize: 11, padding: '3px 8px' }}>{c.source}</span>
              <span className="vhb-chip" style={{ fontSize: 11, padding: '3px 8px' }}>{c.years}</span>
              <span className="vhb-cand-score">{c.score}<span className="vhb-cand-score-d">/100</span></span>
            </div>
            <div className="vhb-cand-role">{c.role}</div>
            <div className="vhb-cand-co">현재: <b>{c.currentCo}</b></div>
            <div className="vhb-cand-stack">
              {c.stack.map(s => <span key={s} className="vhb-tag">{s}</span>)}
            </div>
            <ul className="vhb-cand-bullets">
              {c.bullets.map((b, i) => <li key={i}>{b}</li>)}
            </ul>
            <div className="vhb-cand-cta">상세 프로필 열기 →</div>
          </div>
        ))}
      </div>
      {selCand && PROFILES[selCand.id] && (
        <CandidateDetail profile={PROFILES[selCand.id]} cand={selCand} onClose={() => setSelCand(null)} />
      )}
    </>
  );
}

// ── Candidate detail drawer ───────────────────────────────
function CandidateDetail({ profile: p, cand, onClose }) {
  React.useEffect(() => {
    const h = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', h);
    document.body.style.overflow = 'hidden';
    return () => { window.removeEventListener('keydown', h); document.body.style.overflow = ''; };
  }, [onClose]);

  const trendBadge = cand.trend === 'up' ? <span className="vhb-trend-up">▲ 상향 지원</span>
    : cand.trend === 'down' ? <span className="vhb-trend-down">▼ 하향 지원</span>
    : <span className="vhb-trend-flat">— 수평 지원</span>;

  const scoreColor = p.score >= 90 ? 'var(--vc-pulse)'
    : p.score >= 80 ? '#b8e04a'
    : p.score >= 70 ? 'var(--vc-warning)' : 'var(--vc-danger)';

  return (
    <div className="vhb-cd-scrim" onClick={onClose}>
      <div className="vhb-cd-drawer" onClick={(e) => e.stopPropagation()} role="dialog" aria-modal="true" data-screen-label={`Candidate · ${p.name}`}>
        {/* Top bar */}
        <div className="vhb-cd-top">
          <button className="vhb-cd-close" onClick={onClose} aria-label="닫기">
            <span>←</span> 닫기
          </button>
          <div className="vhb-cd-top-meta">CANDIDATE · {p.id.toUpperCase()} · {cand.source}</div>
          <div className="vhb-cd-actions">
            <button className="vhb-cd-act">📨 메일 보내기</button>
            <button className="vhb-cd-act">📋 이력서 PDF</button>
            <button className="vhb-cd-act is-primary">파이프라인으로 이동 →</button>
          </div>
        </div>

        {/* Header */}
        <div className="vhb-cd-header">
          <div className="vhb-cd-avatar" style={{ background: scoreColor }}>{p.name.charAt(0)}</div>
          <div className="vhb-cd-id">
            <div className="vhb-cd-id-row">
              <h1 className="vhb-cd-name">{p.name}</h1>
              {trendBadge}
            </div>
            <div className="vhb-cd-role">{p.role} · <span>{p.years}년차</span></div>
            <div className="vhb-cd-meta-row">
              <span className="vhb-chip">현재: <b>{cand.currentCo}</b></span>
              <span className="vhb-chip">{p.location}</span>
              <span className="vhb-chip">가용: {p.avail}</span>
              <span className="vhb-chip">{p.notice}</span>
            </div>
            <p className="vhb-cd-headline">{p.headline}</p>
          </div>
          <div className="vhb-cd-score" style={{ '--sc': scoreColor }}>
            <div className="vhb-cd-score-label">매칭 점수</div>
            <div className="vhb-cd-score-n">{p.score}<span>/100</span></div>
            <div className="vhb-cd-score-bar"><div style={{ width: p.score + '%' }}></div></div>
          </div>
        </div>

        {/* Summary */}
        <div className="vhb-cd-summary">
          <div className="vhb-cd-sec-eyebrow">SUMMARY</div>
          <p>{p.summary}</p>
        </div>

        {/* 3-col stats: experience / education / comp */}
        <div className="vhb-cd-3col">
          <section className="vhb-cd-card">
            <div className="vhb-cd-sec-eyebrow">EXPERIENCE</div>
            <ol className="vhb-cd-exp">
              {p.experience.map((e, i) => (
                <li key={i}>
                  <div className="vhb-cd-exp-head">
                    <span className="vhb-cd-exp-co">{e.co}</span>
                    <span className="vhb-cd-exp-period">{e.period}</span>
                  </div>
                  <div className="vhb-cd-exp-role">{e.role}</div>
                  <ul className="vhb-cd-exp-bul">
                    {e.bullets.map((b, j) => <li key={j}>{b}</li>)}
                  </ul>
                </li>
              ))}
            </ol>
          </section>

          <section className="vhb-cd-card">
            <div className="vhb-cd-sec-eyebrow">EDUCATION</div>
            <ul className="vhb-cd-edu">
              {p.education.map((e, i) => (
                <li key={i}>
                  <div className="vhb-cd-edu-school">{e.school}</div>
                  <div className="vhb-cd-edu-major">{e.major}</div>
                  <div className="vhb-cd-edu-period">{e.period}</div>
                  {e.note && <div className="vhb-cd-edu-note">{e.note}</div>}
                </li>
              ))}
            </ul>

            <div className="vhb-cd-sec-eyebrow" style={{ marginTop: 22 }}>LANGUAGES</div>
            <div className="vhb-cd-lang">
              {p.languages.map(l => <span key={l} className="vhb-chip">{l}</span>)}
            </div>
          </section>

          <section className="vhb-cd-card">
            <div className="vhb-cd-sec-eyebrow">COMPENSATION · AVAILABILITY</div>
            <div className="vhb-cd-comp">
              <div className="vhb-cd-comp-row"><span>현재 연봉 추정</span><b>{p.currentSalary}</b></div>
              <div className="vhb-cd-comp-row"><span>기대 처우</span><b className="vhb-pulse">{p.expected}</b></div>
              <div className="vhb-cd-comp-row"><span>이직 가용</span><b>{p.avail}</b></div>
              <div className="vhb-cd-comp-row"><span>인입 채널</span><b>{p.source}</b></div>
            </div>

            <div className="vhb-cd-sec-eyebrow" style={{ marginTop: 22 }}>SIGNALS</div>
            <div className="vhb-cd-signals">
              {[
                ['기술 깊이', p.signals.tech],
                ['리더십', p.signals.leadership],
                ['안정성', p.signals.stability],
                ['시장 매력', p.signals.market]
              ].map(([l, v]) => (
                <div key={l} className="vhb-cd-sig">
                  <div className="vhb-cd-sig-top"><span>{l}</span><span>{v}</span></div>
                  <div className="vhb-cd-sig-bar"><div style={{ width: v + '%' }}></div></div>
                </div>
              ))}
            </div>
          </section>
        </div>

        {/* Match analysis */}
        <section className="vhb-cd-match">
          <div className="vhb-cd-sec-eyebrow">MATCH ANALYSIS</div>
          <div className="vhb-cd-match-grid">
            <div className="vhb-cd-match-col is-strength">
              <div className="vhb-cd-match-h">강점 · WHY {p.score}</div>
              <ul>{p.strengths.map((s, i) => <li key={i}>{s}</li>)}</ul>
            </div>
            <div className="vhb-cd-match-col is-concern">
              <div className="vhb-cd-match-h">우려 · WATCH-OUT</div>
              <ul>{p.concerns.map((s, i) => <li key={i}>{s}</li>)}</ul>
            </div>
            <div className="vhb-cd-match-col is-note">
              <div className="vhb-cd-match-h">컨설턴트 노트</div>
              <p>{p.note}</p>
            </div>
          </div>
        </section>

        {/* Key projects */}
        <section className="vhb-cd-proj-sec">
          <div className="vhb-cd-sec-eyebrow">KEY PROJECTS</div>
          <div className="vhb-cd-proj-grid">
            {p.projects.map((pj, i) => (
              <div key={i} className="vhb-cd-proj">
                <div className="vhb-cd-proj-impact">{pj.impact}</div>
                <div className="vhb-cd-proj-title">{pj.title}</div>
                <div className="vhb-cd-proj-detail">{pj.detail}</div>
              </div>
            ))}
          </div>
        </section>

        {/* Skills + soft */}
        <section className="vhb-cd-card vhb-cd-skills">
          <div className="vhb-cd-skills-col">
            <div className="vhb-cd-sec-eyebrow">TECH STACK</div>
            <div className="vhb-cd-stack">
              {p.stack.map(s => <span key={s} className="vhb-tag">{s}</span>)}
            </div>
          </div>
          <div className="vhb-cd-skills-col">
            <div className="vhb-cd-sec-eyebrow">SOFT SIGNALS</div>
            <div className="vhb-cd-stack">
              {p.softSkills.map(s => <span key={s} className="vhb-chip">{s}</span>)}
            </div>
          </div>
        </section>

        <div className="vhb-cd-foot">
          <button className="vhb-cd-foot-back" onClick={onClose}>← 후보자 목록으로</button>
          <div className="vhb-cd-foot-meta">ValueConnect · 매칭 점수는 JD ↔ 후보자 임베딩 + 컨설턴트 노트의 가중합입니다.</div>
        </div>
      </div>
    </div>
  );
}

window.VHB_GNB = GNB;
window.VHB_DemoFlow = DemoFlow;
})();