interface InterfaceRow {
  system: string;
  method: string;
  data: string;
  cycle: string;
  protocol: string;
}

const INTERFACES: InterfaceRow[] = [
  {
    system: 'KHOA (해양조사원)',
    method: 'REST API',
    data: '조위, 해류, 수온',
    cycle: '실시간/1시간',
    protocol: 'HTTPS',
  },
  {
    system: '기상청',
    method: 'REST API',
    data: '풍향/풍속, 기압, 기온, 강수',
    cycle: '3시간',
    protocol: 'HTTPS',
  },
  {
    system: 'HYCOM',
    method: '파일 수신',
    data: 'SST, 해류(U/V), SSH',
    cycle: '6시간',
    protocol: 'HTTPS/FTP',
  },
  {
    system: '해경 KBP (인사)',
    method: '배치 수집',
    data: '사용자, 부서, 직위, 조직',
    cycle: '1일 1회',
    protocol: '내부망 API',
  },
  {
    system: 'AIS 선박위치',
    method: '실시간 수집',
    data: '선박 위치, 속도, 방향',
    cycle: '실시간',
    protocol: 'Socket/API',
  },
  {
    system: '포세이돈 R&D',
    method: 'API 연계',
    data: '유출유 확산 예측 결과',
    cycle: '요청 시',
    protocol: 'HTTPS',
  },
  {
    system: 'KOSPS (광주)',
    method: 'DLL 호출',
    data: '유출유 확산 예측 결과',
    cycle: '요청 시',
    protocol: 'HTTPS (Fortran DLL)',
  },
  {
    system: '충북대 HNS',
    method: 'API 호출',
    data: 'HNS 대기확산 결과',
    cycle: '요청 시',
    protocol: 'HTTPS',
  },
  {
    system: '긴급구난 R&D',
    method: '내부 연계',
    data: '구난 분석 결과',
    cycle: '요청 시',
    protocol: '내부망 API',
  },
];

// ─── 탭 1: 표준 프레임워크 ────────────────────────────────────────────────────────

