import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Button } from '@shared/components/ui/button';
import { Card, CardContent } from '@shared/components/ui/card';
import { Badge } from '@shared/components/ui/badge';
import { PageContainer, PageHeader } from '@shared/components/layout';
import { getModelStatusIntent, getQualityGateIntent, getExperimentIntent, MODEL_STATUSES, QUALITY_GATE_STATUSES, EXPERIMENT_STATUSES } from '@shared/constants/modelDeploymentStatuses';
import { getStatusIntent } from '@shared/constants/statusIntent';
import {
  Cpu, Brain, Database, GitBranch, Activity, RefreshCw, Server, Shield,
  FileText, Settings, Layers, Globe, Lock, BarChart3, Code, Play, Square,
  Rocket, Zap, FlaskConical, Search, ChevronRight, CheckCircle, XCircle,
  AlertTriangle, Eye, Terminal, MessageSquare, Send, Bot, User,
} from 'lucide-react';

/*
 * SFR-18: 기계학습 운영 기능 (MLOps)
 * SFR-19: 대규모 언어모델(LLM) 운영 기능 (LLMOps)
 *
 * WING AI 플랫폼 운영 대시보드 반영:
 * ① 운영 대시보드  ② Experiment Studio  ③ Model Registry
 * ④ Deploy Center  ⑤ API Playground   ⑥ LLMOps (학습/HPS/로그/워커/LLM테스트)
 * ⑦ 플랫폼 관리
 */

type Tab = 'dashboard' | 'experiment' | 'registry' | 'deploy' | 'api' | 'llmops' | 'platform';
type LLMSubTab = 'train' | 'hps' | 'log' | 'worker' | 'llmtest';

// ─── 대시보드 KPI ──────────────────
const DASH_KPI = [
  { label: '고위험 (HIGH)', value: 8, sub: '↑3 전일비', color: '#ef4444', icon: AlertTriangle },
  { label: '중위험 (MED)', value: 16, sub: '↓2 전일비', color: '#f59e0b', icon: Eye },
  { label: '배포 중 모델', value: 3, sub: '최신 v2.1.0', color: '#10b981', icon: Rocket },
  { label: '진행 중 실험', value: 5, sub: '2건 완료 대기', color: '#3b82f6', icon: FlaskConical },
  { label: '등록 모델', value: 12, sub: '2건 승인 대기', color: '#8b5cf6', icon: GitBranch },
];

// ─── 실험 데이터 ──────────────────
const EXPERIMENTS = [
  { id: 'EXP-042', name: 'LSTM 서해A1 야간', template: 'AIS 위험도 예측', status: 'running', progress: 67, epoch: '34/50', f1: 0.891, time: '2h 14m' },
  { id: 'EXP-041', name: 'GNN 환적탐지 v3', template: '불법환적 네트워크', status: 'running', progress: 45, epoch: '23/50', f1: 0.823, time: '1h 50m' },
  { id: 'EXP-040', name: 'Transformer 궤적', template: '궤적 이상탐지', status: 'done', progress: 100, epoch: '50/50', f1: 0.912, time: '4h 30m' },
  { id: 'EXP-039', name: 'RF 어구분류 v2', template: '어구 자동분류', status: 'done', progress: 100, epoch: '100/100', f1: 0.876, time: '1h 12m' },
  { id: 'EXP-038', name: 'CNN 위성영상', template: '선박 탐지(SAR)', status: 'fail', progress: 23, epoch: '12/50', f1: 0, time: '0h 45m' },
];

const TEMPLATES = [
  { name: 'AIS 위험도 예측', icon: AlertTriangle, desc: 'LSTM+CNN 시계열 위험도' },
  { name: '궤적 이상탐지', icon: Activity, desc: 'Transformer 기반 경로 예측' },
  { name: '불법환적 네트워크', icon: Layers, desc: 'GNN 관계 분석' },
  { name: '어구 자동분류', icon: Search, desc: 'RF/XGBoost 앙상블' },
  { name: '선박 탐지(SAR)', icon: Globe, desc: 'CNN 위성영상 분석' },
  { name: 'Dark Vessel', icon: Eye, desc: 'SAR+RF 융합 탐지' },
];

