function Reports() {
  return (
    <div style={{ padding: '20px 24px', display: 'grid', gap: 18, maxWidth: 1400, margin: '0 auto' }}>

      {/* Header */}
      <div style={{ display: 'flex', alignItems: 'end', gap: 12 }}>
        <div>
          <h1 style={{ fontSize: 22, fontWeight: 700, letterSpacing:'-0.02em', margin: 0 }}>리포트 & 분석</h1>
          <div style={{ fontSize: 12.5, color: 'var(--fg-3)', marginTop: 2 }}>2026년 8월 · 채용 성과 종합</div>
        </div>
        <div style={{ flex: 1 }}/>
        <div style={{ display: 'flex', gap: 2, background: 'var(--neutral-100)', borderRadius: 8, padding: 3 }}>
          {['이번 주','이번 달','분기','연간'].map((t,i)=>(
            <div key={t} style={{
              padding:'5px 12px', fontSize:12, fontWeight:500, whiteSpace:'nowrap',
              color: i === 1 ? 'var(--fg-1)' : 'var(--fg-2)',
              borderRadius: 6, cursor:'pointer',
              background: i === 1 ? 'var(--neutral-0)' : 'transparent',
              boxShadow: i === 1 ? 'var(--shadow-xs)' : 'none',
            }}>{t}</div>
          ))}
        </div>
        <Button variant="secondary" size="sm" icon="download">CSV 내보내기</Button>
        <Button variant="secondary" size="sm" icon="share-2">공유</Button>
      </div>

      {/* KPI row */}
      <div style={{ display:'grid', gridTemplateColumns:'repeat(5, 1fr)', gap: 14 }}>
        <KPI label="Time to Hire" value="14.2일" delta="-8.3일" trend="up" hint="목표 21일"/>
        <KPI label="Cost per Hire" value="₩1.4M" delta="-₩0.3M" trend="up" hint="분기 평균"/>
        <KPI label="합격 → 입사" value="82%" delta="+4%" trend="up" hint="Offer accept rate"/>
        <KPI label="Source 다변화" value="6개" delta="+2" trend="up" hint="활성 채널"/>
        <KPI label="다양성 지수" value="0.68" delta="+0.11" trend="up" hint="Shannon Index"/>
      </div>

      {/* Charts row */}
      <div style={{ display:'grid', gridTemplateColumns:'1.4fr 1fr', gap: 18 }}>
        <Card style={{ padding: 0 }}>
          <CardHeader title="채용 퍼널 · Conversion Funnel" subtitle="지원 → 입사 전 단계별 통과율"/>
          <Funnel/>
        </Card>
        <Card style={{ padding: 0 }}>
          <CardHeader title="Source Attribution" subtitle="채널별 지원자 · 합격 성과"/>
          <SourceBars/>
        </Card>
      </div>

      {/* Trend + team */}
      <div style={{ display:'grid', gridTemplateColumns:'1.4fr 1fr', gap: 18 }}>
        <Card style={{ padding: 0 }}>
          <CardHeader title="지원 추이 · 최근 12주" subtitle="주간 신규 지원 & 합격"/>
          <LineChart/>
        </Card>
        <Card style={{ padding: 0 }}>
          <CardHeader title="Time to Hire · 팀별" subtitle="포지션별 평균 소요일"/>
          <TeamBars/>
        </Card>
      </div>

      {/* AI generated summary */}
      <Card ai style={{ padding: 0 }}>
        <div style={{ padding: '14px 18px', display:'flex', alignItems:'center', gap: 6, color: 'var(--violet-700)', fontWeight: 600, fontSize: 12.5, letterSpacing:'0.02em' }}>
          <AISparkle size={15}/>
          AI GENERATED INSIGHTS · 이번 달 요약
        </div>
        <div style={{ padding: '0 18px 18px', display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 12 }}>
          <AIInsight
            tone="good"
            title="Time to Hire 지속 개선"
            body="지난 6주 평균 14.2일로 목표(21일) 대비 32% 단축. AI 스크리닝 도입 이후 서류 병목이 완화되었습니다."
          />
          <AIInsight
            tone="warn"
            title="Data 팀 소싱 부족"
            body="Data Analyst 포지션 응답률이 다른 팀 대비 40% 낮음. 원티드 캠페인을 재점검하세요."
          />
          <AIInsight
            tone="info"
            title="다양성 지수 반등"
            body="여성 지원자 비율이 지난 분기 대비 +11%p. Design·Product 팀에서 개선이 두드러집니다."
          />
        </div>
      </Card>
    </div>
  );
}

