import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import {
  Search, Anchor, Ship, Eye, AlertTriangle, CheckCircle, XCircle,
  ChevronRight, ChevronDown, Info, Shield, Radar, Target, Waves,
  ArrowRight, Flag, Zap, HelpCircle
} from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle } from '@shared/components/ui/card';
import { Badge } from '@shared/components/ui/badge';

// ─── 판별 기준 데이터 ─────────────────

type GearType = 'trawl' | 'gillnet' | 'purseSeine' | 'setNet' | 'trap' | 'unknown';
type Origin = 'china' | 'korea' | 'uncertain';
type Confidence = 'high' | 'medium' | 'low';

interface IdentificationResult {
  origin: Origin;
  confidence: Confidence;
  gearType: GearType;
  gearSubType: string;
  gbCode: string;
  koreaName: string;
  reasons: string[];
  warnings: string[];
  actionRequired: string;
  alertLevel: 'CRITICAL' | 'HIGH' | 'MEDIUM' | 'LOW';
}

// ─── 판별 입력 폼 상태 ────────────────

interface GearInput {
  // 어구 물리적 특성
  gearCategory: GearType;
  meshSize: number | null;       // mm
  netLength: number | null;      // m
  netWidth: number | null;       // m
  hasChineseMarkings: boolean;
  hasBuoys: boolean;
  buoyCount: number | null;
  hasFrame: boolean;             // 프레임 구조 (정치망)
  hasDrawstring: boolean;        // 죔줄 (선망)

  // AIS/선박 정보
  aisActive: boolean;
  aisGapHours: number | null;
  mmsiPrefix: string;
  permitCode: string;            // C21, C22, C23, C25, C40 등
  vesselTonnage: number | null;
  vesselCount: number;
  hasCompanionVessel: boolean;   // 부속선 동반

  // 행동 패턴
  speedKnots: number | null;
  trajectoryPattern: 'lawnmowing' | 'stationary' | 'circular' | 'drifting' | 'linear' | 'unknown';
  operatingHours: number | null;
  isNightOperation: boolean;
  hasFishLight: boolean;         // 집어등

  // 위치/시기
  seaArea: string;               // 수역 I~IV
  discoveryDate: string;
  hasVesselNearby: boolean;
}

const DEFAULT_INPUT: GearInput = {
  gearCategory: 'unknown',
  meshSize: null,
  netLength: null,
  netWidth: null,
  hasChineseMarkings: false,
  hasBuoys: false,
  buoyCount: null,
  hasFrame: false,
  hasDrawstring: false,
  aisActive: true,
  aisGapHours: null,
  mmsiPrefix: '',
  permitCode: '',
  vesselTonnage: null,
  vesselCount: 1,
  hasCompanionVessel: false,
  speedKnots: null,
  trajectoryPattern: 'unknown',
  operatingHours: null,
  isNightOperation: false,
  hasFishLight: false,
  seaArea: '',
  discoveryDate: '',
  hasVesselNearby: true,
};

// ─── 판별 엔진 ────────────────────────

