interface TabModuleRow {
  module: string;
  name: string;
  feature: string;
  integration: string;
}

const TAB_MODULES: TabModuleRow[] = [
  {
    module: '확산예측',
    name: 'prediction',
    feature: '유출유 확산 시뮬레이션, 역추적 분석, 오일붐 배치',
    integration: 'KOSPS, 포세이돈 R&D',
  },
  {
    module: 'HNS 분석',
    name: 'hns',
    feature: '화학물질 확산 예측, 물질 DB, 위험도 평가',
    integration: '충북대 R&D, 물질 DB',
  },
  {
    module: '구조 시나리오',
    name: 'rescue',
    feature: '긴급구난 분석, 표류 예측',
    integration: '긴급구난 R&D',
  },
  {
    module: '항공 방제',
    name: 'aerial',
    feature: '위성영상 분석, 드론 영상, 유막 면적 분석',
    integration: '위성/드론 데이터',
  },
  {
    module: '해양 기상',
    name: 'weather',
    feature: '기상·해상 정보, 조위·해류 관측',
    integration: 'KHOA API, 기상청 API',
  },
  {
    module: '사건/사고',
    name: 'incidents',
    feature: '해양오염 사고 등록·관리·이력',
    integration: '해경 사고 DB',
  },
  {
    module: '자산 관리',
    name: 'assets',
    feature: '기관·장비·선박 보험 관리',
    integration: '해경 자산 DB',
  },
  {
    module: 'SCAT 조사',
    name: 'scat',
    feature: 'Pre-SCAT 해안 조사 기록',
    integration: '현장 조사 데이터',
  },
  {
    module: '관리자',
    name: 'admin',
    feature: '사용자/권한/메뉴/설정/연계 관리',
    integration: '전체 시스템',
  },
];

// ─── 연계 인터페이스 데이터 ───────────────────────────────────────────────────────

export function TargetArchTab() {
  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 flex-col items-stretch gap-0 border border-stroke rounded overflow-hidden">
          {/* 사용자 접근 계층 */}
          <div className="p-4 bg-bg-card">
            <p className="text-caption font-semibold text-t2 mb-1">사용자 접근 계층</p>
            <p className="text-caption text-t1 font-medium mb-1">웹 브라우저 (React SPA)</p>
            <p className="text-caption text-t3 leading-relaxed">
              확산예측 | HNS분석 | 구조시나리오 | 항공방제 | 기상정보 | 사고관리 | SCAT조사 |
              자산관리 | 관리자
            </p>
          </div>
          {/* 화살표 + 프로토콜 */}
          <div className="flex flex-col items-center py-2 bg-bg-base border-y border-stroke">
            <span className="text-t3 text-lg">↕</span>
            <span className="text-caption text-t3">HTTPS (TLS 1.2+)</span>
          </div>
          {/* API 서버 계층 */}
          <div className="p-4 bg-bg-surface border-b border-stroke">
            <p className="text-caption font-semibold text-t2 mb-1">API 서버 계층</p>
            <p className="text-caption text-t1 font-medium mb-2">Express 4 REST API (Port 3001)</p>
            <div className="grid grid-cols-2 gap-1.5 sm:grid-cols-4">
              {[
                'JWT 인증 미들웨어',
                'RBAC 권한 엔진 (permResolver)',
                '감사로그 자동 기록',
                '입력 살균 / Rate Limiting / Helmet',
              ].map((item) => (
                <div
                  key={item}
                  className="bg-bg-elevated border border-stroke rounded px-2 py-1.5 text-center"
                >
                  <p className="text-caption text-t2 leading-snug">{item}</p>
                </div>
              ))}
            </div>
          </div>
          {/* 화살표 + 프로토콜 */}
          <div className="flex flex-col items-center py-2 bg-bg-base border-b border-stroke">
            <span className="text-t3 text-lg">↕</span>
            <span className="text-caption text-t3">pg connection pool</span>
          </div>
          {/* 데이터 계층 */}
          <div className="p-4 bg-bg-card">
            <p className="text-caption font-semibold text-t2 mb-1">데이터 계층</p>
            <p className="text-caption text-t1 font-medium mb-2">PostgreSQL 16 + PostGIS</p>
            <div className="flex gap-2">
              {[
                { name: 'wing DB', sub: '운영' },
                { name: 'wing_auth', sub: '인증' },
              ].map((item) => (
                <div
                  key={item.name}
                  className="bg-bg-elevated border border-stroke rounded p-2 text-center min-w-24"
                >
                  <p className="text-caption font-medium text-t1">{item.name}</p>
                  <p className="text-caption text-t3 mt-0.5">({item.sub})</p>
                </div>
              ))}
            </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>
              {TAB_MODULES.map((row) => (
                <tr key={row.name} className="border-b border-stroke hover:bg-bg-surface/50">
                  <td className="px-3 py-2 font-medium text-t1 whitespace-nowrap">{row.module}</td>
                  <td className="px-3 py-2 text-t2 whitespace-nowrap font-mono">{row.name}</td>
                  <td className="px-3 py-2 text-t2">{row.feature}</td>
                  <td className="px-3 py-2 text-t2 whitespace-nowrap">{row.integration}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </section>

      {/* 3. RBAC 권한 체계 */}
      <section>
        <h3 className="text-body-2 font-semibold text-t1 mb-3">3. RBAC 권한 체계</h3>
        <div className="flex flex-col gap-3">
          {[
            {
              title: '2차원 권한 엔진',
              content:
                'AUTH_PERM OPER_CD 기반: R(조회), C(생성), U(수정), D(삭제) — 역할별 메뉴·기능 접근 제어',
            },
            {
              title: 'permResolver',
              content:
                '역할(Role)과 권한(Permission)의 2차원 매핑으로 메뉴 표시 여부 및 기능 사용 가능 여부를 동적으로 판단',
            },
            {
              title: '감사로그 자동 기록',
              content:
                '누가(사용자) / 언제(타임스탬프) / 무엇을(기능) / 어디서(IP, 메뉴) — 모든 주요 작업 자동 기록',
            },
          ].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>
  );
}
