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 { getAgentPermTypeIntent, getThreatLevelIntent, getAgentExecResultIntent } from '@shared/constants/aiSecurityStatuses';
import {
  Bot, Activity, AlertTriangle,
  CheckCircle, FileText,
  Users,
  Key, Layers, Hand,
} from 'lucide-react';

/*
 * SER-11: AI Agent 구축 운영
 *
 * AI Agent 보안 대책 관리 페이지:
 * ① Agent 현황  ② 화이트리스트 도구 관리  ③ 자동 중단·민감명령 승인
 * ④ 에이전트 권한·신원  ⑤ MCP Tool 최소권한  ⑥ 감사 로그
 */

type Tab = 'overview' | 'whitelist' | 'killswitch' | 'identity' | 'mcp' | 'audit';

const TABS: { key: Tab; icon: React.ElementType; label: string }[] = [
  { key: 'overview', icon: Activity, label: 'Agent 현황' },
  { key: 'whitelist', icon: CheckCircle, label: '화이트리스트 도구' },
  { key: 'killswitch', icon: AlertTriangle, label: '자동 중단·승인' },
  { key: 'identity', icon: Users, label: 'Agent 신원·권한' },
  { key: 'mcp', icon: Layers, label: 'MCP Tool 권한' },
  { key: 'audit', icon: FileText, label: '감사 로그' },
];

// ─── Agent 현황 ──────────────────
const AGENTS = [
  { name: '위험도 분석 Agent', type: '조회 전용', tools: 4, status: '활성', calls24h: 1240, lastCall: '04-10 09:28' },
  { name: '법령 Q&A Agent', type: '조회 전용', tools: 3, status: '활성', calls24h: 856, lastCall: '04-10 09:25' },
  { name: '단속 이력 Agent', type: '조회 전용', tools: 5, status: '활성', calls24h: 432, lastCall: '04-10 09:20' },
  { name: '모선 추론 Agent', type: '조회+쓰기', tools: 6, status: '활성', calls24h: 128, lastCall: '04-10 09:15' },
  { name: '데이터 관리 Agent', type: '관리자', tools: 8, status: '대기', calls24h: 0, lastCall: '04-09 16:00' },
];

const AGENT_KPI = [
  { label: '활성 Agent', value: '4', color: 'text-green-400', bg: 'bg-green-500/10' },
  { label: '등록 Tool', value: '26', color: 'text-blue-400', bg: 'bg-blue-500/10' },
  { label: '24h 호출', value: '2,656', color: 'text-purple-400', bg: 'bg-purple-500/10' },
  { label: '차단 건수', value: '3', color: 'text-red-400', bg: 'bg-red-500/10' },
  { label: '승인 대기', value: '0', color: 'text-yellow-400', bg: 'bg-yellow-500/10' },
];

// ─── 화이트리스트 도구 ──────────────────
const WHITELIST_TOOLS = [
  { tool: 'db_read_vessel', agent: '위험도 분석', permission: 'READ', mcp: 'kcg-db-server', status: '허용', desc: '선박 정보 조회' },
  { tool: 'db_read_analysis', agent: '위험도 분석', permission: 'READ', mcp: 'kcg-db-server', status: '허용', desc: '분석 결과 조회' },
  { tool: 'search_law', agent: '법령 Q&A', permission: 'READ', mcp: 'kcg-rag-server', status: '허용', desc: '법령·판례 검색' },
  { tool: 'search_cases', agent: '법령 Q&A', permission: 'READ', mcp: 'kcg-rag-server', status: '허용', desc: '유사 사례 검색' },
  { tool: 'read_enforcement', agent: '단속 이력', permission: 'READ', mcp: 'kcg-db-server', status: '허용', desc: '단속 이력 조회' },
  { tool: 'write_parent_result', agent: '모선 추론', permission: 'CREATE', mcp: 'kcg-db-server', status: '허용', desc: '모선 추론 결과 저장' },
  { tool: 'update_parent_status', agent: '모선 추론', permission: 'UPDATE', mcp: 'kcg-db-server', status: '허용', desc: '모선 상태 갱신' },
  { tool: 'db_delete_any', agent: '-', permission: 'DELETE', mcp: '-', status: '차단', desc: 'DB 삭제 (금지 도구)' },
  { tool: 'system_exec', agent: '-', permission: 'ADMIN', mcp: '-', status: '차단', desc: '시스템 명령 실행 (금지)' },
];