// ─── 모델 레지스트리 ──────────────────
const MODELS = [
  { name: '불법조업 위험도 예측', ver: 'v2.1.0', status: 'DEPLOYED', accuracy: 93.2, f1: 92.3, recall: 91.5, precision: 93.1, falseAlarm: 7.8, gates: ['데이터검증', '성능검증', '편향검사', 'A/B테스트', '보안감사'], gateStatus: ['pass', 'pass', 'pass', 'pass', 'pass'] },
  { name: '경비함정 경로추천', ver: 'v1.5.2', status: 'DEPLOYED', accuracy: 89.7, f1: 88.4, recall: 87.2, precision: 89.6, falseAlarm: 10.3, gates: ['데이터검증', '성능검증', '편향검사', 'A/B테스트', '보안감사'], gateStatus: ['pass', 'pass', 'pass', 'pass', 'pass'] },
  { name: '불법어선 어망탐지', ver: 'v1.2.0', status: 'DEPLOYED', accuracy: 87.5, f1: 86.1, recall: 85.0, precision: 87.2, falseAlarm: 12.5, gates: ['데이터검증', '성능검증', '편향검사', 'A/B테스트', '보안감사'], gateStatus: ['pass', 'pass', 'pass', 'run', 'pend'] },
  { name: 'Transformer 궤적', ver: 'v0.9.0', status: 'APPROVED', accuracy: 91.2, f1: 90.5, recall: 89.8, precision: 91.2, falseAlarm: 8.8, gates: ['데이터검증', '성능검증', '편향검사', 'A/B테스트', '보안감사'], gateStatus: ['pass', 'pass', 'pass', 'pend', 'pend'] },
  { name: 'GNN 환적탐지 v3', ver: 'v0.3.0', status: 'TESTING', accuracy: 82.3, f1: 80.1, recall: 78.5, precision: 81.8, falseAlarm: 17.7, gates: ['데이터검증', '성능검증', '편향검사', 'A/B테스트', '보안감사'], gateStatus: ['pass', 'run', 'pend', 'pend', 'pend'] },
  { name: 'CNN 위성영상', ver: 'v0.1.0', status: 'DRAFT', accuracy: 0, f1: 0, recall: 0, precision: 0, falseAlarm: 0, gates: ['데이터검증', '성능검증', '편향검사', 'A/B테스트', '보안감사'], gateStatus: ['pend', 'pend', 'pend', 'pend', 'pend'] },
];

// ─── 배포 센터 ──────────────────
const DEPLOYS = [
  { model: '불법조업 위험도', ver: 'v2.1.0', endpoint: '/v1/infer/risk', traffic: 80, latency: '23ms', falseAlarm: '7.8%', rps: 142, status: '정상', date: '04-01' },
  { model: '불법조업 위험도', ver: 'v2.0.3', endpoint: '/v1/infer/risk', traffic: 20, latency: '25ms', falseAlarm: '9.9%', rps: 36, status: '카나리', date: '03-28' },
  { model: '경비함정 경로추천', ver: 'v1.5.2', endpoint: '/v1/infer/patrol', traffic: 100, latency: '45ms', falseAlarm: '10.3%', rps: 28, status: '정상', date: '03-15' },
  { model: '불법어선 어망탐지', ver: 'v1.2.0', endpoint: '/v1/infer/gear', traffic: 100, latency: '31ms', falseAlarm: '12.5%', rps: 15, status: '정상', date: '03-01' },
];

// ─── LLMOps 데이터 ──────────────────
const LLM_MODELS = [
  { name: 'Llama-3-8B', icon: Brain, sub: 'Meta 오픈소스' },
  { name: 'Qwen-2-7B', icon: Brain, sub: 'Alibaba' },
  { name: 'SOLAR-10.7B', icon: Brain, sub: 'Upstage' },
  { name: 'Gemma-2-9B', icon: Brain, sub: 'Google' },
  { name: 'Phi-3-mini', icon: Brain, sub: 'Microsoft 3.8B' },
  { name: 'Custom Upload', icon: GitBranch, sub: '직접 업로드' },
];

const TRAIN_JOBS = [
  { id: 'TRN-018', model: 'Llama-3-8B', status: 'running', progress: 72, elapsed: '3h 28m' },
  { id: 'TRN-017', model: 'Qwen-2-7B', status: 'done', progress: 100, elapsed: '5h 12m' },
  { id: 'TRN-016', model: 'SOLAR-10.7B', status: 'done', progress: 100, elapsed: '8h 45m' },
  { id: 'TRN-015', model: 'Llama-3-8B', status: 'fail', progress: 34, elapsed: '1h 20m' },
];

const HPS_TRIALS = [
  { trial: 1, lr: '3.2e-4', batch: 64, dropout: 0.2, hidden: 256, f1: 0.891, best: false },
  { trial: 2, lr: '1.0e-3', batch: 32, dropout: 0.3, hidden: 128, f1: 0.867, best: false },
  { trial: 3, lr: '5.5e-4', batch: 64, dropout: 0.1, hidden: 256, f1: 0.912, best: true },
  { trial: 4, lr: '2.1e-4', batch: 128, dropout: 0.2, hidden: 512, f1: 0.903, best: false },
  { trial: 5, lr: '8.0e-4', batch: 32, dropout: 0.4, hidden: 128, f1: 0.845, best: false },
];

const WORKERS = [
  { name: 'infer-risk-prod-01', model: '위험도 v2.1.0', gpu: 'Blackwell x2', status: 'ok', rps: 142, latency: '23ms', vram: '78%' },
  { name: 'infer-risk-canary-01', model: '위험도 v2.0.3', gpu: 'Blackwell x1', status: 'ok', rps: 36, latency: '25ms', vram: '45%' },
  { name: 'infer-patrol-01', model: '경로추천 v1.5.2', gpu: 'Blackwell x1', status: 'ok', rps: 28, latency: '45ms', vram: '52%' },
  { name: 'llm-serving-01', model: '해경LLM v1.0', gpu: 'H200 x2', status: 'ok', rps: 12, latency: '820ms', vram: '85%' },
  { name: 'llm-serving-02', model: '법령QA v1.0', gpu: 'Blackwell x1', status: 'warn', rps: 8, latency: '1.2s', vram: '92%' },
];

