function Pipeline() {
  const stages = [
    { id: 'review', label: '서류 검토', tone: 'neutral', count: 24 },
    { id: 'int1', label: '1차 인터뷰', tone: 'info', count: 12 },
    { id: 'int2', label: '2차 인터뷰', tone: 'violet', count: 6 },
    { id: 'offer', label: '제안 검토', tone: 'warn', count: 3 },
    { id: 'hired', label: '합격', tone: 'success', count: 2 },
  ];

  const applicants = {
    review: [
      { name: '한지현', role: 'Sr. Frontend', score: 92, days: 2 },
      { name: '이서연', role: 'Frontend', score: 78, days: 3 },
      { name: '김도현', role: 'iOS Engineer', score: 84, days: 1 },
      { name: '박수민', role: 'Sr. Frontend', score: 71, days: 4 },
    ],
    int1: [
      { name: '문서연', role: 'Product Designer', score: 87, days: 5 },
      { name: '오세진', role: 'Backend', score: 84, days: 6 },
      { name: '유하람', role: 'Frontend', score: 79, days: 7 },
    ],
    int2: [
      { name: '도경훈', role: 'Data Analyst', score: 95, days: 8 },
      { name: '정예린', role: 'PM', score: 88, days: 10 },
    ],
    offer: [
      { name: '강민재', role: 'Sr. Backend', score: 91, days: 12 },
    ],
    hired: [
      { name: '장하윤', role: 'DevOps', score: 93, days: 18 },
    ],
  };

  return (
    <div style={{ padding: '20px 24px', height: '100%', display: 'flex', flexDirection: 'column', gap: 16 }}>
      {/* Filters bar */}
      <div style={{ display:'flex', alignItems:'center', gap: 8, flexWrap:'wrap' }}>
        <FilterChip label="Sr. Frontend Engineer" active />
        <FilterChip label="이번 달" />
        <FilterChip label="AI 매칭 80+" ai />
        <FilterChip label="+ 필터 추가" />
        <div style={{ flex: 1 }} />
        <Button variant="secondary" size="sm" icon="download">내보내기</Button>
        <Button variant="primary" size="sm" icon="user-plus">지원자 초대</Button>
      </div>

      {/* Kanban */}
      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(5, minmax(220px, 1fr))',
        gap: 12,
        flex: 1,
        minHeight: 0,
      }}>
        {stages.map(s => (
          <Column key={s.id} stage={s} applicants={applicants[s.id] || []} />
        ))}
      </div>
    </div>
  );
}

function FilterChip({ label, active, ai }) {
  return (
    <div style={{
      padding: '5px 10px',
      border: `1px solid ${active ? 'var(--brand-500)' : 'var(--border-strong)'}`,
      background: active ? 'var(--brand-50)' : (ai ? 'var(--violet-50)' : 'var(--neutral-0)'),
      color: active ? 'var(--brand-700)' : (ai ? 'var(--violet-700)' : 'var(--fg-2)'),
      borderRadius: 999,
      fontSize: 12,
      fontWeight: 500,
      cursor: 'pointer',
      display: 'inline-flex',
      alignItems: 'center',
      gap: 5,
    }}>
      {ai && <AISparkle size={11} />}
      {label}
    </div>
  );
}

function Column({ stage, applicants }) {
  return (
    <div style={{
      background: 'var(--neutral-50)',
      border: '1px solid var(--border-default)',
      borderRadius: 12,
      display: 'flex',
      flexDirection: 'column',
      minHeight: 0,
    }}>
      <div style={{ padding: '12px 14px', display: 'flex', alignItems: 'center', gap: 8, borderBottom: '1px solid var(--border-subtle)' }}>
        <Badge tone={stage.tone} dot>{stage.label}</Badge>
        <span style={{ fontSize: 12, color: 'var(--fg-3)', fontFamily: 'var(--font-latin)', fontVariantNumeric: 'tabular-nums' }}>{stage.count}</span>
        <div style={{ flex: 1 }} />
        <span style={{ color: 'var(--fg-3)', display: 'inline-flex', cursor:'pointer' }}><Icon name="more-horizontal" size={16}/></span>
      </div>
      <div style={{ padding: 10, display: 'flex', flexDirection: 'column', gap: 8, overflow: 'auto', flex: 1 }}>
        {applicants.map((a, i) => <KanbanCard key={i} applicant={a} tone={i} />)}
        {applicants.length === 0 && <div style={{ padding: 20, textAlign: 'center', fontSize: 12, color: 'var(--fg-4)' }}>비어 있어요</div>}
      </div>
    </div>
  );
}

function KanbanCard({ applicant, tone }) {
  return (
    <div style={{
      background: 'var(--neutral-0)',
      border: '1px solid var(--border-default)',
      borderRadius: 10,
      padding: 12,
      display: 'grid',
      gap: 8,
      cursor: 'grab',
      boxShadow: 'var(--shadow-xs)',
    }}
    onMouseEnter={e => e.currentTarget.style.boxShadow = 'var(--shadow-sm)'}
    onMouseLeave={e => e.currentTarget.style.boxShadow = 'var(--shadow-xs)'}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <Avatar name={applicant.name} tone={tone} size={28} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 13, fontWeight: 600 }}>{applicant.name}</div>
          <div style={{ fontSize: 11, color: 'var(--fg-3)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{applicant.role}</div>
        </div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', fontSize: 11 }}>
        <span style={{
          display: 'inline-flex', alignItems: 'center', gap: 4,
          color: 'var(--violet-700)', fontWeight: 600,
          background: 'var(--violet-50)', padding: '2px 6px', borderRadius: 999,
        }}>
          <AISparkle size={10} />
          <span style={{ fontFamily: 'var(--font-latin)', fontVariantNumeric:'tabular-nums' }}>{applicant.score}</span>
        </span>
        <span style={{ color: 'var(--fg-3)' }}>{applicant.days}일 전</span>
      </div>
    </div>
  );
}

window.Pipeline = Pipeline;