/* =============================================================================
   ASSESS AI · 적절성 평가 (사업계획서 hwpx p24 "관리자용 ASSESS 대시보드")
   -----------------------------------------------------------------------------
   3탭 구성:
     tab1  "평가 현황 요약"     — 3축 신호등 + N2SF 4단계 적합도 +
                                   ASSESS 지표(보완 권고·조정 반영률·재발률) +
                                   재조정 가이드 카드 + 리포트 생성(더미)
     tab2  "C/S/O·정책 적정성"  — 정보시스템·업무·부서 mismatch heatmap +
                                   셀 선택 시 xAI 사이드 패널
     tab3  "세션 타임라인"      — 4사 데이터(엠엘/모놀리/피앤피/나무)를
                                   세션 단위로 통합 표시 + 적정/과소/과도/누락 배지

   문서 매핑:
     §6.2 분석 결과 구조        → 시나리오별 primary vs reassess 대조
     p22~23 데이터 연동         → 4사 라벨 (피앤피 = 정보시스템·DB C/S/O 등급,
                                   나무 = 삭제·수정 시도)
     p24 xAI 재조정 가이드      → adjustmentGuides 카드 구조
============================================================================= */

const AssessmentView = ({ onOpenScenario, onNav }) => {
  const M = window.MOCK;
  const [tab, setTab] = useState(() => localStorage.getItem("btisoc.assessTab") || "summary");
  const [reportOpen, setReportOpen] = useState(null); // "exec" | "practitioner" | null
  const [selectedCell, setSelectedCell] = useState(null);

  useEffect(() => { localStorage.setItem("btisoc.assessTab", tab); }, [tab]);

  const tabs = [
    { k: "summary",   l: "평가 현황 요약" },
    { k: "mismatch",  l: "C/S/O·정책 적정성" },
    { k: "sessions",  l: "세션 타임라인" },
  ];

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1>적절성 평가 · 조정</h1>
          <div className="sub">
            OCSF 정규화 데이터 + 온톨로지 기반 RAG로 C/S/O 등급분류·위협식별·보안통제의
            실제 적용 수준을 관제·평가하고 정책·절차 재조정 가이드를 제공합니다 · N2SF 5단계(적절성 평가·조정)
          </div>
        </div>
        <div className="row gap-8">
          <button className="btn ghost"><Icon name="clock" size={14}/> 최근 7일</button>
          <button className="btn primary" onClick={()=>setReportOpen("exec")}>
            <Icon name="check" size={14}/> 리포트 생성
          </button>
        </div>
      </div>

      <SegmentedTabs items={tabs} active={tab} onChange={setTab}/>

      {tab === "summary"  && <SummaryTab M={M} onOpenScenario={onOpenScenario} onNav={onNav} setReportOpen={setReportOpen} setTab={setTab}/>}
      {tab === "mismatch" && <MismatchTab M={M} selectedCell={selectedCell} setSelectedCell={setSelectedCell}/>}
      {tab === "sessions" && <SessionsTab M={M} onOpenScenario={onOpenScenario}/>}

      {reportOpen && <ReportModal kind={reportOpen} onClose={()=>setReportOpen(null)} onSelect={setReportOpen}/>}
    </div>
  );
};

