/* =============================================================================
   이벤트 타임라인 + 상세 패널 (문서 §8.2)
   -----------------------------------------------------------------------------
   §8.2 "이벤트 타임라인 및 상세 분석 화면":
     - 시간축 기반 이벤트 시각화
     - 특정 기간·사용자·단말·AI 서비스·데이터 등급 기준 필터링
     - 중요 이벤트 강조 표시(차단, 이상행위, 무결성 위반)
     - 이벤트 선택 시 상세 패널 열람
   상세 패널 항목: 표준화된 이벤트 속성 / 원문 로그 참조 / 연관 이벤트 /
                  관련 사용자·단말·세션·자산 / 정책 적용 결과·사유 /
                  xAI 설명(§7) / 관련 조항·가이드 링크
   모든 이벤트는 공통 이벤트 모델(§3.2 OCSF) 스키마로 정규화된 전제.
============================================================================= */

const Timeline = ({ onOpenScenario, onNav }) => {
  const M = window.MOCK;
  const [filter, setFilter] = useState({ sev: [], src: [], grade: [], policy: [] });
  const [sel, setSel] = useState(null);

  const filtered = M.events.filter(e => {
    if (filter.sev.length && !filter.sev.includes(e.sev)) return false;
    if (filter.src.length && !filter.src.includes(e.src)) return false;
    if (filter.grade.length && !filter.grade.includes(e.grade)) return false;
    if (filter.policy.length && !filter.policy.includes(e.policy)) return false;
    return true;
  });

  const toggle = (k, v) => setFilter(f => ({
    ...f,
    [k]: f[k].includes(v) ? f[k].filter(x => x !== v) : [...f[k], v]
  }));
  const clearAll = () => setFilter({ sev: [], src: [], grade: [], policy: [] });
  const activeCount = filter.sev.length + filter.src.length + filter.grade.length + filter.policy.length;

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1>이벤트 타임라인</h1>
          <div className="sub">공통 이벤트 모델(OCSF)로 정규화된 전 구간 이벤트 · 시간 역순</div>
        </div>
        <div className="row gap-8">
          <div className="search-wrap" style={{width:260, flex:"none"}}>
            <Icon name="search" size={14}/>
            <input className="search" placeholder="사용자·자산·정책 검색"/>
          </div>
          <button className="btn"><Icon name="clock" size={14}/> 최근 4시간</button>
        </div>
      </div>

      <div className="card" style={{padding:"12px 14px"}}>
        <div className="row gap-12" style={{flexWrap:"wrap", alignItems:"center"}}>
          <div className="row gap-4">
            <span className="small muted" style={{marginRight:4}}>위험도</span>
            {["critical","high","medium","low","info"].map(s => (
              <button key={s} className={"chip "+(filter.sev.includes(s)?"active":"")} onClick={()=>toggle("sev",s)}>
                <span className={"sev-dot "+s}/>{{critical:"Critical",high:"High",medium:"Medium",low:"Low",info:"Info"}[s]}
              </button>
            ))}
          </div>
          <div style={{width:1, height:20, background:"var(--border)"}}/>
          <div className="row gap-4">
            <span className="small muted" style={{marginRight:4}}>출처</span>
            {["NAC","SDP","NDR","AIGW","DBMS","WORM"].map(s => (
              <button key={s} className={"chip "+(filter.src.includes(s)?"active":"")} onClick={()=>toggle("src",s)}>
                <Source k={s}/>
              </button>
            ))}
          </div>
          <div style={{width:1, height:20, background:"var(--border)"}}/>
          <div className="row gap-4">
            <span className="small muted" style={{marginRight:4}}>등급</span>
            {["C","S","O"].map(g => (
              <button key={g} className={"chip "+(filter.grade.includes(g)?"active":"")} onClick={()=>toggle("grade",g)}>
                <Grade g={g}/>
              </button>
            ))}
          </div>
          {activeCount > 0 && (
            <>
              <div style={{width:1, height:20, background:"var(--border)"}}/>
              <button className="btn ghost small" onClick={clearAll}>
                <Icon name="x" size={12}/> 필터 초기화 ({activeCount})
              </button>
            </>
          )}
        </div>
      </div>

      {/* 정책 운영 요약 섹션 제거 — 타임라인은 이벤트 스트림 본연의 역할에 집중. */}

      <div className="card" style={{padding:0, overflow:"hidden"}}>
        <table className="tbl">
          <thead>
            <tr>
              <th style={{width:82}}>시각</th>
              <th style={{width:84}}>출처</th>
              <th style={{width:90}}>위험도</th>
              <th>이벤트</th>
              <th style={{width:170}}>사용자</th>
              <th style={{width:70}}>등급</th>
              <th style={{width:110}}>정책</th>
              <th style={{width:140}}>시나리오</th>
            </tr>
          </thead>
          <tbody>
            {filtered.map((e,i) => (
              <tr key={i} className={sel===i?"selected":""} style={{cursor:"pointer"}} onClick={()=>setSel(i)}>
                <td className="mono">{e.t}</td>
                <td><Source k={e.src}/></td>
                <td><Severity level={e.sev}/></td>
                <td><div>{e.title}</div><div className="small muted mono">{e.asset}</div></td>
                <td className="mono small">{e.user}</td>
                <td><Grade g={e.grade}/></td>
                <td className="mono small">{e.policy==="-" ? <span className="muted">—</span> : e.policy}</td>
                <td>
                  {e.scn ? <span className="mono small" style={{color:"var(--accent)"}} onClick={(ev)=>{ev.stopPropagation(); onOpenScenario(e.scn);}}>{e.scn}</span> : <span className="muted">—</span>}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {sel !== null && (
        <EventDetail e={filtered[sel]} onClose={()=>setSel(null)} onOpenScenario={onOpenScenario} onNav={onNav}/>
      )}
    </div>
  );
};

const EventDetail = ({ e, onClose, onOpenScenario, onNav }) => {
  return (
    <div className="detail-panel">
      <div className="detail-head">
        <div>
          <div className="row gap-8 mb-8">
            <Source k={e.src}/>
            <Severity level={e.sev}/>
            <span className="mono small muted">{e.t}</span>
          </div>
          <div style={{fontSize:15, fontWeight:500}}>{e.title}</div>
        </div>
        <button className="btn ghost" onClick={onClose}><Icon name="x" size={14}/></button>
      </div>
      <div className="detail-body">
        <dl className="kv mb-16">
          <dt>사용자</dt><dd className="mono">{e.user}</dd>
          <dt>자산</dt><dd className="mono">{e.asset}</dd>
          <dt>데이터 등급</dt><dd><Grade g={e.grade}/></dd>
          <dt>시나리오</dt><dd>{e.scn ? <a onClick={()=>onOpenScenario(e.scn)} style={{cursor:"pointer"}}>{e.scn}</a> : <span className="muted">없음</span>}</dd>
        </dl>

        {/* 정책 상세 카드: "왜 이 이벤트가 이 정책에 걸렸나"를 즉시 설명 */}
        {(() => {
          const M = window.MOCK;
          const p = (M.policies || []).find(x => x.id === e.policy);
          if (!p) {
            return (
              <div className="policy-detail policy-detail--empty">
                <div className="small muted">연결된 정책 없음 (관측·분석 이벤트)</div>
              </div>
            );
          }
          return (
            <div className="policy-detail">
              <div className="policy-detail__head">
                <div className="policy-detail__tag">
                  <Icon name="shield" size={12}/> 정책
                </div>
                <span className="mono small muted">{p.id}</span>
                <span className="policy-chip__cat">{p.category}</span>
                <span className="small muted" style={{marginLeft:"auto"}}>발효 {p.effective}</span>
              </div>
              <div className="policy-detail__name">{p.title}</div>
              <div className="policy-detail__rule">
                <span className="small muted">매칭 규칙</span>
                <div>{p.rule}</div>
              </div>
              <div className="policy-detail__why">
                <span className="small muted">이 이벤트 매칭 근거</span>
                <div>
                  {e.src === "AIGW" && e.grade === "S" && "프롬프트 원문에서 S등급 패턴(주민·계좌) 감지 · 분류기 신뢰도 0.94"}
                  {e.src === "AIGW" && e.grade === "C" && "프롬프트에서 C등급 PII 패턴 감지 · 토큰 치환 후 전달"}
                  {e.src === "DBMS" && "S등급 컬럼 포함 쿼리 · 사용자 평균 대비 3σ 초과"}
                  {e.src === "WORM" && "시간당 128건 변경 시도 · 임계 100건 초과"}
                  {e.src === "SDP" && "업무군·단말 무결성 조건 충족 · 세션 수립"}
                  {e.src === "NAC" && "단말 보안 패치 30일 이상 누락 감지"}
                </div>
              </div>
              {onNav && (
                <button className="btn ghost small" style={{marginTop:10}} onClick={()=>onNav("kb")}>
                  정책 전문 보기 <Icon name="chevron" size={12}/>
                </button>
              )}
            </div>
          );
        })()}

        <div className="small muted mb-8" style={{marginTop:14}}>정규화 원본 (OCSF)</div>
        <pre style={{background:"var(--surface-2)", border:"1px solid var(--border)", borderRadius:6, padding:10, fontSize:12, lineHeight:1.5, fontFamily:"var(--font-mono)", color:"var(--text-2)", overflow:"auto", maxHeight:200}}>
{`{
  "event_time": "2026-04-20T${e.t}+09:00",
  "event_category": "${e.src.toLowerCase()}",
  "severity": "${e.sev}",
  "user": { "id": "${e.user}" },
  "resource": { "name": "${e.asset}" },
  "policy": { "id": "${e.policy}" },
  "classification": { "label": "${e.grade}" }
}`}
        </pre>

        <div className="xai-section" style={{marginTop:14}}>
          <div className="lbl"><span className="n">xAI</span>이 이벤트에 대한 자연어 설명</div>
          <p>{e.src==="AIGW" && e.sev==="critical" ? "외부 생성형 AI 서비스로의 프롬프트 전송 직전, 내용에서 S등급 정보가 감지되어 정책 P-GAI-S-01에 의거 차단되었습니다. 동일 세션 내 직전 DB 쿼리와의 연계가 확인되므로 시나리오 단위 검토가 필요합니다." :
            e.src==="NDR" && e.sev==="high" ? "해당 세션에서 평소 관측되지 않는 외부 도메인으로 단발성 통신이 발생했습니다. 도메인 평판과 C2 의심 스코어 0.72를 고려할 때, 관련 단말과 세션의 프로세스 이력 확인이 권장됩니다." :
            e.src==="DBMS" ? "S등급 컬럼이 포함된 테이블에 대해 평균 대비 과다한 건수가 조회되었습니다. 동일 사용자의 최근 행동 패턴과 업무 맥락을 함께 확인하세요." :
            "이 이벤트는 현재 단독으로는 위험도가 높지 않으나, 동일 사용자·단말 기준 연계 이벤트가 있는지 검토가 필요합니다."}
          </p>
        </div>

        <div className="row gap-8" style={{marginTop:12}}>
          <button className="btn primary">조사 티켓 생성</button>
          <button className="btn">유사 이벤트 찾기</button>
        </div>
      </div>
    </div>
  );
};

window.Timeline = Timeline;