interface HeterogeneousSystemRow {
  system: string;
  lang: string;
  os: string;
  location: string;
  protocol: string;
  description: string;
}

const HETEROGENEOUS_SYSTEMS: HeterogeneousSystemRow[] = [
  {
    system: 'KOSPS',
    lang: 'Fortran',
    os: 'Linux',
    location: '광주',
    protocol: 'HTTPS (REST 래퍼)',
    description: '유출유 확산 예측 — Fortran DLL을 REST API로 래핑하여 연계',
  },
  {
    system: '충북대 HNS',
    lang: 'Python / C++',
    os: 'Linux',
    location: '충북대',
    protocol: 'HTTPS',
    description: 'HNS 대기확산 예측 — Python/C++ 모델을 REST API로 호출',
  },
  {
    system: '긴급구난',
    lang: 'Python',
    os: 'Linux',
    location: '해경 내부',
    protocol: '내부망 API',
    description: '구난 표류 분석 — Python 모델을 내부망 REST API로 연계',
  },
  {
    system: 'HYCOM',
    lang: 'Fortran / NetCDF',
    os: 'Linux HPC',
    location: '미 해군 공개',
    protocol: 'HTTPS / FTP',
    description: '전지구 해류·수온 예측 — NetCDF 파일 수신 후 ETL 전처리',
  },
  {
    system: '기상청',
    lang: '-',
    os: '-',
    location: '기상청 API Hub',
    protocol: 'HTTPS',
    description: '풍향·풍속·기온·강수 등 기상 데이터 REST API 수집',
  },
  {
    system: 'KHOA',
    lang: '-',
    os: '-',
    location: '해양조사원',
    protocol: 'HTTPS',
    description: '조위·해류·수온 등 해양관측 데이터 REST API 수집',
  },
  {
    system: '해경 KBP',
    lang: 'Java 전자정부',
    os: 'Linux',
    location: '해경 내부망',
    protocol: '내부망 API',
    description: '사용자·조직·직위 인사 데이터 배치 수집 (비식별화 적용)',
  },
  {
    system: 'AIS',
    lang: '-',
    os: '-',
    location: '해경 AIS 서버',
    protocol: 'Socket / API',
    description: '선박 위치·속도·방향 실시간 수신',
  },
];

interface HeterogeneousStrategyCard {
  challenge: string;
  solution: string;
  description: string;
}

interface IntegrationPlanItem {
  title: string;
  description: string;
  details?: string[];
}

const INTEGRATION_PLANS: IntegrationPlanItem[] = [
  {
    title: '사용자 정보 연계',
    description:
      '해양경찰청의 인사관리플랫폼과 연계 또는 사용자 정보를 제공받아 구성할 수 있어야 함',
  },
  {
    title: '해양공간 데이터 연계',
    description:
      "해경 해양공간 데이터 구축사업(해양공간정보 활용체계 구축 및 빅데이터 관련 사업)의 '데이터통합저장소' 시스템과 연계하여 현장탐색 전자지도 자동표출 기술 등에 영상 및 사진자료를 연계하여 구축",
  },
  {
    title: 'DB 통합설계 기반 맞춤형 인터페이스',
    description:
      '플랫폼 변경 및 신규 통합설계 되는 데이터베이스(DB) 구조 설계를 기반으로 사용자 맞춤형 화면 인터페이스를 구현해야 함',
    details: [
      'DBMS는 분리되어 있는 시스템들을 통합설계를 통하여 공통, 분야별 등으로 설계하여야 함',
    ],
  },
  {
    title: '유출유 확산예측 정확성 향상 (KOSPS 연계)',
    description:
      '유출유 확산예측 정확성 향상을 위해, 해양오염방제지원시스템(KOSPS)를 연계·탑재하여야 함',
    details: [
      '다양한 유출유 확산 예측 결과를 사용자가 한눈에 확인 가능하여야 함',
      '확산예측 기반으로 역추적, 최초 유출유 발생지점을 예측할 수 있어야 함',
      '그 밖에 유출유 확산예측 정확성 향상을 위한 대책을 마련하여야 함',
    ],
  },
  {
    title: '기타 시스템 연계',
    description: '그 밖에 시스템 구축 중 효율적인 사고대응을 위한 타 시스템 연계할 수 있음',
  },
];

