import { useState } from 'react';
import { Card, CardContent } from '@shared/components/ui/card';
import { Badge } from '@shared/components/ui/badge';
import { TabBar, TabButton } from '@shared/components/ui/tabs';
import { PageContainer, PageHeader } from '@shared/components/layout';
import { getStatusIntent } from '@shared/constants/statusIntent';
import {
  Shield, Database, Brain, Lock, Eye, Activity,
  AlertTriangle, CheckCircle,
  Server, Search, RefreshCw,
} from 'lucide-react';

/*
 * SER-10: AI 보안
 *
 * AI 보안 대책 관리 페이지:
 * ① 데이터 수집 보안  ② AI 학습 보안  ③ 시스템 구축운영 보안
 * ④ 입출력 보안       ⑤ 경계보안      ⑥ 취약점 점검
 */

type Tab = 'overview' | 'data' | 'training' | 'io' | 'boundary' | 'vulnerability';

const TABS: { key: Tab; icon: React.ComponentType<{ className?: string }>; label: string }[] = [
  { key: 'overview', icon: Activity, label: '보안 현황' },
  { key: 'data', icon: Database, label: '데이터 수집 보안' },
  { key: 'training', icon: Brain, label: 'AI 학습 보안' },
  { key: 'io', icon: Lock, label: '입출력 보안' },
  { key: 'boundary', icon: Server, label: '경계 보안' },
  { key: 'vulnerability', icon: Search, label: '취약점 점검' },
];

// ─── 보안 현황 KPI ──────────────────
const SECURITY_KPI = [
  { label: '데이터 수집 보안', value: '정상', score: 95, icon: Database, color: 'text-green-400', bg: 'bg-green-500/10' },
  { label: 'AI 학습 보안', value: '정상', score: 92, icon: Brain, color: 'text-blue-400', bg: 'bg-blue-500/10' },
  { label: '입출력 필터링', value: '정상', score: 98, icon: Lock, color: 'text-purple-400', bg: 'bg-purple-500/10' },
  { label: '경계 보안', value: '주의', score: 85, icon: Server, color: 'text-yellow-400', bg: 'bg-yellow-500/10' },
  { label: '취약점 점검', value: '정상', score: 90, icon: Search, color: 'text-cyan-400', bg: 'bg-cyan-500/10' },
];

// ─── 데이터 수집 보안 ──────────────────
const DATA_SOURCES = [
  { name: 'AIS 원본 (SNPDB)', provider: '해경', trust: '인증', encryption: 'TLS 1.3', lastAudit: '2026-04-10', status: '정상' },
  { name: 'V-PASS 위치정보', provider: '해수부', trust: '인증', encryption: 'TLS 1.3', lastAudit: '2026-04-09', status: '정상' },
  { name: '기상 데이터', provider: '기상청', trust: '인증', encryption: 'TLS 1.2', lastAudit: '2026-04-08', status: '정상' },
  { name: '위성영상', provider: '해양조사원', trust: '인증', encryption: 'TLS 1.3', lastAudit: '2026-04-07', status: '정상' },
  { name: '법령·판례', provider: '법무부', trust: '인증', encryption: 'TLS 1.2', lastAudit: '2026-04-05', status: '정상' },
  { name: '단속 이력', provider: '해경', trust: '내부', encryption: 'AES-256', lastAudit: '2026-04-10', status: '정상' },
];

const CONTAMINATION_CHECKS = [
  { check: '오염데이터 탐지', desc: 'AI 학습·재학습 시 오염데이터 검사·관리', status: '활성', lastRun: '04-10 09:15' },
  { check: 'RAG 오염 차단', desc: '신규데이터 참조 시 오염데이터 유입 차단·방지', status: '활성', lastRun: '04-10 09:00' },
  { check: '출처 검증', desc: '공신력 있는 출처·배포 정보 구분 제출', status: '활성', lastRun: '04-10 08:30' },
  { check: '악성코드 사전검사', desc: '신뢰 출처 데이터라도 오염 가능, 사전 검사 필요', status: '활성', lastRun: '04-10 08:00' },
];