// ============================================================================
// 탭1 — 평가 현황 요약
// ============================================================================
const SummaryTab = ({ M, onOpenScenario, onNav, setReportOpen, setTab }) => {
  const ak = M.assessmentKpis;

  return (
    <>
      {/* 3축 스코어카드 */}
      <div className="grid grid-3 dash-gap">
        <AssessScoreCard
          title={ak.classification.axisLabel}
          score={ak.classification.score}
          delta={ak.classification.delta}
          light={ak.classification.light}
          label={ak.classification.label}
          note={ak.classification.note}
          series={ak.classification.series}
        />
        <AssessScoreCard
          title={ak.threatId.axisLabel}
          score={ak.threatId.score}
          delta={ak.threatId.delta}
          light={ak.threatId.light}
          label={ak.threatId.label}
          note={ak.threatId.note}
          series={ak.threatId.series}
        />
        <AssessScoreCard
          title={ak.controls.axisLabel}
          score={ak.controls.score}
          delta={ak.controls.delta}
          light={ak.controls.light}
          label={ak.controls.label}
          note={ak.controls.note}
          series={ak.controls.series}
        />
      </div>

      {/* 3축 평가 로직 카드 — 260422 §3 L41~L59 */}
      <AxisLogicCards logic={M.assessAxisLogic} onGoTab={setTab}/>

      {/* N2SF 4단계 산출물 대비 적합도 + ASSESS 지표 */}
      <div className="grid dash-gap" style={{gridTemplateColumns:"minmax(0, 1.5fr) minmax(0, 1fr)"}}>
        <Section title="N2SF 4단계 산출물 대비 실제 운영 상태"
          meta="기관 제출본(공명 막대) vs ASSESS AI 관측(실제 막대)"
          right={<span className="small muted">5단계(적절성 평가·조정)는 ASSESS AI 자체 수행</span>}>
          <div className="stage-list">
            {M.n2sfStages.map(s => {
              const tone = s.status === "적합" ? "low" : s.status === "부분적합" ? "medium" : "critical";
              const gap = s.submitted - s.observed;
              return (
                <div key={s.id} className="stage-row">
                  <div className="stage-row__id">{String(s.id).padStart(2, "0")}</div>
                  <div className="stage-row__body">
                    <div className="row between">
                      <div>
                        <span className="stage-row__label">{s.label}</span>
                        <span className={"badge " + tone} style={{marginLeft:8}}>{s.status}</span>
                      </div>
                      <div className="row gap-12">
                        <span className="small muted">제출본 <b className="mono" style={{color:"var(--text-2)"}}>{s.submitted}%</b></span>
                        <span className="small" style={{color:"var(--text-3)"}}>vs</span>
                        <span className="small muted">관측 <b className="mono" style={{color:"var(--text)"}}>{s.observed}%</b></span>
                        {gap > 0 && <span className={"mono small " + (gap >= 30 ? "stage-gap-critical" : gap >= 10 ? "stage-gap-medium" : "stage-gap-low")}>−{gap}%p</span>}
                      </div>
                    </div>
                    {/* 두 막대 나란히 — 제출본(공명/희미) + 관측(채워진) */}
                    <div className="stage-bar-pair">
                      <div className="stage-bar stage-bar--submitted" title="기관 제출본 (설계상 100%)">
                        <span style={{width: s.submitted + "%"}}/>
                        <span className="stage-bar__lbl">제출본</span>
                      </div>
                      <div className="stage-bar stage-bar--observed" title="ASSESS AI 관측">
                        <span style={{width: s.observed + "%", background: `var(--${tone})`}}/>
                        <span className="stage-bar__lbl">관측</span>
                      </div>
                    </div>
                    <div className="stage-row__note">{s.note}</div>
                  </div>
                </div>
              );
            })}
          </div>
        </Section>

        <Section title="ASSESS 지표" meta="일·주·월 단위">
          <AssessMetricsTabs metrics={M.assessMetrics}/>
        </Section>
      </div>

      {/* 설계 통제 대비 실제 집행률 — 공고서 p23 C.3 */}
      <Section title="설계 통제 대비 실제 집행률"
        meta={`평균 집행률 ${(M.controlEnforcement.summary.avgRate * 100).toFixed(1)}% · ${M.controlEnforcement.summary.policiesEvaluated}개 정책 평가`}
        right={<span className="small muted">설계 의도 {M.controlEnforcement.summary.designedActions.toLocaleString()}건 → 실제 집행 {M.controlEnforcement.summary.executedActions.toLocaleString()}건</span>}>
        <ControlEnforcementList controls={M.controlEnforcement.policies}/>
      </Section>

      {/* 재조정 가이드 목록 */}
      <Section title="정책·절차 재조정 가이드"
        meta={`${M.adjustmentGuides.length}건 — xAI·RAG 기반 자동 도출`}
        right={<button className="btn ghost small">전체 내보내기 <Icon name="chevron" size={12}/></button>}>
        <div className="guide-list">
          {M.adjustmentGuides.map(g => (
            <GuideCard key={g.id} guide={g} onOpenScenario={onOpenScenario}/>
          ))}
        </div>
      </Section>

      {/* 리포트 생성 */}
      <Section title="리포트·보고서 생성 지원" meta="N2SF 5단계 정기 리뷰 참고용">
        <div className="grid grid-2 dash-gap">
          <button className="report-card" onClick={()=>setReportOpen("exec")}>
            <div className="report-card__icon"><Icon name="shield" size={20}/></div>
            <div className="report-card__body">
              <div className="report-card__title">경영진 요약 리포트</div>
              <div className="report-card__sub">3축 신호등 · 주요 이슈 · 재조정 권고 요약</div>
            </div>
            <Icon name="chevron" size={14}/>
          </button>
          <button className="report-card" onClick={()=>setReportOpen("practitioner")}>
            <div className="report-card__icon"><Icon name="xai" size={20}/></div>
            <div className="report-card__body">
              <div className="report-card__title">실무자 상세 리포트</div>
              <div className="report-card__sub">시나리오별 증적 · 재조정 가이드 · N2SF 조항 근거</div>
            </div>
            <Icon name="chevron" size={14}/>
          </button>
        </div>
      </Section>
    </>
  );
};