// --- Components ---

function KPI({ label, value, delta, trend, hint }) {
  const up = trend === 'up';
  return (
    <Card hoverable>
      <div style={{ fontSize: 11, color: 'var(--fg-3)', letterSpacing:'0.06em', textTransform:'uppercase', fontWeight: 500 }}>{label}</div>
      <div style={{ display:'flex', alignItems:'baseline', justifyContent:'space-between', marginTop: 10, gap: 8 }}>
        <div style={{ fontFamily: 'var(--font-latin)', fontVariantNumeric:'tabular-nums', fontSize: 26, fontWeight: 700, letterSpacing:'-0.02em', whiteSpace:'nowrap' }}>{value}</div>
        <div style={{ fontSize: 11.5, fontWeight: 600, color: up ? 'var(--success-600)' : 'var(--danger-600)', display:'inline-flex', alignItems:'center', gap: 2, whiteSpace:'nowrap', flexShrink: 0 }}>
          <Icon name={up ? 'trending-up' : 'trending-down'} size={12}/>{delta}
        </div>
      </div>
      <div style={{ fontSize: 10.5, color:'var(--fg-3)', marginTop: 4 }}>{hint}</div>
    </Card>
  );
}

function CardHeader({ title, subtitle }) {
  return (
    <div style={{ padding: '14px 18px', borderBottom: '1px solid var(--border-subtle)' }}>
      <div style={{ fontSize: 14, fontWeight: 600, whiteSpace:'nowrap' }}>{title}</div>
      <div style={{ fontSize: 11.5, color: 'var(--fg-3)', marginTop: 2 }}>{subtitle}</div>
    </div>
  );
}

function Funnel() {
  const stages = [
    { label: '지원', count: 1247, conv: 100, color: 'var(--brand-500)' },
    { label: '서류 통과', count: 486, conv: 39, color: 'var(--brand-500)' },
    { label: '1차 인터뷰', count: 214, conv: 44, color: 'var(--info-500)' },
    { label: '2차 인터뷰', count: 92, conv: 43, color: 'var(--violet-500)' },
    { label: '오퍼', count: 38, conv: 41, color: 'var(--warning-500)' },
    { label: '입사', count: 31, conv: 82, color: 'var(--success-500)' },
  ];
  return (
    <div style={{ padding: 20, display:'grid', gap: 10 }}>
      {stages.map((s, i) => {
        const width = (s.count / stages[0].count) * 100;
        return (
          <div key={s.label} style={{ display:'grid', gridTemplateColumns:'120px 1fr 90px 60px', gap: 12, alignItems:'center' }}>
            <div style={{ fontSize: 12.5, color: 'var(--fg-2)', whiteSpace:'nowrap' }}>{s.label}</div>
            <div style={{ position:'relative', height: 26, background: 'var(--neutral-100)', borderRadius: 5, overflow:'hidden' }}>
              <div style={{ width: `${width}%`, height:'100%', background: s.color, borderRadius: 5, transition:'width 400ms var(--ease-out)' }}/>
            </div>
            <div style={{ fontFamily:'var(--font-latin)', fontVariantNumeric:'tabular-nums', fontSize: 13, fontWeight: 600, textAlign:'right' }}>{s.count.toLocaleString()}</div>
            <div style={{ fontFamily:'var(--font-latin)', fontVariantNumeric:'tabular-nums', fontSize: 11.5, color:'var(--fg-3)', textAlign:'right' }}>{i === 0 ? '—' : `${s.conv}%`}</div>
          </div>
        );
      })}
    </div>
  );
}

