// ColorPaletteContent.tsx — WING-OPS Color 파운데이션 페이지 (다크/라이트 테마 지원)

import { useState } from 'react';
import type { DesignTheme } from './designTheme';

// ---------- 타입 ----------

interface ColorStep {
  step: number;
  color: string;
}

interface Marker {
  step: number;
  label: string;
}

interface ContrastRating {
  step: number;
  rating: string;
}

interface ColorScaleBarProps {
  steps: ColorStep[];
  markers?: Marker[];
  contrastRatings?: ContrastRating[];
  darkBg?: boolean;
  isDark: boolean;
}

interface ColorToken {
  name: string;
  hex: string;
}

interface ColorTokenGroup {
  title: string;
  tokens: ColorToken[];
}

// ---------- 데이터 ----------

const TRANSPARENCY_STEPS = [
  0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100,
];

const GRAY_STEPS: ColorStep[] = [
  { step: 0, color: '#f8fafc' },
  { step: 5, color: '#f1f5f9' },
  { step: 10, color: '#e2e8f0' },
  { step: 20, color: '#cbd5e1' },
  { step: 30, color: '#94a3b8' },
  { step: 40, color: '#64748b' },
  { step: 50, color: '#475569' },
  { step: 60, color: '#334155' },
  { step: 70, color: '#1e293b' },
  { step: 80, color: '#0f172a' },
  { step: 90, color: '#0c1322' },
  { step: 95, color: '#070d19' },
  { step: 100, color: '#020617' },
];

const PRIMARY_STEPS: ColorStep[] = [
  { step: 0, color: '#ecfeff' },
  { step: 5, color: '#cffafe' },
  { step: 10, color: '#a5f3fc' },
  { step: 20, color: '#67e8f9' },
  { step: 30, color: '#22d3ee' },
  { step: 40, color: '#06b6d4' },
  { step: 50, color: '#0891b2' },
  { step: 60, color: '#0e7490' },
  { step: 70, color: '#155e75' },
  { step: 80, color: '#164e63' },
  { step: 90, color: '#134152' },
  { step: 95, color: '#0c3140' },
  { step: 100, color: '#042f2e' },
];

const SECONDARY_STEPS: ColorStep[] = [
  { step: 0, color: '#f0f4fa' },
  { step: 5, color: '#e1e8f4' },
  { step: 10, color: '#c3d1e8' },
  { step: 20, color: '#8da4c8' },
  { step: 30, color: '#5a7eb0' },
  { step: 40, color: '#3d6399' },
  { step: 50, color: '#2d4f80' },
  { step: 60, color: '#1e3a66' },
  { step: 70, color: '#1a2236' },
  { step: 80, color: '#121929' },
  { step: 90, color: '#0f1524' },
  { step: 95, color: '#0a0e1a' },
  { step: 100, color: '#050811' },
];

const PRIMARY_CONTRAST_RATINGS: ContrastRating[] = PRIMARY_STEPS.map(({ step }) => ({
  step,
  rating: step <= 30 ? 'AAA' : step <= 50 ? 'AA' : 'AAA',
}));

const SECONDARY_CONTRAST_RATINGS: ContrastRating[] = SECONDARY_STEPS.map(({ step }) => ({
  step,
  rating: step <= 30 ? 'AAA' : step <= 50 ? 'AA' : 'AAA',
}));