// ---- ASSESS 지표 일·주·월 탭 ----
const AssessMetricsTabs = ({ metrics }) => {
  const [range, setRange] = useState("weekly");
  const m = metrics[range];
  const ranges = [
    { k: "daily", l: "일" }, { k: "weekly", l: "주" }, { k: "monthly", l: "월" },
  ];
  return (
    <>
      <div className="row gap-4" style={{marginBottom:12}}>
        {ranges.map(r => (
          <button key={r.k}
            className={"chip " + (range === r.k ? "active" : "")}
            onClick={()=>setRange(r.k)}>{r.l}</button>
        ))}
      </div>
      <div className="metric-row">
        <span className="metric-row__label">보완 권고 건수</span>
        <span className="metric-row__value mono">{m.recommendations}</span>
      </div>
      <div className="metric-row">
        <span className="metric-row__label">조정 반영률</span>
        <span className="metric-row__value mono">{(m.adoptionRate * 100).toFixed(0)}%</span>
      </div>
      <div className="metric-row">
        <span className="metric-row__label">재발률</span>
        <span className="metric-row__value mono">{(m.recurrenceRate * 100).toFixed(0)}%</span>
      </div>
      <div className="small muted" style={{marginTop:10, paddingTop:10, borderTop:"1px solid var(--border)"}}>
        재조정 가이드 발행 후 실제 정책·등급이 조정된 비율과, 조정 후 동일 mismatch의 재관측 비율을 함께 추적합니다.
      </div>
    </>
  );
};

// ---- 재조정 가이드 카드 ----
const GuideCard = ({ guide, onOpenScenario }) => {
  const priorityTone = guide.priority === "High" ? "critical" : guide.priority === "Medium" ? "medium" : "low";
  const statusTone = guide.status === "반영 완료" ? "low" : guide.status === "관찰 중" ? "info" : "medium";
  return (
    <div className="guide-card">
      <div className="guide-card__head">
        <span className="mono small" style={{color:"var(--accent)"}}>{guide.id}</span>
        <span className={"badge " + priorityTone}>{guide.priority}</span>
        <span className={"badge " + statusTone}>{guide.status}</span>
        <span className="small muted" style={{marginLeft:"auto"}}>{guide.issuedAt}</span>
      </div>
      <div className="guide-card__scope">
        <span className="guide-card__scope-tag">{guide.scope}</span>
        <span className="mono small muted" style={{marginLeft:6}}>
          대상: {guide.target.policyId || guide.target.systemId} · {guide.target.policyName || guide.target.systemName}
        </span>
      </div>

      <div className="guide-card__compare">
        <div className="guide-card__col">
          <div className="guide-card__col-label">현재</div>
          <div className="guide-card__col-text">{guide.current}</div>
        </div>
        <div className="guide-card__arrow">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5">
            <path d="M4 10h12M12 6l4 4-4 4"/>
          </svg>
        </div>
        <div className="guide-card__col guide-card__col--proposed">
          <div className="guide-card__col-label">권고</div>
          <div className="guide-card__col-text">{guide.proposed}</div>
        </div>
      </div>

      <div className="guide-card__foot">
        <div className="guide-card__evidence">
          <span className="small muted" style={{marginRight:6}}>근거</span>
          {guide.evidence.map((e, i) => (
            <span key={i} className="chip" style={{fontSize:11}}>{e}</span>
          ))}
        </div>
        <div className="guide-card__impact">
          <span className="small muted" style={{marginRight:6}}>예상 영향</span>
          <span className="small text-2">{guide.impact}</span>
        </div>
      </div>

      {guide.scenarioId && (
        <button className="guide-card__link" onClick={()=>onOpenScenario(guide.scenarioId)}>
          관련 시나리오 열기 <span className="mono small">{guide.scenarioId}</span>
          <Icon name="chevron" size={12}/>
        </button>
      )}
    </div>
  );
};