function SourceBars() {
  const sources = [
    { name: 'LinkedIn', applicants: 412, hires: 12, color: 'var(--brand-500)' },
    { name: '원티드', applicants: 328, hires: 9, color: 'var(--info-500)' },
    { name: '리퍼럴', applicants: 186, hires: 7, color: 'var(--violet-500)' },
    { name: '사람인', applicants: 154, hires: 2, color: 'var(--warning-500)' },
    { name: '자사 사이트', applicants: 121, hires: 1, color: 'var(--success-500)' },
    { name: '기타', applicants: 46, hires: 0, color: 'var(--neutral-400)' },
  ];
  const max = Math.max(...sources.map(s => s.applicants));
  return (
    <div style={{ padding: 20, display:'grid', gap: 10 }}>
      {sources.map(s => (
        <div key={s.name} style={{ display:'grid', gridTemplateColumns:'90px 1fr 60px 40px', gap: 10, alignItems:'center' }}>
          <span style={{ fontSize: 12.5, color:'var(--fg-2)', whiteSpace:'nowrap' }}>{s.name}</span>
          <div style={{ position:'relative', height: 8, background: 'var(--neutral-100)', borderRadius: 999 }}>
            <div style={{ width: `${(s.applicants/max)*100}%`, height:'100%', background: s.color, borderRadius: 999 }}/>
          </div>
          <span style={{ fontFamily:'var(--font-latin)', fontVariantNumeric:'tabular-nums', fontSize: 12, color:'var(--fg-2)', textAlign:'right' }}>{s.applicants}</span>
          <span style={{ fontFamily:'var(--font-latin)', fontVariantNumeric:'tabular-nums', fontSize: 12, color: s.hires > 5 ? 'var(--success-600)' : 'var(--fg-3)', textAlign:'right', fontWeight: 600 }}>{s.hires}</span>
        </div>
      ))}
      <div style={{ display:'grid', gridTemplateColumns:'90px 1fr 60px 40px', gap: 10, fontSize: 10, color:'var(--fg-3)', letterSpacing:'0.06em', textTransform:'uppercase', marginTop: 4, borderTop:'1px solid var(--border-subtle)', paddingTop: 8 }}>
        <span></span><span></span><span style={{textAlign:'right'}}>지원</span><span style={{textAlign:'right'}}>합격</span>
      </div>
    </div>
  );
}

function LineChart() {
  // 12 weeks of data
  const applied = [42, 56, 48, 71, 68, 82, 74, 91, 88, 102, 96, 118];
  const hired = [3, 4, 3, 5, 4, 6, 5, 7, 6, 8, 7, 9];
  const w = 460, h = 180, pad = 20;
  const max = Math.max(...applied) + 20;

  const line = (data) => data.map((v, i) => {
    const x = pad + (i * (w - pad*2) / (data.length - 1));
    const y = h - pad - (v / max) * (h - pad*2);
    return `${i === 0 ? 'M' : 'L'} ${x} ${y}`;
  }).join(' ');
  const area = (data) => `${line(data)} L ${pad + (w - pad*2)} ${h - pad} L ${pad} ${h - pad} Z`;

  return (
    <div style={{ padding: 20, position:'relative' }}>
      <div style={{ display:'flex', gap: 14, marginBottom: 12, fontSize: 11.5 }}>
        <span style={{ display:'inline-flex', alignItems:'center', gap: 5 }}><span style={{ width: 10, height: 10, background:'var(--brand-500)', borderRadius: 2 }}/>주간 지원자</span>
        <span style={{ display:'inline-flex', alignItems:'center', gap: 5 }}><span style={{ width: 10, height: 10, background:'var(--success-500)', borderRadius: 2 }}/>주간 합격</span>
      </div>
      <svg width="100%" viewBox={`0 0 ${w} ${h}`} style={{ display:'block' }}>
        <defs>
          <linearGradient id="grad-applied" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="var(--brand-500)" stopOpacity="0.25"/>
            <stop offset="100%" stopColor="var(--brand-500)" stopOpacity="0"/>
          </linearGradient>
        </defs>
        {/* grid */}
        {[0,1,2,3].map(i => (
          <line key={i} x1={pad} x2={w-pad} y1={pad + i*(h-pad*2)/3} y2={pad + i*(h-pad*2)/3} stroke="var(--border-subtle)" strokeDasharray="2 4"/>
        ))}
        {/* applied area + line */}
        <path d={area(applied)} fill="url(#grad-applied)"/>
        <path d={line(applied)} fill="none" stroke="var(--brand-500)" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
        {/* hired line */}
        <path d={line(hired.map(v => v * 10))} fill="none" stroke="var(--success-500)" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="4 4"/>
        {applied.map((v, i) => {
          const x = pad + (i * (w - pad*2) / (applied.length - 1));
          const y = h - pad - (v / max) * (h - pad*2);
          return <circle key={i} cx={x} cy={y} r={i === applied.length - 1 ? 5 : 3} fill="var(--brand-500)" stroke="#fff" strokeWidth="1.5"/>;
        })}
      </svg>
      <div style={{ display:'flex', justifyContent:'space-between', padding:'0 20px', fontSize: 10, color:'var(--fg-3)', fontFamily:'var(--font-mono)' }}>
        <span>W22</span><span>W25</span><span>W28</span><span>W31</span><span>W33</span>
      </div>
    </div>
  );
}

