/* =============================================================================
   수집·파이프라인 상태 (문서 §3 · §4)
   -----------------------------------------------------------------------------
   §3.1 수집 대상·범위:
     NAC / SDP / AI-NDR / AI·SaaS Gateway / DBMS / WORM 스토리지 + 자체 플랫폼
     (파이프라인 상태, 파서 로그, LLM 요청·응답 메타, RAG 검색 내역)
   §3.2 OCSF 기반 공통 이벤트 모델로 정규화:
     이벤트 메타 / 주체·세션 / 네트워크 / 리소스 / 정책·분류 / 탐지 결과
     → NAC=authentication, SDP=session/access, NDR=network activity/detection,
       AIGW=application activity/policy enforcement, DBMS=data access,
       WORM=data store/integrity 계열로 매핑
   §4 파이프라인 단계: 수집 → 전처리(파싱·타임스탬프·식별자 정제) →
     정규화(공통 스키마, 공통 키 연결) → 저장(이벤트 저장소·검색 인덱스·
     데이터 레이크·규정 지식베이스 분리) → 분석(룰+LLM) → 상관(MITRE ATT&CK
     매핑) → 설명(xAI) → 시각화.
============================================================================= */

const PipelineStatus = () => {
  const M = window.MOCK;

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1>수집 · 파이프라인 상태</h1>
          <div className="sub">연계 보안 솔루션 수집 현황 · 수집 → 전처리 → 정규화 → 저장 → 분석 → 설명</div>
        </div>
        <div className="row gap-8">
          <button className="btn">설정</button>
        </div>
      </div>

      {/* 파이프라인 단계 — 6단계를 grid로 flow (화살표 없이 번호 + 흐름은 위치로 전달) */}
      <Section title="처리 단계" meta="24h 기준 · 수집 → 전처리 → 정규화 → 저장 → 상관분석 → 설명" className="dash-gap">
        <div className="pipeline-grid">
          {[
            {n:"수집", v:"4,281,604", u:"건", d:"API · Syslog · Agent · Queue"},
            {n:"전처리", v:"4,279,012", u:"건", d:"파싱 · 타임스탬프 정렬"},
            {n:"정규화", v:"4,268,802", u:"건", d:"OCSF 스키마 변환 · 99.7%"},
            {n:"저장", v:"4,268,802", u:"건", d:"이벤트 DB · 인덱스 · Lake"},
            {n:"상관분석", v:"362,118", u:"건", d:"룰 + LLM"},
            {n:"설명", v:"18,204", u:"건", d:"xAI · RAG"},
          ].map((s,i,arr) => (
            <div key={i} className="pipeline-step">
              <div className="step-head">
                <span className="step-n">{String(i+1).padStart(2,"0")}</span>
                <span className="step-name">{s.n}</span>
                {i<arr.length-1 && (
                  <svg className="step-arrow" width="12" height="12" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5">
                    <path d="M4 10h12M12 6l4 4-4 4"/>
                  </svg>
                )}
              </div>
              <div className="step-value">
                <span className="mono">{s.v}</span>
                <span className="step-unit">{s.u}</span>
              </div>
              <div className="step-desc">{s.d}</div>
            </div>
          ))}
        </div>
      </Section>

      {/* 연계 보안 솔루션 상세 */}
      <Section title="연계 보안 솔루션" meta="6개 수집 인터페이스" className="dash-gap">
        <table className="tbl">
          <thead>
            <tr>
              <th>출처</th>
              <th>영역</th>
              <th>역할</th>
              <th style={{width:120}}>수집량(24h)</th>
              <th style={{width:140}}>처리 지연</th>
              <th style={{width:160}}>정규화율</th>
              <th style={{width:90}}>상태</th>
            </tr>
          </thead>
          <tbody>
            {M.sources.map(s => {
              const tone = s.status==="healthy"?"low":s.status==="degraded"?"medium":"critical";
              return (
                <tr key={s.key}>
                  <td><Source k={s.key}/> <span style={{marginLeft:6}}>{s.label}</span></td>
                  <td className="text-2">{s.vendor}</td>
                  <td className="small muted">{s.role}</td>
                  <td className="mono">{s.events.toLocaleString()}</td>
                  <td>
                    <div className="row gap-8">
                      <div className="hbar" style={{flex:1}}>
                        <span style={{width:Math.min(100,s.latency/2)+"%", background: s.latency>100?"var(--critical)":s.latency>80?"var(--medium)":"var(--low)"}}/>
                      </div>
                      <span className="mono small" style={{width:50, textAlign:"right"}}>{s.latency}ms</span>
                    </div>
                  </td>
                  <td>
                    <div className="row gap-8">
                      <div className="hbar" style={{flex:1}}>
                        <span style={{width:s.norm+"%", background:"var(--accent)"}}/>
                      </div>
                      <span className="mono small" style={{width:46, textAlign:"right"}}>{s.norm}%</span>
                    </div>
                  </td>
                  <td><span className={"badge "+tone}>{s.status==="healthy"?"정상":s.status==="degraded"?"지연":"장애"}</span></td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </Section>

      <div className="grid grid-2 dash-gap">
        <Section title="공통 이벤트 모델(OCSF) 매핑" meta="주요 필드">
          {[
            {g:"이벤트 메타", f:"event_time, event_uid, event_category, severity"},
            {g:"주체 · 세션", f:"user.id, user.name, device.id, session.id"},
            {g:"네트워크", f:"src.ip, src.port, dst.ip, dst.port, protocol"},
            {g:"리소스", f:"resource.type, resource.id, resource.name"},
            {g:"정책 · 분류", f:"policy.id, policy.decision, classification.label, classification.confidence"},
            {g:"탐지 결과", f:"detection.name, detection.score, attack.tactic, attack.technique"},
          ].map((r,i,arr) => (
            <div key={i} style={{padding:"8px 0", borderBottom: i<arr.length-1?"1px solid var(--border)":"none"}}>
              <div style={{fontSize:12.5, fontWeight:500, marginBottom:3}}>{r.g}</div>
              <div className="mono small" style={{color:"var(--text-3)"}}>{r.f}</div>
            </div>
          ))}
        </Section>

        <Section title="수집 어댑터 상태" meta="파서 · 커넥터">
          {[
            {n:"NAC · Syslog Adapter", s:"정상", p:99.9},
            {n:"SDP · REST API Poller", s:"정상", p:99.8},
            {n:"AI-NDR · Kafka Consumer", s:"지연", p:97.2},
            {n:"AI Gateway · Webhook", s:"정상", p:99.9},
            {n:"DB 보안 · Agent", s:"정상", p:99.6},
            {n:"WORM · Audit Log Tailer", s:"정상", p:99.9},
            {n:"통합 분석 · 플랫폼 자체 로그", s:"정상", p:100},
          ].map((r,i,arr) => (
            <div key={i} className="row between" style={{padding:"8px 0", borderBottom:i<arr.length-1?"1px solid var(--border)":"none"}}>
              <div>
                <div style={{fontSize:12.5}}>{r.n}</div>
                <div className="small muted">정상 처리율 {r.p}%</div>
              </div>
              <span className={"badge "+(r.s==="정상"?"low":r.s==="지연"?"medium":"critical")}>{r.s}</span>
            </div>
          ))}
        </Section>
      </div>
    </div>
  );
};

window.PipelineStatus = PipelineStatus;