interface CommonFeatureItem {
  title: string;
  description: string;
  details: string[];
}

const COMMON_FEATURES: CommonFeatureItem[] = [
  {
    title: '인증 시스템',
    description: 'JWT 기반 세션 인증 + Google OAuth 소셜 로그인',
    details: [
      'HttpOnly 쿠키(WING_SESSION) 기반 토큰 관리 — XSS 방어',
      'Access Token(15분) + Refresh Token(7일) 이중 토큰 구조',
      'Google OAuth 2.0 소셜 로그인 지원',
      'Zustand authStore 기반 프론트엔드 인증 상태 통합 관리',
    ],
  },
  {
    title: 'RBAC 2차원 권한',
    description: 'AUTH_PERM 기반 기능별·역할별 2차원 권한 엔진',
    details: [
      'OPER_CD (R: 조회, C: 생성, U: 수정, D: 삭제) 4단계 조작 권한',
      '역할(Role) × 기능(Feature) 매트릭스 기반 권한 매핑',
      'permResolver 엔진으로 백엔드·프론트엔드 동시 권한 검증',
      '메뉴 접근, 버튼 노출, API 호출 3중 권한 통제',
    ],
  },
  {
    title: 'API 통신 패턴',
    description: 'Axios 기반 공통 API 클라이언트 + 자동 인증·에러 처리',
    details: [
      'GET/POST만 사용 (PUT/DELETE/PATCH 금지 — 보안취약점 점검 가이드 준수)',
      '요청 인터셉터: 쿠키 자동 첨부 (withCredentials)',
      '응답 인터셉터: 401 시 자동 토큰 갱신, 실패 시 로그아웃',
      'TanStack Query 기반 서버 상태 캐싱 및 자동 재검증',
    ],
  },
  {
    title: '상태 관리',
    description: 'Zustand(클라이언트) + TanStack Query(서버) 이중 상태 관리',
    details: [
      'Zustand: authStore(인증), menuStore(메뉴) 등 클라이언트 전역 상태',
      'TanStack Query: API 응답 캐싱, 자동 재요청, 낙관적 업데이트',
      '컴포넌트 로컬 상태: useState 활용',
    ],
  },
  {
    title: '메뉴 시스템',
    description: 'DB 기반 동적 메뉴 + 권한 연동 자동 필터링',
    details: [
      'DB에서 메뉴 트리 구조를 동적으로 로드',
      '사용자 권한에 따라 메뉴 항목 자동 필터링 (접근 불가 메뉴 미노출)',
      '관리자 화면에서 메뉴 순서·표시 여부·아이콘 실시간 편집',
      'menuStore(Zustand)로 현재 활성 메뉴 상태 전역 관리',
    ],
  },
  {
    title: '지도 엔진',
    description: 'MapLibre GL JS 5.x + deck.gl 9.x 기반 GIS 시각화',
    details: [
      'MapLibre GL JS: 오픈소스 벡터 타일 기반 지도 렌더링',
      'deck.gl: 대규모 공간 데이터(파티클, 히트맵, 궤적) 고성능 시각화',
      'PostGIS 공간 쿼리 → GeoJSON → deck.gl 레이어 파이프라인',
      '레이어 트리 UI로 사용자별 레이어 표시·숨김 제어',
    ],
  },
  {
    title: '스타일링',
    description: 'Tailwind CSS @layer 아키텍처 + CSS 변수 디자인 시스템',
    details: [
      '@layer base → components → wing 3단계 CSS 계층 구조',
      'CSS 변수 기반 시맨틱 컬러 (bg-bg-base, text-t1, border-stroke 등)',
      '다크 모드 기본 적용 — CSS 변수 전환으로 테마 일괄 변경',
      '인라인 스타일 지양, Tailwind 유틸리티 클래스 우선',
    ],
  },
  {
    title: '감사 로그',
    description: '사용자 행위 자동 기록 — 접속·조회·변경 이력 추적',
    details: [
      '로그인/로그아웃, 메뉴 접근, 데이터 변경 자동 기록',
      'App.tsx에서 탭 전환 시 감사 로그 자동 전송',
      '관리자 화면에서 사용자별·기간별 감사 로그 조회 가능',
      'IP 주소, User-Agent, 요청 경로 등 부가 정보 기록',
    ],
  },
  {
    title: '보안',
    description: '입력 살균·CORS·CSP·Rate Limiting 다층 보안 정책',
    details: [
      '입력 살균(sanitize): XSS·SQL Injection 방어 미들웨어 적용',
      'Helmet: CSP, X-Frame-Options, HSTS 등 보안 헤더 자동 설정',
      'CORS: 허용 오리진 화이트리스트 제한',
      'Rate Limiting: API 요청 빈도 제한으로 DoS 방어',
    ],
  },
];