function TeamBars() {
  const teams = [
    { name: 'Engineering', days: 12, count: 14 },
    { name: 'Design', days: 15, count: 6 },
    { name: 'Data', days: 22, count: 4, warn: true },
    { name: 'Product', days: 18, count: 5 },
    { name: 'GTM', days: 16, count: 8 },
  ];
  const max = 25;
  return (
    <div style={{ padding: 20, display:'grid', gap: 12 }}>
      {teams.map(t => (
        <div key={t.name}>
          <div style={{ display:'flex', justifyContent:'space-between', fontSize: 12, marginBottom: 5 }}>
            <span style={{ display:'inline-flex', alignItems:'center', gap: 6 }}>
              {t.name}
              {t.warn && <span style={{ padding:'1px 6px', background:'var(--warning-50)', color:'var(--warning-700)', fontSize:10, borderRadius: 4, fontWeight: 600 }}>목표 초과</span>}
            </span>
            <span style={{ fontFamily:'var(--font-latin)', fontVariantNumeric:'tabular-nums', color:'var(--fg-2)' }}><b style={{color:'var(--fg-1)'}}>{t.days}일</b> · 채용 {t.count}</span>
          </div>
          <div style={{ position:'relative', height: 8, background:'var(--neutral-100)', borderRadius: 999 }}>
            <div style={{ position:'absolute', left: `${(21/max)*100}%`, top: -3, bottom: -3, width: 1, background:'var(--warning-500)', opacity: 0.6 }} title="목표선 21일"/>
            <div style={{ width: `${(t.days/max)*100}%`, height:'100%', background: t.warn ? 'var(--warning-500)' : 'var(--brand-500)', borderRadius: 999 }}/>
          </div>
        </div>
      ))}
      <div style={{ fontSize: 10, color:'var(--fg-3)', display:'inline-flex', alignItems:'center', gap: 4, marginTop: 4 }}>
        <span style={{ width: 1, height: 10, background:'var(--warning-500)' }}/>목표선 21일
      </div>
    </div>
  );
}

function AIInsight({ tone, title, body }) {
  const bg = tone === 'good' ? 'rgba(23,163,74,0.05)' : tone === 'warn' ? 'rgba(227,149,20,0.06)' : 'rgba(255,255,255,0.65)';
  const border = tone === 'good' ? 'rgba(23,163,74,0.2)' : tone === 'warn' ? 'rgba(227,149,20,0.3)' : 'rgba(228,218,255,0.6)';
  const icon = tone === 'good' ? 'trending-up' : tone === 'warn' ? 'alert-triangle' : 'info';
  const iconColor = tone === 'good' ? 'var(--success-600)' : tone === 'warn' ? 'var(--warning-600)' : 'var(--violet-600)';
  return (
    <div style={{ background: bg, border: `1px solid ${border}`, borderRadius: 10, padding: '12px 14px' }}>
      <div style={{ display:'flex', alignItems:'center', gap: 6, color: iconColor, fontSize: 12, fontWeight: 600 }}>
        <Icon name={icon} size={13}/>
        {title}
      </div>
      <div style={{ fontSize: 12.5, color: 'var(--fg-2)', marginTop: 6, lineHeight: 1.5, wordBreak:'keep-all' }}>{body}</div>
    </div>
  );
}

window.Reports = Reports;