function identifyGear(input: GearInput): IdentificationResult {
  const reasons: string[] = [];
  const warnings: string[] = [];
  let chinaScore = 0;
  let koreaScore = 0;
  let gearType: GearType = input.gearCategory;
  let gearSubType = '';
  let gbCode = '';
  let koreaName = '';
  let alertLevel: 'CRITICAL' | 'HIGH' | 'MEDIUM' | 'LOW' = 'LOW';

  // ── 1단계: 허가코드 기반 즉시 판별 ──
  const permitPrefix = input.permitCode.toUpperCase();
  if (permitPrefix.startsWith('C21')) {
    chinaScore += 50;
    gearType = 'trawl';
    gearSubType = '2척식저인망(PT) 본선/부속선';
    gbCode = 'TDS (쌍선저층트롤)';
    koreaName = '쌍끌이기선저인망';
    reasons.push('허가코드 C21-xxxxx → 중국 2척식저인망(PT) 확정');
  } else if (permitPrefix.startsWith('C22')) {
    chinaScore += 50;
    gearType = 'trawl';
    gearSubType = '1척식저인망(OT)';
    gbCode = 'TDD (단선저층트롤)';
    koreaName = '기선저인망';
    reasons.push('허가코드 C22-xxxxx → 중국 1척식저인망(OT) 확정');
  } else if (permitPrefix.startsWith('C23')) {
    chinaScore += 50;
    gearType = 'purseSeine';
    gearSubType = '위망(PS) — 宁波海裕 선단';
    gbCode = 'WDD (집어등단선선망)';
    koreaName = '대형선망/근해선망';
    reasons.push('허가코드 C23-xxxxx → 중국 위망(PS), 宁波海裕渔业 소속 확정');
    warnings.push('위망 16척은 연중 전수역 허가 — 시기/장소 기반 자동 위반 판별 불가');
  } else if (permitPrefix.startsWith('C25')) {
    chinaScore += 50;
    gearType = 'gillnet';
    gearSubType = '유망(GN) — 유자망';
    gbCode = 'CLD (단선유자망)';
    koreaName = '유자망/연안유자망';
    reasons.push('허가코드 C25-xxxxx → 중국 유망(GN) 확정');
    warnings.push('유망은 AIS 차단 최다 업종 — 다크베셀 주의');
  } else if (permitPrefix.startsWith('C40')) {
    chinaScore += 50;
    gearSubType = '운반선(FC)';
    gbCode = '해당없음 (운반 전용)';
    koreaName = '운반선';
    reasons.push('허가코드 C40-xxxxx → 중국 운반선(FC) 확정, 할당량 0톤');
    warnings.push('조업선 0.5NM 이내 접근 시 환적 의심 알람 발동');
  }

  // ── 2단계: 중국어 표기 확인 ──
  if (input.hasChineseMarkings) {
    chinaScore += 30;
    reasons.push('어구/부표에 중국어 표기 확인 → 중국 어구 강력 추정');
  }

  // ── 3단계: 어구 유형별 물리적 특성 판별 ──

  // ■ 트롤(저인망) 판별
  if (gearType === 'trawl' || input.trajectoryPattern === 'lawnmowing') {
    if (!gearType || gearType === 'unknown') gearType = 'trawl';

    // 속도 패턴
    if (input.speedKnots !== null && input.speedKnots >= 2 && input.speedKnots <= 5) {
      reasons.push(`속도 ${input.speedKnots}kt → 트롤 조업 속도 범위(2~5kt) 일치`);
    }

    // 쌍선 운용 여부
    if (input.hasCompanionVessel || input.vesselCount === 2) {
      chinaScore += 15;
      gearSubType = gearSubType || '2척식저인망(PT) 추정';
      gbCode = gbCode || 'TDS';
      reasons.push('2척 편대 운용 확인 → 중국 PT(쌍선저인망) 구조와 일치');
      if (input.vesselTonnage !== null) {
        if (input.vesselTonnage >= 68 && input.vesselTonnage <= 297) {
          chinaScore += 10;
          reasons.push(`선박 톤수 ${input.vesselTonnage}톤 → 중국 PT 평균 범위(68~297톤) 일치`);
        }
      }
    } else if (input.vesselCount === 1 && input.vesselTonnage !== null && input.vesselTonnage >= 180) {
      chinaScore += 8;
      gearSubType = gearSubType || '1척식저인망(OT) 추정';
      gbCode = gbCode || 'TDD';
      reasons.push(`단선 운용 + ${input.vesselTonnage}톤 → 중국 OT(1척식저인망) 추정`);
    }

    // 망목 규격
    if (input.meshSize !== null) {
      if (input.meshSize < 54) {
        chinaScore += 10;
        warnings.push(`망목 ${input.meshSize}mm — 한국 기준 54mm 미만 → 금지 어구 사용 위반`);
        alertLevel = 'HIGH';
      } else {
        reasons.push(`망목 ${input.meshSize}mm — 한국 기준(54mm) 충족`);
      }
    }

    koreaName = koreaName || (input.vesselCount >= 2 ? '쌍끌이기선저인망' : '기선저인망');
  }

  // ■ 자망(유자망) 판별
  if (gearType === 'gillnet' || input.trajectoryPattern === 'stationary' || input.trajectoryPattern === 'drifting') {
    if (!gearType || gearType === 'unknown') gearType = 'gillnet';

    // AIS 소실 — 중국 자망의 핵심 지표
    if (!input.aisActive || (input.aisGapHours !== null && input.aisGapHours >= 6)) {
      chinaScore += 25;
      reasons.push(`AIS ${input.aisGapHours || '?'}시간 소실 → 중국 유망(GN) 다크베셀 전술 패턴`);
      warnings.push('자망 탐지 핵심: AIS 공백 구간을 SAR 영상과 교차 검증 필수');
      alertLevel = alertLevel === 'LOW' ? 'HIGH' : alertLevel;
    } else if (input.aisActive) {
      koreaScore += 10;
      reasons.push('AIS 지속 송출 → 한국 유자망어선은 V-PASS + AIS 이중 추적 의무');
    }

    // 그물 규모
    if (input.netLength !== null && input.netLength > 500) {
      chinaScore += 15;
      reasons.push(`그물 길이 ${input.netLength}m → 중국식 광폭·장형 대형 자망 특성`);
    } else if (input.netLength !== null && input.netLength <= 500) {
      koreaScore += 5;
      reasons.push(`그물 길이 ${input.netLength}m → 한국 규격 범위 내`);
    }

    // 망목
    if (input.meshSize !== null) {
      if (input.meshSize >= 50 && input.meshSize <= 100) {
        reasons.push(`망목 ${input.meshSize}mm — 한국 유자망 기준(50~100mm) 범위 내`);
      } else if (input.meshSize < 50) {
        chinaScore += 10;
        warnings.push(`망목 ${input.meshSize}mm — 한국 기준 미달, 불법 어구 의심`);
      }
    }

    // 정지 패턴
    if (input.speedKnots !== null && input.speedKnots < 2) {
      reasons.push(`속도 ${input.speedKnots}kt → 자망 조업 속도(0~2kt) 범위 일치`);
    }

    // 부표 다수 발견
    if (input.hasBuoys && input.buoyCount !== null && input.buoyCount >= 10) {
      reasons.push(`부표 ${input.buoyCount}개 발견 → SAR 고해상도에서 자망 설치 식별 지표`);
    }

    gbCode = gbCode || 'CLD/CLS';
    koreaName = koreaName || '유자망어업';
    gearSubType = gearSubType || '유자망(Gillnet)';
  }

  // ■ 선망(위망) 판별
  if (gearType === 'purseSeine' || input.trajectoryPattern === 'circular') {
    if (!gearType || gearType === 'unknown') gearType = 'purseSeine';

    // 원형 궤적 + 고→저속 급변
    if (input.trajectoryPattern === 'circular') {
      reasons.push('원형/타원형 궤적 탐지 → 선망(Purse Seine) 패턴 확정 (신뢰도 94~97%)');
    }

    if (input.speedKnots !== null && input.speedKnots >= 8) {
      reasons.push(`고속 ${input.speedKnots}kt 원형 이동 → 선망 포획 단계(8~10kt) 일치`);
    }

    // 선단 구조 — 중국 위망 핵심
    if (input.vesselCount >= 3) {
      chinaScore += 25;
      reasons.push(`${input.vesselCount}척 클러스터 → 중국 위망 선단(모선+운반선+조명선) 구조`);
      gearSubType = gearSubType || '위망 선단(Fleet)';
    } else if (input.vesselCount <= 2) {
      koreaScore += 10;
      reasons.push('소규모 선박 구성 → 한국 선망어업 가능성');
    }

    // 야간 집어등
    if (input.hasFishLight || input.isNightOperation) {
      chinaScore += 20;
      reasons.push('야간 집어등(灯光) 사용 → 중국 WDD(집어등선망) 코드, 위반 건수 1위');
      gbCode = gbCode || 'WDD';
      warnings.push('야간 EO 위성에서 최우선 탐지 대상');
    }

    // 초대형 선박
    if (input.vesselTonnage !== null && input.vesselTonnage >= 400) {
      chinaScore += 15;
      reasons.push(`${input.vesselTonnage}톤 → 宁波海裕 초대형 모선급(宁渔22·23, 490~541톤) 의심`);
      warnings.push('어획 할당량 0톤 등록 선박 — 해상 냉동·집하 기지 역할 확인 필요');
    }

    gbCode = gbCode || 'WDD/WDW';
    koreaName = koreaName || '선망어업';
    gearSubType = gearSubType || '선망(Purse Seine)';

    if (input.hasDrawstring) {
      reasons.push('죔줄(Purseline) 구조 확인 → 선망 어구 확정');
    }
  }

  // ■ 정치망 판별
  if (gearType === 'setNet' || input.hasFrame) {
    gearType = 'setNet';
    chinaScore += 30; // 한중 EEZ 내 정치망은 중국 미허가
    gbCode = 'ZD/ZS (張網)';
    koreaName = '연안정치망/대형정치망';
    gearSubType = '정치망(張網) — 단묘/복묘장망';
    alertLevel = 'CRITICAL';
    reasons.push('정치망(張網) 구조 확인 → 한중어업협정 특정어업수역 내 중국 미허가 어구');
    warnings.push('정치망은 EEZ 내 중국어선 사용 절대 금지 — 발견 즉시 수거 및 CRITICAL 처리');

    if (!input.hasVesselNearby) {
      reasons.push('선박 없이 어구만 발견 → 중국어선 투기 정치망 전형적 패턴(이어도·서남해 다수)');
    }
  }

  // ■ 통발 판별
  if (gearType === 'trap') {
    gbCode = 'L (笼壶)';
    koreaName = '근해통발/연안통발';
    gearSubType = '통발(笼壶)';
    reasons.push('통발 형태 어구 — 한중어업협정 비포함 어구, 적발 사례 드묾');
  }

  // ── 4단계: 위치/시기 기반 보정 ──

  if (input.seaArea) {
    const area = input.seaArea.toUpperCase();
    // 수역 IV에 PT/OT 선박이면 수역 이탈
    if ((area.includes('IV') || area.includes('4') || area.includes('서해')) &&
        (permitPrefix.startsWith('C21') || permitPrefix.startsWith('C22'))) {
      warnings.push('수역Ⅳ(서해)에서 저인망(PT/OT) 탐지 → 허가 수역 이탈 위반');
      alertLevel = 'CRITICAL';
    }
    // 수역 I에 GN 선박이면 수역 이탈
    if ((area.includes('I') || area.includes('1') || area.includes('동해')) && area.indexOf('V') === -1 &&
        permitPrefix.startsWith('C25')) {
      warnings.push('수역Ⅰ(동해)에서 유망(GN) 탐지 → 허가 수역 이탈 위반');
      alertLevel = 'CRITICAL';
    }
  }

  // 날짜 기반 휴어기 판별
  if (input.discoveryDate) {
    const date = new Date(input.discoveryDate);
    const month = date.getMonth() + 1;
    const day = date.getDate();

    // PT/OT 휴어기: 4/16 ~ 10/15
    if (permitPrefix.startsWith('C21') || permitPrefix.startsWith('C22')) {
      if ((month === 4 && day >= 16) || (month > 4 && month < 10) || (month === 10 && day <= 15)) {
        warnings.push(`${month}월 ${day}일 — 저인망(PT/OT) 휴어기(4/16~10/15) 위반`);
        alertLevel = 'CRITICAL';
      }
    }
    // GN 휴어기: 6/2 ~ 8/31
    if (permitPrefix.startsWith('C25')) {
      if ((month === 6 && day >= 2) || (month === 7) || (month === 8)) {
        warnings.push(`${month}월 ${day}일 — 유망(GN) 휴어기(6/2~8/31) 위반`);
        alertLevel = 'CRITICAL';
      }
    }

    // 7~8월: PS 16척 외 모든 중국어선 비허가
    if (month === 7 || month === 8) {
      if (!permitPrefix.startsWith('C23') && !permitPrefix.startsWith('C40') && chinaScore > 20) {
        warnings.push('7~8월 최대 감시 기간 — 위망(PS) 16척 외 전 중국어선 비허가');
      }
    }
  }

  // ── 5단계: 최종 판정 ──

  let origin: Origin;
  let confidence: Confidence;

  if (chinaScore >= 50) {
    origin = 'china';
    confidence = chinaScore >= 80 ? 'high' : chinaScore >= 60 ? 'medium' : 'low';
  } else if (koreaScore >= 30 && chinaScore < 20) {
    origin = 'korea';
    confidence = koreaScore >= 50 ? 'high' : 'medium';
  } else if (chinaScore > koreaScore) {
    origin = 'china';
    confidence = 'low';
  } else if (koreaScore > chinaScore) {
    origin = 'korea';
    confidence = 'low';
  } else {
    origin = 'uncertain';
    confidence = 'low';
    reasons.push('판별 근거 부족 — 추가 현장 확인 필요 (SAR/RF 교차 검증 권고)');
  }

  // 알람 등급 보정
  if (origin === 'china' && alertLevel === 'LOW') {
    alertLevel = gearType === 'setNet' ? 'CRITICAL' : 'MEDIUM';
  }

  const actionMap: Record<string, string> = {
    'china-CRITICAL': '즉시 나포 대상 — 정선 명령 후 승선 검사 실시',
    'china-HIGH': '우선 추적 — SAR/RF 교차 검증 후 임검 준비',
    'china-MEDIUM': '지속 감시 — 허가증 확인 대상 선정',
    'china-LOW': '일반 감시 — 추가 정보 수집 후 재판별',
    'korea-CRITICAL': '한국 어선이나 금지 어구 사용 — 관할 해경서 통보',
    'korea-HIGH': '한국 어선 확인 — 허가 조건 이행 점검',
    'korea-MEDIUM': '한국 어선 추정 — 일반 관리',
    'korea-LOW': '추가 확인 필요',
    'uncertain-LOW': '판별 불가 — 현장 승선 검사 또는 SAR·RF 교차 확인 필수',
  };

  return {
    origin,
    confidence,
    gearType: gearType || 'unknown',
    gearSubType: gearSubType || '미분류',
    gbCode: gbCode || '미확인',
    koreaName: koreaName || '미확인',
    reasons,
    warnings,
    actionRequired: actionMap[`${origin}-${alertLevel}`] || actionMap[`${origin}-LOW`] || '추가 확인 필요',
    alertLevel,
  };
}

