/* global React, window */
(function() {
const { useState } = React;
const PIPELINE = window.VHB_DATA.PIPELINE;
const NEWSLETTERS = window.VHB_DATA.NEWSLETTERS;

// ── Kanban board ─────────────────────────────────────────
function KanbanPage() {
  const [role, setRole] = useState('admin');
  return (
    <>
      <div className="vhb-kb-head">
        <div className="vhb-kb-h1">채용 파이프라인</div>
        <div className="vhb-kb-live">실시간 데이터</div>
        <select className="vhb-kb-select" defaultValue="all">
          <option value="all">전체 포지션</option>
          <option value="be">시니어 백엔드 엔지니어</option>
          <option value="ml">ML Engineer</option>
        </select>
        <span className="vhb-kb-role">데모 역할:</span>
        {['admin', 'reviewer', 'viewer'].map(r => (
          <button key={r}
            className={`vhb-kb-role-btn ${role === r ? 'is-on' : ''}`}
            onClick={() => setRole(r)}
          >{r}</button>
        ))}
        <button className="vhb-kb-team-btn">팀원 관리</button>
      </div>

      <div className="vhb-stats">
        {PIPELINE.stats.map((s, i) => (
          <div key={i} className="vhb-stat">
            <div><span className="vhb-stat-n">{s.n}</span><span className="vhb-stat-u">{s.u}</span></div>
            <div className="vhb-stat-l">{s.l}</div>
          </div>
        ))}
      </div>

      <div className="vhb-board">
        {PIPELINE.columns.map(col => (
          <div key={col.id} className="vhb-col">
            <div className="vhb-col-head" style={{ '--col': col.color }}>
              <span className="vhb-col-dot"></span>
              <span className="vhb-col-name">{col.name}</span>
              <span className="vhb-col-cnt">{col.count}</span>
              <button className="vhb-col-add">+</button>
            </div>
            <div className="vhb-col-list">
              {col.cards.map((c, i) => (
                <div key={i} className="vhb-card">
                  <div className="vhb-card-name">
                    <span>{c.name}</span>
                    {c.score && <span className="vhb-card-score">{c.score}</span>}
                  </div>
                  {c.role && <div className="vhb-card-role">{c.role}</div>}
                  {c.position && <div className="vhb-card-pos">{c.position}</div>}
                  {c.tags && c.tags.length > 0 && (
                    <div className="vhb-card-tags">
                      {c.tags.map(t => <span key={t} className="vhb-tag-tiny">{t}</span>)}
                      {c.extra && <span className="vhb-tag-tiny">{c.extra}</span>}
                    </div>
                  )}
                  <div className="vhb-card-foot">
                    <span className="vhb-card-date">{c.date}</span>
                    <span className={`vhb-card-status s-${c.statusColor}`}>{c.status}</span>
                  </div>
                </div>
              ))}
              {col.cards.length === 0 && (
                <div style={{ padding: 22, textAlign: 'center', color: 'var(--vc-text-faint)', fontSize: 12, border: '1px dashed var(--vc-border)', borderRadius: 8 }}>
                  아직 카드 없음
                </div>
              )}
            </div>
          </div>
        ))}
      </div>
    </>
  );
}

// ── Pipeline summary (different from kanban: dashboard view) ──
function PipelinePage() {
  const positions = [
    { pos: '시니어 백엔드 엔지니어 (결제 도메인)', co: 'NovaTalent', n: 6, doc: 2, test: 1, stage: '코딩테스트', stageK: 'test' },
    { pos: '결제 보안 엔지니어', co: 'NovaTalent', n: 5, doc: 1, test: 0, stage: '서류', stageK: 'doc' },
    { pos: '결제 프로덕트 매니저', co: 'NovaTalent', n: 5, doc: 3, test: 2, stage: '1차 면접', stageK: 'i1' },
    { pos: '데이터 엔지니어 (결제 분석)', co: 'NovaTalent', n: 6, doc: 2, test: 1, stage: '코딩테스트', stageK: 'test' },
    { pos: 'Senior Full-Stack Engineer', co: 'BlueOrbit', n: 8, doc: 4, test: 2, stage: '2차 면접', stageK: 'i2' },
    { pos: 'ML Platform Engineer', co: 'AtlasForge', n: 7, doc: 3, test: 2, stage: '1차 면접', stageK: 'i1' },
    { pos: 'Game Client Engineer', co: 'LumenLab', n: 5, doc: 2, test: 1, stage: '서류', stageK: 'doc' },
    { pos: 'CTI Analyst', co: 'CipherEdge', n: 4, doc: 1, test: 1, stage: '최종 면접', stageK: 'final' }
  ];

  return (
    <>
      <div className="vhb-kb-head">
        <div className="vhb-kb-h1">채용 파이프라인 — 포지션별 요약</div>
        <div className="vhb-kb-live">실시간 데이터</div>
      </div>

      <div className="vhb-pipe-grid">
        <div className="vhb-pipe-card">
          <h4>활성 포지션</h4>
          <div className="n">8</div>
          <div className="delta">+ 2 (이번 주)</div>
        </div>
        <div className="vhb-pipe-card">
          <h4>전체 후보자</h4>
          <div className="n">718</div>
          <div className="delta">+ 47 (이번 주)</div>
          <div className="vhb-pipe-bar-wrap"><div className="vhb-pipe-bar" style={{ width: '72%' }}></div></div>
        </div>
        <div className="vhb-pipe-card">
          <h4>면접 단계</h4>
          <div className="n">12</div>
          <div className="delta">+ 4 (이번 주)</div>
          <div className="vhb-pipe-bar-wrap"><div className="vhb-pipe-bar" style={{ width: '38%', background: 'var(--vc-info)' }}></div></div>
        </div>
        <div className="vhb-pipe-card">
          <h4>최종 합격율</h4>
          <div className="n">0<span style={{ fontSize: 20, marginLeft: 4, color: 'var(--vc-text-muted)' }}>%</span></div>
          <div className="delta down">↓ 데이터 누적 중</div>
        </div>
      </div>

      <div className="vhb-pipe-table">
        <div className="vhb-pipe-row head">
          <span>포지션</span>
          <span>지원자</span>
          <span>서류 통과</span>
          <span>테스트</span>
          <span>현재 단계</span>
          <span></span>
        </div>
        {positions.map((p, i) => (
          <div key={i} className="vhb-pipe-row">
            <div>
              <div className="pos">{p.pos}</div>
              <div className="co">{p.co}</div>
            </div>
            <span className="num">{p.n}명</span>
            <span className="num">{p.doc}</span>
            <span className="num">{p.test}</span>
            <span className={`stage`} style={
              p.stageK === 'i1' || p.stageK === 'i2' ? { background: 'var(--vc-info-soft)', color: 'var(--vc-info)' }
              : p.stageK === 'final' ? { background: 'var(--vc-warning-soft)', color: 'var(--vc-warning)' }
              : { background: 'rgba(165, 137, 255, 0.14)', color: '#a589ff' }
            }>{p.stage}</span>
            <span style={{ textAlign: 'right', color: 'var(--vc-pulse)', fontSize: 12, fontWeight: 600 }}>보기 →</span>
          </div>
        ))}
      </div>
    </>
  );
}

// ── Newsletter archive ───────────────────────────────────
function NewsletterPage() {
  const [filter, setFilter] = useState('all');
  const counts = {
    all: NEWSLETTERS.length,
    market: NEWSLETTERS.filter(n => n.cat === '시장 브리핑').length,
    industry: NEWSLETTERS.filter(n => n.cat === '업계 뉴스').length
  };
  const filtered = filter === 'all' ? NEWSLETTERS
    : filter === 'market' ? NEWSLETTERS.filter(n => n.cat === '시장 브리핑')
    : NEWSLETTERS.filter(n => n.cat === '업계 뉴스');

  return (
    <>
      <div className="vhb-nl-hero">
        <div>
          <div className="vhb-nl-eyebrow">VALUEHIRE · MARKET INSIGHT ARCHIVE</div>
          <h1 className="vhb-nl-h1">채용 시장 인사이트 아카이브</h1>
          <p className="vhb-nl-sub">ValueConnect가 매주 정리한 시장 브리핑과 실리콘밸리·미국 권위지 채용 인사이트 번역을 누적합니다. 이메일 알림과는 별개로 언제든 다시 읽을 수 있습니다.</p>
        </div>
        <button className="vhb-nl-cta">주간 인사이트 받기</button>
      </div>

      <div className="vhb-nl-filter">
        <span className="vhb-nl-flabel">Filter</span>
        <button className={`vhb-nl-fpill ${filter === 'all' ? 'is-on' : ''}`} onClick={() => setFilter('all')}>전체</button>
        <button className={`vhb-nl-fpill ${filter === 'market' ? 'is-on' : ''}`} onClick={() => setFilter('market')}>
          시장 브리핑 <span className="cnt">{counts.market}</span>
        </button>
        <button className={`vhb-nl-fpill ${filter === 'industry' ? 'is-on' : ''}`} onClick={() => setFilter('industry')}>
          업계 뉴스 <span className="cnt">{counts.industry}</span>
        </button>
        <span className="vhb-nl-total">총 {counts.all}건</span>
      </div>

      <div className="vhb-nl-thead">
        <span>호 / 발행일</span>
        <span>카테고리</span>
        <span>제목</span>
        <span>출처</span>
        <span></span>
      </div>

      {filtered.map((n, i) => (
        <div key={i} className="vhb-nl-row">
          <div className="vhb-nl-vol">
            <b>{n.vol}</b>{n.date}
          </div>
          <div><span className={`vhb-nl-cat ${n.cat === '업계 뉴스' ? 'industry' : ''}`}>{n.cat}</span></div>
          <div>
            <div className="vhb-nl-title">{n.title}</div>
            <div className="vhb-nl-desc">{n.sub}</div>
            <div className="vhb-nl-tags">
              {n.tags.map(t => <span key={t} className="vhb-tag">{t}</span>)}
            </div>
          </div>
          <div className="vhb-nl-src">{n.src}</div>
          <div className="vhb-nl-read">읽기 →</div>
        </div>
      ))}
    </>
  );
}

// ── Stub pages (이력서 분석, 워크벤치) ──────────────────────
function StubPage({ title, body }) {
  return (
    <div className="vhb-empty">
      <div className="vh-mark">V</div>
      <h2>{title}</h2>
      <p>{body}</p>
    </div>
  );
}

window.VHB_KanbanPage = KanbanPage;
window.VHB_PipelinePage = PipelinePage;
window.VHB_NewsletterPage = NewsletterPage;
window.VHB_StubPage = StubPage;
})();