// ─── 자동 중단 설정 ──────────────────
const KILL_SWITCH_RULES = [
  { rule: '유해·금지행위 탐지', desc: '유해·금지행위, 잘못된 목표 설정 시 Agent 자동 중단', threshold: '즉시', status: '활성' },
  { rule: '자원 소비 임계값 초과', desc: 'GPU/메모리/API 호출 임계값 초과 시 자동 중단', threshold: 'GPU 90% / 메모리 85%', status: '활성' },
  { rule: '이상 호출 패턴', desc: '비정상적으로 빈번한 Tool 호출 탐지', threshold: '100회/분', status: '활성' },
  { rule: '응답 시간 초과', desc: 'Agent 응답 타임아웃', threshold: '30초', status: '활성' },
];

// ─── 민감명령 승인 ──────────────────
const SENSITIVE_COMMANDS = [
  { command: 'DB 데이터 수정/삭제', level: '높음', approval: '담당자 승인 필수', hitl: true, status: '적용' },
  { command: '모델 배포/롤백', level: '높음', approval: '담당자 승인 필수', hitl: true, status: '적용' },
  { command: '사용자 권한 변경', level: '높음', approval: '관리자 승인 필수', hitl: true, status: '적용' },
  { command: '외부 시스템 연계 호출', level: '중간', approval: '자동 승인 (로그)', hitl: false, status: '적용' },
  { command: '분석 결과 조회', level: '낮음', approval: '자동 승인', hitl: false, status: '적용' },
];

// ─── 에이전트 신원 확인 ──────────────────
const IDENTITY_POLICIES = [
  { policy: '미승인 권한 위임 차단', desc: '명시적으로 승인되지 않은 AI 에이전트로 권한 위임 제한', status: '적용' },
  { policy: 'Agent 간 신원 확인', desc: '협업할 AI 에이전트가 적합한 인증 혹은 신원 보유 중인지 상호 검증', status: '적용' },
  { policy: 'Agent 인증 방식', desc: 'Agent 간 인증은 표준 방식으로 제안, 발주처 간 협의를 통해 최종 선정', status: '적용' },
  { policy: '과도한 호출 방지', desc: 'AI 에이전트의 과도한 호출로 인한 레거시 시스템 마비 방지', status: '적용' },
];

// ─── MCP Tool 권한 ──────────────────
const MCP_PERMISSIONS = [
  { server: 'kcg-db-server', tools: 8, principle: '최소 권한', detail: '조회 Agent는 DB READ만, 쓰기 Agent는 특정 테이블 C/U만', status: '적용' },
  { server: 'kcg-rag-server', tools: 5, principle: '최소 권한', detail: 'RAG 검색만 허용, 인덱스 수정 불가', status: '적용' },
  { server: 'kcg-api-server', tools: 6, principle: '최소 권한', detail: '외부 API 호출은 Rate Limiting + Caching', status: '적용' },
  { server: 'kcg-notify-server', tools: 3, principle: '최소 권한', detail: '알림 발송만 허용, 수신자 목록 수정 불가', status: '적용' },
];