// ─── 서브 컴포넌트 ────────────────────

function SectionHeader({ icon: Icon, title, color }: { icon: React.ElementType; title: string; color: string }) {
  return (
    <div className="flex items-center gap-2 mb-3">
      <Icon className="w-4 h-4" style={{ color }} />
      <h3 className="text-sm font-bold text-foreground">{title}</h3>
    </div>
  );
}

function FormField({ label, children, hint }: { label: string; children: React.ReactNode; hint?: string }) {
  return (
    <div className="space-y-1">
      <label className="text-[11px] text-muted-foreground font-medium">{label}</label>
      {children}
      {hint && <p className="text-[9px] text-hint">{hint}</p>}
    </div>
  );
}

function InputField({ value, onChange, placeholder, type = 'text', className = '', label }: {
  value: string | number | null;
  onChange: (v: string) => void;
  placeholder: string;
  type?: string;
  className?: string;
  label?: string;
}) {
  return (
    <input
      aria-label={label ?? placeholder}
      type={type}
      value={value ?? ''}
      onChange={(e) => onChange(e.target.value)}
      placeholder={placeholder}
      className={`w-full bg-surface-overlay border border-slate-700/50 rounded-md px-2.5 py-1.5 text-xs text-heading placeholder:text-hint focus:border-blue-500/50 focus:outline-none ${className}`}
    />
  );
}