// ─── AI 학습 보안 ──────────────────
const TRAINING_POLICIES = [
  { policy: '보안등급별 데이터 분류', desc: 'AI시스템 활용목적 및 등급분류에 맞게 기밀·민감·공개등급 데이터 활용', status: '적용' },
  { policy: '사용자별 접근통제', desc: 'AI시스템이 사용자·부서별 권한에 맞는 학습데이터만 사용하도록 세분화', status: '적용' },
  { policy: '비인가자 접근 차단', desc: 'AI가 비인가자에게 기밀·민감등급 데이터를 제공하지 않도록 통제', status: '적용' },
  { policy: '저장소·DB 접근통제', desc: '보관된 학습데이터에 대한 사용자 접근통제', status: '적용' },
  { policy: '최소 접근권한 설계', desc: '사용자, 그룹, 데이터별로 최소 접근권한만 부여하도록 설계', status: '적용' },
  { policy: '다중 보안 인증', desc: '학습데이터 관리자 권한에 대해서는 다중 보안 인증 등 활용 방안 적용', status: '적용' },
  { policy: '오픈소스 모델 신뢰성', desc: '공신력 있는 출처·배포자가 제공하는 AI 모델·라이브러리 사용', status: '적용' },
];

// ─── 입출력 보안 ──────────────────
const IO_FILTERS = [
  { name: '입력 필터링', desc: '민감정보·적대적 공격 문구 포함여부 확인 및 차단', status: '활성', blocked: 23, total: 15420 },
  { name: '출력 필터링', desc: '응답 내 민감정보 노출 차단', status: '활성', blocked: 8, total: 15420 },
  { name: '입력 길이·형식 제한', desc: '공격용 프롬프트 과도 입력 방지', status: '활성', blocked: 5, total: 15420 },
  { name: '요청 속도 제한', desc: '호출 횟수, 동시 처리 요청수, 출력 용량 등 제한', status: '활성', blocked: 12, total: 15420 },
];

// ─── 경계 보안 ──────────────────
const BOUNDARY_ITEMS = [
  { item: 'DMZ·중계서버', desc: 'AI시스템에 접근하는 사용자·시스템 식별 및 통제', status: '적용' },
  { item: '인가 시스템 제한', desc: 'AI시스템이 인가된 내·외부 시스템·데이터만 활용하도록 제한', status: '적용' },
  { item: '권한 부여 제한', desc: 'AI시스템에 과도한 권한 부여 제한', status: '적용' },
  { item: '민감작업 승인절차', desc: '데이터 수정·시스템 제어 등 민감한 작업 수행 시 담당자 검토·승인', status: '적용' },
];

const EXPLAINABILITY = [
  { item: '추론 시각화', desc: '데이터 수정·시스템 제어 시 추론 과정·결과를 설명하거나 판단 근거 시각화', status: '구현' },
  { item: 'Feature Importance', desc: '모델 결정에 영향을 미친 주요 피처 표시', status: '구현' },
  { item: '판단 근거 제공', desc: '위험도 산출 시 기여 요인 설명', status: '구현' },
];

// ─── 취약점 점검 ──────────────────
const VULN_CHECKS = [
  { target: 'AI 모델 서빙 (PyTorch)', version: '2.4.1', lastScan: '2026-04-10', vulns: 0, status: '안전' },
  { target: 'FastAPI 서버', version: '0.115.0', lastScan: '2026-04-10', vulns: 0, status: '안전' },
  { target: 'LangChain (RAG)', version: '0.3.2', lastScan: '2026-04-09', vulns: 1, status: '주의' },
  { target: 'Milvus 벡터DB', version: '2.4.0', lastScan: '2026-04-09', vulns: 0, status: '안전' },
  { target: 'Spring Boot 백엔드', version: '3.4.1', lastScan: '2026-04-10', vulns: 0, status: '안전' },
  { target: 'Node.js (Vite)', version: '22.x', lastScan: '2026-04-10', vulns: 0, status: '안전' },
];

const RECOVERY_PLANS = [
  { plan: '모델 백업 저장소', desc: '이상행위 탐지 시 정상 모델·학습데이터 등으로 복원', status: '활성', detail: 'S3 버전별 백업 24개' },
  { plan: '버전정보 관리', desc: '모델·데이터·설정 버전 이력 추적', status: '활성', detail: 'Git + DVC 연동' },
  { plan: '자동 롤백', desc: '성능 저하 감지 시 이전 안정 버전으로 자동 복구', status: '활성', detail: '임계치 기반 트리거' },
];

