// ============================================================================
// 메인 대시보드 (문서 §8.1 · §1 역할정의)
// ----------------------------------------------------------------------------
// 문서 §8.1 "메인 대시보드":
//   - 총 이벤트 수집량 / 분석 완료 / 이상행위 / 정책 차단 / 조사 진행 건수
//   - 생성형 AI 호출 현황, 허용/차단/비식별화 비율
//   - 데이터 등급(C/S/O)별 접근·전송·차단 통계
//   - NAC/SDP 사용자·단말 신뢰 상태, NDR 이상 트래픽, 스토리지 무결성 요약
// 문서 §8 원칙: "단순 알람 나열이 아닌 분석형 대시보드"
//   → 상단 AlertStrip(경보 dominant) + 활성 시나리오(§6.2) + 하단 KPI 스트립
// 문서 §1 마지막 단락: "N2SF 5단계 절차에서 보안대책 적용 결과 검증"
//   → 하단 N2SF 5단계 스텝 UI로 명시
// ============================================================================

const Dashboard = ({ onNav, onOpenScenario }) => {
  const M = window.MOCK;

  const aiSegs = [
    { value: M.aiCalls.allow, color: "var(--low)" },
    { value: M.aiCalls.mask, color: "var(--medium)" },
    { value: M.aiCalls.block, color: "var(--critical)" },
  ];

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1>통합 보안 관제 대시보드</h1>
        </div>
        <div className="row gap-8">
          <button className="btn ghost"><Icon name="clock" size={14}/> 최근 24시간</button>
          <button className="btn"><Icon name="filter" size={14}/> 필터</button>
          <button className="btn primary"><Icon name="check" size={14}/> 리포트 내보내기</button>
        </div>
      </div>

      {/* 경보 배너 스트립 — 대시보드 히어로 */}
      {/* 경보 배너 스트립 — 대시보드 히어로
          문서 §8 "단순 알람 나열이 아닌 분석형 대시보드" 원칙 + §8.4 시나리오 단위 경보 */}
      <AlertStrip scenarios={M.scenarios} onOpenScenario={onOpenScenario}/>

      {/* 상황 요약 그리드: 활성 위협 시나리오(문서 §6.2 상관분석 결과 구조 · §8.4 위협 시나리오 뷰)
          + 최근 Critical/High 이벤트 스트림(§8.2 이벤트 타임라인 요약) */}
      <div className="grid dash-gap" style={{gridTemplateColumns:"minmax(0, 1.05fr) minmax(0, 1fr)"}}>
        <Section title="활성 위협 시나리오" meta={`${M.scenarios.length}건 진행 중`}
          right={<button className="btn ghost small" onClick={()=>onNav("scenarios")}>전체 시나리오 <Icon name="chevron" size={12}/></button>}>
          {M.scenarios.map(s => (
            <div key={s.id} onClick={()=>onOpenScenario(s.id)}
              style={{padding:"12px 10px", borderRadius:"var(--r-md)", cursor:"pointer", marginBottom:6,
                background:"var(--surface-2)", border:"1px solid var(--border)"}}
              onMouseEnter={e=>e.currentTarget.style.background="var(--surface-3)"}
              onMouseLeave={e=>e.currentTarget.style.background="var(--surface-2)"}
            >
              <div className="row between mb-8">
                <div className="row gap-8">
                  <Severity level={s.severity}/>
                  <span className="mono small muted">{s.id}</span>
                </div>
                <span className="small muted">{s.started} · {s.duration}</span>
              </div>
              <div style={{fontSize:14, fontWeight:500, marginBottom:6}}>{s.title}</div>
              <div className="row gap-12 small" style={{color:"var(--text-3)"}}>
                <span><Icon name="user" size={12}/> {s.user.name} <span className="mono muted">({s.user.id})</span></span>
                <span>· {s.user.dept}</span>
                <span>· 관련 이벤트 {s.chain.length}건</span>
              </div>
              <div className="row gap-4" style={{marginTop:8}}>
                {s.chain.map((c,i) => (
                  <React.Fragment key={i}>
                    <Source k={c.src}/>
                    {i<s.chain.length-1 && <span className="muted" style={{fontSize:11}}>›</span>}
                  </React.Fragment>
                ))}
              </div>
              <div className="row gap-4" style={{marginTop:6}}>
                {s.tactics.map(t => <span key={t} className="chip" style={{padding:"2px 8px", fontSize:11.5}}>Tactic · {t}</span>)}
              </div>
            </div>
          ))}
        </Section>

        <Section title="최근 Critical / High 이벤트"
          right={<button className="btn ghost small" onClick={()=>onNav("timeline")}>타임라인 <Icon name="chevron" size={12}/></button>}>
          <table className="tbl">
            <thead>
              <tr><th>시각</th><th>출처</th><th>이벤트</th><th>등급</th><th>위험도</th></tr>
            </thead>
            <tbody>
              {M.events.filter(e=>["critical","high","medium"].includes(e.sev)).slice(0,8).map((e,i) => (
                <tr key={i}>
                  <td className="mono">{e.t}</td>
                  <td><Source k={e.src}/></td>
                  <td><div style={{maxWidth:230, overflow:"hidden", textOverflow:"ellipsis", whiteSpace:"nowrap"}}>{e.title}</div>
                      <div className="small muted mono">{e.user} · {e.asset}</div></td>
                  <td><Grade g={e.grade}/></td>
                  <td><Severity level={e.sev}/></td>
                </tr>
              ))}
            </tbody>
          </table>
        </Section>
      </div>

      {/* KPI 스트립 — 보조 지표로 축소 */}
      <KpiStrip kpis={M.kpis}/>

      {/* 중단: 생성형 AI 호출 현황 / C·S·O 등급 / 연계 솔루션 (문서 §8.1 메인 대시보드 KPI 구성) */}
      <div className="grid dash-gap" style={{gridTemplateColumns:"minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.4fr)"}}>
        <Section title="생성형 AI 호출 현황"
          right={<div className="row gap-12 small">
            <span><span className="sev-dot low"/>허용 {M.aiCalls.allow.toLocaleString()}</span>
            <span><span className="sev-dot medium"/>마스킹 {M.aiCalls.mask.toLocaleString()}</span>
            <span><span className="sev-dot critical"/>차단 {M.aiCalls.block}</span>
          </div>}
        >
          <StackedBars data={M.aiHourly} h={140}/>
          <div className="row between small" style={{marginTop:6, color:"var(--text-3)", fontFamily:"var(--font-mono)"}}>
            <span>00</span><span>06</span><span>12</span><span>18</span><span>23</span>
          </div>
          <div style={{marginTop:12, borderTop:"1px solid var(--border)", paddingTop:10}}>
            <div className="small muted mb-8">서비스별 호출 · 차단</div>
            {M.aiCalls.services.map((s,i) => (
              <div key={i} className="row between" style={{padding:"5px 0", fontSize:12.5}}>
                <span className="text-2">{s.name}</span>
                <div className="row gap-12">
                  <span className="mono small">{s.calls.toLocaleString()}</span>
                  <span className="badge critical" style={{minWidth:40, justifyContent:"center"}}>차단 {s.block}</span>
                </div>
              </div>
            ))}
          </div>
        </Section>

        <Section title="데이터 등급별 흐름">
          <div style={{marginBottom:10}}>
            {[
              {g:"C",label:"Common",v:M.grades.C,desc:"공통·일반 업무 데이터"},
              {g:"S",label:"Sensitive",v:M.grades.S,desc:"민감·규제 대상"},
              {g:"O",label:"Open",v:M.grades.O,desc:"외부 공개 가능"},
            ].map(r => (
              <div key={r.g} style={{marginBottom:12}}>
                <div className="row between" style={{marginBottom:5}}>
                  <span className="row gap-8">
                    <Grade g={r.g}/>
                    <span className="text-2" style={{fontSize:13}}>{r.label}</span>
                    <span className="small muted">{r.desc}</span>
                  </span>
                  <span className="mono" style={{fontSize:13, fontWeight:500}}>{r.v}%</span>
                </div>
                <div className="hbar" style={{height:8}}>
                  <span style={{width:r.v+"%", background:`var(--grade-${r.g.toLowerCase()})`}}/>
                </div>
              </div>
            ))}
          </div>
          <div className="small muted" style={{borderTop:"1px solid var(--border)", paddingTop:8}}>
            S등급 외부 전송 시도 <b className="text-2">18건</b> · 전일대비 <span style={{color:"var(--critical)"}}>+4건</span>
          </div>
        </Section>

        <Section title="연계 보안 솔루션"
          right={<button className="btn ghost small" onClick={()=>onNav("pipeline")}>전체 보기 <Icon name="chevron" size={12}/></button>}>
          {M.sources.map((s,i) => {
            const status = s.status === "healthy" ? "low" : s.status==="degraded" ? "medium" : "critical";
            return (
              <div key={i} style={{padding:"8px 0", borderBottom: i<M.sources.length-1?"1px solid var(--border)":"none"}}>
                <div className="row between">
                  <div className="row gap-8">
                    <Source k={s.key}/>
                    <div>
                      <div style={{fontSize:13.5}}>{s.label} <span className="small muted">· {s.vendor}</span></div>
                      <div className="small muted">{s.role}</div>
                    </div>
                  </div>
                  <div style={{textAlign:"right"}}>
                    <div className="mono small">{s.events.toLocaleString()}</div>
                    <span className={"badge "+status}>{s.status==="healthy"?"정상":s.status==="degraded"?"지연":"장애"}</span>
                  </div>
                </div>
              </div>
            );
          })}
        </Section>
      </div>
    </div>
  );
};

