/* =============================================================================
   위협 시나리오 뷰 (문서 §8.4 · §6.2)
   -----------------------------------------------------------------------------
   §8.4 "위협 시나리오 뷰" — 개별 이벤트보다 한 단계 높은 분석 화면:
     - 시나리오 요약 카드: 발생 시간, 주요 사용자·자산, 핵심 위험도
     - 이벤트 체인 시각화: 인증 → 세션 생성 → DB 접근 → AI GW → NDR → Storage
     - 시나리오별 xAI 설명: 요약 / 판단 근거 / 관련 정책 / 검토 포인트
     - 반복 패턴 식별: 유사 시나리오 재발, 부서·사용자군별 집중도
     - ※ MITRE ATT&CK 전술·기술(Tactic/Technique) 동시 표시
   내부 데이터는 §6.2 "분석 결과 구조"(시나리오 ID·기간, 관련 자산, 핵심
     이벤트 체인, 시나리오 요약, 정책·등급 판단, 대응 후보)를 그대로 반영.
============================================================================= */

const ScenarioView = ({ scenarioId, setScenarioId }) => {
  const M = window.MOCK;
  const current = useMemo(() => M.scenarios.find(s => s.id === scenarioId) || M.scenarios[0], [scenarioId]);
  const [hoverNode, setHoverNode] = useState(null);
  const [typedLen, setTypedLen] = useState(0);

  // typing effect on scenario change
  useEffect(() => {
    setTypedLen(0);
    const total = current.xai.what.length + current.xai.why.length + current.xai.policy.length + current.xai.check.length;
    let i = 0;
    const t = setInterval(() => {
      i += 16;
      setTypedLen(i);
      if (i >= total) clearInterval(t);
    }, 14);
    return () => clearInterval(t);
  }, [current.id]);

  const slice = (text, offset) => {
    if (typedLen >= offset + text.length) return { text, done: true };
    if (typedLen <= offset) return { text: "", done: false };
    return { text: text.slice(0, typedLen - offset), done: false };
  };
  let off = 0;
  const p1 = slice(current.xai.what, off); off += current.xai.what.length;
  const p2 = slice(current.xai.why, off); off += current.xai.why.length;
  const p3 = slice(current.xai.policy, off); off += current.xai.policy.length;
  const p4 = slice(current.xai.check, off);

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="row gap-8" style={{marginBottom:6}}>
            <span className="mono small muted">시나리오</span>
            <span className="mono small" style={{color:"var(--accent)"}}>{current.id}</span>
            <Badge tone={current.severity}>{current.severity.toUpperCase()}</Badge>
          </div>
          <h1>{current.title}</h1>
          <div className="sub">발생 {current.started} · 지속 {current.duration} · 관련 이벤트 {current.chain.length}건</div>
        </div>
        <div className="row gap-8">
          <select value={current.id} onChange={e=>setScenarioId(e.target.value)}
            style={{background:"var(--surface-2)", border:"1px solid var(--border-2)", color:"var(--text)", padding:"6px 10px", borderRadius:6, fontSize:12.5}}>
            {M.scenarios.map(s => <option key={s.id} value={s.id}>{s.id} · {s.title.slice(0,24)}…</option>)}
          </select>
          <button className="btn">에스컬레이션</button>
          <button className="btn primary">대응 티켓 생성</button>
        </div>
      </div>

      {/* 요약 카드 */}
      <div className="grid dash-gap" style={{gridTemplateColumns:"minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr)"}}>
        <div className="card">
          <div className="small muted mb-8">주요 사용자 · 단말</div>
          <div style={{fontSize:14.5, fontWeight:500}}>{current.user.name} <span className="mono small muted">({current.user.id})</span></div>
          <div className="small muted" style={{marginTop:2}}>{current.user.dept} · {current.user.role}</div>
          <div className="small text-2 mono" style={{marginTop:8, padding:"4px 8px", background:"var(--surface-2)", borderRadius:4, display:"inline-block"}}>{current.device}</div>
        </div>
        <div className="card">
          <div className="small muted mb-8">관련 자산</div>
          {current.assets.map((a,i) => (
            <div key={i} className="mono small" style={{padding:"3px 0", color:"var(--text-2)"}}>{a}</div>
          ))}
        </div>
        <div className="card">
          <div className="small muted mb-8">Tactic · Technique</div>
          <div className="row gap-4" style={{flexWrap:"wrap"}}>
            {current.tactics.map(t => <Badge key={t} tone="high">{t}</Badge>)}
          </div>
          <div className="small muted" style={{marginTop:8}}>MITRE ATT&amp;CK 프레임워크 기준 전술 분류</div>
        </div>
        <div className="card">
          <div className="small muted mb-8">관련 정책</div>
          {current.policies.map((p,i) => (
            <div key={i} style={{padding:"4px 0"}}>
              <span className="mono small" style={{color:"var(--accent)"}}>{p.id}</span>
              <div className="small text-2">{p.name}</div>
            </div>
          ))}
        </div>
      </div>

      {/* 이벤트 체인 */}
      <Section title="이벤트 체인" meta="인증 → 접근 → 데이터 → AI → 네트워크 → 저장">
        <div className="chain">
          {current.chain.map((n,i) => (
            <React.Fragment key={i}>
              <ChainNode n={n} active={hoverNode===i}
                onClick={()=>setHoverNode(i===hoverNode?null:i)}/>
              {i<current.chain.length-1 && <ChainArrow/>}
            </React.Fragment>
          ))}
        </div>
        <div className="small muted" style={{marginTop:4}}>
          각 노드는 연계 보안 솔루션에서 발생한 정규화된 이벤트입니다. 클릭하여 원본 속성을 확인할 수 있습니다.
        </div>
      </Section>

      {/* xAI + 정책 근거 */}
      <div className="grid dash-gap" style={{gridTemplateColumns:"minmax(0, 1.4fr) minmax(0, 1fr)"}}>
        <div className="card">
          <div className="card-head">
            <h3 className="row gap-8"><Icon name="xai" size={14}/> xAI 설명 <span className="mono small muted" style={{marginLeft:8}}>자연어 분석 결과</span></h3>
            <span className="badge info">LLM + RAG</span>
          </div>

          <div className="xai-section">
            <div className="lbl"><span className="n">1</span>무엇이 발생했는가</div>
            <p className={p1.done?"":"typing"}>{p1.text}</p>
          </div>
          <div className="xai-section">
            <div className="lbl"><span className="n">2</span>왜 위험한가</div>
            <p className={p2.done?"":"typing"}>{p2.text}</p>
          </div>
          <div className="xai-section">
            <div className="lbl"><span className="n">3</span>어떤 정책과 관련되는가</div>
            <p className={p3.done?"":"typing"}>{p3.text}</p>
            <div className="ref">
              {current.policies.map((p,i) => (
                <div key={i} style={{marginBottom: i<current.policies.length-1?6:0}}>
                  <span className="mono" style={{color:"var(--accent)", marginRight:6}}>{p.id}</span>
                  <b>{p.name}</b> <span className="muted">· {p.section}</span>
                </div>
              ))}
            </div>
          </div>
          <div className="xai-section">
            <div className="lbl"><span className="n">4</span>무엇을 우선 확인해야 하는가</div>
            <p className={p4.done?"":"typing"}>{p4.text}</p>
          </div>
        </div>

        <div>
          <Section title="관련 세션 · 자산">
            <div className="mb-12">
              <div className="small muted mb-8">세션 신뢰도</div>
              <div className="hbar"><span style={{width:"72%"}}/></div>
              <div className="row between small" style={{marginTop:3}}>
                <span className="muted">SDP 검증</span>
                <span className="mono text-2">0.72</span>
              </div>
            </div>
            <div className="mb-12">
              <div className="small muted mb-8">단말 무결성</div>
              <div className="hbar"><span style={{width:"94%", background:"var(--low)"}}/></div>
              <div className="row between small" style={{marginTop:3}}>
                <span className="muted">NAC 검사</span>
                <span className="mono text-2">0.94</span>
              </div>
            </div>
            <div>
              <div className="small muted mb-8">사용자 위험도(30일)</div>
              <div className="hbar"><span style={{width:"82%", background:"var(--critical)"}}/></div>
              <div className="row between small" style={{marginTop:3}}>
                <span className="muted">행동 기반 스코어</span>
                <span className="mono text-2">0.82</span>
              </div>
            </div>
          </Section>

          <Section title="권장 대응" meta="자동 생성">
            {[
              {i:"세션 일시 격리", desc:"SDP 세션 강제 종료 및 15분 격리"},
              {i:"단말 조사 지시", desc:"WKS-0C41 프로세스·저장 영역 조사"},
              {i:"사용자 관리자 통지", desc:"여신심사본부 보안담당에게 알림"},
              {i:"정책 튜닝 검토", desc:"P-GAI-S-01 임계값 0.85 → 0.82 고려"},
            ].map((r,i) => (
              <div key={i} className="row between" style={{padding:"8px 0", borderBottom: i<3?"1px solid var(--border)":"none"}}>
                <div>
                  <div style={{fontSize:13.5}}>{r.i}</div>
                  <div className="small muted">{r.desc}</div>
                </div>
                <button className="btn ghost small"><Icon name="chevron" size={12}/></button>
              </div>
            ))}
          </Section>
        </div>
      </div>

      {/* 기타 시나리오 */}
      <Section title="다른 활성 시나리오">
        <div className="grid grid-3">
          {M.scenarios.filter(s=>s.id!==current.id).map(s => (
            <div key={s.id} style={{padding:"12px", background:"var(--surface-2)", border:"1px solid var(--border)", borderRadius:6, cursor:"pointer"}}
              onClick={()=>setScenarioId(s.id)}>
              <div className="row between mb-8">
                <Severity level={s.severity}/>
                <span className="mono small muted">{s.id}</span>
              </div>
              <div style={{fontSize:13.5, fontWeight:500, marginBottom:4}}>{s.title}</div>
              <div className="small muted">{s.user.name} · {s.started}</div>
            </div>
          ))}
        </div>
      </Section>
    </div>
  );
};

window.ScenarioView = ScenarioView;