// ============================================================================
// 탭2 — C/S/O·정책 적정성 heatmap
// ============================================================================
const MismatchTab = ({ M, selectedCell, setSelectedCell }) => {
  const rows = M.mismatchMatrix;

  return (
    <div className="grid dash-gap" style={{gridTemplateColumns:"minmax(0, 2fr) minmax(0, 1fr)", alignItems:"start"}}>
      <Section title="정보시스템 · 업무 · 부서별 적정성 매트릭스"
        meta={`${rows.length}개 시스템 · 등록 등급 vs 관측 패턴 mismatch`}>
        <div className="mismatch-legend">
          <span className="row gap-4"><span className="sev-dot low"/>정합</span>
          <span className="row gap-4"><span className="sev-dot medium"/>일관성 문제</span>
          <span className="row gap-4"><span className="sev-dot high"/>과도 완화 / 과소 보호</span>
          <span className="row gap-4"><span className="sev-dot critical"/>Critical</span>
        </div>

        <div className="mismatch-table">
          <div className="mismatch-head">
            <div>정보시스템</div>
            <div>부서</div>
            <div>BRM</div>
            <div>등록 등급</div>
            <div>관측 패턴</div>
            <div>평가</div>
          </div>
          {rows.map((r, i) => {
            const c = HEATMAP_COLORS[r.severity];
            const active = selectedCell?.system === r.system;
            return (
              <button key={i}
                className={"mismatch-row " + (active ? "active" : "")}
                onClick={()=>setSelectedCell(r)}
                style={{
                  background: c.bg,
                  borderLeft: `3px solid ${c.border}`,
                }}>
                <div className="mismatch-cell-sys">{r.system}</div>
                <div className="mismatch-cell">{r.dept}</div>
                <div className="mismatch-cell">{r.brm}</div>
                <div><Grade g={r.registered}/></div>
                <div className="mono small" style={{color: c.label}}>{r.observed}</div>
                <div>
                  {r.pattern
                    ? <span className="mismatch-pattern" style={{color: c.label, borderColor: c.border}}>{r.pattern}</span>
                    : <span className="small muted">정합</span>}
                </div>
              </button>
            );
          })}
        </div>
      </Section>

      <div>
        {selectedCell ? (
          <MismatchDetail row={selectedCell} onClose={()=>setSelectedCell(null)}/>
        ) : (
          <Section title="셀 선택 시 xAI 설명">
            <div className="small muted" style={{padding:"24px 10px", textAlign:"center", lineHeight:1.7}}>
              좌측 매트릭스에서 행을 선택하면<br/>
              해당 mismatch의 근거와 조정 방향을<br/>
              RAG 기반 자연어로 설명해 드립니다.
            </div>
            <div style={{marginTop:14, padding:"12px", background:"var(--surface-2)", borderRadius:"var(--r-md)"}}>
              <div className="small muted mb-8">조정 방향 후보</div>
              <ul style={{margin:0, paddingLeft:18, fontSize:12.5, color:"var(--text-2)", lineHeight:1.7}}>
                <li>시스템 등록 등급 재분류 검토</li>
                <li>업무별 정책 예외 조항 신설</li>
                <li>사용자 템플릿·절차 개선</li>
                <li>마스킹 룰 정교화</li>
              </ul>
            </div>
          </Section>
        )}
      </div>
    </div>
  );
};