// ─── 메인 컴포넌트 ──────────────────

export function MLOpsPage() {
  const { t } = useTranslation('ai');
  const { t: tc } = useTranslation('common');
  const [tab, setTab] = useState<Tab>('dashboard');
  const [llmSub, setLlmSub] = useState<LLMSubTab>('train');
  const [selectedTmpl, setSelectedTmpl] = useState(0);
  const [selectedLLM, setSelectedLLM] = useState(0);

  return (
    <PageContainer>
      <PageHeader
        icon={Cpu}
        iconColor="text-purple-600 dark:text-purple-400"
        title={t('mlops.title')}
        description={t('mlops.desc')}
        demo
      />

      {/* 탭 */}
      <div className="flex gap-0 border-b border-border">
        {([
          { key: 'dashboard' as Tab, icon: BarChart3, label: '대시보드' },
          { key: 'experiment' as Tab, icon: FlaskConical, label: 'Experiment Studio' },
          { key: 'registry' as Tab, icon: GitBranch, label: 'Model Registry' },
          { key: 'deploy' as Tab, icon: Rocket, label: 'Deploy Center' },
          { key: 'api' as Tab, icon: Zap, label: 'API Playground' },
          { key: 'llmops' as Tab, icon: Brain, label: 'LLMOps' },
          { key: 'platform' as Tab, icon: Settings, label: '플랫폼 관리' },
        ]).map(t => (
          <button type="button" key={t.key} onClick={() => setTab(t.key)}
            className={`flex items-center gap-1.5 px-4 py-2.5 text-[11px] font-medium border-b-2 transition-colors ${tab === t.key ? 'text-blue-600 dark:text-blue-400 border-blue-400' : 'text-hint border-transparent hover:text-label'}`}>
            <t.icon className="w-3.5 h-3.5" />{t.label}
          </button>
        ))}
      </div>

      {/* ── ① 대시보드 ── */}
      {tab === 'dashboard' && (
        <div className="space-y-3">
          <div className="flex gap-2">
            {DASH_KPI.map(k => (
              <div key={k.label} className="flex-1 flex items-center gap-3 px-4 py-3 rounded-xl border border-border bg-card" style={{ borderLeftColor: k.color, borderLeftWidth: 3 }}>
                <k.icon className="w-5 h-5" style={{ color: k.color }} />
                <div><div className="text-xl font-bold" style={{ color: k.color }}>{k.value}</div><div className="text-[9px] text-hint">{k.label}</div><div className="text-[8px] text-hint">{k.sub}</div></div>
              </div>
            ))}
          </div>
          <div className="grid grid-cols-2 gap-3">
            <Card><CardContent className="p-4">
              <div className="text-[12px] font-bold text-label mb-3">배포 모델 현황</div>
              <div className="space-y-2">{MODELS.filter(m => m.status === 'DEPLOYED').map(m => (
                <div key={m.name} className="flex items-center gap-3 px-3 py-2 bg-surface-overlay rounded-lg">
                  <Badge intent="success" size="sm">DEPLOYED</Badge>
                  <span className="text-[11px] text-heading font-medium flex-1">{m.name}</span>
                  <span className="text-[10px] text-hint">{m.ver}</span>
                  <span className="text-[10px] text-green-600 dark:text-green-400 font-bold">F1 {m.f1}%</span>
                </div>
              ))}</div>
            </CardContent></Card>
            <Card><CardContent className="p-4">
              <div className="text-[12px] font-bold text-label mb-3">진행 중 실험</div>
              <div className="space-y-2">{EXPERIMENTS.filter(e => e.status === 'running').map(e => (
                <div key={e.id} className="flex items-center gap-3 px-3 py-2 bg-surface-overlay rounded-lg">
                  <Badge intent="info" size="sm" className="animate-pulse">실행중</Badge>
                  <span className="text-[11px] text-heading font-medium flex-1">{e.name}</span>
                  <div className="w-20 h-1.5 bg-switch-background rounded-full overflow-hidden"><div className="h-full bg-blue-500 rounded-full" style={{ width: `${e.progress}%` }} /></div>
                  <span className="text-[10px] text-muted-foreground">{e.progress}%</span>
                </div>
              ))}</div>
            </CardContent></Card>
          </div>
        </div>
      )}

      {/* ── ② Experiment Studio ── */}
      {tab === 'experiment' && (
        <div className="space-y-3">
          <Card><CardContent className="p-4">
            <div className="text-[12px] font-bold text-heading mb-3">실험 템플릿 선택</div>
            <div className="grid grid-cols-6 gap-2">
              {TEMPLATES.map((t, i) => (
                <div key={t.name} onClick={() => setSelectedTmpl(i)}
                  className={`p-3 rounded-lg text-center cursor-pointer transition-colors ${selectedTmpl === i ? 'bg-blue-600/15 border border-blue-500/30' : 'bg-surface-overlay border border-transparent hover:border-border'}`}>
                  <t.icon className="w-6 h-6 mx-auto mb-2 text-blue-600 dark:text-blue-400" />
                  <div className="text-[10px] font-bold text-heading">{t.name}</div>
                  <div className="text-[8px] text-hint mt-0.5">{t.desc}</div>
                </div>
              ))}
            </div>
          </CardContent></Card>
          <Card><CardContent className="p-4">
            <div className="flex items-center justify-between mb-3">
              <div className="text-[12px] font-bold text-heading">실험 목록</div>
              <Button variant="primary" size="sm" icon={<Play className="w-3 h-3" />}>새 실험</Button>
            </div>
            <div className="space-y-2">
              {EXPERIMENTS.map(e => (
                <div key={e.id} className="flex items-center gap-3 px-3 py-2.5 bg-surface-overlay rounded-lg">
                  <span className="text-[10px] text-hint font-mono w-16">{e.id}</span>
                  <span className="text-[11px] text-heading font-medium w-40 truncate">{e.name}</span>
                  <Badge intent={getExperimentIntent(e.status)} size="sm" className={`w-14 ${EXPERIMENT_STATUSES[e.status as keyof typeof EXPERIMENT_STATUSES]?.pulse ? 'animate-pulse' : ''}`}>{e.status}</Badge>
                  <div className="w-24 h-1.5 bg-switch-background rounded-full overflow-hidden"><div className={`h-full rounded-full ${e.status === 'done' ? 'bg-green-500' : e.status === 'fail' ? 'bg-red-500' : 'bg-blue-500'}`} style={{ width: `${e.progress}%` }} /></div>
                  <span className="text-[10px] text-muted-foreground w-12">{e.epoch}</span>
                  <span className="text-[10px] text-muted-foreground w-16">{e.time}</span>
                  {e.f1 > 0 && <span className="text-[10px] text-cyan-600 dark:text-cyan-400 font-bold">F1 {e.f1}</span>}
                </div>
              ))}
            </div>
          </CardContent></Card>
        </div>
      )}

      {/* ── ③ Model Registry ── */}
      {tab === 'registry' && (
        <div className="grid grid-cols-2 gap-3">
          {MODELS.map(m => (
            <Card key={m.name + m.ver} className="bg-surface-raised border-border"><CardContent className="p-4">
              <div className="flex items-start justify-between mb-2">
                <div><div className="text-[13px] font-bold text-heading">{m.name}</div><div className="text-[9px] text-hint mt-0.5">{m.ver}</div></div>
                <Badge intent={getModelStatusIntent(m.status)} size="md" className="font-bold">{MODEL_STATUSES[m.status as keyof typeof MODEL_STATUSES]?.fallback.ko ?? m.status}</Badge>
              </div>
              {/* 성능 지표 */}
              {m.accuracy > 0 && (
                <div className="grid grid-cols-5 gap-1 mb-3">
                  {[['Acc', m.accuracy], ['F1', m.f1], ['Recall', m.recall], ['Prec', m.precision], ['FPR', m.falseAlarm]].map(([l, v]) => (
                    <div key={l as string} className="bg-background rounded px-2 py-1.5 text-center">
                      <div className="text-[11px] font-bold text-heading">{v as number}%</div>
                      <div className="text-[7px] text-hint">{l as string}</div>
                    </div>
                  ))}
                </div>
              )}
              {/* 게이트 */}
              <div className="text-[9px] text-hint mb-1.5 font-bold">Quality Gates</div>
              <div className="flex gap-1">
                {m.gates.map((g, i) => (
                  <Badge key={g} intent={getQualityGateIntent(m.gateStatus[i])} size="xs" className={QUALITY_GATE_STATUSES[m.gateStatus[i] as keyof typeof QUALITY_GATE_STATUSES]?.pulse ? 'animate-pulse' : ''}>{g}</Badge>
                ))}
              </div>
            </CardContent></Card>
          ))}
        </div>
      )}

      {/* ── ④ Deploy Center ── */}
      {tab === 'deploy' && (
        <div className="space-y-3">
          <Card><CardContent className="p-0">
            <table className="w-full text-[11px]">
              <thead><tr className="border-b border-border text-hint">
                {['모델명', '버전', 'Endpoint', '트래픽%', '지연p95', '오탐율', 'RPS', '상태', '배포일'].map(h => (
                  <th key={h} className="px-3 py-2 text-left font-medium">{h}</th>
                ))}
              </tr></thead>
              <tbody>{DEPLOYS.map((d, i) => (
                <tr key={i} className="border-b border-border hover:bg-surface-overlay">
                  <td className="px-3 py-2 text-heading font-medium">{d.model}</td>
                  <td className="px-3 py-2 text-cyan-600 dark:text-cyan-400 font-mono">{d.ver}</td>
                  <td className="px-3 py-2 text-muted-foreground font-mono text-[10px]">{d.endpoint}</td>
                  <td className="px-3 py-2"><div className="flex items-center gap-1.5"><div className="w-16 h-2 bg-switch-background rounded-full overflow-hidden"><div className="h-full bg-blue-500 rounded-full" style={{ width: `${d.traffic}%` }} /></div><span className="text-heading font-bold">{d.traffic}%</span></div></td>
                  <td className="px-3 py-2 text-label">{d.latency}</td>
                  <td className="px-3 py-2 text-label">{d.falseAlarm}</td>
                  <td className="px-3 py-2 text-heading font-bold">{d.rps}</td>
                  <td className="px-3 py-2"><Badge intent={getStatusIntent(d.status)} size="xs">{d.status}</Badge></td>
                  <td className="px-3 py-2 text-hint">{d.date}</td>
                </tr>
              ))}</tbody>
            </table>
          </CardContent></Card>
          <div className="grid grid-cols-2 gap-3">
            <Card><CardContent className="p-4">
              <div className="text-[12px] font-bold text-heading mb-2">카나리 / A·B 테스트</div>
              <div className="text-[10px] text-muted-foreground mb-3">위험도 v2.1.0 (80%) ↔ v2.0.3 (20%)</div>
              <div className="h-5 bg-background rounded-lg overflow-hidden flex">
                <div className="bg-blue-600 flex items-center justify-center text-[9px] text-on-vivid font-bold" style={{ width: '80%' }}>v2.1.0 80%</div>
                <div className="bg-yellow-600 flex items-center justify-center text-[9px] text-on-vivid font-bold" style={{ width: '20%' }}>v2.0.3 20%</div>
              </div>
            </CardContent></Card>
            <Card><CardContent className="p-4">
              <div className="text-[12px] font-bold text-heading mb-2">승인 대기 → 배포 가능</div>
              <div className="space-y-2">
                {MODELS.filter(m => m.status === 'APPROVED').map(m => (
                  <div key={m.name} className="flex items-center gap-3 px-3 py-2 bg-surface-overlay rounded-lg">
                    <span className="text-[11px] text-heading font-medium flex-1">{m.name} {m.ver}</span>
                    <Button variant="primary" size="sm" icon={<Rocket className="w-3 h-3" />}>배포</Button>
                  </div>
                ))}
              </div>
            </CardContent></Card>
          </div>
        </div>
      )}

      {/* ── ⑤ API Playground ── */}
      {tab === 'api' && (
        <div className="grid grid-cols-2 gap-3" style={{ height: 'calc(100vh - 240px)' }}>
          <Card className="bg-surface-raised border-border flex flex-col"><CardContent className="p-4 flex-1 flex flex-col">
            <div className="text-[9px] font-bold text-hint mb-2">REQUEST BODY (JSON)</div>
            <textarea aria-label="API 요청 본문 JSON" className="flex-1 bg-background border border-border rounded-lg p-3 text-[10px] text-cyan-300 font-mono resize-none focus:outline-none focus:border-blue-500/40" defaultValue={`{
  "mmsi": "412345678",
  "lat": 37.12,
  "lon": 124.63,
  "speed": 3.2,
  "course": 225,
  "timestamp": "2026-04-03T09:00:00Z",
  "model": "fishing_illegal_risk",
  "version": "v2.1.0"
}`} />
            <div className="flex gap-2 mt-2">
              <Button variant="primary" size="sm" icon={<Zap className="w-3 h-3" />}>실행</Button>
              <button type="button" className="px-3 py-1.5 bg-surface-overlay border border-border rounded-lg text-[10px] text-muted-foreground">초기화</button>
            </div>
          </CardContent></Card>
          <Card className="bg-surface-raised border-border flex flex-col"><CardContent className="p-4 flex-1 flex flex-col">
            <div className="text-[9px] font-bold text-hint mb-2">RESPONSE</div>
            <div className="flex gap-4 text-[10px] px-2 py-1.5 bg-green-500/10 rounded mb-2">
              <span className="text-muted-foreground">상태 <span className="text-green-600 dark:text-green-400 font-bold">200 OK</span></span>
              <span className="text-muted-foreground">지연 <span className="text-green-600 dark:text-green-400 font-bold">23ms</span></span>
            </div>
            <pre className="flex-1 bg-background border border-border rounded-lg p-3 text-[10px] text-green-300 font-mono overflow-auto">{`{
  "risk_score": 87.5,
  "risk_level": "HIGH",
  "illegal_prob": 0.92,
  "codes": [
    {"code": "EEZ_VIOLATION", "weight": 0.35, "desc": "배타적경제수역 침범"},
    {"code": "DARK_VESSEL", "weight": 0.28, "desc": "AIS 신호 비정상"},
    {"code": "MMSI_SPOOF", "weight": 0.18, "desc": "MMSI 변조 이력"}
  ],
  "model": "fishing_illegal_risk",
  "version": "v2.1.0",
  "inference_time_ms": 23,
  "trace_id": "trc-a4f8c2e1"
}`}</pre>
          </CardContent></Card>
        </div>
      )}

      {/* ── ⑥ LLMOps ── */}
      {tab === 'llmops' && (
        <div className="space-y-3">
          <div className="flex gap-0 border-b border-border mb-2">
            {([
              { key: 'train' as LLMSubTab, label: '학습 생성' },
              { key: 'hps' as LLMSubTab, label: '하이퍼파라미터 검색' },
              { key: 'log' as LLMSubTab, label: '학습 로그' },
              { key: 'worker' as LLMSubTab, label: '배포 워커' },
              { key: 'llmtest' as LLMSubTab, label: 'LLM 테스트' },
            ]).map(t => (
              <button type="button" key={t.key} onClick={() => setLlmSub(t.key)}
                className={`px-4 py-2 text-[11px] font-medium border-b-2 ${llmSub === t.key ? 'text-blue-600 dark:text-blue-400 border-blue-400' : 'text-hint border-transparent hover:text-label'}`}>{t.label}</button>
            ))}
          </div>

          {/* 학습 생성 */}
          {llmSub === 'train' && (
            <div className="grid grid-cols-2 gap-3">
              <div className="space-y-3">
                <Card><CardContent className="p-4">
                  <div className="text-[12px] font-bold text-heading mb-3">Built-in 모델 선택</div>
                  <div className="grid grid-cols-3 gap-2">
                    {LLM_MODELS.map((m, i) => (
                      <div key={m.name} onClick={() => setSelectedLLM(i)}
                        className={`p-3 rounded-lg text-center cursor-pointer ${selectedLLM === i ? 'bg-blue-600/15 border border-blue-500/30' : 'bg-surface-overlay border border-transparent'}`}>
                        <m.icon className="w-5 h-5 mx-auto mb-1 text-purple-600 dark:text-purple-400" />
                        <div className="text-[10px] font-bold text-heading">{m.name}</div>
                        <div className="text-[8px] text-hint">{m.sub}</div>
                      </div>
                    ))}
                  </div>
                </CardContent></Card>
                <Card><CardContent className="p-4">
                  <div className="text-[12px] font-bold text-heading mb-3">학습 파라미터</div>
                  <div className="grid grid-cols-2 gap-2 text-[10px]">
                    {[['데이터셋', 'AIS_서해A1_30D (128,450행)'], ['GPU', '2 × Blackwell'], ['Epochs', '50'], ['Batch', '64'], ['Learning Rate', '0.001'], ['Early Stop', '5 에포크']].map(([k, v]) => (
                      <div key={k} className="flex flex-col gap-1"><span className="text-[9px] text-hint">{k}</span><div className="bg-background border border-border rounded px-2.5 py-1.5 text-label">{v}</div></div>
                    ))}
                  </div>
                  <Button variant="primary" size="sm" className="mt-3 w-full" icon={<Play className="w-3 h-3" />}>학습 시작</Button>
                </CardContent></Card>
              </div>
              <Card><CardContent className="p-4">
                <div className="text-[12px] font-bold text-heading mb-3">학습 작업 현황</div>
                <div className="space-y-2">
                  {TRAIN_JOBS.map(j => (
                    <div key={j.id} className="flex items-center gap-3 px-3 py-2.5 bg-surface-overlay rounded-lg">
                      <span className="text-[10px] text-hint font-mono w-16">{j.id}</span>
                      <span className="text-[11px] text-heading w-24">{j.model}</span>
                      <Badge intent={j.status === 'running' ? 'info' : j.status === 'done' ? 'success' : 'critical'} size="xs" className="w-14 text-center">{j.status}</Badge>
                      <div className="flex-1 h-1.5 bg-switch-background rounded-full overflow-hidden"><div className={`h-full rounded-full ${j.status === 'done' ? 'bg-green-500' : j.status === 'fail' ? 'bg-red-500' : 'bg-blue-500'}`} style={{ width: `${j.progress}%` }} /></div>
                      <span className="text-[10px] text-muted-foreground w-16">{j.elapsed}</span>
                    </div>
                  ))}
                </div>
              </CardContent></Card>
            </div>
          )}

          {/* 하이퍼파라미터 검색 */}
          {llmSub === 'hps' && (
            <div className="grid grid-cols-3 gap-3">
              <Card><CardContent className="p-4">
                <div className="text-[12px] font-bold text-heading mb-3">검색 설정</div>
                <div className="space-y-2 text-[10px]">
                  {[['검색 방법', 'Bayesian Optimization'], ['Target Metric', 'val_f1'], ['최대 시도', '20']].map(([k, v]) => (
                    <div key={k}><span className="text-[9px] text-hint block mb-1">{k}</span><div className="bg-background border border-border rounded px-2.5 py-1.5 text-label">{v}</div></div>
                  ))}
                </div>
                <div className="mt-3 text-[9px] font-bold text-hint mb-2">파라미터 범위</div>
                <div className="space-y-1 text-[9px]">
                  {[['learning_rate', '1e-4 ~ 1e-2'], ['batch_size', '16 ~ 128'], ['dropout', '0.1 ~ 0.5'], ['hidden_dim', '64 ~ 512']].map(([k, v]) => (
                    <div key={k} className="flex justify-between px-2 py-1 bg-surface-overlay rounded"><span className="text-hint font-mono">{k}</span><span className="text-label">{v}</span></div>
                  ))}
                </div>
                <Button variant="primary" size="sm" className="mt-3 w-full" icon={<Search className="w-3 h-3" />}>검색 시작</Button>
              </CardContent></Card>
              <Card className="col-span-2 bg-surface-raised border-border"><CardContent className="p-4">
                <div className="flex justify-between mb-3"><div className="text-[12px] font-bold text-heading">HPS 시도 결과</div><span className="text-[10px] text-green-600 dark:text-green-400 font-bold">Best: Trial #3 (F1=0.912)</span></div>
                <table className="w-full text-[10px]">
                  <thead><tr className="border-b border-border text-hint">{['Trial', 'LR', 'Batch', 'Dropout', 'Hidden', 'F1 Score', ''].map(h => <th key={h} className="py-2 px-2 text-left font-medium">{h}</th>)}</tr></thead>
                  <tbody>{HPS_TRIALS.map(t => (
                    <tr key={t.trial} className={`border-b border-border ${t.best ? 'bg-green-500/5' : ''}`}>
                      <td className="py-2 px-2 text-heading font-bold">#{t.trial}</td>
                      <td className="py-2 px-2 text-muted-foreground font-mono">{t.lr}</td>
                      <td className="py-2 px-2 text-muted-foreground">{t.batch}</td>
                      <td className="py-2 px-2 text-muted-foreground">{t.dropout}</td>
                      <td className="py-2 px-2 text-muted-foreground">{t.hidden}</td>
                      <td className="py-2 px-2 text-heading font-bold">{t.f1.toFixed(3)}</td>
                      <td className="py-2 px-2">{t.best && <Badge intent="success" size="xs">BEST</Badge>}</td>
                    </tr>
                  ))}</tbody>
                </table>
              </CardContent></Card>
            </div>
          )}

          {/* 학습 로그 */}
          {llmSub === 'log' && (
            <Card><CardContent className="p-4">
              <div className="text-[12px] font-bold text-heading mb-3">학습 로그 (TRN-018 Llama-3-8B)</div>
              <pre className="bg-background border border-border rounded-lg p-3 text-[9px] text-cyan-300 font-mono h-64 overflow-auto leading-relaxed">{`[09:20:01] Loading model: Llama-3-8B (8B params)
[09:20:15] Dataset: AIS_서해A1_30D — 128,450 rows loaded
[09:20:16] Train/Val/Test split: 80% / 10% / 10%
[09:20:18] GPU: 2 × NVIDIA Blackwell (48GB VRAM each)
[09:20:19] Training started — Epochs: 50, Batch: 64, LR: 0.001
[09:20:19] ──────────────────────────────────────
[09:21:42] Epoch  1/50 | loss: 2.341 | val_loss: 2.218 | val_f1: 0.312 | 83s
[09:23:05] Epoch  2/50 | loss: 1.876 | val_loss: 1.745 | val_f1: 0.456 | 83s
[09:24:28] Epoch  3/50 | loss: 1.523 | val_loss: 1.402 | val_f1: 0.578 | 83s
...
[12:15:33] Epoch 35/50 | loss: 0.087 | val_loss: 0.092 | val_f1: 0.891 | 83s
[12:16:56] Epoch 36/50 | loss: 0.084 | val_loss: 0.089 | val_f1: 0.894 | 83s  ★ Best
[12:18:19] ⏳ Training in progress... (72% complete)`}</pre>
            </CardContent></Card>
          )}

          {/* 배포 워커 */}
          {llmSub === 'worker' && (
            <div className="space-y-2">
              {WORKERS.map(w => (
                <Card key={w.name} className="bg-surface-raised border-border"><CardContent className="p-3 flex items-center gap-4">
                  <div className={`w-2.5 h-2.5 rounded-full ${w.status === 'ok' ? 'bg-green-500 shadow-[0_0_6px_#22c55e]' : 'bg-yellow-500 shadow-[0_0_6px_#eab308]'}`} />
                  <div className="w-44"><div className="text-[11px] font-bold text-heading">{w.name}</div><div className="text-[9px] text-hint">{w.model}</div></div>
                  <div className="flex gap-3 text-[9px]">
                    {[['GPU', w.gpu], ['RPS', String(w.rps)], ['Latency', w.latency], ['VRAM', w.vram]].map(([k, v]) => (
                      <span key={k} className="px-2 py-1 bg-surface-overlay border border-border rounded text-muted-foreground"><span className="text-hint">{k}</span> <span className="text-heading font-bold">{v}</span></span>
                    ))}
                  </div>
                </CardContent></Card>
              ))}
            </div>
          )}

          {/* LLM 테스트 */}
          {llmSub === 'llmtest' && (
            <div className="flex gap-3" style={{ height: 'calc(100vh - 280px)' }}>
              <Card className="w-52 shrink-0 bg-surface-raised border-border"><CardContent className="p-3">
                <div className="text-[10px] font-bold text-muted-foreground mb-2">모델 선택</div>
                {['해경 LLM v1.0', '법령 QA v1.0'].map(m => (
                  <div key={m} className="px-2 py-1.5 rounded text-[10px] text-label hover:bg-surface-overlay cursor-pointer">{m}</div>
                ))}
                <div className="text-[10px] font-bold text-muted-foreground mt-3 mb-2">프롬프트 프리셋</div>
                {['불법조업 판단', '법령 해석', '단속 보고서'].map(p => (
                  <div key={p} className="px-2 py-1.5 rounded text-[10px] text-muted-foreground hover:bg-surface-overlay cursor-pointer">{p}</div>
                ))}
              </CardContent></Card>
              <Card className="flex-1 bg-surface-raised border-border flex flex-col"><CardContent className="p-4 flex-1 flex flex-col">
                <div className="flex-1 space-y-3 overflow-auto mb-3">
                  <div className="flex justify-end"><div className="bg-blue-600/15 border border-blue-500/20 rounded-xl rounded-br-sm px-4 py-2.5 max-w-[70%] text-[11px] text-foreground">서해 NLL 인근에서 AIS 신호가 소실된 중국어선의 불법조업 판별 기준은?</div></div>
                  <div className="flex"><div className="bg-surface-overlay border border-border rounded-xl rounded-bl-sm px-4 py-2.5 max-w-[70%] text-[11px] text-foreground leading-relaxed">
                    <p className="mb-2">AIS 신호 소실 중국어선의 불법조업 판별은 다음 기준으로 수행됩니다:</p>
                    <p className="text-[10px] text-muted-foreground">1. **AIS 소실 시간**: 6시간 이상 미수신 시 Dark Vessel로 분류</p>
                    <p className="text-[10px] text-muted-foreground">2. **최종 위치**: EEZ/NLL 경계 5NM 이내 여부</p>
                    <p className="text-[10px] text-muted-foreground">3. **과거 이력**: MMSI 변조, 이전 단속 기록 확인</p>
                    <div className="mt-2 pt-2 border-t border-border flex gap-1">
                      <Badge intent="success" size="xs">배타적경제수역법 §5</Badge>
                      <Badge intent="success" size="xs">한중어업협정 §6</Badge>
                    </div>
                  </div></div>
                </div>
                <div className="flex gap-2 shrink-0">
                  <input aria-label="LLM 질의 입력" className="flex-1 bg-background border border-border rounded-xl px-4 py-2 text-[11px] text-heading placeholder:text-hint focus:outline-none focus:border-blue-500/40" placeholder="질의를 입력하세요..." />
                  <Button variant="primary" size="md" aria-label={tc('aria.send')} icon={<Send className="w-4 h-4" />} />
                </div>
              </CardContent></Card>
            </div>
          )}
        </div>
      )}

      {/* ── ⑦ 플랫폼 관리 ── */}
      {tab === 'platform' && (
        <div className="grid grid-cols-2 gap-3">
          <Card><CardContent className="p-4">
            <div className="text-[12px] font-bold text-heading mb-3">GPU 리소스 현황</div>
            <div className="space-y-2">
              {[{ name: 'Blackwell #1', usage: 78, mem: '38/48GB', temp: '62°C' }, { name: 'Blackwell #2', usage: 52, mem: '25/48GB', temp: '55°C' }, { name: 'H200 #1', usage: 85, mem: '68/80GB', temp: '71°C' }, { name: 'H200 #2', usage: 45, mem: '36/80GB', temp: '48°C' }].map(g => (
                <div key={g.name} className="flex items-center gap-3 px-3 py-2 bg-surface-overlay rounded-lg">
                  <span className="text-[10px] text-heading font-medium w-24">{g.name}</span>
                  <div className="flex-1 h-2 bg-switch-background rounded-full overflow-hidden"><div className={`h-full rounded-full ${g.usage > 80 ? 'bg-red-500' : g.usage > 60 ? 'bg-yellow-500' : 'bg-green-500'}`} style={{ width: `${g.usage}%` }} /></div>
                  <span className="text-[10px] text-heading font-bold w-8">{g.usage}%</span>
                  <span className="text-[9px] text-hint">{g.mem}</span>
                  <span className="text-[9px] text-hint">{g.temp}</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-2">
              {[{ name: 'API Gateway', status: 'ok', rps: 221 }, { name: 'Model Serving', status: 'ok', rps: 186 }, { name: 'Feature Store', status: 'ok', rps: 45 }, { name: 'Vector DB (Milvus)', status: 'ok', rps: 32 }, { name: 'Kafka Cluster', status: 'warn', rps: 1250 }, { name: 'PostgreSQL', status: 'ok', rps: 890 }].map(s => (
                <div key={s.name} className="flex items-center gap-3 px-3 py-2 bg-surface-overlay rounded-lg">
                  <div className={`w-2 h-2 rounded-full ${s.status === 'ok' ? 'bg-green-500 shadow-[0_0_4px_#22c55e]' : 'bg-yellow-500 shadow-[0_0_4px_#eab308]'}`} />
                  <span className="text-[10px] text-heading font-medium flex-1">{s.name}</span>
                  <span className="text-[10px] text-muted-foreground">{s.rps} req/s</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]">
              {[['인증 방식', 'API Key + JWT 토큰'], ['접근제어', 'RBAC (역할기반)'], ['민감정보', '마스킹 적용'], ['Rate Limiting', '100 req/min'], ['감사 로그', 'User→LLM→MCP 전체 추적'], ['Kill Switch', '활성 (긴급 차단 가능)']].map(([k, v]) => (
                <div key={k} className="flex justify-between px-2 py-1.5 bg-surface-overlay rounded"><span className="text-hint">{k}</span><span className="text-label">{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]">
              {[['Feature Store', 'v3.2 (20개 피처) · 2.4TB'], ['학습 데이터', '1,456,200건 (04-03 갱신)'], ['벡터 DB', '1.2M 문서 · 3.6M 벡터'], ['CI/CD', '마지막 빌드 성공 (09:15)'], ['드리프트 점수', '0.012 (정상)'], ['재학습 트리거', '비활성']].map(([k, v]) => (
                <div key={k} className="flex justify-between px-2 py-1.5 bg-surface-overlay rounded"><span className="text-hint">{k}</span><span className="text-label">{v}</span></div>
              ))}
            </div>
          </CardContent></Card>
        </div>
      )}
    </PageContainer>
  );
}