/* =============================================================================
   xAI 패널 (문서 §7)
   -----------------------------------------------------------------------------
   §7 "xAI 기반 설명 기능" — 코파일럿/챗봇이 아닌, 관제 화면에서 선택한
     이벤트·시나리오에 대한 "이해 가능한 설명과 근거"를 제공하는 분석 기능.
   제공 정보 4축:
     ① 무엇이 발생했는가        — 사건의 요약
     ② 왜 위험한가              — 탐지 근거, 연계 이벤트, 데이터 등급·정책 적용 이유
     ③ 어떤 정책과 관련되는가   — N2SF 가이드, 내부정책, C/S/O 기준 관련 조항
     ④ 무엇을 우선 확인해야 하나 — 운영자가 검토할 세션/사용자/자산/정책 요소
   설명 생성은 §5.3 RAG + Reranker로 검색된 조항을 LLM 프롬프트에 주입.
============================================================================= */

const XaiPanel = ({ onOpenScenario }) => {
  const M = window.MOCK;
  const [q, setQ] = useState("");
  const [history, setHistory] = useState([
    { role: "system", text: "관제 화면에서 선택된 이벤트 또는 시나리오를 선택해 설명을 요청하세요. xAI는 관련 정책과 데이터 등급을 함께 제시합니다."},
    { role: "user", text: "SCN-26042014-017에 대해 위험도와 N2SF 관련 조항을 요약해줘."},
    { role: "assistant", ref: M.scenarios[0], text: "" },
  ]);

  useEffect(() => {
    // type the assistant response
    const target = "동일 세션 내 S등급 고객정보 조회 직후 외부 생성형 AI로의 프롬프트 전송 시도가 AI Gateway에 의해 차단된 사례입니다. N2SF 모델2 데이터 흐름 통제 기준(§4.2)과 기관 내부 생성형 AI 활용 지침(§3.3)에 직접 해당하며, 동일 세션에서 NDR이 관측한 비정상 외부 도메인 통신이 단발성이지만 C2 의심 스코어 0.72로 상관분석 대상입니다. 위험도는 Critical로 판단되며, 해당 사용자·단말의 최근 3일 활동 이력과 단말 저장 영역 조사가 권장됩니다.";
    let i = 0;
    const t = setInterval(() => {
      i += 6;
      setHistory(h => {
        const nh = [...h];
        nh[2] = { ...nh[2], text: target.slice(0, i) };
        if (i >= target.length) clearInterval(t);
        return nh;
      });
    }, 20);
    return () => clearInterval(t);
  }, []);

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1>xAI 분석 · 설명</h1>
          <div className="sub">이벤트 · 시나리오에 대한 자연어 설명 · 근거 기반 분석 기능 (코파일럿 / 챗봇이 아닌 관제 내 분석 기능)</div>
        </div>
      </div>

      <div className="grid dash-gap" style={{gridTemplateColumns:"minmax(0, 2fr) minmax(0, 1fr)"}}>
        <div className="card" style={{display:"flex", flexDirection:"column", minHeight:560}}>
          <div style={{flex:1, padding:"4px 4px 12px", display:"flex", flexDirection:"column", gap:14}}>
            {history.map((m,i) => (
              <div key={i} style={{display:"flex", gap:10}}>
                <div style={{width:28, height:28, borderRadius:6, flexShrink:0,
                  background: m.role==="user" ? "var(--surface-3)" : m.role==="assistant" ? "var(--accent-soft)" : "var(--surface-2)",
                  color: m.role==="assistant" ? "var(--accent)" : "var(--text-2)",
                  display:"grid", placeItems:"center", fontSize:12, fontFamily:"var(--font-mono)", fontWeight:600}}>
                  {m.role==="user" ? "U" : m.role==="assistant" ? "xAI" : "sys"}
                </div>
                <div style={{flex:1}}>
                  <div style={{fontSize:13.5, lineHeight:1.7, color: m.role==="system" ? "var(--text-3)" : "var(--text)"}} className={m.role==="assistant" && m.text.length < 300 ? "typing" : ""}>
                    {m.text}
                  </div>
                  {m.ref && (
                    <div className="xai-section" style={{marginTop:10}}>
                      <div className="ref">
                        <div className="row between mb-8">
                          <div>
                            <span className="mono" style={{color:"var(--accent)", marginRight:6}}>{m.ref.id}</span>
                            <b>{m.ref.title}</b>
                          </div>
                          <button className="btn ghost small" onClick={()=>onOpenScenario(m.ref.id)}>시나리오 열기 <Icon name="chevron" size={12}/></button>
                        </div>
                        <div className="row gap-4" style={{flexWrap:"wrap"}}>
                          {m.ref.policies.map(p => (
                            <span key={p.id} className="chip">
                              <span className="mono" style={{color:"var(--accent)"}}>{p.id}</span> · {p.section}
                            </span>
                          ))}
                        </div>
                      </div>
                    </div>
                  )}
                </div>
              </div>
            ))}
          </div>
          <div style={{borderTop:"1px solid var(--border)", paddingTop:10, display:"flex", gap:8}}>
            <input value={q} onChange={e=>setQ(e.target.value)} placeholder="예) jm.jung의 오늘 활동을 요약해줘"
              style={{flex:1, background:"var(--surface-2)", border:"1px solid var(--border-2)", borderRadius:6, padding:"8px 12px", color:"var(--text)", fontSize:13.5}}/>
            <button className="btn primary">분석</button>
          </div>
          <div className="row gap-4" style={{marginTop:8, flexWrap:"wrap"}}>
            {[
              "이 시나리오의 공격 단계 분류",
              "정책 P-GAI-S-01 적용 이유",
              "유사 과거 사례",
              "운영자 확인 포인트",
            ].map(p => (
              <button key={p} className="chip" onClick={()=>setQ(p)}>{p}</button>
            ))}
          </div>
        </div>

        <div>
          <Section title="설명 근거 요약" style={{marginBottom:12}}>
            <div className="xai-section" style={{marginBottom:10}}>
              <div className="lbl"><Icon name="flow" size={14}/>상관 이벤트</div>
              <p style={{fontSize:12.5}}>6개 솔루션 · 6개 이벤트 체인</p>
            </div>
            <div className="xai-section" style={{marginBottom:10}}>
              <div className="lbl"><Icon name="shield" size={14}/>적용 정책</div>
              <p style={{fontSize:12.5}}>N2SF-M2-D-07 · INT-GAI-05 · P-GAI-S-01</p>
            </div>
            <div className="xai-section">
              <div className="lbl"><Icon name="db" size={14}/>데이터 등급</div>
              <p style={{fontSize:12.5}}><Grade g="S"/> 7,421건 조회</p>
            </div>
          </Section>

          <Section title="LLM 호출 메타" meta="민감정보 미유출 원칙">
            <dl className="kv">
              <dt>모델</dt><dd className="mono small">bt-isoc-analyst-v2</dd>
              <dt>프롬프트</dt><dd className="mono small">정규화 이벤트 + RAG 조항</dd>
              <dt>응답 시간</dt><dd className="mono small">1.84s</dd>
              <dt>RAG 검색</dt><dd className="mono small">12 → 6 (Reranker)</dd>
              <dt>원문 전송</dt><dd><span className="badge low">차단</span> <span className="small muted">속성·요약만 전달</span></dd>
            </dl>
          </Section>
        </div>
      </div>
    </div>
  );
};

window.XaiPanel = XaiPanel;