const MismatchDetail = ({ row, onClose }) => {
  const c = HEATMAP_COLORS[row.severity];
  const reasoning = {
    "과도 완화": "시스템 등록 등급은 높으나 AI 호출 패턴이 낮은 수준으로 반복 관측됩니다. 정책의 업무별 예외가 지나치게 포괄적으로 적용되고 있을 가능성이 큽니다.",
    "과소 보호": "시스템 등록 등급은 낮으나 실제 프롬프트에 민감 키워드가 반복 등장합니다. 등록 등급 자체의 재분류가 필요합니다.",
    "일관성 문제": "동일 BRM 내 다른 시스템과 등급 체계가 어긋납니다. BRM 기반 일관성 재조정이 필요합니다.",
  }[row.pattern] || "";

  return (
    <Section
      title={row.system}
      meta={`${row.dept} · BRM: ${row.brm}`}
      right={<button className="btn ghost small" onClick={onClose}><Icon name="x" size={12}/></button>}>
      <div className="mismatch-compare">
        <div className="mismatch-compare__col">
          <div className="small muted mb-8">등록 등급 (피앤피시큐어)</div>
          <Grade g={row.registered}/>
        </div>
        <div className="mismatch-compare__arrow">→</div>
        <div className="mismatch-compare__col">
          <div className="small muted mb-8">관측 패턴 (모놀리 + 프롬프트 분석)</div>
          <span className="mono small" style={{color: c.label}}>{row.observed}</span>
        </div>
      </div>

      {row.pattern && (
        <div className="xai-section" style={{marginTop:14}}>
          <div className="lbl"><Icon name="xai" size={14}/>xAI 설명</div>
          <p style={{fontSize:13}}>{reasoning}</p>
        </div>
      )}

      <div className="xai-section">
        <div className="lbl"><Icon name="shield" size={14}/>권고 조정 방향</div>
        <div className="ref">
          {row.pattern === "과도 완화" && <><b>등급 유지 + 정책 예외 조항 신설</b><br/>시스템 등록 등급은 유지하되 생성형 AI 호출 시 O 수준까지 마스킹 후 전달 허용 조항을 명문화합니다.</>}
          {row.pattern === "과소 보호" && <><b>시스템 등록 등급 상향</b><br/>피앤피 C/S/O 맵에서 해당 시스템을 한 단계 상향(O→C) 검토하고, 마스킹 정책을 자동 적용합니다.</>}
          {row.pattern === "일관성 문제" && <><b>BRM 기반 등급 재정비</b><br/>동일 BRM 업무군 내 시스템 간 등급 체계를 통합 검토합니다.</>}
          {!row.pattern && <>현재 등록 등급과 관측 패턴이 정합적으로 일치합니다. 추가 조정 불필요.</>}
        </div>
      </div>
    </Section>
  );
};