function Toggle({ checked, onChange, label }: { checked: boolean; onChange: (v: boolean) => void; label: string }) {
  return (
    <label className="flex items-center gap-2 cursor-pointer group">
      <div
        className={`w-8 h-4 rounded-full transition-colors relative ${checked ? 'bg-blue-600' : 'bg-switch-background'}`}
        onClick={() => onChange(!checked)}
      >
        <div className={`w-3 h-3 rounded-full bg-white absolute top-0.5 transition-transform ${checked ? 'translate-x-4.5 left-0.5' : 'left-0.5'}`}
          style={{ transform: checked ? 'translateX(16px)' : 'translateX(0)' }}
        />
      </div>
      <span className="text-[11px] text-muted-foreground group-hover:text-label">{label}</span>
    </label>
  );
}

function SelectField({ label, value, onChange, options }: {
  label: string;
  value: string;
  onChange: (v: string) => void;
  options: { value: string; label: string }[];
}) {
  return (
    <select
      aria-label={label}
      value={value}
      onChange={(e) => onChange(e.target.value)}
      className="w-full bg-surface-overlay border border-slate-700/50 rounded-md px-2.5 py-1.5 text-xs text-heading focus:border-blue-500/50 focus:outline-none"
    >
      {options.map((o) => (
        <option key={o.value} value={o.value}>{o.label}</option>
      ))}
    </select>
  );
}

function ResultBadge({ origin, confidence }: { origin: Origin; confidence: Confidence }) {
  const intents: Record<Origin, import('@lib/theme/variants').BadgeIntent> = {
    china: 'critical',
    korea: 'info',
    uncertain: 'warning',
  };
  const labels: Record<Origin, string> = { china: '중국어선 어구', korea: '한국어선 어구', uncertain: '판별 불가' };
  const confLabels: Record<Confidence, string> = { high: '높음', medium: '보통', low: '낮음' };

  return (
    <div className="flex items-center gap-2">
      <Badge intent={intents[origin]} size="md">{labels[origin]}</Badge>
      <span className="text-[10px] text-hint">신뢰도: {confLabels[confidence]}</span>
    </div>
  );
}

function AlertBadge({ level }: { level: string }) {
  const intents: Record<string, import('@lib/theme/variants').BadgeIntent> = {
    CRITICAL: 'critical',
    HIGH: 'high',
    MEDIUM: 'warning',
    LOW: 'info',
  };
  return <Badge intent={intents[level] ?? 'muted'} size="xs">{level}</Badge>;
}

// ─── 어구 비교 레퍼런스 테이블 ──────────