window.Dashboard = Dashboard;

// ----- KPI Strip: 얇은 통계 바 -----
// 경보가 대시보드의 dominant 위계를 차지하므로 KPI는 보조 지표로 축소.
// 4칸 가로 그리드, 각 칸에 라벨·값·델타·미니 spark.
const KpiStrip = ({ kpis }) => (
  <div className="kpi-strip">
    {kpis.map((k, i) => {
      // spark 색상: 상승 방향의 "차단" 지표는 긍정 신호(low), 그 외 상승은 info, 하락은 low
      const sparkColor = k.dir === "up"
        ? (k.label.includes("차단") ? "var(--low)" : "var(--info)")
        : "var(--low)";
      return (
        <div key={i} className="kpi-strip__cell">
          <div className="kpi-strip__label">{k.label}</div>
          {/* 하단 row: 좌측 value+delta 수직 묶음 / 우측 spark.
              delta를 값 바로 아래에 둬서 "수치와 추세"가 하나의 정보 단위로 읽히도록. */}
          <div className="kpi-strip__row">
            <div className="kpi-strip__value">
              <div className="kpi-strip__value-line">
                <span className="kpi-strip__num">{k.value}</span>
                {k.unit && <span className="kpi-strip__unit">{k.unit}</span>}
              </div>
              <div className={"kpi-strip__delta " + k.dir}>
                {k.dir === "up" ? "▲" : "▼"} {k.delta}
              </div>
            </div>
            <div className="kpi-strip__spark">
              {/* spark 높이 36, 남는 가로 폭 전체 사용 — 추세가 인식되는 최소 크기 */}
              <svg viewBox="0 0 100 36" preserveAspectRatio="none">
                <polyline fill="none" stroke={sparkColor} strokeWidth="1.4"
                  points={k.spark.map((v, idx) => {
                    const x = (idx / (k.spark.length - 1)) * 100;
                    const y = 34 - ((v - Math.min(...k.spark)) / (Math.max(...k.spark) - Math.min(...k.spark) || 1)) * 30 - 1;
                    return `${x.toFixed(1)},${y.toFixed(1)}`;
                  }).join(" ")}
                  vectorEffect="non-scaling-stroke"/>
              </svg>
            </div>
          </div>
        </div>
      );
    })}
  </div>
);
window.KpiStrip = KpiStrip;

// ----- 상단 경보 배너 스트립 -----
const AlertStrip = ({ scenarios, onOpenScenario }) => {
  const critical = scenarios.filter(s => s.severity === "critical" || s.severity === "high");
  if (!critical.length) return null;
  return (
    <div className="alert-strip">
      <div className="alert-strip__head">
        <span className="alert-strip__pulse"/>
        <span className="alert-strip__label">ACTIVE · CRITICAL {critical.filter(s=>s.severity==="critical").length} / HIGH {critical.filter(s=>s.severity==="high").length}</span>
      </div>
      <div className="alert-strip__list">
        {critical.slice(0, 4).map(s => (
          <button key={s.id} className={"alert-strip__row sev-"+s.severity} onClick={()=>onOpenScenario(s.id)}>
            <span className="alert-strip__sev">{s.severity.toUpperCase()}</span>
            <span className="alert-strip__id mono">{s.id.split("-").slice(-1)[0]}</span>
            <span className="alert-strip__title">{s.title}</span>
            <span className="alert-strip__meta">{s.started} · {s.user.id}</span>
            <Icon name="chevron" size={13}/>
          </button>
        ))}
      </div>
    </div>
  );
};