const HETEROGENEOUS_STRATEGIES: HeterogeneousStrategyCard[] = [
  {
    challenge: '언어 이질성',
    solution: 'REST API 래퍼 계층',
    description:
      'Fortran, Python, C++, Java 등 각 언어로 작성된 모델을 REST API 래퍼로 감싸 언어·플랫폼 독립적인 표준 인터페이스 제공',
  },
  {
    challenge: '데이터 형식 차이',
    solution: 'ETL 전처리 파이프라인',
    description:
      'NetCDF, CSV, Binary, JSON 등 이기종 포맷을 ETL 파이프라인으로 표준 JSON/GeoJSON 형식으로 변환 후 DB 적재',
  },
  {
    challenge: '네트워크 분리',
    solution: '이중 네트워크 연계',
    description:
      '외부망(인터넷) 연계와 내부망(해경 내부) 연계를 분리 운영하여 보안 정책 준수 및 데이터 안전성 확보',
  },
  {
    challenge: '가용성·장애 대응',
    solution: '연계 모니터링 + 알림',
    description:
      '연계 상태를 실시간 모니터링하고 수신 지연·실패 발생 시 운영자에게 즉시 알림 발송하여 신속 대응',
  },
  {
    challenge: '인증·보안 차이',
    solution: 'API Gateway 패턴',
    description:
      '시스템별 상이한 인증 방식(API Key, JWT, IP 제한 등)을 API Gateway 계층에서 통합 관리하여 단일 보안 정책 적용',
  },
  {
    challenge: '프로토콜 차이',
    solution: '어댑터 패턴 적용',
    description:
      'HTTP REST, FTP, Socket, 배치 파일 등 다양한 프로토콜을 어댑터 패턴으로 추상화하여 표준 인터페이스로 통일',
  },
];

const HETEROGENEOUS_FLOW_STEPS = [
  '원본 데이터',
  '수집 어댑터',
  'ETL 전처리',
  '표준 변환',
  'DB 적재',
  'API 제공',
];

interface SecurityPolicyCard {
  title: string;
  items: string[];
}

const HETEROGENEOUS_SECURITY: SecurityPolicyCard[] = [
  {
    title: '외부망 연계',
    items: [
      'TLS 1.2+ 암호화 통신',
      'API Key / OAuth 인증',
      'IP 화이트리스트 제한',
      'Rate Limiting 적용',
    ],
  },
  {
    title: '내부망 연계',
    items: [
      '전용 내부망 구간 분리',
      '상호 인증서 검증',
      '비식별화 자동 처리',
      '접근 이력 감사로그',
    ],
  },
  {
    title: '데이터 보호',
    items: [
      '개인정보 수집 최소화',
      'ETL 단계 비식별화',
      '전송 구간 암호화',
      '저장 데이터 접근 제어',
    ],
  },
];

// ─── 탭 4: 이기종시스템연계 ───────────────────────────────────────────────────────