// ─── 방제대응 프로세스 데이터 ─────────────────────────────────────────────────────

interface ProcessStep {
  phase: string;
  description: string;
  modules: string[];
}

const RESPONSE_PROCESS: ProcessStep[] = [
  {
    phase: '사고 접수',
    description: '해양오염 사고 신고 접수 및 초동 상황 등록',
    modules: ['사건/사고'],
  },
  {
    phase: '상황 파악',
    description: '사고 현장 기상·해상 조건 확인, 유출원·유출량 파악',
    modules: ['해양기상', '사건/사고'],
  },
  {
    phase: '확산 예측',
    description: '유출유/HNS 확산 시뮬레이션 및 역추적 분석 수행',
    modules: ['확산예측', 'HNS분석'],
  },
  {
    phase: '방제 계획',
    description: '오일붐 배치, 유처리제 살포 구역, 방제선 투입 계획 수립',
    modules: ['확산예측', '자산관리'],
  },
  {
    phase: '구조 작전',
    description: '인명 구조 시나리오 수립, 표류 예측 기반 수색 구역 결정',
    modules: ['구조시나리오'],
  },
  {
    phase: '항공 감시',
    description: '위성·드론 영상으로 유막 면적 모니터링 및 방제 효과 확인',
    modules: ['항공방제'],
  },
  {
    phase: '해안 조사',
    description: 'Pre-SCAT 해안 오염 조사, 피해 범위 기록',
    modules: ['SCAT조사'],
  },
  {
    phase: '상황 종료',
    description: '방제 완료 보고, 감사 이력 정리, 사후 분석',
    modules: ['사건/사고', '관리자'],
  },
];

// ─── 시스템별 기능 유무 매트릭스 데이터 ────────────────────────────────────────────

const SYSTEM_MODULES = [
  '확산예측',
  'HNS분석',
  '구조시나리오',
  '항공방제',
  '해양기상',
  '사건/사고',
  '자산관리',
  'SCAT조사',
  '게시판',
  '관리자',
] as const;

interface FeatureMatrixRow {
  feature: string;
  category: '공통기능' | '기본정보관리' | '업무기능';
  integrated: boolean;
  systems: Record<string, boolean>;
}