// ============================================================================
// 탭3 — 세션 단위 통합 타임라인 (4사 띠)
// ============================================================================
const SessionsTab = ({ M, onOpenScenario }) => {
  const [selId, setSelId] = useState(M.sessionAssessments[0].id);
  const sel = M.sessionAssessments.find(s => s.id === selId);

  return (
    <div className="grid dash-gap" style={{gridTemplateColumns:"minmax(280px, 340px) minmax(0, 1fr)", alignItems:"start"}}>
      <Section title="세션 목록" meta={`${M.sessionAssessments.length}건 · 최근 24시간`}>
        <div style={{margin:"-4px -4px 0"}}>
          {M.sessionAssessments.map(s => {
            const active = s.id === selId;
            const tone = s.severity === "high" ? "high" : s.severity === "medium" ? "medium" : "low";
            return (
              <button key={s.id} onClick={()=>setSelId(s.id)}
                className={"session-item " + (active ? "active" : "")}>
                <div className="row between" style={{marginBottom:4}}>
                  <span className="mono small" style={{color: active?"var(--text)":"var(--text-3)"}}>{s.id.slice(-8)}</span>
                  <VerdictBadge verdict={s.verdict} severity={s.severity}/>
                </div>
                <div className="session-item__user">{s.user} <span className="mono small muted">· {s.userId}</span></div>
                <div className="small muted">{s.dept} · {s.device}</div>
                <div className="small" style={{marginTop:4, color:"var(--text-3)"}}>{s.window}</div>
              </button>
            );
          })}
        </div>
      </Section>

      <div>
        <Section
          title={<span>세션 타임라인 <span className="mono small muted" style={{marginLeft:8}}>{sel.id}</span></span>}
          meta={`${sel.user} (${sel.userId}) / ${sel.device} · ${sel.window}`}
          right={<VerdictBadge verdict={sel.verdict} severity={sel.severity}/>}
          style={{marginBottom:12}}>
          <div className="small" style={{marginBottom:14, padding:"10px 12px", background:"var(--surface-2)", borderRadius:"var(--r-md)", color:"var(--text-2)", lineHeight:1.6}}>
            {sel.summary}
          </div>

          {/* 4사 띠 */}
          {(() => {
            // 시작/종료 시각 파싱
            const rangeMatch = sel.window.match(/(\d{2}):(\d{2}) ~ (\d{2}):(\d{2})/);
            const startMin = rangeMatch ? (+rangeMatch[1]) * 60 + (+rangeMatch[2]) : 0;
            const endMin   = rangeMatch ? (+rangeMatch[3]) * 60 + (+rangeMatch[4]) : 60;
            return (
              <>
                <div className="band-header">
                  <span className="band-header__time mono small">{rangeMatch ? `${rangeMatch[1]}:${rangeMatch[2]}` : ""}</span>
                  <span className="band-header__time mono small" style={{textAlign:"center"}}>경과 시간</span>
                  <span className="band-header__time mono small" style={{textAlign:"right"}}>{rangeMatch ? `${rangeMatch[3]}:${rangeMatch[4]}` : ""}</span>
                </div>
                <div className="band-stack">
                  <BandStrip
                    label="엠엘소프트" sublabel="사용자·세션 (NAC/SDP/NDR)"
                    events={sel.bands.ml} startMin={startMin} endMin={endMin} tone="ml"/>
                  <BandStrip
                    label="모놀리" sublabel="생성형 AI 호출 (AI Gateway)"
                    events={sel.bands.gai} startMin={startMin} endMin={endMin} tone="gai"/>
                  <BandStrip
                    label="피앤피시큐어" sublabel="정보시스템·DB C/S/O 등급"
                    events={sel.bands.pnp} startMin={startMin} endMin={endMin} tone="pnp"/>
                  <BandStrip
                    label="나무소프트" sublabel="삭제·수정 시도 (WORM)"
                    events={sel.bands.naeum} startMin={startMin} endMin={endMin} tone="naeum"/>
                </div>
              </>
            );
          })()}

          {/* 하단 링크 */}
          <div className="row gap-8" style={{marginTop:14}}>
            {sel.scenario && (
              <button className="btn" onClick={()=>onOpenScenario(sel.scenario)}>
                관련 위협 시나리오 열기 <Icon name="chevron" size={12}/>
              </button>
            )}
            {sel.guides && sel.guides.map(gId => (
              <span key={gId} className="chip">연계 가이드 · <span className="mono" style={{color:"var(--accent)"}}>{gId}</span></span>
            ))}
          </div>
        </Section>

        <Section title="평가 결과 매핑" meta="N2SF 위협 시나리오·보안통제 계획 대비">
          <div className="assess-verdict-grid">
            <div className="assess-verdict-cell">
              <div className="small muted mb-8">판정</div>
              <VerdictBadge verdict={sel.verdict} severity={sel.severity}/>
            </div>
            <div className="assess-verdict-cell">
              <div className="small muted mb-8">연결된 시나리오</div>
              <span className="mono" style={{color:"var(--accent)", cursor:"pointer"}} onClick={()=>sel.scenario && onOpenScenario(sel.scenario)}>
                {sel.scenario || "—"}
              </span>
            </div>
            <div className="assess-verdict-cell">
              <div className="small muted mb-8">발행된 재조정 가이드</div>
              <div className="row gap-4" style={{flexWrap:"wrap"}}>
                {sel.guides && sel.guides.length > 0
                  ? sel.guides.map(g => <span key={g} className="chip mono" style={{color:"var(--accent)"}}>{g}</span>)
                  : <span className="small muted">없음</span>}
              </div>
            </div>
          </div>
        </Section>
      </div>
    </div>
  );
};