export function HeterogeneousTab() {
  return (
    <div className="p-5 space-y-6">
      {/* 1. 이기종시스템 연계 개요 */}
      <section>
        <h3 className="text-body-2 font-semibold text-t1 mb-3">1. 이기종시스템 연계 개요</h3>
        <p className="text-caption text-t2 leading-relaxed mb-4">
          통합지원시스템은 Fortran, Python, C++, Java 등 다양한 언어와 플랫폼으로 구현된 이기종
          시스템과 연계한다. REST API 표준화, ETL 전처리, 어댑터 패턴을 통해 언어·플랫폼 독립적인
          연계 구조를 구현하며, 외부망·내부망 이중 네트워크 정책을 준수한다.
        </p>
        <div className="flex items-stretch gap-2">
          <div className="flex-1 bg-bg-elevated border border-stroke rounded p-3 text-center">
            <p className="text-caption font-semibold text-t2 mb-2">이기종 시스템</p>
            {['Fortran KOSPS', 'Python/C++ 충북대', 'Java 해경KBP', 'NetCDF HYCOM'].map((item) => (
              <p key={item} className="text-caption text-t3 leading-relaxed">
                {item}
              </p>
            ))}
          </div>
          <div className="flex flex-col items-center justify-center shrink-0 gap-0.5">
            <span className="text-t3 text-lg">→</span>
            <span className="text-t3 text-lg">←</span>
          </div>
          <div className="flex-1 bg-[rgba(6,182,212,0.1)] border border-stroke rounded p-3 text-center">
            <p className="text-caption font-semibold text-t2 mb-2">연계 어댑터 계층</p>
            {['REST API 래퍼', 'ETL 전처리', '프로토콜 변환', '인증 통합'].map((item) => (
              <p key={item} className="text-caption text-t3 leading-relaxed">
                {item}
              </p>
            ))}
          </div>
          <div className="flex flex-col items-center justify-center shrink-0 gap-0.5">
            <span className="text-t3 text-lg">→</span>
            <span className="text-t3 text-lg">←</span>
          </div>
          <div className="flex-1 bg-bg-elevated border border-stroke rounded p-3 text-center">
            <p className="text-caption font-semibold text-t2 mb-2">통합지원시스템</p>
            {['Express REST API', 'PostgreSQL+PostGIS', 'React SPA', '표준 JSON'].map((item) => (
              <p key={item} className="text-caption text-t3 leading-relaxed">
                {item}
              </p>
            ))}
          </div>
        </div>
      </section>

      {/* 2. 이기종 시스템 간의 연계 방안 */}
      <section>
        <h3 className="text-body-2 font-semibold text-t1 mb-3">2. 이기종 시스템 간의 연계 방안</h3>
        <div className="flex flex-col gap-2">
          {INTEGRATION_PLANS.map((item, idx) => (
            <div key={item.title} className="bg-bg-card border border-stroke rounded p-3">
              <p className="text-caption font-semibold text-t2 mb-1">
                {idx + 1}. {item.title}
              </p>
              <p className="text-caption text-t2 leading-relaxed">{item.description}</p>
              {item.details && (
                <ul className="mt-1.5 flex flex-col gap-1 pl-3">
                  {item.details.map((detail) => (
                    <li key={detail} className="text-caption text-t3 leading-relaxed list-disc">
                      {detail}
                    </li>
                  ))}
                </ul>
              )}
            </div>
          ))}
        </div>
      </section>

      {/* 3. 연계 대상 이기종 시스템 목록 */}
      <section>
        <h3 className="text-body-2 font-semibold text-t1 mb-3">3. 연계 대상 이기종 시스템 목록</h3>
        <div className="overflow-auto">
          <table className="w-full text-caption border-collapse">
            <thead>
              <tr className="bg-bg-elevated text-t3 uppercase tracking-wide">
                {['시스템', '구현 언어', 'OS', '위치', '연계 프로토콜', '연계 설명'].map((h) => (
                  <th
                    key={h}
                    className="px-3 py-2 text-left font-medium border-b border-stroke whitespace-nowrap"
                  >
                    {h}
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {HETEROGENEOUS_SYSTEMS.map((row) => (
                <tr key={row.system} className="border-b border-stroke hover:bg-bg-surface/50">
                  <td className="px-3 py-2 font-medium text-t1 whitespace-nowrap">{row.system}</td>
                  <td className="px-3 py-2 text-t2 whitespace-nowrap font-mono">{row.lang}</td>
                  <td className="px-3 py-2 text-t2 whitespace-nowrap">{row.os}</td>
                  <td className="px-3 py-2 text-t2 whitespace-nowrap">{row.location}</td>
                  <td className="px-3 py-2 text-t2 whitespace-nowrap font-mono">{row.protocol}</td>
                  <td className="px-3 py-2 text-t2">{row.description}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </section>

      {/* 4. 이기종 연계 전략 */}
      <section>
        <h3 className="text-body-2 font-semibold text-t1 mb-3">4. 이기종 연계 전략</h3>
        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
          {HETEROGENEOUS_STRATEGIES.map((card) => (
            <div key={card.challenge} className="bg-bg-card border border-stroke rounded p-3">
              <div className="flex items-center gap-1.5 mb-1.5">
                <span className="text-caption font-semibold text-color-danger">{card.challenge}</span>
                <span className="text-t3 text-caption">→</span>
                <span className="text-caption font-semibold text-color-accent">{card.solution}</span>
              </div>
              <p className="text-caption text-t2 leading-relaxed">{card.description}</p>
            </div>
          ))}
        </div>
      </section>

      {/* 5. 이기종 데이터 변환 흐름 */}
      <section>
        <h3 className="text-body-2 font-semibold text-t1 mb-3">5. 이기종 데이터 변환 흐름</h3>
        <div className="flex items-center gap-1 flex-wrap">
          {HETEROGENEOUS_FLOW_STEPS.map((step, idx) => (
            <div key={step} className="flex items-center gap-1">
              <div className="bg-bg-elevated border border-stroke rounded px-3 py-2 text-center min-w-16">
                <p className="text-caption font-medium text-t1">{step}</p>
              </div>
              {idx < HETEROGENEOUS_FLOW_STEPS.length - 1 && (
                <span className="text-t3 text-lg shrink-0">→</span>
              )}
            </div>
          ))}
        </div>
      </section>

      {/* 6. 이기종 연계 보안 정책 */}
      <section>
        <h3 className="text-body-2 font-semibold text-t1 mb-3">6. 이기종 연계 보안 정책</h3>
        <div className="grid grid-cols-3 gap-3">
          {HETEROGENEOUS_SECURITY.map((card) => (
            <div key={card.title} className="bg-bg-card border border-stroke rounded p-3">
              <p className="text-caption font-semibold text-t2 mb-2">{card.title}</p>
              <ul className="flex flex-col gap-1">
                {card.items.map((item) => (
                  <li key={item} className="text-caption text-t2 leading-relaxed">
                    · {item}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}
