interface TechStackRow {
  category: string;
  tech: string;
  version: string;
  description: string;
}

const TECH_STACK: TechStackRow[] = [
  { category: 'Frontend', tech: 'React', version: '19.x', description: '컴포넌트 기반 SPA' },
  { category: 'Frontend', tech: 'TypeScript', version: '5.9', description: '정적 타입 시스템' },
  { category: 'Frontend', tech: 'Vite', version: '7.x', description: '빌드 도구 (HMR)' },
  { category: 'Frontend', tech: 'Tailwind CSS', version: '3.x', description: '유틸리티 기반 CSS' },
  { category: 'Frontend', tech: 'MapLibre GL', version: '5.x', description: '오픈소스 GIS 엔진' },
  { category: 'Frontend', tech: 'deck.gl', version: '9.x', description: '대규모 데이터 시각화' },
  { category: 'Frontend', tech: 'Zustand', version: '-', description: '클라이언트 상태관리' },
  { category: 'Frontend', tech: 'TanStack Query', version: '-', description: '서버 상태관리/캐싱' },
  { category: 'Backend', tech: 'Express', version: '4.x', description: 'REST API 서버' },
  { category: 'Backend', tech: 'Socket.IO', version: '-', description: '실시간 양방향 통신' },
  { category: 'DB', tech: 'PostgreSQL', version: '16', description: '관계형 데이터베이스' },
  { category: 'DB', tech: 'PostGIS', version: '-', description: '공간정보 확장' },
  {
    category: '인증',
    tech: 'JWT',
    version: '-',
    description: '토큰 기반 인증 (HttpOnly Cookie)',
  },
  { category: '인증', tech: 'Google OAuth', version: '2.0', description: 'SSO 연동' },
  { category: '보안', tech: 'Helmet', version: '-', description: 'HTTP 헤더 보안' },
  { category: '보안', tech: 'Rate Limiting', version: '-', description: 'API 호출 제한' },
  { category: 'CI/CD', tech: 'Gitea Actions', version: '-', description: '자동 빌드/배포' },
];

// ─── 탭 모듈 데이터 ───────────────────────────────────────────────────────────────

export function FrameworkTab() {
  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="border border-stroke rounded overflow-hidden">
          {/* 프레젠테이션 계층 */}
          <div className="border-b border-stroke p-4 bg-bg-card">
            <p className="text-caption font-semibold text-t2 mb-1">프레젠테이션 계층</p>
            <p className="text-caption text-t3 mb-3">React 19 + TypeScript 5.9 + Tailwind CSS 3</p>
            <div className="grid grid-cols-4 gap-2">
              {[
                { name: 'MapLibre', sub: 'GL JS 5' },
                { name: 'deck.gl', sub: '9.x' },
                { name: 'Zustand', sub: '상태관리' },
                { name: 'TanStack', sub: 'Query' },
              ].map((item) => (
                <div
                  key={item.name}
                  className="bg-bg-elevated border border-stroke rounded p-2 text-center"
                >
                  <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 className="border-b border-stroke p-4 bg-bg-surface">
            <p className="text-caption font-semibold text-t2 mb-1">비즈니스 로직 계층</p>
            <p className="text-caption text-t3 mb-3">Express 4 + TypeScript</p>
            <div className="grid grid-cols-4 gap-2">
              {[
                { name: 'JWT 인증', sub: 'OAuth2.0' },
                { name: 'RBAC', sub: '권한엔진' },
                { name: 'Socket.IO', sub: '실시간' },
                { name: 'Helmet', sub: '보안' },
              ].map((item) => (
                <div
                  key={item.name}
                  className="bg-bg-elevated border border-stroke rounded p-2 text-center"
                >
                  <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 className="p-4 bg-bg-card">
            <p className="text-caption font-semibold text-t2 mb-1">데이터 접근 계층</p>
            <p className="text-caption text-t3 mb-3">PostgreSQL 16 + PostGIS</p>
            <div className="grid grid-cols-3 gap-2 max-w-xs">
              {[
                { name: 'wing DB', sub: '운영 DB' },
                { name: 'wing_auth', sub: '인증 DB' },
                { name: 'PostGIS', sub: '공간정보' },
              ].map((item) => (
                <div
                  key={item.name}
                  className="bg-bg-elevated border border-stroke rounded p-2 text-center"
                >
                  <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>
              {TECH_STACK.map((row, idx) => (
                <tr key={idx} className="border-b border-stroke hover:bg-bg-surface/50">
                  <td className="px-3 py-2 font-medium text-t1 whitespace-nowrap">
                    {row.category}
                  </td>
                  <td className="px-3 py-2 text-t1 whitespace-nowrap">{row.tech}</td>
                  <td className="px-3 py-2 text-t2 whitespace-nowrap font-mono">{row.version}</td>
                  <td className="px-3 py-2 text-t2">{row.description}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </section>

      {/* 3. 개발 표준 및 규칙 */}
      <section>
        <h3 className="text-body-2 font-semibold text-t1 mb-3">3. 개발 표준 및 규칙</h3>
        <div className="grid grid-cols-1 gap-3">
          {[
            {
              title: 'HTTP 정책',
              content: 'GET/POST만 사용 (PUT/DELETE/PATCH 금지) — 한국 보안취약점 점검 가이드 준수',
            },
            {
              title: '코드 표준',
              content: 'ESLint + Prettier 적용, TypeScript strict 모드 필수',
            },
            {
              title: '모듈 구조',
              content: '@common/ (공통 모듈) + @components/ (업무별 탭) Path Alias 기반 분리',
            },
            {
              title: '보안',
              content: '입력 살균(sanitize), XSS/SQL Injection 방지, CORS 정책, Rate Limiting',
            },
          ].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>
  );
}