const FEATURE_MATRIX: FeatureMatrixRow[] = [
  {
    feature: '사용자 인증 (JWT)',
    category: '공통기능',
    integrated: true,
    systems: {
      확산예측: true,
      HNS분석: true,
      구조시나리오: true,
      항공방제: true,
      해양기상: true,
      '사건/사고': true,
      자산관리: true,
      SCAT조사: true,
      게시판: true,
      관리자: true,
    },
  },
  {
    feature: 'RBAC 권한 제어',
    category: '공통기능',
    integrated: true,
    systems: {
      확산예측: true,
      HNS분석: true,
      구조시나리오: true,
      항공방제: true,
      해양기상: true,
      '사건/사고': true,
      자산관리: true,
      SCAT조사: true,
      게시판: true,
      관리자: true,
    },
  },
  {
    feature: '감사 로그',
    category: '공통기능',
    integrated: true,
    systems: {
      확산예측: true,
      HNS분석: true,
      구조시나리오: true,
      항공방제: true,
      해양기상: true,
      '사건/사고': true,
      자산관리: true,
      SCAT조사: true,
      게시판: true,
      관리자: true,
    },
  },
  {
    feature: 'API 통신 (Axios)',
    category: '공통기능',
    integrated: true,
    systems: {
      확산예측: true,
      HNS분석: true,
      구조시나리오: true,
      항공방제: true,
      해양기상: true,
      '사건/사고': true,
      자산관리: true,
      SCAT조사: true,
      게시판: true,
      관리자: true,
    },
  },
  {
    feature: '입력 살균/보안',
    category: '공통기능',
    integrated: true,
    systems: {
      확산예측: true,
      HNS분석: true,
      구조시나리오: true,
      항공방제: true,
      해양기상: true,
      '사건/사고': true,
      자산관리: true,
      SCAT조사: true,
      게시판: true,
      관리자: true,
    },
  },
  {
    feature: '사용자 관리',
    category: '기본정보관리',
    integrated: true,
    systems: {
      확산예측: false,
      HNS분석: false,
      구조시나리오: false,
      항공방제: false,
      해양기상: false,
      '사건/사고': false,
      자산관리: false,
      SCAT조사: false,
      게시판: false,
      관리자: true,
    },
  },
  {
    feature: '지도 엔진 (MapLibre)',
    category: '기본정보관리',
    integrated: true,
    systems: {
      확산예측: true,
      HNS분석: true,
      구조시나리오: true,
      항공방제: true,
      해양기상: true,
      '사건/사고': true,
      자산관리: false,
      SCAT조사: true,
      게시판: false,
      관리자: false,
    },
  },
  {
    feature: '레이어 관리',
    category: '기본정보관리',
    integrated: true,
    systems: {
      확산예측: true,
      HNS분석: true,
      구조시나리오: true,
      항공방제: true,
      해양기상: true,
      '사건/사고': true,
      자산관리: false,
      SCAT조사: true,
      게시판: false,
      관리자: true,
    },
  },
  {
    feature: '메뉴 관리',
    category: '기본정보관리',
    integrated: true,
    systems: {
      확산예측: false,
      HNS분석: false,
      구조시나리오: false,
      항공방제: false,
      해양기상: false,
      '사건/사고': false,
      자산관리: false,
      SCAT조사: false,
      게시판: false,
      관리자: true,
    },
  },
  {
    feature: '시스템 설정',
    category: '기본정보관리',
    integrated: true,
    systems: {
      확산예측: false,
      HNS분석: false,
      구조시나리오: false,
      항공방제: false,
      해양기상: false,
      '사건/사고': false,
      자산관리: false,
      SCAT조사: false,
      게시판: false,
      관리자: true,
    },
  },
  {
    feature: '확산 시뮬레이션',
    category: '업무기능',
    integrated: false,
    systems: {
      확산예측: true,
      HNS분석: false,
      구조시나리오: false,
      항공방제: false,
      해양기상: false,
      '사건/사고': false,
      자산관리: false,
      SCAT조사: false,
      게시판: false,
      관리자: false,
    },
  },
  {
    feature: 'HNS 대기확산',
    category: '업무기능',
    integrated: false,
    systems: {
      확산예측: false,
      HNS분석: true,
      구조시나리오: false,
      항공방제: false,
      해양기상: false,
      '사건/사고': false,
      자산관리: false,
      SCAT조사: false,
      게시판: false,
      관리자: false,
    },
  },
  {
    feature: '표류 예측',
    category: '업무기능',
    integrated: false,
    systems: {
      확산예측: false,
      HNS분석: false,
      구조시나리오: true,
      항공방제: false,
      해양기상: false,
      '사건/사고': false,
      자산관리: false,
      SCAT조사: false,
      게시판: false,
      관리자: false,
    },
  },
  {
    feature: '위성/드론 영상',
    category: '업무기능',
    integrated: false,
    systems: {
      확산예측: false,
      HNS분석: false,
      구조시나리오: false,
      항공방제: true,
      해양기상: false,
      '사건/사고': false,
      자산관리: false,
      SCAT조사: false,
      게시판: false,
      관리자: false,
    },
  },
  {
    feature: '기상/해상 정보',
    category: '업무기능',
    integrated: false,
    systems: {
      확산예측: true,
      HNS분석: true,
      구조시나리오: true,
      항공방제: false,
      해양기상: true,
      '사건/사고': false,
      자산관리: false,
      SCAT조사: false,
      게시판: false,
      관리자: false,
    },
  },
  {
    feature: '역추적 분석',
    category: '업무기능',
    integrated: false,
    systems: {
      확산예측: true,
      HNS분석: false,
      구조시나리오: false,
      항공방제: false,
      해양기상: false,
      '사건/사고': false,
      자산관리: false,
      SCAT조사: false,
      게시판: false,
      관리자: false,
    },
  },
  {
    feature: '사고 등록/이력',
    category: '업무기능',
    integrated: false,
    systems: {
      확산예측: false,
      HNS분석: false,
      구조시나리오: false,
      항공방제: false,
      해양기상: false,
      '사건/사고': true,
      자산관리: false,
      SCAT조사: false,
      게시판: false,
      관리자: false,
    },
  },
  {
    feature: '장비/선박 관리',
    category: '업무기능',
    integrated: false,
    systems: {
      확산예측: false,
      HNS분석: false,
      구조시나리오: false,
      항공방제: false,
      해양기상: false,
      '사건/사고': false,
      자산관리: true,
      SCAT조사: false,
      게시판: false,
      관리자: false,
    },
  },
  {
    feature: '해안 조사',
    category: '업무기능',
    integrated: false,
    systems: {
      확산예측: false,
      HNS분석: false,
      구조시나리오: false,
      항공방제: false,
      해양기상: false,
      '사건/사고': false,
      자산관리: false,
      SCAT조사: true,
      게시판: false,
      관리자: false,
    },
  },
  {
    feature: '게시판 CRUD',
    category: '업무기능',
    integrated: false,
    systems: {
      확산예측: false,
      HNS분석: false,
      구조시나리오: false,
      항공방제: false,
      해양기상: false,
      '사건/사고': false,
      자산관리: false,
      SCAT조사: false,
      게시판: true,
      관리자: false,
    },
  },
];