const COLOR_TOKEN_GROUPS: ColorTokenGroup[] = [
  {
    title: 'Static',
    tokens: [
      { name: 'static.black', hex: '#131415' },
      { name: 'static.white', hex: '#ffffff' },
    ],
  },
  {
    title: 'Gray',
    tokens: [
      { name: 'gray.100', hex: '#f1f5f9' },
      { name: 'gray.200', hex: '#e2e8f0' },
      { name: 'gray.300', hex: '#cbd5e1' },
      { name: 'gray.400', hex: '#94a3b8' },
      { name: 'gray.500', hex: '#64748b' },
      { name: 'gray.600', hex: '#475569' },
      { name: 'gray.700', hex: '#334155' },
      { name: 'gray.800', hex: '#1e293b' },
      { name: 'gray.900', hex: '#0f172a' },
      { name: 'gray.1000', hex: '#020617' },
    ],
  },
  {
    title: 'Blue',
    tokens: [
      { name: 'blue.100', hex: '#dbeafe' },
      { name: 'blue.200', hex: '#bfdbfe' },
      { name: 'blue.300', hex: '#93c5fd' },
      { name: 'blue.400', hex: '#60a5fa' },
      { name: 'blue.500', hex: '#3b82f6' },
      { name: 'blue.600', hex: '#2563eb' },
      { name: 'blue.700', hex: '#1d4ed8' },
      { name: 'blue.800', hex: '#1e40af' },
      { name: 'blue.900', hex: '#1e3a8a' },
      { name: 'blue.1000', hex: '#172554' },
    ],
  },
  {
    title: 'Green',
    tokens: [
      { name: 'green.100', hex: '#dcfce7' },
      { name: 'green.200', hex: '#bbf7d0' },
      { name: 'green.300', hex: '#86efac' },
      { name: 'green.400', hex: '#4ade80' },
      { name: 'green.500', hex: '#22c55e' },
      { name: 'green.600', hex: '#16a34a' },
      { name: 'green.700', hex: '#15803d' },
      { name: 'green.800', hex: '#166534' },
      { name: 'green.900', hex: '#14532d' },
      { name: 'green.1000', hex: '#052e16' },
    ],
  },
  {
    title: 'Yellow',
    tokens: [
      { name: 'yellow.100', hex: '#fef9c3' },
      { name: 'yellow.200', hex: '#fef08a' },
      { name: 'yellow.300', hex: '#fde047' },
      { name: 'yellow.400', hex: '#facc15' },
      { name: 'yellow.500', hex: '#eab308' },
      { name: 'yellow.600', hex: '#ca8a04' },
      { name: 'yellow.700', hex: '#a16207' },
      { name: 'yellow.800', hex: '#854d0e' },
      { name: 'yellow.900', hex: '#713f12' },
      { name: 'yellow.1000', hex: '#422006' },
    ],
  },
  {
    title: 'Red',
    tokens: [
      { name: 'red.100', hex: '#fee2e2' },
      { name: 'red.200', hex: '#fecaca' },
      { name: 'red.300', hex: '#fca5a5' },
      { name: 'red.400', hex: '#f87171' },
      { name: 'red.500', hex: '#ef4444' },
      { name: 'red.600', hex: '#dc2626' },
      { name: 'red.700', hex: '#b91c1c' },
      { name: 'red.800', hex: '#991b1b' },
      { name: 'red.900', hex: '#7f1d1d' },
      { name: 'red.1000', hex: '#450a0a' },
    ],
  },
  {
    title: 'Purple',
    tokens: [
      { name: 'purple.100', hex: '#f3e8ff' },
      { name: 'purple.200', hex: '#e9d5ff' },
      { name: 'purple.300', hex: '#d8b4fe' },
      { name: 'purple.400', hex: '#c084fc' },
      { name: 'purple.500', hex: '#a855f7' },
      { name: 'purple.600', hex: '#9333ea' },
      { name: 'purple.700', hex: '#7e22ce' },
      { name: 'purple.800', hex: '#6b21a8' },
      { name: 'purple.900', hex: '#581c87' },
      { name: 'purple.1000', hex: '#3b0764' },
    ],
  },
];

// ---------- 헬퍼 ----------

const hexToRgb = (hex: string): string => {
  const r = parseInt(hex.slice(1, 3), 16);
  const g = parseInt(hex.slice(3, 5), 16);
  const b = parseInt(hex.slice(5, 7), 16);
  return `rgb(${r}, ${g}, ${b})`;
};

// ---------- 내부 컴포넌트: ColorScaleBar ----------