// ============================================================================
// 리포트 모달 (더미 — 스크린샷 자산 용도)
// ============================================================================
const ReportModal = ({ kind, onClose, onSelect }) => {
  const isExec = kind === "exec";
  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={e=>e.stopPropagation()}>
        <div className="modal__head">
          <div>
            <div className="small muted">{isExec ? "경영진 요약 리포트" : "실무자 상세 리포트"}</div>
            <h3 style={{margin:"4px 0 0", fontSize:18}}>ASSESS AI · N2SF 적절성 평가 리포트</h3>
            <div className="small muted" style={{marginTop:2}}>기간: 2026-04-15 ~ 2026-04-21 (7일)</div>
          </div>
          <button className="btn ghost" onClick={onClose}><Icon name="x" size={14}/></button>
        </div>
        <div className="modal__body">
          <div className="row gap-4" style={{marginBottom:14}}>
            <button className={"chip " + (isExec ? "active" : "")} onClick={()=>onSelect("exec")}>경영진 요약</button>
            <button className={"chip " + (!isExec ? "active" : "")} onClick={()=>onSelect("practitioner")}>실무자 상세</button>
          </div>

          <div className="report-preview">
            {isExec ? (
              <>
                <div className="report-preview__sec">
                  <div className="report-preview__label">3축 적절성 현황</div>
                  <div className="row gap-12">
                    <span><TrafficLight state="yellow" size={12}/> 등급분류 82점</span>
                    <span><TrafficLight state="green" size={12}/> 위협식별 91점</span>
                    <span><TrafficLight state="red" size={12}/> 보안통제 76점</span>
                  </div>
                </div>
                <div className="report-preview__sec">
                  <div className="report-preview__label">주요 이슈 (Top 3)</div>
                  <ol className="report-preview__list">
                    <li>여신심사·해외사업 업무에서 S→O 반복 전송 (과도 완화) · 17건</li>
                    <li>해외 번역 업무 정책 우회 반복 · 12건</li>
                    <li>마케팅 CRM 등록 등급 O에 C급 키워드 반복 노출</li>
                  </ol>
                </div>
                <div className="report-preview__sec">
                  <div className="report-preview__label">권고 의사결정</div>
                  <ul className="report-preview__list">
                    <li>AGD-2026-001 · 여신심사 업무 예외 조항 신설 — <b>결재 필요</b></li>
                    <li>AGD-2026-002 · 번역 템플릿 개선 — <b>결재 필요</b></li>
                  </ul>
                </div>
              </>
            ) : (
              <>
                <div className="report-preview__sec">
                  <div className="report-preview__label">시나리오별 증적</div>
                  <ul className="report-preview__list">
                    <li><span className="mono">SCN-ASSESS-01</span> — 여신심사 계약서 반복 요약 (chain 6건 / xAI 4섹션 / 근거 3개)</li>
                    <li><span className="mono">SCN-ASSESS-02</span> — 해외 실사 번역 (chain 6건 / xAI 4섹션 / 근거 3개)</li>
                    <li><span className="mono">SCN-ASSESS-03</span> — 마케팅 CRM 키워드 (chain 6건 / xAI 4섹션 / 근거 2개)</li>
                  </ul>
                </div>
                <div className="report-preview__sec">
                  <div className="report-preview__label">재조정 가이드 상세</div>
                  <ul className="report-preview__list">
                    <li>AGD-2026-001 — 대상/현재/권고/근거/영향 전체 전개</li>
                    <li>AGD-2026-002 — 대상/현재/권고/근거/영향 전체 전개</li>
                  </ul>
                </div>
                <div className="report-preview__sec">
                  <div className="report-preview__label">N2SF 조항 근거</div>
                  <ul className="report-preview__list">
                    <li>N2SF 모델2 §4.2 데이터 흐름 통제 기준</li>
                    <li>내부 생성형 AI 활용 지침 §3.3</li>
                    <li>외부 서비스 이용지침 §2.1</li>
                  </ul>
                </div>
              </>
            )}
          </div>

          <div className="small muted" style={{marginTop:14, padding:"10px 12px", background:"var(--surface-2)", borderRadius:"var(--r-md)"}}>
            본 리포트는 미리보기 샘플입니다. 실제 배포 환경에서는 PDF 또는 DOCX 포맷으로 자동 생성되며, N2SF 5단계 정기 리뷰 증적으로 제출 가능합니다.
          </div>
        </div>
        <div className="modal__foot">
          <button className="btn ghost" onClick={onClose}>닫기</button>
          <button className="btn primary" onClick={onClose}>생성 준비 — 다운로드</button>
        </div>
      </div>
    </div>
  );
};