export function AISecurityPage() {
  const [tab, setTab] = useState<Tab>('overview');

  return (
    <PageContainer>
      <PageHeader
        icon={Shield}
        iconColor="text-red-400"
        title="AI 보안 관리"
        description="SER-10 | AI 데이터 수집·학습·입출력·경계 보안 및 취약점 관리"
        demo
      />

      {/* 탭 */}
      <TabBar variant="underline">
        {TABS.map(tt => (
          <TabButton
            key={tt.key}
            active={tab === tt.key}
            icon={<tt.icon className="w-3.5 h-3.5" />}
            onClick={() => setTab(tt.key)}
          >
            {tt.label}
          </TabButton>
        ))}
      </TabBar>

      {/* ── ① 보안 현황 ── */}
      {tab === 'overview' && (
        <div className="space-y-3">
          <div className="flex gap-2">
            {SECURITY_KPI.map(k => (
              <div key={k.label} className="flex-1 flex items-center gap-2 px-3 py-2 rounded-xl border border-border bg-card">
                <div className={`p-1.5 rounded-lg ${k.bg}`}>
                  <k.icon className={`w-3.5 h-3.5 ${k.color}`} />
                </div>
                <span className={`text-base font-bold ${k.color}`}>{k.score}</span>
                <span className="text-[9px] text-hint">{k.label}</span>
              </div>
            ))}
          </div>
          <div className="grid grid-cols-2 gap-3">
            <Card><CardContent className="p-4">
              <div className="text-[12px] font-bold text-heading mb-3">보안 정책 준수 현황</div>
              <div className="space-y-1.5 text-[10px]">
                {[
                  ['데이터 출처 인증', '6/6 소스 인증 완료', '완료'],
                  ['오염데이터 검사', '4/4 검사 활성화', '완료'],
                  ['학습데이터 접근통제', '7/7 정책 적용', '완료'],
                  ['입출력 필터링', '4/4 필터 활성', '완료'],
                  ['경계 보안 설정', '4/4 항목 적용', '완료'],
                  ['취약점 점검', '5/6 안전 (1건 주의)', '주의'],
                  ['복구 계획', '3/3 활성', '완료'],
                ].map(([k, v, s]) => (
                  <div key={k} className="flex items-center gap-2 px-2 py-1.5 bg-surface-overlay rounded">
                    {s === '완료' ? <CheckCircle className="w-3 h-3 text-green-500" /> : <AlertTriangle className="w-3 h-3 text-yellow-500" />}
                    <span className="text-heading flex-1">{k}</span>
                    <span className="text-hint">{v}</span>
                  </div>
                ))}
              </div>
            </CardContent></Card>
            <Card><CardContent className="p-4">
              <div className="text-[12px] font-bold text-heading mb-3">최근 보안 이벤트</div>
              <div className="space-y-1.5 text-[10px]">
                {[
                  ['04-10 09:15', '오염데이터 검사 완료', '정상', '0건 탐지'],
                  ['04-10 08:42', '입력 필터링 차단', '경고', '공격 패턴 1건 차단'],
                  ['04-09 14:30', '취약점 스캔 완료', '주의', 'LangChain CVE-2026-1234'],
                  ['04-09 10:00', '학습데이터 접근 감사', '정상', '비정상 접근 0건'],
                  ['04-08 16:00', '모델 백업 완료', '정상', 'v2.1.0 → S3'],
                  ['04-08 09:00', 'RAG 오염 차단 검사', '정상', '0건 탐지'],
                ].map(([time, event, level, detail]) => (
                  <div key={time + event} className="flex items-center gap-2 px-2 py-1.5 bg-surface-overlay rounded">
                    <span className="text-muted-foreground w-24">{time}</span>
                    <span className="text-heading flex-1">{event}</span>
                    <Badge intent={getStatusIntent(level)} size="sm">{level}</Badge>
                    <span className="text-hint text-[9px]">{detail}</span>
                  </div>
                ))}
              </div>
            </CardContent></Card>
          </div>
        </div>
      )}

      {/* ── ② 데이터 수집 보안 ── */}
      {tab === 'data' && (
        <div className="space-y-3">
          <Card><CardContent className="p-4">
            <div className="text-[12px] font-bold text-heading mb-3">데이터 소스 신뢰성 관리</div>
            <table className="w-full text-[10px]">
              <thead><tr className="text-hint border-b border-border">
                <th className="text-left py-2 px-2">데이터 소스</th><th className="text-left py-2">제공기관</th>
                <th className="text-center py-2">신뢰등급</th><th className="text-center py-2">암호화</th>
                <th className="text-center py-2">최근 감사</th><th className="text-center py-2">상태</th>
              </tr></thead>
              <tbody>{DATA_SOURCES.map(d => (
                <tr key={d.name} className="border-b border-border/50 hover:bg-surface-overlay transition-colors">
                  <td className="py-2 px-2 text-heading font-medium">{d.name}</td>
                  <td className="py-2 text-muted-foreground">{d.provider}</td>
                  <td className="py-2 text-center"><Badge intent="success" size="sm">{d.trust}</Badge></td>
                  <td className="py-2 text-center text-muted-foreground">{d.encryption}</td>
                  <td className="py-2 text-center text-muted-foreground">{d.lastAudit}</td>
                  <td className="py-2 text-center"><Badge intent={getStatusIntent(d.status)} size="sm">{d.status}</Badge></td>
                </tr>
              ))}</tbody>
            </table>
          </CardContent></Card>
          <Card><CardContent className="p-4">
            <div className="text-[12px] font-bold text-heading mb-3">오염데이터 방지 검사</div>
            <div className="space-y-2">
              {CONTAMINATION_CHECKS.map(c => (
                <div key={c.check} className="flex items-center gap-3 px-3 py-2.5 bg-surface-overlay rounded-lg">
                  <CheckCircle className="w-4 h-4 text-green-500" />
                  <div className="flex-1">
                    <div className="text-[11px] text-heading font-medium">{c.check}</div>
                    <div className="text-[9px] text-hint">{c.desc}</div>
                  </div>
                  <Badge intent={getStatusIntent(c.status)} size="sm">{c.status}</Badge>
                  <span className="text-[9px] text-muted-foreground">최근: {c.lastRun}</span>
                </div>
              ))}
            </div>
          </CardContent></Card>
        </div>
      )}

      {/* ── ③ AI 학습 보안 ── */}
      {tab === 'training' && (
        <Card><CardContent className="p-4">
          <div className="text-[12px] font-bold text-heading mb-3">학습 데이터 보안 정책</div>
          <div className="space-y-2">
            {TRAINING_POLICIES.map(p => (
              <div key={p.policy} className="flex items-center gap-3 px-3 py-2.5 bg-surface-overlay rounded-lg">
                <Lock className="w-4 h-4 text-blue-400" />
                <div className="flex-1">
                  <div className="text-[11px] text-heading font-medium">{p.policy}</div>
                  <div className="text-[9px] text-hint">{p.desc}</div>
                </div>
                <Badge intent="success" size="sm">{p.status}</Badge>
              </div>
            ))}
          </div>
        </CardContent></Card>
      )}

      {/* ── ④ 입출력 보안 ── */}
      {tab === 'io' && (
        <Card><CardContent className="p-4">
          <div className="text-[12px] font-bold text-heading mb-3">AI 시스템 입·출력 보안 대책</div>
          <table className="w-full text-[10px]">
            <thead><tr className="text-hint border-b border-border">
              <th className="text-left py-2 px-2">필터</th><th className="text-left py-2">설명</th>
              <th className="text-center py-2">상태</th><th className="text-center py-2">차단</th><th className="text-center py-2">총 요청</th>
              <th className="text-center py-2">차단율</th>
            </tr></thead>
            <tbody>{IO_FILTERS.map(f => (
              <tr key={f.name} className="border-b border-border/50 hover:bg-surface-overlay transition-colors">
                <td className="py-2.5 px-2 text-heading font-medium">{f.name}</td>
                <td className="py-2.5 text-hint text-[9px]">{f.desc}</td>
                <td className="py-2.5 text-center"><Badge intent="success" size="sm">{f.status}</Badge></td>
                <td className="py-2.5 text-center text-red-400 font-bold">{f.blocked}</td>
                <td className="py-2.5 text-center text-muted-foreground">{f.total.toLocaleString()}</td>
                <td className="py-2.5 text-center text-muted-foreground">{(f.blocked / f.total * 100).toFixed(2)}%</td>
              </tr>
            ))}</tbody>
          </table>
        </CardContent></Card>
      )}

      {/* ── ⑤ 경계 보안 ── */}
      {tab === 'boundary' && (
        <div className="space-y-3">
          <Card><CardContent className="p-4">
            <div className="text-[12px] font-bold text-heading mb-3">AI 시스템 경계 보안</div>
            <div className="space-y-2">
              {BOUNDARY_ITEMS.map(b => (
                <div key={b.item} className="flex items-center gap-3 px-3 py-2.5 bg-surface-overlay rounded-lg">
                  <Server className="w-4 h-4 text-yellow-400" />
                  <div className="flex-1">
                    <div className="text-[11px] text-heading font-medium">{b.item}</div>
                    <div className="text-[9px] text-hint">{b.desc}</div>
                  </div>
                  <Badge intent="success" size="sm">{b.status}</Badge>
                </div>
              ))}
            </div>
          </CardContent></Card>
          <Card><CardContent className="p-4">
            <div className="text-[12px] font-bold text-heading mb-3">설명 가능한 AI (XAI)</div>
            <div className="space-y-2">
              {EXPLAINABILITY.map(e => (
                <div key={e.item} className="flex items-center gap-3 px-3 py-2.5 bg-surface-overlay rounded-lg">
                  <Eye className="w-4 h-4 text-purple-400" />
                  <div className="flex-1">
                    <div className="text-[11px] text-heading font-medium">{e.item}</div>
                    <div className="text-[9px] text-hint">{e.desc}</div>
                  </div>
                  <Badge intent="purple" size="sm">{e.status}</Badge>
                </div>
              ))}
            </div>
          </CardContent></Card>
        </div>
      )}

      {/* ── ⑥ 취약점 점검 ── */}
      {tab === 'vulnerability' && (
        <div className="space-y-3">
          <Card><CardContent className="p-4">
            <div className="text-[12px] font-bold text-heading mb-3">AI 시스템 소프트웨어·라이브러리 취약점 점검</div>
            <table className="w-full text-[10px]">
              <thead><tr className="text-hint border-b border-border">
                <th className="text-left py-2 px-2">대상</th><th className="text-center py-2">버전</th>
                <th className="text-center py-2">최근 스캔</th><th className="text-center py-2">취약점</th><th className="text-center py-2">상태</th>
              </tr></thead>
              <tbody>{VULN_CHECKS.map(v => (
                <tr key={v.target} className="border-b border-border/50 hover:bg-surface-overlay transition-colors">
                  <td className="py-2 px-2 text-heading font-medium">{v.target}</td>
                  <td className="py-2 text-center text-muted-foreground font-mono">{v.version}</td>
                  <td className="py-2 text-center text-muted-foreground">{v.lastScan}</td>
                  <td className="py-2 text-center">
                    <Badge intent={v.vulns > 0 ? 'warning' : 'success'} size="xs">{v.vulns}건</Badge>
                  </td>
                  <td className="py-2 text-center"><Badge intent={getStatusIntent(v.status)} size="sm">{v.status}</Badge></td>
                </tr>
              ))}</tbody>
            </table>
          </CardContent></Card>
          <Card><CardContent className="p-4">
            <div className="text-[12px] font-bold text-heading mb-3">AI 시스템 복구 방안</div>
            <div className="space-y-2">
              {RECOVERY_PLANS.map(r => (
                <div key={r.plan} className="flex items-center gap-3 px-3 py-2.5 bg-surface-overlay rounded-lg">
                  <RefreshCw className="w-4 h-4 text-cyan-400" />
                  <div className="flex-1">
                    <div className="text-[11px] text-heading font-medium">{r.plan}</div>
                    <div className="text-[9px] text-hint">{r.desc}</div>
                  </div>
                  <span className="text-[9px] text-muted-foreground">{r.detail}</span>
                  <Badge intent={getStatusIntent(r.status)} size="sm">{r.status}</Badge>
                </div>
              ))}
            </div>
          </CardContent></Card>
        </div>
      )}
    </PageContainer>
  );
}