const ColorScaleBar = ({
  steps,
  markers,
  contrastRatings,
  darkBg = false,
  isDark,
}: ColorScaleBarProps) => {
  const badgeBg = isDark ? '#374151' : '#374151';
  const badgeText = isDark ? '#e5e7eb' : '#fff';

  const getContrastRating = (step: number): string | undefined => {
    return contrastRatings?.find((r) => r.step === step)?.rating;
  };

  const getMarker = (step: number): Marker | undefined => {
    return markers?.find((m) => m.step === step);
  };

  return (
    <div>
      {/* 색상 바 */}
      <div
        className="flex rounded-lg overflow-hidden"
        style={{ border: `1px solid ${darkBg ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.08)'}` }}
      >
        {steps.map(({ step, color }, idx) => {
          const isFirst = idx === 0;
          const isLast = idx === steps.length - 1;
          const textColor = step < 50 ? (darkBg ? '#e2e8f0' : '#1e293b') : '#e2e8f0';

          const rating = getContrastRating(step);

          return (
            <div
              key={step}
              className="flex flex-col items-center justify-between"
              style={{
                flex: 1,
                backgroundColor: color,
                height: '60px',
                borderLeft: isFirst
                  ? 'none'
                  : `1px solid ${darkBg ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.06)'}`,
                borderTopLeftRadius: isFirst ? '8px' : undefined,
                borderBottomLeftRadius: isFirst ? '8px' : undefined,
                borderTopRightRadius: isLast ? '8px' : undefined,
                borderBottomRightRadius: isLast ? '8px' : undefined,
                padding: '6px 0',
              }}
            >
              {/* 상단: 단계 번호 */}
              <span style={{ fontSize: '9px', color: textColor, lineHeight: 1 }}>{step}</span>
              {/* 하단: 접근성 등급 */}
              {rating && (
                <span style={{ fontSize: '8px', color: textColor, lineHeight: 1, opacity: 0.8 }}>
                  {rating}
                </span>
              )}
            </div>
          );
        })}
      </div>

      {/* 마커 행 */}
      {markers && markers.length > 0 && (
        <div className="flex relative" style={{ height: '32px', marginTop: '2px' }}>
          {steps.map(({ step }, idx) => {
            const marker = getMarker(step);
            const pct = (idx / (steps.length - 1)) * 100;

            if (!marker) return null;

            return (
              <div
                key={step}
                className="absolute flex flex-col items-center"
                style={{ left: `calc(${pct}% )`, transform: 'translateX(-50%)' }}
              >
                {/* 점선 */}
                <div
                  style={{
                    width: 0,
                    height: '10px',
                    borderLeft: '1px dashed rgba(156,163,175,0.7)',
                  }}
                />
                {/* 뱃지 */}
                <span
                  className="px-2 rounded"
                  style={{
                    fontSize: '10px',
                    lineHeight: '18px',
                    backgroundColor: badgeBg,
                    color: badgeText,
                    border: '1px solid rgba(255,255,255,0.1)',
                    whiteSpace: 'nowrap',
                  }}
                >
                  {marker.label}
                </span>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
};

// ---------- 내부 컴포넌트: TransparencyRow ----------

interface TransparencyRowProps {
  label: string;
  rgbBase: string; // 'rgba base: "0,0,0"' or "255,255,255"
  markerStep: number;
  markerLabel: string;
  isDark: boolean;
}

const TransparencyRow = ({
  label,
  rgbBase,
  markerStep,
  markerLabel,
  isDark,
}: TransparencyRowProps) => {
  const sectionCardBg = isDark ? 'rgba(255,255,255,0.03)' : '#f5f5f5';
  const badgeBg = '#374151';
  const badgeText = isDark ? '#e5e7eb' : '#fff';

  const checkerboard = `repeating-conic-gradient(#d0d0d0 0% 25%, #fff 0% 50%)`;

  return (
    <div className="flex flex-col gap-2">
      <span className="font-bold text-body-2" style={{ color: isDark ? '#dfe2f3' : '#0f172a' }}>
        {label}
      </span>
      <div className="rounded-xl p-4" style={{ backgroundColor: sectionCardBg }}>
        {/* 체크보드 + 색상 오버레이 */}
        <div
          className="relative rounded-lg overflow-hidden"
          style={{
            background: checkerboard,
            backgroundSize: '16px 16px',
          }}
        >
          <div className="flex">
            {TRANSPARENCY_STEPS.map((step) => {
              const alpha = step / 100;
              const color = `rgba(${rgbBase},${alpha})`;
              const isBlack = rgbBase === '0,0,0';
              const textColor = isBlack
                ? step < 50
                  ? '#333'
                  : '#fff'
                : step < 50
                  ? '#333'
                  : '#aaa';

              return (
                <div
                  key={step}
                  className="flex items-end justify-center"
                  style={{
                    flex: 1,
                    height: '52px',
                    backgroundColor: color,
                    paddingBottom: '4px',
                  }}
                >
                  <span style={{ fontSize: '8px', color: textColor, lineHeight: 1 }}>{step}</span>
                </div>
              );
            })}
          </div>
        </div>

        {/* 마커 */}
        <div className="relative flex" style={{ height: '30px', marginTop: '2px' }}>
          {TRANSPARENCY_STEPS.map((step, idx) => {
            if (step !== markerStep) return null;
            const pct = (idx / (TRANSPARENCY_STEPS.length - 1)) * 100;

            return (
              <div
                key={step}
                className="absolute flex flex-col items-center"
                style={{ left: `${pct}%`, transform: 'translateX(-50%)' }}
              >
                <div
                  style={{
                    width: 0,
                    height: '10px',
                    borderLeft: '1px dashed rgba(156,163,175,0.7)',
                  }}
                />
                <span
                  className="px-2 rounded"
                  style={{
                    fontSize: '10px',
                    lineHeight: '18px',
                    backgroundColor: badgeBg,
                    color: badgeText,
                    border: '1px solid rgba(255,255,255,0.1)',
                    whiteSpace: 'nowrap',
                  }}
                >
                  {markerLabel}
                </span>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};

// ---------- Props ----------

interface ColorPaletteContentProps {
  theme: DesignTheme;
}

// ---------- 컴포넌트 ----------

export const ColorPaletteContent = ({ theme }: ColorPaletteContentProps) => {
  const t = theme;
  const isDark = t.mode === 'dark';
  const [activeColorTab, setActiveColorTab] = useState<'rule' | 'definition' | 'token'>('rule');

  const sectionCardBg = isDark ? 'rgba(255,255,255,0.03)' : '#f5f5f5';
  const dividerColor = isDark ? 'rgba(255,255,255,0.08)' : '#e5e7eb';

  return (
    <div className="p-12" style={{ color: t.textPrimary }}>
      <div style={{ maxWidth: '64rem' }}>
        {/* ── 섹션 1: 헤더 ── */}
        <div className="pb-10 mb-12 border-b border-solid" style={{ borderColor: dividerColor }}>
          <p
            className="font-mono text-body-2 uppercase tracking-widest mb-3"
            style={{ color: t.textAccent }}
          >
            Foundations
          </p>
          <h1 className="text-4xl font-bold mb-4" style={{ color: t.textPrimary }}>
            Color
          </h1>
          <p className="text-lg" style={{ color: t.textSecondary }}>
            브랜드 아이덴티티를 유지하기 위한 컬러 사용 기준입니다. <br />
            핵심 정보를 강조하고 현재 상태를 명확하게 전달합니다.
          </p>
        </div>

        {/* 탭 전환 */}
        <div className="flex gap-1 mb-10" style={{ borderBottom: `1px solid ${dividerColor}` }}>
          {(['rule', 'usage', 'token'] as const).map((tab) => {
            const isActive = activeColorTab === tab;
            const label = tab === 'rule' ? 'Rule' : tab === 'usage' ? 'Definition' : 'Token';
            return (
              <button
                key={tab}
                onClick={() => setActiveColorTab(tab)}
                className="px-5 py-2.5 text-body-2 font-semibold border-none cursor-pointer bg-transparent"
                style={{
                  color: isActive ? t.textAccent : t.textMuted,
                  borderBottom: isActive ? `2px solid ${t.textAccent}` : '2px solid transparent',
                }}
              >
                {label}
              </button>
            );
          })}
        </div>

        {/* ── Rule 탭 콘텐츠 ── */}
        {activeColorTab === 'rule' && (
          <div className="mb-16">
            {/* 네이밍 공식 */}
            <div className="mb-12">
              <h2 className="text-xl font-bold mb-3" style={{ color: t.textPrimary }}>
                네이밍 공식
              </h2>
              <div
                className="rounded-lg px-6 py-5 font-mono text-lg font-bold mb-4"
                style={{
                  backgroundColor: isDark ? 'rgba(255,255,255,0.03)' : '#f5f5f5',
                  color: t.textAccent,
                }}
              >
                --{'{property}'}-{'{role}'}[-{'{variant}'}]
              </div>
              <p className="text-body-2 leading-relaxed" style={{ color: t.textSecondary }}>
                모든 컬러 토큰은{' '}
                <strong style={{ color: t.textPrimary }}>Property-Role-Variant</strong> 3계층 구조를
                따릅니다. Property는 색상이 적용되는 CSS 속성, Role은 의미 기반 역할, Variant는 상태
                수식어입니다.
              </p>
            </div>

            {/* Property */}
            <div className="mb-12">
              <h2 className="text-xl font-bold mb-4" style={{ color: t.textPrimary }}>
                Property (기본 속성)
              </h2>
              <div
                className="rounded-lg overflow-hidden"
                style={{ border: `1px solid ${dividerColor}` }}
              >
                {[
                  {
                    prop: 'fg',
                    desc: '텍스트, 아이콘 등 UI의 전경 요소에 사용하는 색상입니다.',
                    css: 'color',
                    example: '--fg-default, --fg-sub',
                  },
                  {
                    prop: 'bg',
                    desc: '전체 화면 또는 UI의 배경에 사용하는 색상입니다.',
                    css: 'background',
                    example: '--bg-surface, --bg-card',
                  },
                  {
                    prop: 'stroke',
                    desc: '경계를 구분하는 선 또는 UI 요소의 윤곽선에 사용하는 색상입니다.',
                    css: 'border, outline',
                    example: '--stroke-default, --stroke-light',
                  },
                ].map((row, i) => (
                  <div
                    key={row.prop}
                    className="flex items-center gap-6 px-5 py-4"
                    style={{
                      borderTop: i > 0 ? `1px solid ${dividerColor}` : undefined,
                      backgroundColor: isDark ? 'rgba(255,255,255,0.02)' : '#fafafa',
                    }}
                  >
                    <span
                      className="font-mono text-body-2 font-bold shrink-0 w-16"
                      style={{ color: t.textAccent }}
                    >
                      {row.prop}
                    </span>
                    <div className="flex-1">
                      <div className="text-body-2" style={{ color: t.textSecondary }}>
                        {row.desc}
                      </div>
                    </div>
                    <span className="font-mono text-caption" style={{ color: t.textMuted }}>
                      {row.example}
                    </span>
                  </div>
                ))}
              </div>
            </div>

            {/* Role & Variant */}
            <div className="mb-12">
              <h2 className="text-xl font-bold mb-4" style={{ color: t.textPrimary }}>
                Role (역할) & Variant (변형)
              </h2>
              <div className="grid grid-cols-2 gap-6">
                {/* Role */}
                <div
                  className="rounded-lg overflow-hidden"
                  style={{ border: `1px solid ${dividerColor}` }}
                >
                  <div
                    className="px-5 py-3 text-caption font-bold uppercase tracking-wider"
                    style={{
                      backgroundColor: isDark ? 'rgba(255,255,255,0.04)' : '#f1f5f9',
                      color: t.textMuted,
                    }}
                  >
                    Role
                  </div>
                  {[
                    { name: 'default', desc: '기본 상태' },
                    { name: 'sub', desc: '보조, 2차 계층' },
                    { name: 'disabled', desc: '비활성, 플레이스홀더' },
                    { name: 'base', desc: '최하단 배경' },
                    { name: 'surface', desc: '패널, 컨테이너' },
                    { name: 'elevated', desc: '부각된 영역' },
                    { name: 'card', desc: '카드, 플로팅' },
                    { name: 'overlay', desc: '오버레이, 딤' },
                  ].map((row) => (
                    <div
                      key={row.name}
                      className="flex items-center justify-between px-5 py-2.5"
                      style={{
                        borderTop: `1px solid ${dividerColor}`,
                        backgroundColor: isDark ? 'rgba(255,255,255,0.02)' : '#fafafa',
                      }}
                    >
                      <span
                        className="font-mono text-body-2 font-semibold"
                        style={{ color: t.textPrimary }}
                      >
                        {row.name}
                      </span>
                      <span className="text-caption" style={{ color: t.textMuted }}>
                        {row.desc}
                      </span>
                    </div>
                  ))}
                </div>

                {/* Variant */}
                <div
                  className="rounded-lg overflow-hidden"
                  style={{ border: `1px solid ${dividerColor}` }}
                >
                  <div
                    className="px-5 py-3 text-caption font-bold uppercase tracking-wider"
                    style={{
                      backgroundColor: isDark ? 'rgba(255,255,255,0.04)' : '#f1f5f9',
                      color: t.textMuted,
                    }}
                  >
                    Variant (선택)
                  </div>
                  {[
                    { name: 'hover', desc: '호버 상태' },
                    { name: 'active', desc: '활성/선택 상태' },
                    { name: 'muted', desc: '약한 강도' },
                    { name: 'light', desc: '밝은 변형' },
                    { name: 'subtle', desc: '미묘한 변형' },
                  ].map((row) => (
                    <div
                      key={row.name}
                      className="flex items-center justify-between px-5 py-2.5"
                      style={{
                        borderTop: `1px solid ${dividerColor}`,
                        backgroundColor: isDark ? 'rgba(255,255,255,0.02)' : '#fafafa',
                      }}
                    >
                      <span
                        className="font-mono text-body-2 font-semibold"
                        style={{ color: t.textPrimary }}
                      >
                        {row.name}
                      </span>
                      <span className="text-caption" style={{ color: t.textMuted }}>
                        {row.desc}
                      </span>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            {/* Semantic 토큰 매핑 */}
            <div
              className="mb-12 pt-12 border-t border-solid"
              style={{ borderColor: dividerColor }}
            >
              <h2 className="text-xl font-bold mb-2" style={{ color: t.textPrimary }}>
                Semantic Tokens
              </h2>
              <p className="text-body-2 mb-6" style={{ color: t.textSecondary }}>
                용도에 따라 의미를 부여한 토큰. 테마 전환 시 값이 변경됩니다.
              </p>

              {/* bg, fg, stroke 테이블 */}
              {[
                {
                  title: 'bg — Background',
                  tokens: [
                    {
                      legacy: '--bg0',
                      name: '--bg-base',
                      value: '#0a0e1a',
                      desc: '페이지 최하단 배경',
                    },
                    {
                      legacy: '--bg1',
                      name: '--bg-surface',
                      value: '#0f1524',
                      desc: '패널, 사이드바',
                    },
                    {
                      legacy: '--bg2',
                      name: '--bg-elevated',
                      value: '#121929',
                      desc: '테이블 헤더, 섹션',
                    },
                    {
                      legacy: '--bg3',
                      name: '--bg-card',
                      value: '#1a2236',
                      desc: '카드, 플로팅 요소',
                    },
                    {
                      legacy: '--bgH',
                      name: '--bg-surface-hover',
                      value: '#1e2844',
                      desc: '호버 인터랙션',
                    },
                  ],
                },
                {
                  title: 'fg — Foreground',
                  tokens: [
                    { legacy: '--t1', name: '--fg-default', value: '#edf0f7', desc: '기본 텍스트' },
                    { legacy: '--t2', name: '--fg-sub', value: '#c0c8dc', desc: '보조 텍스트' },
                    {
                      legacy: '--t3',
                      name: '--fg-disabled',
                      value: '#9ba3b8',
                      desc: '비활성, 플레이스홀더',
                    },
                  ],
                },
                {
                  title: 'stroke — Border',
                  tokens: [
                    {
                      legacy: '--bd',
                      name: '--stroke-default',
                      value: '#1e2a42',
                      desc: '기본 구분선',
                    },
                    {
                      legacy: '--bdL',
                      name: '--stroke-light',
                      value: '#2a3a5c',
                      desc: '연한 구분선',
                    },
                  ],
                },
              ].map((group) => (
                <div key={group.title} className="mb-8">
                  <h3 className="text-body-2 font-bold mb-3" style={{ color: t.textAccent }}>
                    {group.title}
                  </h3>
                  <div
                    className="rounded-lg overflow-hidden"
                    style={{ border: `1px solid ${dividerColor}` }}
                  >
                    {/* 헤더 */}
                    <div
                      className="grid grid-cols-[80px_1fr_1fr_80px_1fr] gap-2 px-4 py-2.5 text-caption font-bold uppercase tracking-wider"
                      style={{
                        backgroundColor: isDark ? 'rgba(255,255,255,0.04)' : '#f1f5f9',
                        color: t.textMuted,
                      }}
                    >
                      <span>Legacy</span>
                      <span>New</span>
                      <span>설명</span>
                      <span>Value</span>
                      <span>Preview</span>
                    </div>
                    {group.tokens.map((tk) => (
                      <div
                        key={tk.name}
                        className="grid grid-cols-[80px_1fr_1fr_80px_1fr] gap-2 items-center px-4 py-3"
                        style={{
                          borderTop: `1px solid ${dividerColor}`,
                          backgroundColor: isDark ? 'rgba(255,255,255,0.02)' : '#fafafa',
                        }}
                      >
                        <span
                          className="font-mono text-caption line-through"
                          style={{ color: t.textMuted }}
                        >
                          {tk.legacy}
                        </span>
                        <span
                          className="font-mono text-caption font-semibold"
                          style={{ color: t.textPrimary }}
                        >
                          {tk.name}
                        </span>
                        <span className="text-caption" style={{ color: t.textMuted }}>
                          {tk.desc}
                        </span>
                        <span className="font-mono text-caption" style={{ color: t.textSecondary }}>
                          {tk.value}
                        </span>
                        <div className="flex items-center gap-2">
                          <div
                            style={{
                              width: 20,
                              height: 20,
                              borderRadius: 4,
                              backgroundColor: tk.value,
                              border: `1px solid ${dividerColor}`,
                              flexShrink: 0,
                            }}
                          />
                          <span className="font-mono text-caption" style={{ color: t.textMuted }}>
                            {hexToRgb(tk.value)}
                          </span>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              ))}
            </div>

            {/* Palette 토큰 매핑 */}
            <div
              className="mb-12 pt-12 border-t border-solid"
              style={{ borderColor: dividerColor }}
            >
              <h2 className="text-xl font-bold mb-2" style={{ color: t.textPrimary }}>
                Palette Tokens
              </h2>
              <p className="text-body-2 mb-6" style={{ color: t.textSecondary }}>
                fg · bg · stroke 모든 맥락에서 사용되는 색상 원본. Property 접두사 없이{' '}
                <code className="font-mono" style={{ color: t.textAccent }}>
                  --color-*
                </code>{' '}
                로 참조합니다.
              </p>

              <div
                className="rounded-lg overflow-hidden"
                style={{ border: `1px solid ${dividerColor}` }}
              >
                <div
                  className="grid grid-cols-[80px_1fr_80px_1fr_1fr] gap-2 px-4 py-2.5 text-caption font-bold uppercase tracking-wider"
                  style={{
                    backgroundColor: isDark ? 'rgba(255,255,255,0.04)' : '#f1f5f9',
                    color: t.textMuted,
                  }}
                >
                  <span>Legacy</span>
                  <span>New</span>
                  <span>Value</span>
                  <span>Preview</span>
                  <span>설명</span>
                </div>
                {[
                  { legacy: '--cyan', name: '--color-accent', value: '#06b6d4', desc: '주요 강조' },
                  { legacy: '--blue', name: '--color-info', value: '#3b82f6', desc: '정보' },
                  { legacy: '--red', name: '--color-danger', value: '#ef4444', desc: '위험' },
                  { legacy: '--orange', name: '--color-warning', value: '#f97316', desc: '주의' },
                  { legacy: '--yellow', name: '--color-caution', value: '#eab308', desc: '경고' },
                  { legacy: '--green', name: '--color-success', value: '#22c55e', desc: '성공' },
                  {
                    legacy: '--purple',
                    name: '--color-tertiary',
                    value: '#a855f7',
                    desc: '3차 강조',
                  },
                  {
                    legacy: '--boom',
                    name: '--color-boom',
                    value: '#f59e0b',
                    desc: '오일붐 (도메인)',
                  },
                  {
                    legacy: '--boomH',
                    name: '--color-boom-hover',
                    value: '#fbbf24',
                    desc: '오일붐 호버',
                  },
                ].map((tk) => (
                  <div
                    key={tk.name}
                    className="grid grid-cols-[80px_1fr_80px_1fr_1fr] gap-2 items-center px-4 py-3"
                    style={{
                      borderTop: `1px solid ${dividerColor}`,
                      backgroundColor: isDark ? 'rgba(255,255,255,0.02)' : '#fafafa',
                    }}
                  >
                    <span
                      className="font-mono text-caption line-through"
                      style={{ color: t.textMuted }}
                    >
                      {tk.legacy}
                    </span>
                    <span
                      className="font-mono text-caption font-semibold"
                      style={{ color: t.textPrimary }}
                    >
                      {tk.name}
                    </span>
                    <span className="font-mono text-caption" style={{ color: t.textSecondary }}>
                      {tk.value}
                    </span>
                    <div className="flex items-center gap-2">
                      <div
                        style={{
                          width: 20,
                          height: 20,
                          borderRadius: 4,
                          backgroundColor: tk.value,
                          border: `1px solid ${dividerColor}`,
                          flexShrink: 0,
                        }}
                      />
                      <span className="font-mono text-caption" style={{ color: t.textMuted }}>
                        {hexToRgb(tk.value)}
                      </span>
                    </div>
                    <span className="text-caption" style={{ color: t.textMuted }}>
                      {tk.desc}
                    </span>
                  </div>
                ))}
              </div>
            </div>

            {/* Non-color 토큰 */}
            <div
              className="mb-12 pt-12 border-t border-solid"
              style={{ borderColor: dividerColor }}
            >
              <h2 className="text-xl font-bold mb-2" style={{ color: t.textPrimary }}>
                Non-color Tokens
              </h2>
              <p className="text-body-2 mb-6" style={{ color: t.textSecondary }}>
                타이포그래피, 라운딩 등 색상 외 토큰.
              </p>

              <div
                className="rounded-lg overflow-hidden"
                style={{ border: `1px solid ${dividerColor}` }}
              >
                <div
                  className="grid grid-cols-[80px_1fr_1fr_1fr] gap-2 px-4 py-2.5 text-caption font-bold uppercase tracking-wider"
                  style={{
                    backgroundColor: isDark ? 'rgba(255,255,255,0.04)' : '#f1f5f9',
                    color: t.textMuted,
                  }}
                >
                  <span>Legacy</span>
                  <span>New</span>
                  <span>Category</span>
                  <span>설명</span>
                </div>
                {[
                  {
                    legacy: '--fK',
                    name: '--font-korean',
                    category: 'Typography',
                    desc: '한국어 UI 폰트 스택',
                  },
                  {
                    legacy: '--fM',
                    name: '--font-mono',
                    category: 'Typography',
                    desc: '수치/데이터 폰트 스택',
                  },
                  {
                    legacy: '--rS',
                    name: '--radius-sm',
                    category: 'Radius',
                    desc: '작은 라운딩 (6px)',
                  },
                  {
                    legacy: '--rM',
                    name: '--radius-md',
                    category: 'Radius',
                    desc: '중간 라운딩 (8px)',
                  },
                ].map((tk) => (
                  <div
                    key={tk.name}
                    className="grid grid-cols-[80px_1fr_1fr_1fr] gap-2 items-center px-4 py-3"
                    style={{
                      borderTop: `1px solid ${dividerColor}`,
                      backgroundColor: isDark ? 'rgba(255,255,255,0.02)' : '#fafafa',
                    }}
                  >
                    <span
                      className="font-mono text-caption line-through"
                      style={{ color: t.textMuted }}
                    >
                      {tk.legacy}
                    </span>
                    <span
                      className="font-mono text-caption font-semibold"
                      style={{ color: t.textPrimary }}
                    >
                      {tk.name}
                    </span>
                    <span
                      className="text-caption font-mono px-2 py-0.5 rounded"
                      style={{
                        color: t.textAccent,
                        backgroundColor: isDark ? 'rgba(6,182,212,0.05)' : 'rgba(6,182,212,0.08)',
                      }}
                    >
                      {tk.category}
                    </span>
                    <span className="text-caption" style={{ color: t.textMuted }}>
                      {tk.desc}
                    </span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        )}

        {/* ── Usage 탭 콘텐츠 ── */}
        {activeColorTab === 'usage' && (
          <>
            {/* ── 섹션 2: Primary color ── */}
            <div className="mb-16">
              <h2 className="text-xl font-bold mb-3" style={{ color: t.textPrimary }}>
                프라이머리 색상(primary color)
              </h2>
              <p className="mb-8 text-body-2" style={{ color: t.textSecondary }}>
                Primary 색상은 해양 방제 시스템의 핵심 인터랙션 요소에 사용됩니다. Cyan~Blue
                그라디언트가 주요 액션 버튼과 강조 요소에 적용됩니다.
              </p>

              <div className="flex flex-col gap-6">
                {/* Light Mode */}
                <div className="rounded-xl p-6" style={{ backgroundColor: '#f5f5f5' }}>
                  <p className="font-bold text-body-2 mb-4" style={{ color: '#1e293b' }}>
                    Light Mode
                  </p>
                  <ColorScaleBar
                    steps={PRIMARY_STEPS}
                    markers={[
                      { step: 5, label: 'surface' },
                      { step: 40, label: 'base' },
                      { step: 60, label: 'text' },
                    ]}
                    contrastRatings={PRIMARY_CONTRAST_RATINGS}
                    darkBg={false}
                    isDark={isDark}
                  />
                </div>

                {/* Dark Mode */}
                <div className="rounded-xl p-6" style={{ backgroundColor: '#1a1a2e' }}>
                  <p className="font-bold text-body-2 mb-4" style={{ color: '#fff' }}>
                    Dark Mode
                  </p>
                  <ColorScaleBar
                    steps={PRIMARY_STEPS}
                    markers={[
                      { step: 20, label: 'text' },
                      { step: 50, label: 'base' },
                      { step: 95, label: 'surface' },
                    ]}
                    contrastRatings={PRIMARY_CONTRAST_RATINGS}
                    darkBg={true}
                    isDark={isDark}
                  />
                </div>
              </div>
            </div>

            {/* ── 섹션 3: Secondary color ── */}
            <div
              className="mb-16 pt-12 border-t border-solid"
              style={{ borderColor: dividerColor }}
            >
              <h2 className="text-xl font-bold mb-3" style={{ color: t.textPrimary }}>
                세컨더리 색상(secondary color)
              </h2>
              <p className="mb-8 text-body-2" style={{ color: t.textSecondary }}>
                Secondary 색상은 UI의 배경과 구조적 요소에 사용됩니다. Navy 계열로 다크 모드의
                깊이감과 계층 구조를 표현합니다.
              </p>

              <div className="flex flex-col gap-6">
                {/* Light Mode */}
                <div className="rounded-xl p-6" style={{ backgroundColor: '#f5f5f5' }}>
                  <p className="font-bold text-body-2 mb-4" style={{ color: '#1e293b' }}>
                    Light Mode
                  </p>
                  <ColorScaleBar
                    steps={SECONDARY_STEPS}
                    markers={[
                      { step: 5, label: 'surface' },
                      { step: 70, label: 'base' },
                      { step: 80, label: 'text' },
                    ]}
                    contrastRatings={SECONDARY_CONTRAST_RATINGS}
                    darkBg={false}
                    isDark={isDark}
                  />
                </div>

                {/* Dark Mode */}
                <div className="rounded-xl p-6" style={{ backgroundColor: '#1a1a2e' }}>
                  <p className="font-bold text-body-2 mb-4" style={{ color: '#fff' }}>
                    Dark Mode
                  </p>
                  <ColorScaleBar
                    steps={SECONDARY_STEPS}
                    markers={[
                      { step: 20, label: 'text' },
                      { step: 60, label: 'base' },
                      { step: 95, label: 'surface' },
                    ]}
                    contrastRatings={SECONDARY_CONTRAST_RATINGS}
                    darkBg={true}
                    isDark={isDark}
                  />
                </div>
              </div>
            </div>

            {/* ── 섹션 4: Gray color ── */}
            <div
              className="mb-16 pt-12 border-t border-solid"
              style={{ borderColor: dividerColor }}
            >
              <h2 className="text-xl font-bold mb-3" style={{ color: t.textPrimary }}>
                그레이 색상(gray color) / 네추럴, 중립 색상
              </h2>
              <p className="mb-2 text-body-2" style={{ color: t.textSecondary }}>
                Gray 색상은 주로 배경, 텍스트, 구분 선에 사용되며, 시각적 집중을 방해하지 않고
                콘텐츠에 초점을 맞추도록 도와주는 중립적인 색상이다.
              </p>
              <p className="mb-8 text-body-2" style={{ color: t.textSecondary }}>
                표준형 스타일의 그레이 색상은 주요 색상과 선명한 모드에서의 조화를 고려해 블루
                그레이 계열을 사용한다.
              </p>

              <div className="rounded-xl p-6" style={{ backgroundColor: sectionCardBg }}>
                <ColorScaleBar steps={GRAY_STEPS} isDark={isDark} />
              </div>
            </div>

            {/* ── 섹션 5: Transparent ── */}
            <div
              className="mb-16 pt-12 border-t border-solid"
              style={{ borderColor: dividerColor }}
            >
              <h2 className="text-2xl font-bold mb-2" style={{ color: t.textPrimary }}>
                Transparent
              </h2>
              <p className="mb-8 text-body-2" style={{ color: t.textSecondary }}>
                투명도와 음영을 활용하여 정보의 집중도를 조절합니다. 배경의 음영 처리는 투명도 65%를
                사용합니다.
              </p>

              <div className="flex flex-col gap-8">
                {/* Black */}
                <TransparencyRow
                  label="Black"
                  rgbBase="0,0,0"
                  markerStep={65}
                  markerLabel="dim"
                  isDark={isDark}
                />

                {/* White */}
                <TransparencyRow
                  label="White"
                  rgbBase="255,255,255"
                  markerStep={45}
                  markerLabel="indicator"
                  isDark={isDark}
                />
              </div>
            </div>
          </>
        )}

        {/* ── Token 탭 콘텐츠 ── */}
        {activeColorTab === 'token' && (
          <div className="mb-16">
            <div className="mb-6">
              <p
                className="font-mono text-body-2 uppercase tracking-widest mb-1"
                style={{ color: t.textAccent }}
              >
                Primitive
              </p>
              <p className="text-body-2" style={{ color: t.textMuted }}>
                UI 전반에서 사용하는 기본 색조 팔레트. 테마와 무관하게 고정된 값입니다.
              </p>
            </div>
            {COLOR_TOKEN_GROUPS.map((group, groupIdx) => (
              <div key={group.title}>
                <h2
                  className="text-xl font-bold mb-4"
                  style={{
                    color: t.textPrimary,
                    marginTop: groupIdx === 0 ? 0 : '3rem',
                  }}
                >
                  {group.title}
                </h2>
                <div>
                  {group.tokens.map((token) => (
                    <div
                      key={token.name}
                      className="flex items-center py-4"
                      style={{ borderBottom: `1px solid ${dividerColor}` }}
                    >
                      {/* 색상 스와치 */}
                      <div
                        style={{
                          width: '40px',
                          height: '40px',
                          backgroundColor: token.hex,
                          borderRadius: '8px',
                          border: `1px solid ${dividerColor}`,
                          flexShrink: 0,
                        }}
                      />
                      {/* 토큰명 */}
                      <span
                        className="font-mono text-body-2 font-semibold ml-4"
                        style={{ color: t.textPrimary }}
                      >
                        {token.name}
                      </span>
                      {/* HEX + RGB */}
                      <div className="ml-auto text-right">
                        <div className="font-mono text-body-2" style={{ color: t.textPrimary }}>
                          {token.hex}
                        </div>
                        <div className="font-mono text-caption" style={{ color: t.textMuted }}>
                          {hexToRgb(token.hex)}
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
};

export default ColorPaletteContent;