const CATEGORY_STYLES: Record<string, string> = {
  공통기능: 'bg-[rgba(6,182,212,0.2)] text-color-accent',
  기본정보관리: 'bg-[rgba(34,197,94,0.2)] text-color-success',
  업무기능: 'bg-bg-elevated text-t3',
};

export function CommonFeaturesTab() {
  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>
        <p className="text-caption text-t2 leading-relaxed mb-4">
          해양오염 사고 발생 시 사고 접수부터 상황 종료까지의 단계별 대응 프로세스이며, 각 단계에서
          활용하는 시스템 모듈을 표시한다.
        </p>
        {/* 프로세스 흐름도 */}
        <div className="flex items-start gap-1 flex-wrap mb-4">
          {RESPONSE_PROCESS.map((step, idx) => (
            <div key={step.phase} className="flex items-start gap-1">
              <div className="bg-bg-elevated border border-stroke rounded px-3 py-2 text-center min-w-20">
                <p className="text-caption font-semibold text-t1 mb-1">{step.phase}</p>
                <div className="flex flex-col gap-0.5">
                  {step.modules.map((mod) => (
                    <span key={mod} className="text-[10px] text-color-accent">
                      {mod}
                    </span>
                  ))}
                </div>
              </div>
              {idx < RESPONSE_PROCESS.length - 1 && (
                <span className="text-t3 text-lg shrink-0 mt-2.5">→</span>
              )}
            </div>
          ))}
        </div>
        {/* 프로세스 상세 */}
        <div className="flex flex-col gap-2">
          {RESPONSE_PROCESS.map((step, idx) => (
            <div
              key={step.phase}
              className="bg-bg-card border border-stroke rounded p-3 flex items-start gap-3"
            >
              <span className="inline-flex items-center justify-center w-5 h-5 rounded bg-color-accent text-white text-caption font-semibold shrink-0 mt-0.5">
                {idx + 1}
              </span>
              <div className="flex-1">
                <p className="text-caption font-semibold text-t1 mb-0.5">{step.phase}</p>
                <p className="text-caption text-t2 leading-relaxed">{step.description}</p>
              </div>
              <div className="flex gap-1 shrink-0">
                {step.modules.map((mod) => (
                  <span
                    key={mod}
                    className="px-1.5 py-0.5 text-[10px] font-medium rounded bg-[rgba(6,182,212,0.2)] text-color-accent"
                  >
                    {mod}
                  </span>
                ))}
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* 2. 시스템별 기능 유무 매트릭스 */}
      <section>
        <h3 className="text-body-2 font-semibold text-t1 mb-3">2. 시스템별 기능 유무 매트릭스</h3>
        <p className="text-caption text-t2 leading-relaxed mb-4">
          각 시스템(업무 모듈)별 기능의 유무를 파악하여 공통기능, 기본정보 관리(사용자, 지도 등) 등
          통합할 수 있는 기능을 표시한다.{' '}
          <span className="text-color-accent font-medium">통합 대상</span> 기능은 공통 모듈로 일원화하여
          중복 개발을 방지한다.
        </p>
        <div className="overflow-auto">
          <table className="w-full text-caption border-collapse">
            <thead>
              <tr className="bg-bg-elevated text-t3 tracking-wide">
                <th className="px-2 py-2 text-left font-medium border-b border-stroke whitespace-nowrap sticky left-0 bg-bg-elevated z-10">
                  기능
                </th>
                <th className="px-2 py-2 text-center font-medium border-b border-stroke whitespace-nowrap">
                  분류
                </th>
                <th className="px-2 py-2 text-center font-medium border-b border-stroke whitespace-nowrap">
                  통합
                </th>
                {SYSTEM_MODULES.map((mod) => (
                  <th
                    key={mod}
                    className="px-1.5 py-2 text-center font-medium border-b border-stroke whitespace-nowrap"
                  >
                    <span className="writing-mode-vertical text-[10px]">{mod}</span>
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {FEATURE_MATRIX.map((row) => (
                <tr key={row.feature} className="border-b border-stroke hover:bg-bg-surface/50">
                  <td className="px-2 py-1.5 font-medium text-t1 whitespace-nowrap sticky left-0 bg-bg-base z-10">
                    {row.feature}
                  </td>
                  <td className="px-2 py-1.5 text-center">
                    <span
                      className={`px-1.5 py-0.5 rounded text-[10px] font-medium ${CATEGORY_STYLES[row.category]}`}
                    >
                      {row.category}
                    </span>
                  </td>
                  <td className="px-2 py-1.5 text-center">
                    {row.integrated ? (
                      <span className="text-color-accent font-semibold">통합</span>
                    ) : (
                      <span className="text-t3">개별</span>
                    )}
                  </td>
                  {SYSTEM_MODULES.map((mod) => (
                    <td key={mod} className="px-1.5 py-1.5 text-center">
                      {row.systems[mod] ? (
                        <span className="text-color-success font-bold">O</span>
                      ) : (
                        <span className="text-t3/30">-</span>
                      )}
                    </td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        {/* 범례 */}
        <div className="flex gap-4 mt-3">
          <div className="flex items-center gap-1.5">
            <span className="px-1.5 py-0.5 rounded text-[10px] font-medium bg-[rgba(6,182,212,0.2)] text-color-accent">
              공통기능
            </span>
            <span className="text-caption text-t3">전 모듈 공통 적용</span>
          </div>
          <div className="flex items-center gap-1.5">
            <span className="px-1.5 py-0.5 rounded text-[10px] font-medium bg-[rgba(34,197,94,0.2)] text-color-success">
              기본정보관리
            </span>
            <span className="text-caption text-t3">사용자·지도·메뉴·설정 통합 관리</span>
          </div>
          <div className="flex items-center gap-1.5">
            <span className="px-1.5 py-0.5 rounded text-[10px] font-medium bg-bg-elevated text-t3">
              업무기능
            </span>
            <span className="text-caption text-t3">모듈별 고유 기능</span>
          </div>
        </div>
      </section>

      {/* 3. 공통기능 상세 */}
      <section>
        <h3 className="text-body-2 font-semibold text-t1 mb-3">3. 공통기능 상세</h3>
        <div className="flex flex-col gap-3">
          {COMMON_FEATURES.map((feature, idx) => (
            <div key={feature.title} className="bg-bg-card border border-stroke rounded p-3">
              <div className="flex items-center gap-2 mb-1.5">
                <span className="inline-flex items-center justify-center w-5 h-5 rounded bg-color-accent text-white text-caption font-semibold shrink-0">
                  {idx + 1}
                </span>
                <p className="text-caption font-semibold text-t1">{feature.title}</p>
              </div>
              <p className="text-caption text-t2 leading-relaxed mb-2 pl-7">{feature.description}</p>
              <ul className="flex flex-col gap-1 pl-7">
                {feature.details.map((detail) => (
                  <li key={detail} className="text-caption text-t3 leading-relaxed list-disc">
                    {detail}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </section>

      {/* 4. 공통 모듈 구조 */}
      <section>
        <h3 className="text-body-2 font-semibold text-t1 mb-3">4. 공통 모듈 디렉토리 구조</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>
              {[
                {
                  dir: 'common/components/',
                  role: '공통 UI 컴포넌트',
                  files: 'auth/, layout/, map/, ui/, layer/',
                },
                {
                  dir: 'common/hooks/',
                  role: '공통 커스텀 훅',
                  files: 'useLayers, useSubMenu, useFeatureTracking',
                },
                {
                  dir: 'common/services/',
                  role: 'API 통신 모듈',
                  files: 'api.ts, authApi.ts, layerService.ts',
                },
                {
                  dir: 'common/store/',
                  role: '전역 상태 스토어',
                  files: 'authStore.ts, menuStore.ts',
                },
                {
                  dir: 'common/styles/',
                  role: 'CSS @layer 스타일',
                  files: 'base.css, components.css, wing.css',
                },
                {
                  dir: 'common/types/',
                  role: '공통 타입 정의',
                  files: 'backtrack, hns, navigation 등',
                },
                {
                  dir: 'common/utils/',
                  role: '유틸리티 함수',
                  files: 'coordinates, geo, sanitize, cn.ts',
                },
                { dir: 'common/constants/', role: '상수 정의', files: 'featureIds.ts' },
                { dir: 'common/data/', role: 'UI 데이터', files: 'layerData.ts (레이어 트리)' },
              ].map((row) => (
                <tr key={row.dir} className="border-b border-stroke hover:bg-bg-surface/50">
                  <td className="px-3 py-2 font-medium text-t1 whitespace-nowrap font-mono">
                    {row.dir}
                  </td>
                  <td className="px-3 py-2 text-t2">{row.role}</td>
                  <td className="px-3 py-2 text-t3 font-mono">{row.files}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </section>
    </div>
  );
}