// ============================================================================
// 설계 통제 대비 실제 집행률 — 공고서 p23 C.3 보안통제 적절성
// ============================================================================
const ControlEnforcementList = ({ controls }) => {
  return (
    <div className="enf-list">
      <div className="enf-head">
        <div>정책 / 통제</div>
        <div>출처</div>
        <div>설계 의도 → 실제 집행</div>
        <div>집행률</div>
        <div>상태</div>
      </div>
      {controls.map(c => {
        const tone = c.status === "정상" ? "low" : c.status === "주의" ? "medium" : "critical";
        const pct = c.rate * 100;
        const trendArrow = c.trend === "감소" ? "▼" : c.trend === "증가" ? "▲" : "●";
        return (
          <div key={c.id} className={"enf-row enf-row--" + tone}>
            <div className="enf-cell-policy">
              <div className="enf-policy-name">{c.name}</div>
              <div className="mono small muted">{c.id}</div>
            </div>
            <div className="enf-cell">
              <span className="chip" style={{fontSize:11}}>{c.source}</span>
            </div>
            <div className="enf-cell-trace">
              <span className="mono small">{c.designed.toLocaleString()}</span>
              <span className="muted small" style={{margin:"0 6px"}}>→</span>
              <span className="mono small" style={{color: pct < 60 ? "var(--critical)" : pct < 90 ? "var(--medium)" : "var(--text)"}}>
                {c.executed.toLocaleString()}
              </span>
            </div>
            <div className="enf-cell-rate">
              <div className="enf-rate-bar">
                <span style={{
                  width: pct + "%",
                  background: pct < 60 ? "var(--critical)" : pct < 90 ? "var(--medium)" : "var(--low)",
                }}/>
              </div>
              <span className="mono" style={{
                fontSize: 13, fontWeight: 600,
                color: pct < 60 ? "var(--critical)" : pct < 90 ? "var(--medium)" : "var(--low)",
              }}>{pct.toFixed(1)}%</span>
            </div>
            <div className="enf-cell">
              <span className={"badge " + tone}>{c.status}</span>
              <span className="enf-trend small muted" style={{marginLeft:6}}>{trendArrow} {c.trend}</span>
            </div>
            {c.gap && (
              <div className="enf-gap">
                <Icon name="alert" size={12}/>
                <span className="small">{c.gap}</span>
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
};

// ============================================================================
// 3축 평가 로직 카드 — 공고서 260422 §3 L41~L59
//   - 각 축(등급분류·위협식별·보안통제)의 입력/평가 포인트/관측/링크를
//     한 카드로 묶어 "점수가 왜 이렇게 나오는지"의 방법론을 시각화.
//   - headerBadge는 n2sfStages[].issues와 정합 (§3-4 우선 검토 목록 암시).
// ============================================================================
const AxisLogicCards = ({ logic, onGoTab }) => {
  const axes = [logic.classification, logic.threatId, logic.controls];
  return (
    <Section title="3축 평가 로직"
      meta="공고서 §3 · 각 축의 입력 데이터 · 평가 포인트 · 금주 관측 · 우선 검토 흐름"
      right={<span className="small muted">→ 뱃지는 §3-4 우선 검토 목록 · 재조정 가이드로 연결</span>}>
      <div className="grid grid-3 dash-gap">
        {axes.map(axis => (
          <AxisLogicCard key={axis.axisKey} axis={axis} onGoTab={onGoTab}/>
        ))}
      </div>
    </Section>
  );
};

const AxisLogicCard = ({ axis, onGoTab }) => {
  return (
    <div className="axis-logic-card">
      <div className="axis-logic-card__head">
        <span className="axis-logic-card__title">{axis.title}</span>
        <span className={"axis-logic-card__badge axis-logic-card__badge--" + axis.headerBadge.tone}>
          <span className="axis-logic-card__badge-arrow">→</span>
          <span className="axis-logic-card__badge-label">{axis.headerBadge.label}</span>
          <span className="axis-logic-card__badge-value mono">{axis.headerBadge.value}건</span>
        </span>
      </div>

      <div className="axis-logic-card__section">
        <div className="axis-logic-card__section-label">입력 데이터</div>
        <div className="axis-logic-card__inputs">
          {axis.inputs.map((inp, i) => (
            <div key={i} className="axis-logic-card__input-row">
              <span className="axis-logic-card__input-chip">{inp.src}</span>
              <span className="axis-logic-card__input-text">{inp.label}</span>
            </div>
          ))}
        </div>
      </div>

      <div className="axis-logic-card__section">
        <div className="axis-logic-card__section-label">평가 포인트</div>
        {axis.checks.map((c, i) => (
          <div key={i} className="axis-logic-card__check-row">
            <span className={"axis-logic-card__check-tag axis-logic-card__check-tag--" + c.tone}>{c.tag}</span>
            <span className="axis-logic-card__check-text">{c.text}</span>
          </div>
        ))}
      </div>

      <div className="axis-logic-card__section">
        <div className="axis-logic-card__section-label">금주 관측</div>
        <div className="axis-logic-card__observation">{axis.observation}</div>
      </div>

      <button className="axis-logic-card__link" onClick={()=>onGoTab && onGoTab(axis.linkTab)}>
        {axis.linkLabel}
        <svg width="12" height="12" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.6">
          <path d="M4 10h12M12 6l4 4-4 4"/>
        </svg>
      </button>
    </div>
  );
};

window.AssessmentView = AssessmentView;