function GearComparisonTable() {
  const data = [
    {
      type: '트롤 (저인망)',
      gbCode: 'T__ (TDD/TDS)',
      chinaFeatures: ['2척 편대 필수(PT)', '68~297톤', '망목 GB/T 기준', '수역 II·III 한정'],
      koreaFeatures: ['단독/2척 자율', '규모 다양', '망목 54mm+', '국내 허가수역'],
      aiPattern: 'Lawn-mowing (지그재그 반복)',
      speed: '2~5 kt',
      confidence: '89~92%',
      risk: 'HIGH',
    },
    {
      type: '자망 (유자망)',
      gbCode: 'C__ (CLD/CLS)',
      chinaFeatures: ['AIS OFF 빈번', '광폭·장형 대형망', '은밀 설치', '수역 II·III·IV'],
      koreaFeatures: ['V-PASS+AIS 의무', '50~100mm 망목', '기계화 투·양망', '국내 수역'],
      aiPattern: '정지·재방문 (투→대기→양)',
      speed: '0~2 kt',
      confidence: '74~80%',
      risk: 'HIGH',
    },
    {
      type: '선망 (위망)',
      gbCode: 'W__ (WDD/WDW)',
      chinaFeatures: ['3척+ 선단 체계', '야간 집어등 상시', '113~541톤', '전 수역 연중'],
      koreaFeatures: ['소형~중형', '집어등 일부 허가', '소수 Fleet', '국내 수역'],
      aiPattern: '원형 포획 (Circle Pattern)',
      speed: '8~10→3kt 급변',
      confidence: '94~97%',
      risk: 'CRITICAL',
    },
    {
      type: '정치망',
      gbCode: 'Z__ (ZD/ZS)',
      chinaFeatures: ['EEZ 내 미허가', '선박 없이 어구만 투기', '이어도·서남해 발견'],
      koreaFeatures: ['연안정치망 합법', '위치 등록 의무', '어업권 면허'],
      aiPattern: '고정 설치 (이동 없음)',
      speed: '0 kt',
      confidence: 'SAR/드론 필수',
      risk: 'CRITICAL',
    },
  ];

  return (
    <Card>
      <CardHeader className="px-4 pt-3 pb-0">
        <CardTitle className="text-xs text-label flex items-center gap-1.5">
          <Info className="w-3.5 h-3.5 text-blue-400" />
          한·중 어구 비교 레퍼런스 (GB/T 5147-2003 기반)
        </CardTitle>
      </CardHeader>
      <CardContent className="px-4 pb-4 pt-3">
        <div className="space-y-3">
          {data.map((row) => (
            <div key={row.type} className="bg-surface-overlay rounded-lg p-3 border border-slate-700/30">
              <div className="flex items-center justify-between mb-2">
                <div className="flex items-center gap-2">
                  <span className="text-xs font-bold text-heading">{row.type}</span>
                  <span className="text-[9px] text-hint bg-switch-background/50 px-1.5 py-0.5 rounded">{row.gbCode}</span>
                </div>
                <div className="flex items-center gap-2">
                  <span className="text-[9px] text-muted-foreground">AI 신뢰도: {row.confidence}</span>
                  <AlertBadge level={row.risk} />
                </div>
              </div>
              <div className="grid grid-cols-2 gap-3">
                <div>
                  <div className="text-[9px] text-red-400 font-medium mb-1">중국어선 특징</div>
                  {row.chinaFeatures.map((f, i) => (
                    <div key={i} className="text-[10px] text-muted-foreground flex items-start gap-1">
                      <span className="text-red-500 mt-0.5 shrink-0">-</span>{f}
                    </div>
                  ))}
                </div>
                <div>
                  <div className="text-[9px] text-blue-400 font-medium mb-1">한국어선 특징</div>
                  {row.koreaFeatures.map((f, i) => (
                    <div key={i} className="text-[10px] text-muted-foreground flex items-start gap-1">
                      <span className="text-blue-500 mt-0.5 shrink-0">-</span>{f}
                    </div>
                  ))}
                </div>
              </div>
              <div className="mt-2 flex items-center gap-4 text-[9px] text-hint">
                <span>궤적: {row.aiPattern}</span>
                <span>속도: {row.speed}</span>
              </div>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
}

// ─── 메인 페이지 ──────────────────────

export function GearIdentification() {
  const { t } = useTranslation('detection');
  const [input, setInput] = useState<GearInput>(DEFAULT_INPUT);
  const [result, setResult] = useState<IdentificationResult | null>(null);
  const [showReference, setShowReference] = useState(false);

  const update = <K extends keyof GearInput>(key: K, value: GearInput[K]) => {
    setInput((prev) => ({ ...prev, [key]: value }));
  };

  const runIdentification = () => {
    setResult(identifyGear(input));
  };

  const resetForm = () => {
    setInput(DEFAULT_INPUT);
    setResult(null);
  };

  return (
    <div className="space-y-4">
      {/* 헤더 */}
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-lg font-bold text-heading whitespace-nowrap flex items-center gap-2">
            <Search className="w-5 h-5 text-cyan-500" />
            {t('gearId.title')}
          </h2>
          <p className="text-[10px] text-hint mt-0.5">
            {t('gearId.desc')}
          </p>
        </div>
        <div className="flex items-center gap-2">
          <button type="button"
            onClick={() => setShowReference(!showReference)}
            className="px-3 py-1.5 bg-secondary border border-slate-700/50 rounded-md text-[11px] text-label hover:bg-switch-background transition-colors flex items-center gap-1.5"
          >
            <Info className="w-3 h-3" />
            {showReference ? '레퍼런스 닫기' : '비교 레퍼런스'}
          </button>
        </div>
      </div>

      {/* 레퍼런스 테이블 (토글) */}
      {showReference && <GearComparisonTable />}

      <div className="grid grid-cols-12 gap-4">
        {/* ── 좌측: 입력 폼 ── */}
        <div className="col-span-5 space-y-3">

          {/* 허가코드 / 선박 정보 */}
          <Card>
            <CardContent className="p-4 space-y-3">
              <SectionHeader icon={Ship} title="선박/허가 정보" color="#06b6d4" />
              <div className="grid grid-cols-2 gap-3">
                <FormField label="허가코드" hint="C21·C22·C23·C25·C40">
                  <InputField value={input.permitCode} onChange={(v) => update('permitCode', v)} placeholder="예: C21-13558" />
                </FormField>
                <FormField label="MMSI 앞자리">
                  <InputField value={input.mmsiPrefix} onChange={(v) => update('mmsiPrefix', v)} placeholder="예: 412" />
                </FormField>
                <FormField label="선박 톤수 (톤)">
                  <InputField value={input.vesselTonnage} onChange={(v) => update('vesselTonnage', v ? Number(v) : null)} placeholder="예: 127" type="number" />
                </FormField>
                <FormField label="선박 수 (척)">
                  <InputField value={input.vesselCount} onChange={(v) => update('vesselCount', Number(v) || 1)} placeholder="1" type="number" />
                </FormField>
              </div>
              <Toggle checked={input.hasCompanionVessel} onChange={(v) => update('hasCompanionVessel', v)} label="부속선 동반 (PT 쌍선)" />
            </CardContent>
          </Card>

          {/* 어구 물리적 특성 */}
          <Card>
            <CardContent className="p-4 space-y-3">
              <SectionHeader icon={Anchor} title="어구 물리적 특성" color="#a855f7" />
              <FormField label="어구 유형 (추정)">
                <SelectField label="어구 유형 (추정)" value={input.gearCategory} onChange={(v) => update('gearCategory', v as GearType)} options={[
                  { value: 'unknown', label: '미확인 / 모름' },
                  { value: 'trawl', label: '트롤 (저인망) — 끌고 다니는 어망' },
                  { value: 'gillnet', label: '자망 (유자망) — 세워놓는 어망' },
                  { value: 'purseSeine', label: '선망 (위망) — 둘러싸는 어망' },
                  { value: 'setNet', label: '정치망 — 고정 설치 어망' },
                  { value: 'trap', label: '통발 — 함정형 어구' },
                ]} />
              </FormField>
              <div className="grid grid-cols-3 gap-3">
                <FormField label="망목 (mm)">
                  <InputField value={input.meshSize} onChange={(v) => update('meshSize', v ? Number(v) : null)} placeholder="mm" type="number" />
                </FormField>
                <FormField label="그물 길이 (m)">
                  <InputField value={input.netLength} onChange={(v) => update('netLength', v ? Number(v) : null)} placeholder="m" type="number" />
                </FormField>
                <FormField label="그물 폭 (m)">
                  <InputField value={input.netWidth} onChange={(v) => update('netWidth', v ? Number(v) : null)} placeholder="m" type="number" />
                </FormField>
              </div>
              <div className="space-y-2">
                <Toggle checked={input.hasChineseMarkings} onChange={(v) => update('hasChineseMarkings', v)} label="중국어 표기 확인 (부표/어구)" />
                <Toggle checked={input.hasBuoys} onChange={(v) => update('hasBuoys', v)} label="부표(浮標) 발견" />
                {input.hasBuoys && (
                  <FormField label="부표 수량">
                    <InputField value={input.buoyCount} onChange={(v) => update('buoyCount', v ? Number(v) : null)} placeholder="개수" type="number" />
                  </FormField>
                )}
                <Toggle checked={input.hasFrame} onChange={(v) => update('hasFrame', v)} label="프레임/고정 구조 (정치망)" />
                <Toggle checked={input.hasDrawstring} onChange={(v) => update('hasDrawstring', v)} label="죔줄(Purseline) 구조 (선망)" />
                <Toggle checked={input.hasVesselNearby} onChange={(v) => update('hasVesselNearby', v)} label="인근 선박 존재" />
              </div>
            </CardContent>
          </Card>

          {/* AIS / 행동 패턴 */}
          <Card>
            <CardContent className="p-4 space-y-3">
              <SectionHeader icon={Radar} title="AIS / 행동 패턴" color="#f97316" />
              <Toggle checked={input.aisActive} onChange={(v) => update('aisActive', v)} label="AIS 송출 중" />
              {!input.aisActive && (
                <FormField label="AIS 소실 시간 (시간)">
                  <InputField value={input.aisGapHours} onChange={(v) => update('aisGapHours', v ? Number(v) : null)} placeholder="시간" type="number" />
                </FormField>
              )}
              <div className="grid grid-cols-2 gap-3">
                <FormField label="속도 (knots)">
                  <InputField value={input.speedKnots} onChange={(v) => update('speedKnots', v ? Number(v) : null)} placeholder="kt" type="number" />
                </FormField>
                <FormField label="조업 지속시간 (시간)">
                  <InputField value={input.operatingHours} onChange={(v) => update('operatingHours', v ? Number(v) : null)} placeholder="h" type="number" />
                </FormField>
              </div>
              <FormField label="궤적 패턴">
                <SelectField label="궤적 패턴" value={input.trajectoryPattern} onChange={(v) => update('trajectoryPattern', v as GearInput['trajectoryPattern'])} options={[
                  { value: 'unknown', label: '미확인' },
                  { value: 'lawnmowing', label: '지그재그 반복 (Lawn-mowing) → 트롤' },
                  { value: 'stationary', label: '정지/극저속 (Stationary) → 자망' },
                  { value: 'circular', label: '원형/타원형 (Circle) → 선망' },
                  { value: 'drifting', label: '표류 (Drifting) → 유자망' },
                  { value: 'linear', label: '직선 이동 (Linear) → 이동/통과' },
                ]} />
              </FormField>
              <div className="space-y-2">
                <Toggle checked={input.isNightOperation} onChange={(v) => update('isNightOperation', v)} label="야간 조업" />
                <Toggle checked={input.hasFishLight} onChange={(v) => update('hasFishLight', v)} label="집어등(灯光) 사용" />
              </div>
            </CardContent>
          </Card>

          {/* 위치/시기 */}
          <Card>
            <CardContent className="p-4 space-y-3">
              <SectionHeader icon={Target} title="발견 위치 / 시기" color="#10b981" />
              <div className="grid grid-cols-2 gap-3">
                <FormField label="발견 수역" hint="수역 I~IV 또는 해역명">
                  <InputField value={input.seaArea} onChange={(v) => update('seaArea', v)} placeholder="예: 수역II, 서해 NLL" />
                </FormField>
                <FormField label="발견 일자">
                  <InputField value={input.discoveryDate} onChange={(v) => update('discoveryDate', v)} placeholder="YYYY-MM-DD" type="date" />
                </FormField>
              </div>
            </CardContent>
          </Card>

          {/* 판별 버튼 */}
          <div className="flex gap-2">
            <button type="button"
              onClick={runIdentification}
              className="flex-1 py-2.5 bg-blue-600 hover:bg-blue-500 text-on-vivid text-sm font-bold rounded-lg transition-colors flex items-center justify-center gap-2"
            >
              <Zap className="w-4 h-4" />
              어구 국적 판별 실행
            </button>
            <button type="button"
              onClick={resetForm}
              className="px-4 py-2.5 bg-secondary hover:bg-switch-background text-label text-sm rounded-lg transition-colors border border-slate-700/50"
            >
              초기화
            </button>
          </div>
        </div>

        {/* ── 우측: 결과 패널 ── */}
        <div className="col-span-7 space-y-3">
          {!result ? (
            <Card className="bg-surface-raised border-border h-full flex items-center justify-center">
              <CardContent className="text-center py-20">
                <HelpCircle className="w-12 h-12 text-hint mx-auto mb-3" />
                <p className="text-sm text-hint mb-1">좌측 입력 양식을 작성 후</p>
                <p className="text-sm text-hint">"어구 국적 판별 실행" 버튼을 누르세요</p>
                <p className="text-[10px] text-hint mt-3">
                  허가코드(C21~C40)만 입력해도 즉시 판별 가능합니다
                </p>
              </CardContent>
            </Card>
          ) : (
            <>
              {/* 판별 결과 헤더 */}
              <Card className={`border ${
                result.origin === 'china' ? 'bg-red-950/20 border-red-500/30'
                : result.origin === 'korea' ? 'bg-blue-950/20 border-blue-500/30'
                : 'bg-yellow-950/20 border-yellow-500/30'
              }`}>
                <CardContent className="p-5">
                  <div className="flex items-start justify-between mb-4">
                    <div>
                      <div className="text-[10px] text-hint mb-1">판별 결과</div>
                      <ResultBadge origin={result.origin} confidence={result.confidence} />
                    </div>
                    <AlertBadge level={result.alertLevel} />
                  </div>

                  <div className="grid grid-cols-3 gap-4 mb-4">
                    <div>
                      <div className="text-[9px] text-hint">어구 유형</div>
                      <div className="text-xs text-heading font-bold">{result.gearSubType}</div>
                    </div>
                    <div>
                      <div className="text-[9px] text-hint">GB/T 코드</div>
                      <div className="text-xs text-heading font-bold">{result.gbCode}</div>
                    </div>
                    <div>
                      <div className="text-[9px] text-hint">한국 대응 명칭</div>
                      <div className="text-xs text-heading font-bold">{result.koreaName}</div>
                    </div>
                  </div>

                  <div className="bg-surface-raised rounded-lg p-3 border border-slate-700/30">
                    <div className="text-[9px] text-hint mb-1">조치 사항</div>
                    <div className="text-xs text-heading font-medium">{result.actionRequired}</div>
                  </div>
                </CardContent>
              </Card>

              {/* 판별 근거 */}
              <Card>
                <CardHeader className="px-4 pt-3 pb-0">
                  <CardTitle className="text-xs text-label flex items-center gap-1.5">
                    <CheckCircle className="w-3.5 h-3.5 text-green-500" />
                    판별 근거 ({result.reasons.length}건)
                  </CardTitle>
                </CardHeader>
                <CardContent className="px-4 pb-4 pt-2">
                  <div className="space-y-1.5">
                    {result.reasons.map((reason, i) => (
                      <div key={i} className="flex items-start gap-2 p-2 bg-surface-overlay rounded-md">
                        <ChevronRight className="w-3 h-3 text-green-500 mt-0.5 shrink-0" />
                        <span className="text-[11px] text-label">{reason}</span>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>

              {/* 경고/위반 사항 */}
              {result.warnings.length > 0 && (
                <Card className="bg-surface-raised border-orange-500/20">
                  <CardHeader className="px-4 pt-3 pb-0">
                    <CardTitle className="text-xs text-orange-400 flex items-center gap-1.5">
                      <AlertTriangle className="w-3.5 h-3.5" />
                      경고 / 위반 사항 ({result.warnings.length}건)
                    </CardTitle>
                  </CardHeader>
                  <CardContent className="px-4 pb-4 pt-2">
                    <div className="space-y-1.5">
                      {result.warnings.map((warning, i) => (
                        <div key={i} className="flex items-start gap-2 p-2 bg-orange-500/5 border border-orange-500/10 rounded-md">
                          <XCircle className="w-3 h-3 text-orange-500 mt-0.5 shrink-0" />
                          <span className="text-[11px] text-orange-300">{warning}</span>
                        </div>
                      ))}
                    </div>
                  </CardContent>
                </Card>
              )}

              {/* AI 탐지 Rule 참조 */}
              <Card>
                <CardHeader className="px-4 pt-3 pb-0">
                  <CardTitle className="text-xs text-label flex items-center gap-1.5">
                    <Shield className="w-3.5 h-3.5 text-purple-500" />
                    AI 탐지 Rule (해당 어구)
                  </CardTitle>
                </CardHeader>
                <CardContent className="px-4 pb-4 pt-2">
                  {result.gearType === 'trawl' && (
                    <pre className="bg-background rounded-lg p-3 text-[10px] text-green-400 font-mono overflow-x-auto whitespace-pre-wrap">
{`# 트롤 탐지 조건 (Trawl Detection Rule)
if   speed        in range(2.0, 5.0)   # knots
and  trajectory   == 'parallel_sweep'   # 반복 평행선
and  turn_angle   < 30                  # 최대 회전각 (°)
and  duration     > 120                 # 최소 지속 시간 (min)
and  speed_std    < 0.8                 # 속도 분산 낮음
→    gear = 'TRAWL'   confidence >= 89%

# 쌍선 트롤 추가 조건 (Pair Trawl — TDS)
and  vessel_pair_distance in range(300, 800)  # m
and  speed_sync           > 0.92              # 2선 속도 동기화`}
                    </pre>
                  )}
                  {result.gearType === 'gillnet' && (
                    <pre className="bg-background rounded-lg p-3 text-[10px] text-green-400 font-mono overflow-x-auto whitespace-pre-wrap">
{`# 자망 탐지 조건 (Gillnet Detection Rule)
if   speed          < 2.0     # knots
and  stop_duration  > 30      # min
and  repeated_loc   == True   # 동일 위치 재방문
→    gear = 'GILLNET'   confidence >= 74%

# AIS 소실 연계 다크베셀 탐지
if   ais_gap_duration   > 20          # min (AIS 공백)
and  sar_vessel_detect  == True       # SAR 위치 확인
→    dark_vessel_flag = True
     gear_estimate = 'GILLNET (추정)'`}
                    </pre>
                  )}
                  {result.gearType === 'purseSeine' && (
                    <pre className="bg-background rounded-lg p-3 text-[10px] text-green-400 font-mono overflow-x-auto whitespace-pre-wrap">
{`# 선망 탐지 조건 (Purse Seine Detection Rule)
if   trajectory        == 'circular'        # 원형 궤적
and  speed_change      > 5.0               # kt (고→저 급변)
and  speed_high_phase  in range(8, 12)     # 초기 고속
and  speed_low_phase   < 3.0              # 이후 저속
→    gear = 'PURSE_SEINE'   confidence >= 94%

# Fleet 추가 확인
and  multi_vessel_cluster == True    # 3척 이상
and  vessel_spacing       < 1000     # m
→    fleet_type = 'PURSE_SEINE_FLEET'
     confidence += 0.03              # 97%+`}
                    </pre>
                  )}
                  {result.gearType === 'setNet' && (
                    <pre className="bg-background rounded-lg p-3 text-[10px] text-red-400 font-mono overflow-x-auto whitespace-pre-wrap">
{`# 정치망 — EEZ 내 중국어선 미허가 어구
# GB/T 코드: Z__ (ZD: 단묘장망, ZS: 복묘장망)
#
# 판별 기준:
#   - 사각 프레임 또는 자루형 구조
#   - 해저 고정 (묘박)
#   - 선박 없이 어구만 발견 시 중국 투기 어구 추정
#
# → 발견 즉시 CRITICAL 처리
# → 즉시 수거 및 GPS 위치 기록
# → 반복 발견 위치는 집중 감시 구역 지정`}
                    </pre>
                  )}
                  {(result.gearType === 'trap' || result.gearType === 'unknown') && (
                    <div className="bg-surface-overlay rounded-lg p-3 text-[11px] text-muted-foreground">
                      해당 어구 유형의 AI 탐지 Rule이 정의되지 않았습니다. 현장 승선 검사를 통한 직접 확인이 필요합니다.
                    </div>
                  )}
                </CardContent>
              </Card>

              {/* 다중 센서 교차 검증 흐름 */}
              <Card>
                <CardHeader className="px-4 pt-3 pb-0">
                  <CardTitle className="text-xs text-label flex items-center gap-1.5">
                    <Waves className="w-3.5 h-3.5 text-cyan-500" />
                    다중 센서 교차 검증 파이프라인
                  </CardTitle>
                </CardHeader>
                <CardContent className="px-4 pb-4 pt-2">
                  <div className="flex items-center gap-1 flex-wrap">
                    {[
                      { step: 'RF 탐지', desc: '다크 신호 탐지 (HawkEye360)', color: '#f97316' },
                      { step: 'SAR 확인', desc: '위성 SAR 위치 확인', color: '#a855f7' },
                      { step: 'AIS 분석', desc: '속도·궤적·패턴 분류', color: '#3b82f6' },
                      { step: 'EO 검증', desc: '광학 위성 어구 확인', color: '#10b981' },
                    ].map((s, i) => (
                      <div key={i} className="flex items-center gap-1">
                        <div className="bg-surface-overlay border border-slate-700/40 rounded-md px-2.5 py-1.5 text-center">
                          <div className="text-[10px] font-bold" style={{ color: s.color }}>{s.step}</div>
                          <div className="text-[8px] text-hint">{s.desc}</div>
                        </div>
                        {i < 3 && <ArrowRight className="w-3 h-3 text-hint shrink-0" />}
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
            </>
          )}
        </div>
      </div>
    </div>
  );
}