export function InterfaceTab() {
  const dataFlowSteps = ['수집', '전처리', '저장', '분석/예측', '시각화', '의사결정지원'];

  return (
    <div className="flex flex-col gap-6 p-5">
      {/* 1. 외부 시스템 연계 구성도 */}
      <section>
        <h3 className="text-body-2 font-semibold text-t1 mb-3">1. 외부 시스템 연계 구성도</h3>
        <div className="flex items-stretch gap-2">
          {/* 외부 시스템 */}
          <div className="flex-1 bg-bg-card border border-stroke rounded p-3 flex flex-col gap-1.5">
            <p className="text-caption font-semibold text-t2 mb-1 text-center">외부 시스템</p>
            {['KHOA API', '기상청 API', '해경 KBP', 'AIS 선박'].map((item) => (
              <div
                key={item}
                className="bg-bg-elevated border border-stroke rounded px-2 py-1 text-center"
              >
                <p className="text-caption text-t2">{item}</p>
              </div>
            ))}
          </div>
          {/* 화살표 */}
          <div className="flex flex-col items-center justify-center gap-1 shrink-0">
            <span className="text-t3 text-lg">→</span>
            <span className="text-t3 text-lg">←</span>
          </div>
          {/* 통합지원시스템 */}
          <div className="flex-[2] bg-bg-surface border-2 border-stroke rounded p-3 flex flex-col gap-2">
            <p className="text-caption font-semibold text-t1 text-center">
              해양환경 위기대응
              <br />
              통합지원시스템
            </p>
            <div className="border border-stroke rounded p-2 bg-bg-elevated">
              <p className="text-caption font-medium text-t2 mb-1 text-center">연계관리 모듈</p>
              <div className="flex flex-col gap-1">
                {['수집자료 관리', '연계 모니터링', '비식별화 조치'].map((item) => (
                  <p key={item} className="text-caption text-t3 text-center">
                    - {item}
                  </p>
                ))}
              </div>
            </div>
          </div>
          {/* 화살표 */}
          <div className="flex flex-col items-center justify-center gap-1 shrink-0">
            <span className="text-t3 text-lg">←</span>
            <span className="text-t3 text-lg">→</span>
          </div>
          {/* R&D 시스템 */}
          <div className="flex-1 bg-bg-card border border-stroke rounded p-3 flex flex-col gap-1.5">
            <p className="text-caption font-semibold text-t2 mb-1 text-center">R&D 시스템</p>
            {['포세이돈', 'KOSPS', '충북대 HNS', '긴급구난'].map((item) => (
              <div
                key={item}
                className="bg-bg-elevated border border-stroke rounded px-2 py-1 text-center"
              >
                <p className="text-caption text-t2">{item}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 2. 연계 인터페이스 목록 */}
      <section>
        <h3 className="text-body-2 font-semibold text-t1 mb-3">2. 연계 인터페이스 목록</h3>
        <div className="overflow-auto">
          <table className="w-full text-caption border-collapse">
            <thead>
              <tr className="bg-bg-elevated text-t3 uppercase tracking-wide">
                {['연계 시스템', '연계 방식', '데이터', '주기', '프로토콜'].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>
              {INTERFACES.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">{row.method}</td>
                  <td className="px-3 py-2 text-t2">{row.data}</td>
                  <td className="px-3 py-2 text-t2 whitespace-nowrap">{row.cycle}</td>
                  <td className="px-3 py-2 text-t2 whitespace-nowrap font-mono">{row.protocol}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </section>

      {/* 3. 데이터 흐름도 */}
      <section>
        <h3 className="text-body-2 font-semibold text-t1 mb-3">3. 데이터 흐름도</h3>
        <div className="flex items-center gap-1 flex-wrap">
          {dataFlowSteps.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 < dataFlowSteps.length - 1 && (
                <span className="text-t3 text-lg shrink-0">→</span>
              )}
            </div>
          ))}
        </div>
        <div className="mt-3 grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3">
          {[
            { step: '수집', desc: 'KHOA, 기상청, HYCOM, AIS 등 외부 원천 데이터 수신' },
            { step: '전처리', desc: '포맷 변환, 좌표계 통일, 비식별화, 품질 검사' },
            { step: '저장', desc: 'PostgreSQL 16 + PostGIS 공간정보 DB 적재' },
            { step: '분석/예측', desc: 'R&D 모델 연계 (포세이돈, KOSPS, 충북대, 긴급구난)' },
            { step: '시각화', desc: 'MapLibre GL + deck.gl 기반 지도 레이어 렌더링' },
            { step: '의사결정지원', desc: '방제작전 시나리오, 구조분석, 경보 발령 지원' },
          ].map((item) => (
            <div key={item.step} className="bg-bg-card border border-stroke rounded p-2.5">
              <p className="text-caption font-semibold text-t2 mb-1">{item.step}</p>
              <p className="text-caption text-t2 leading-relaxed">{item.desc}</p>
            </div>
          ))}
        </div>
      </section>

      {/* 4. 연계 장애 대응 */}
      <section>
        <h3 className="text-body-2 font-semibold text-t1 mb-3">4. 연계 장애 대응</h3>
        <div className="flex flex-col gap-2">
          {[
            {
              title: '연계 모니터링',
              content: '관리자 > 연계관리 > 연계모니터링에서 실시간 연계 상태 확인',
            },
            {
              title: 'R&D 파이프라인 모니터링',
              content: '관리자 > 연계관리 > R&D과제에서 과제별 데이터 수신 이력 및 처리 현황 확인',
            },
            {
              title: '장애 알림',
              content: '데이터 수신 지연/실패 발생 시 알림 발생 — 운영자 즉시 인지 가능',
            },
            {
              title: '비식별화 조치',
              content: '개인정보 포함 데이터(해경 KBP 인사 등) 수집 시 자동 비식별화 처리 적용',
            },
          ].map((item) => (
            <div key={item.title} className="bg-bg-card border border-stroke rounded p-3">
              <p className="text-caption font-semibold text-t2 mb-1">{item.title}</p>
              <p className="text-caption text-t2 leading-relaxed">{item.content}</p>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}