// ─── 감사 로그 ──────────────────
const AUDIT_LOG_SAMPLE = [
  { time: '09:28:15', chain: 'User → LLM → MCP Client → kcg-db-server → DB', agent: '위험도 분석', tool: 'db_read_vessel', result: '성공', latency: '120ms' },
  { time: '09:25:42', chain: 'User → LLM → MCP Client → kcg-rag-server → Milvus', agent: '법령 Q&A', tool: 'search_law', result: '성공', latency: '850ms' },
  { time: '09:20:10', chain: 'User → LLM → MCP Client → kcg-db-server → DB', agent: '단속 이력', tool: 'read_enforcement', result: '성공', latency: '95ms' },
  { time: '09:15:33', chain: 'User → LLM → MCP Client → kcg-db-server → DB', agent: '모선 추론', tool: 'write_parent_result', result: '승인→성공', latency: '230ms' },
  { time: '08:42:00', chain: 'User → LLM → Kill Switch', agent: '데이터 관리', tool: 'db_delete_any', result: '차단', latency: '-' },
];

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

  return (
    <PageContainer>
      <PageHeader
        icon={Bot}
        iconColor="text-orange-400"
        title="AI Agent 구축·운영 보안"
        description="SER-11 | AI Agent 화이트리스트·자동중단·민감명령 승인·MCP 최소권한·감사로그"
        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>

      {/* ── ① Agent 현황 ── */}
      {tab === 'overview' && (
        <div className="space-y-3">
          <div className="flex gap-2">
            {AGENT_KPI.map(k => (
              <div key={k.label} className={`flex-1 px-4 py-3 rounded-xl border border-border ${k.bg}`}>
                <div className={`text-xl font-bold ${k.color}`}>{k.value}</div>
                <div className="text-[9px] text-hint">{k.label}</div>
              </div>
            ))}
          </div>
          <Card><CardContent className="p-4">
            <div className="text-[12px] font-bold text-heading mb-3">등록 Agent 목록</div>
            <table className="w-full text-[10px]">
              <thead><tr className="text-hint border-b border-border">
                <th className="text-left py-2 px-2">Agent명</th><th className="text-center py-2">유형</th>
                <th className="text-center py-2">도구</th><th className="text-center py-2">24h 호출</th>
                <th className="text-center py-2">최근 호출</th><th className="text-center py-2">상태</th>
              </tr></thead>
              <tbody>{AGENTS.map(a => (
                <tr key={a.name} className="border-b border-border/50 hover:bg-surface-overlay transition-colors">
                  <td className="py-2 px-2 text-heading font-medium">{a.name}</td>
                  <td className="py-2 text-center"><Badge intent={getAgentPermTypeIntent(a.type)} size="sm">{a.type}</Badge></td>
                  <td className="py-2 text-center text-heading">{a.tools}</td>
                  <td className="py-2 text-center text-muted-foreground">{a.calls24h.toLocaleString()}</td>
                  <td className="py-2 text-center text-muted-foreground">{a.lastCall}</td>
                  <td className="py-2 text-center"><Badge intent={getStatusIntent(a.status)} size="sm">{a.status}</Badge></td>
                </tr>
              ))}</tbody>
            </table>
          </CardContent></Card>
        </div>
      )}

      {/* ── ② 화이트리스트 도구 ── */}
      {tab === 'whitelist' && (
        <Card><CardContent className="p-4">
          <div className="text-[12px] font-bold text-heading mb-3">화이트리스트 기반 도구 관리</div>
          <p className="text-[10px] text-hint mb-3">AI가 사용할 수 있는 도구를 화이트리스트로 지정·관리하여 잘못된 도구를 사용하지 못하도록 구성</p>
          <table className="w-full text-[10px]">
            <thead><tr className="text-hint border-b border-border">
              <th className="text-left py-2 px-2">Tool ID</th><th className="text-left py-2">설명</th>
              <th className="text-center py-2">Agent</th><th className="text-center py-2">권한</th>
              <th className="text-left py-2">MCP Server</th><th className="text-center py-2">상태</th>
            </tr></thead>
            <tbody>{WHITELIST_TOOLS.map(t => (
              <tr key={t.tool} className="border-b border-border/50 hover:bg-surface-overlay transition-colors">
                <td className="py-2 px-2 text-heading font-mono text-[9px]">{t.tool}</td>
                <td className="py-2 text-hint">{t.desc}</td>
                <td className="py-2 text-center text-muted-foreground">{t.agent}</td>
                <td className="py-2 text-center"><Badge intent={getAgentPermTypeIntent(t.permission)} size="sm">{t.permission}</Badge></td>
                <td className="py-2 text-muted-foreground font-mono text-[9px]">{t.mcp}</td>
                <td className="py-2 text-center"><Badge intent={getStatusIntent(t.status)} size="sm">{t.status}</Badge></td>
              </tr>
            ))}</tbody>
          </table>
        </CardContent></Card>
      )}

      {/* ── ③ 자동 중단·민감명령 승인 ── */}
      {tab === 'killswitch' && (
        <div className="space-y-3">
          <Card><CardContent className="p-4">
            <div className="text-[12px] font-bold text-heading mb-3">AI 에이전트 자동 중단 (Kill Switch)</div>
            <div className="space-y-2">
              {KILL_SWITCH_RULES.map(r => (
                <div key={r.rule} className="flex items-center gap-3 px-3 py-2.5 bg-surface-overlay rounded-lg">
                  <AlertTriangle className="w-4 h-4 text-red-400" />
                  <div className="flex-1">
                    <div className="text-[11px] text-heading font-medium">{r.rule}</div>
                    <div className="text-[9px] text-hint">{r.desc}</div>
                  </div>
                  <span className="text-[9px] text-muted-foreground">임계값: {r.threshold}</span>
                  <Badge intent={getStatusIntent(r.status)} size="sm">{r.status}</Badge>
                </div>
              ))}
            </div>
          </CardContent></Card>
          <Card><CardContent className="p-4">
            <div className="text-[12px] font-bold text-heading mb-3">민감명령 승인 절차 (Human-in-the-loop)</div>
            <p className="text-[10px] text-hint mb-3">국가안보·사회안전에 영향을 미칠 수 있는 민감한 명령은 전 담당자 승인 절차 마련</p>
            <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-left py-2">승인 방식</th><th className="text-center py-2">HITL</th><th className="text-center py-2">상태</th>
              </tr></thead>
              <tbody>{SENSITIVE_COMMANDS.map(c => (
                <tr key={c.command} className="border-b border-border/50 hover:bg-surface-overlay transition-colors">
                  <td className="py-2 px-2 text-heading font-medium">{c.command}</td>
                  <td className="py-2 text-center"><Badge intent={getThreatLevelIntent(c.level)} size="sm">{c.level}</Badge></td>
                  <td className="py-2 text-muted-foreground">{c.approval}</td>
                  <td className="py-2 text-center">{c.hitl ? <Hand className="w-3.5 h-3.5 text-orange-400 mx-auto" /> : <span className="text-hint">-</span>}</td>
                  <td className="py-2 text-center"><Badge intent="success" size="sm">{c.status}</Badge></td>
                </tr>
              ))}</tbody>
            </table>
          </CardContent></Card>
        </div>
      )}

      {/* ── ④ Agent 신원·권한 ── */}
      {tab === 'identity' && (
        <Card><CardContent className="p-4">
          <div className="text-[12px] font-bold text-heading mb-3">에이전트 권한 위임 차단 및 신원 확인</div>
          <div className="space-y-2">
            {IDENTITY_POLICIES.map(p => (
              <div key={p.policy} className="flex items-center gap-3 px-3 py-2.5 bg-surface-overlay rounded-lg">
                <Key className="w-4 h-4 text-orange-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>
      )}

      {/* ── ⑤ MCP Tool 권한 ── */}
      {tab === 'mcp' && (
        <Card><CardContent className="p-4">
          <div className="text-[12px] font-bold text-heading mb-3">MCP Tool 최소 권한 원칙</div>
          <p className="text-[10px] text-hint mb-3">MCP를 통해 연결된 각 도구(Tool)는 최소 권한 원칙에 따라 실행 권한을 부여 (예: 조회 전용 Agent는 DB Update 권한을 가진 MCP Tool 호출 불가)</p>
          <table className="w-full text-[10px]">
            <thead><tr className="text-hint border-b border-border">
              <th className="text-left py-2 px-2">MCP Server</th><th className="text-center py-2">Tool 수</th>
              <th className="text-center py-2">원칙</th><th className="text-left py-2">상세</th><th className="text-center py-2">상태</th>
            </tr></thead>
            <tbody>{MCP_PERMISSIONS.map(m => (
              <tr key={m.server} className="border-b border-border/50 hover:bg-surface-overlay transition-colors">
                <td className="py-2.5 px-2 text-heading font-mono text-[9px]">{m.server}</td>
                <td className="py-2.5 text-center text-heading">{m.tools}</td>
                <td className="py-2.5 text-center"><Badge intent="info" size="sm">{m.principle}</Badge></td>
                <td className="py-2.5 text-hint text-[9px]">{m.detail}</td>
                <td className="py-2.5 text-center"><Badge intent="success" size="sm">{m.status}</Badge></td>
              </tr>
            ))}</tbody>
          </table>
          <div className="mt-4 p-3 bg-surface-overlay rounded-lg">
            <div className="text-[10px] text-heading font-medium mb-1">Rate Limiting &amp; Caching</div>
            <div className="text-[9px] text-hint">AI 에이전트의 과도한 호출로 인한 레거시 시스템 마비를 방지하기 위해, MCP 서버 단에서 Rate Limiting(요청 제한) 및 Caching(캐싱) 기능을 필수적으로 구현</div>
          </div>
        </CardContent></Card>
      )}

      {/* ── ⑥ 감사 로그 ── */}
      {tab === 'audit' && (
        <Card><CardContent className="p-4">
          <div className="text-[12px] font-bold text-heading mb-3">감사 로그 (Audit Log)</div>
          <p className="text-[10px] text-hint mb-3">모든 MCP Tool 호출 내역(User Request → LLM → MCP Client → MCP Server → Legacy)은 식별 가능한 형태로 기록, A2A 통신 과정의 의사결정 추적성 보장</p>
          <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">Agent</th><th className="text-left py-2">Tool</th><th className="text-center py-2">결과</th><th className="text-right py-2 px-2">지연</th>
            </tr></thead>
            <tbody>{AUDIT_LOG_SAMPLE.map(l => (
              <tr key={l.time + l.tool} className="border-b border-border/50 hover:bg-surface-overlay transition-colors">
                <td className="py-2 px-2 text-muted-foreground font-mono">{l.time}</td>
                <td className="py-2 text-hint text-[9px]">{l.chain}</td>
                <td className="py-2 text-center text-heading">{l.agent}</td>
                <td className="py-2 text-heading font-mono text-[9px]">{l.tool}</td>
                <td className="py-2 text-center"><Badge intent={getAgentExecResultIntent(l.result)} size="sm">{l.result}</Badge></td>
                <td className="py-2 px-2 text-right text-muted-foreground">{l.latency}</td>
              </tr>
            ))}</tbody>
          </table>
        </CardContent></Card>
      )}
    </PageContainer>
  );
}
