// LayoutContent.tsx — WING-OPS Layout 콘텐츠 (다크/라이트 테마 지원)

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

// ---------- 데이터 타입 ----------

interface Breakpoint {
  name: string;
  prefix: string;
  minWidth: string;
  inUse: boolean;
  note?: string;
}

interface DeviceSpec {
  device: string;
  width: string;
  columns: string;
  gutter: string;
  margin: string;
  supported: boolean;
}

interface SpacingToken {
  className: string;
  rem: string;
  px: string;
  usage: string;
}

interface ZLayer {
  name: string;
  zIndex: number;
  description: string;
  color: string;
}

interface ShellClass {
  className: string;
  role: string;
  styles: string;
}

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

const BREAKPOINTS: Breakpoint[] = [
  { name: 'sm', prefix: 'sm:', minWidth: '640px', inUse: false },
  { name: 'md', prefix: 'md:', minWidth: '768px', inUse: false },
  { name: 'lg', prefix: 'lg:', minWidth: '1024px', inUse: false },
  {
    name: 'xl',
    prefix: 'xl:',
    minWidth: '1280px',
    inUse: true,
    note: 'TopBar 탭 레이블/아이콘 토글',
  },
  { name: '2xl', prefix: '2xl:', minWidth: '1536px', inUse: false },
];

// ---------- Device Specs ----------

const DEVICE_SPECS: DeviceSpec[] = [
  {
    device: 'Desktop',
    width: '≥ 1280px',
    columns: 'flex 기반 가변',
    gutter: 'gap-2 ~ gap-6',
    margin: 'px-5 ~ px-8',
    supported: true,
  },
  {
    device: 'Tablet',
    width: '768px ~ 1279px',
    columns: '-',
    gutter: '-',
    margin: '-',
    supported: false,
  },
  { device: 'Mobile', width: '< 768px', columns: '-', gutter: '-', margin: '-', supported: false },
];

// ---------- Spacing Scale ----------

const SPACING_TOKENS: SpacingToken[] = [
  { className: '0.5', rem: '0.125rem', px: '2px', usage: '미세 간격' },
  { className: '1', rem: '0.25rem', px: '4px', usage: '최소 간격 (gap-1)' },
  { className: '1.5', rem: '0.375rem', px: '6px', usage: '컴팩트 간격 (gap-1.5)' },
  { className: '2', rem: '0.5rem', px: '8px', usage: '기본 간격 (gap-2, p-2)' },
  { className: '2.5', rem: '0.625rem', px: '10px', usage: '중간 간격' },
  { className: '3', rem: '0.75rem', px: '12px', usage: '표준 간격 (gap-3, p-3)' },
  { className: '4', rem: '1rem', px: '16px', usage: '넓은 간격 (p-4, gap-4)' },
  { className: '5', rem: '1.25rem', px: '20px', usage: '패널 패딩 (px-5, py-5)' },
  { className: '6', rem: '1.5rem', px: '24px', usage: '섹션 간격 (gap-6, p-6)' },
  { className: '8', rem: '2rem', px: '32px', usage: '큰 간격 (px-8, gap-8)' },
  { className: '16', rem: '4rem', px: '64px', usage: '최대 간격' },
];

// ---------- Z-Index Layers ----------

const Z_LAYERS: ZLayer[] = [
  { name: 'Tooltip', zIndex: 60, description: '툴팁, 드롭다운 메뉴', color: '#a855f7' },
  { name: 'Popup', zIndex: 50, description: '팝업, 지도 오버레이', color: '#f97316' },
  { name: 'Modal', zIndex: 40, description: '모달 다이얼로그, 백드롭', color: '#ef4444' },
  { name: 'TopBar', zIndex: 30, description: '상단 네비게이션 바', color: '#3b82f6' },
  { name: 'Sidebar', zIndex: 20, description: '사이드바, 패널', color: '#06b6d4' },
  { name: 'Content', zIndex: 10, description: '메인 콘텐츠 영역', color: '#22c55e' },
  { name: 'Base', zIndex: 0, description: '기본 레이어, 배경', color: '#9ba3b8' },
];

// ---------- App Shell Classes ----------

const SHELL_CLASSES: ShellClass[] = [
  {
    className: '.wing-panel',
    role: '탭 콘텐츠 패널',
    styles: 'flex flex-col h-full overflow-hidden',
  },
  {
    className: '.wing-panel-scroll',
    role: '패널 내 스크롤 영역',
    styles: 'flex-1 overflow-y-auto',
  },
  {
    className: '.wing-header-bar',
    role: '패널 헤더',
    styles: 'flex items-center justify-between shrink-0 px-5 border-b',
  },
  { className: '.wing-sidebar', role: '사이드바', styles: 'flex flex-col border-r border-stroke' },
];

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

interface LayoutContentProps {
  theme: DesignTheme;
}

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

export const LayoutContent = ({ theme }: LayoutContentProps) => {
  const t = theme;
  const isDark = t.mode === 'dark';

  return (
    <div className="pt-24 px-8 pb-16 flex flex-col gap-16 items-start justify-start max-w-[1440px]">
      {/* ── 섹션 1: 헤더 + 개요 ── */}
      <div
        className="w-full border-b border-solid pb-8 flex flex-col gap-4"
        style={{ borderColor: isDark ? 'rgba(66,71,84,0.20)' : '#e2e8f0' }}
      >
        <div className="flex flex-col gap-2">
          <h1 className="font-sans text-3xl leading-9 font-bold" style={{ color: t.textPrimary }}>
            Layout
          </h1>
          <p className="font-korean text-sm leading-5" style={{ color: t.textSecondary }}>
            WING-OPS는 데스크톱 전용 고정 뷰포트 애플리케이션입니다. 화면 전체를 채우는 고정
            레이아웃(100vh)으로, flex 기반의 패널 구조를 사용합니다.
          </p>
        </div>
        <ul
          className="flex flex-col gap-1 list-disc list-inside font-korean text-sm"
          style={{ color: t.textSecondary }}
        >
          <li>
            뷰포트 고정:{' '}
            <code style={{ color: t.textAccent, fontSize: '12px' }}>
              body {'{'} height: 100vh; overflow: hidden {'}'}
            </code>
          </li>
          <li>레이아웃 수단: flex (2,243회) &gt; grid (~120회) — flex가 주요 레이아웃 수단</li>
          <li>Tailwind CSS 기본 breakpoints/spacing을 사용하며, 커스텀 오버라이드 없음</li>
        </ul>
      </div>

      {/* ── 섹션 2: Breakpoints ── */}
      <div className="w-full flex flex-col gap-8">
        <div className="flex flex-col gap-2">
          <h2 className="font-sans text-2xl leading-8 font-bold" style={{ color: t.textPrimary }}>
            Breakpoints
          </h2>
          <p className="font-korean text-sm leading-5" style={{ color: t.textSecondary }}>
            Tailwind CSS 기본 breakpoints를 사용합니다. 현재 프로젝트는 데스크톱 전용으로,{' '}
            <code style={{ color: t.textAccent, fontSize: '12px' }}>xl:</code> 접두사만 제한적으로
            사용합니다.
          </p>
        </div>

        <div
          className="rounded-lg border border-solid overflow-hidden w-full"
          style={{
            backgroundColor: t.tableContainerBg,
            borderColor: t.cardBorder,
            boxShadow: t.cardShadow,
          }}
        >
          <div
            className="grid"
            style={{
              gridTemplateColumns: '100px 100px 120px 100px 1fr',
              backgroundColor: t.tableHeaderBg,
              borderBottom: `1px solid ${t.tableRowBorder}`,
            }}
          >
            {(['Name', 'Prefix', 'Min Width', 'Status', 'Note'] as const).map((col) => (
              <div key={col} className="py-3 px-4">
                <span
                  className="font-mono text-[10px] font-medium uppercase"
                  style={{ letterSpacing: '1px', color: t.textMuted }}
                >
                  {col}
                </span>
              </div>
            ))}
          </div>

          {BREAKPOINTS.map((bp, idx) => (
            <div
              key={bp.name}
              className="grid items-center"
              style={{
                gridTemplateColumns: '100px 100px 120px 100px 1fr',
                borderTop: idx === 0 ? 'none' : `1px solid ${t.tableRowBorder}`,
              }}
            >
              <div className="py-3 px-4">
                <span className="font-mono text-[11px]" style={{ color: t.textPrimary }}>
                  {bp.name}
                </span>
              </div>
              <div className="py-3 px-4">
                <span
                  className="font-mono rounded border border-solid px-2 py-0.5"
                  style={{
                    fontSize: '11px',
                    color: t.textAccent,
                    backgroundColor: t.cardBg,
                    borderColor: t.cardBorder,
                  }}
                >
                  {bp.prefix}
                </span>
              </div>
              <div className="py-3 px-4">
                <span className="font-mono text-[11px]" style={{ color: t.textPrimary }}>
                  {bp.minWidth}
                </span>
              </div>
              <div className="py-3 px-4">
                <span
                  className="font-mono text-[9px] rounded px-1.5 py-0.5"
                  style={{
                    color: bp.inUse
                      ? isDark
                        ? '#22c55e'
                        : '#047857'
                      : isDark
                        ? '#9ba3b8'
                        : '#94a3b8',
                    backgroundColor: bp.inUse
                      ? isDark
                        ? 'rgba(34,197,94,0.10)'
                        : 'rgba(34,197,94,0.08)'
                      : isDark
                        ? 'rgba(134,144,166,0.10)'
                        : 'rgba(148,163,184,0.08)',
                  }}
                >
                  {bp.inUse ? '사용 중' : '미사용'}
                </span>
              </div>
              <div className="py-3 px-4">
                <span className="font-korean text-xs" style={{ color: t.textSecondary }}>
                  {bp.note || '-'}
                </span>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* ── 섹션 3: Device Grid & Spacing ── */}
      <div className="w-full flex flex-col gap-8">
        <div className="flex flex-col gap-2">
          <h2 className="font-sans text-2xl leading-8 font-bold" style={{ color: t.textPrimary }}>
            Device Grid & Spacing
          </h2>
          <p className="font-korean text-sm leading-5" style={{ color: t.textSecondary }}>
            디바이스별 그리드 구성과 여백 패턴입니다. 현재 Desktop만 지원합니다.
          </p>
        </div>

        <div className="grid grid-cols-3 gap-4">
          {DEVICE_SPECS.map((spec) => (
            <div
              key={spec.device}
              className="rounded-lg border border-solid px-5 py-5 flex flex-col gap-4"
              style={{
                backgroundColor: t.cardBg,
                borderColor: spec.supported
                  ? t.cardBorder
                  : isDark
                    ? 'rgba(66,71,84,0.10)'
                    : '#f1f5f9',
                boxShadow: t.cardShadow,
                opacity: spec.supported ? 1 : 0.5,
              }}
            >
              <div className="flex flex-row items-center justify-between">
                <span className="font-sans text-lg font-bold" style={{ color: t.textPrimary }}>
                  {spec.device}
                </span>
                {!spec.supported && (
                  <span
                    className="font-mono text-[9px] rounded px-1.5 py-0.5"
                    style={{
                      color: isDark ? '#f97316' : '#c2410c',
                      backgroundColor: isDark ? 'rgba(249,115,22,0.10)' : 'rgba(249,115,22,0.08)',
                    }}
                  >
                    미지원
                  </span>
                )}
              </div>

              <div className="flex flex-col gap-2">
                {[
                  { label: 'Width', value: spec.width },
                  { label: 'Columns', value: spec.columns },
                  { label: 'Gutter', value: spec.gutter },
                  { label: 'Margin', value: spec.margin },
                ].map((row) => (
                  <div key={row.label} className="flex flex-row justify-between items-center">
                    <span
                      className="font-mono text-[10px] uppercase"
                      style={{ letterSpacing: '0.5px', color: t.textMuted }}
                    >
                      {row.label}
                    </span>
                    <span className="font-mono text-[11px]" style={{ color: t.textPrimary }}>
                      {row.value}
                    </span>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* ── 섹션 4: Spacing Scale ── */}
      <div className="w-full flex flex-col gap-8">
        <div className="flex flex-col gap-2">
          <h2 className="font-sans text-2xl leading-8 font-bold" style={{ color: t.textPrimary }}>
            Spacing Scale
          </h2>
          <p className="font-korean text-sm leading-5" style={{ color: t.textSecondary }}>
            Tailwind CSS 기본 spacing 스케일입니다. gap, padding, margin에 동일하게 적용됩니다.
          </p>
        </div>

        <div
          className="rounded-lg border border-solid overflow-hidden w-full"
          style={{
            backgroundColor: t.tableContainerBg,
            borderColor: t.cardBorder,
            boxShadow: t.cardShadow,
          }}
        >
          <div
            className="grid"
            style={{
              gridTemplateColumns: '100px 120px 80px 1fr 200px',
              backgroundColor: t.tableHeaderBg,
              borderBottom: `1px solid ${t.tableRowBorder}`,
            }}
          >
            {(['Scale', 'REM', 'PX', 'Preview', '용도'] as const).map((col) => (
              <div key={col} className="py-3 px-4">
                <span
                  className="font-mono text-[10px] font-medium uppercase"
                  style={{ letterSpacing: '1px', color: t.textMuted }}
                >
                  {col}
                </span>
              </div>
            ))}
          </div>

          {SPACING_TOKENS.map((token, idx) => (
            <div
              key={token.className}
              className="grid items-center"
              style={{
                gridTemplateColumns: '100px 120px 80px 1fr 200px',
                borderTop: idx === 0 ? 'none' : `1px solid ${t.tableRowBorder}`,
              }}
            >
              <div className="py-3 px-4">
                <span
                  className="font-mono rounded border border-solid px-2 py-0.5"
                  style={{
                    fontSize: '11px',
                    color: t.textAccent,
                    backgroundColor: t.cardBg,
                    borderColor: t.cardBorder,
                  }}
                >
                  {token.className}
                </span>
              </div>
              <div className="py-3 px-4">
                <span className="font-mono text-[11px]" style={{ color: t.textSecondary }}>
                  {token.rem}
                </span>
              </div>
              <div className="py-3 px-4">
                <span className="font-mono text-[11px]" style={{ color: t.textPrimary }}>
                  {token.px}
                </span>
              </div>
              <div className="py-3 px-4 flex items-center">
                <div
                  style={{
                    width: token.px,
                    height: '12px',
                    backgroundColor: isDark ? 'rgba(6,182,212,0.30)' : 'rgba(6,182,212,0.25)',
                    borderRadius: '2px',
                    minWidth: '2px',
                  }}
                />
              </div>
              <div className="py-3 px-4">
                <span className="font-korean text-xs" style={{ color: t.textSecondary }}>
                  {token.usage}
                </span>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* ── 섹션 5: Z-Index Layers ── */}
      <div className="w-full flex flex-col gap-8">
        <div className="flex flex-col gap-2">
          <h2 className="font-sans text-2xl leading-8 font-bold" style={{ color: t.textPrimary }}>
            Z-Index Layers
          </h2>
          <p className="font-korean text-sm leading-5" style={{ color: t.textSecondary }}>
            UI 요소의 레이어 스택 순서입니다. 높은 z-index가 위에 표시됩니다.
          </p>
        </div>

        <div className="flex flex-col gap-0" style={{ maxWidth: '600px' }}>
          {Z_LAYERS.map((layer, idx) => (
            <div
              key={layer.name}
              className="flex flex-row items-stretch"
              style={{ marginLeft: `${idx * 16}px` }}
            >
              {/* z-index 라벨 */}
              <div className="w-12 shrink-0 flex items-center justify-end pr-3">
                <span className="font-mono text-[10px]" style={{ color: t.textMuted }}>
                  {layer.zIndex}
                </span>
              </div>

              {/* 레이어 바 */}
              <div
                className="flex-1 flex flex-row items-center gap-3 px-4 py-3 border border-solid"
                style={{
                  backgroundColor: isDark ? `${layer.color}10` : `${layer.color}08`,
                  borderColor: isDark ? `${layer.color}30` : `${layer.color}25`,
                  borderRadius: '6px',
                  marginBottom: '-1px',
                }}
              >
                <div
                  className="w-2 h-2 rounded-full shrink-0"
                  style={{ backgroundColor: layer.color }}
                />
                <span className="font-mono text-xs font-bold" style={{ color: layer.color }}>
                  {layer.name}
                </span>
                <span className="font-korean text-[11px]" style={{ color: t.textSecondary }}>
                  {layer.description}
                </span>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* ── 섹션 6: App Shell 구조 ── */}
      <div className="w-full flex flex-col gap-8">
        <div className="flex flex-col gap-2">
          <h2 className="font-sans text-2xl leading-8 font-bold" style={{ color: t.textPrimary }}>
            App Shell 구조
          </h2>
          <p className="font-korean text-sm leading-5" style={{ color: t.textSecondary }}>
            WING-OPS 애플리케이션의 기본 레이아웃 구조입니다.
          </p>
        </div>

        {/* 레이아웃 다이어그램 */}
        <div
          className="rounded-lg border border-solid overflow-hidden"
          style={{
            backgroundColor: isDark ? '#0a0e1a' : '#f8fafc',
            borderColor: t.cardBorder,
            boxShadow: t.cardShadow,
            maxWidth: '700px',
          }}
        >
          {/* TopBar */}
          <div
            className="flex items-center justify-between px-4 border-b border-solid"
            style={{
              height: '36px',
              backgroundColor: isDark ? 'rgba(6,182,212,0.08)' : 'rgba(6,182,212,0.06)',
              borderColor: isDark ? 'rgba(6,182,212,0.20)' : 'rgba(6,182,212,0.15)',
            }}
          >
            <span className="font-mono text-[10px] font-bold" style={{ color: '#06b6d4' }}>
              TopBar
            </span>
            <span className="font-mono text-[9px]" style={{ color: t.textMuted }}>
              h-[52px] / shrink-0
            </span>
          </div>

          {/* SubMenuBar */}
          <div
            className="flex items-center justify-between px-4 border-b border-solid"
            style={{
              height: '24px',
              backgroundColor: isDark ? 'rgba(59,130,246,0.06)' : 'rgba(59,130,246,0.04)',
              borderColor: isDark ? 'rgba(59,130,246,0.15)' : 'rgba(59,130,246,0.10)',
            }}
          >
            <span className="font-mono text-[10px] font-bold" style={{ color: '#3b82f6' }}>
              SubMenuBar
            </span>
            <span className="font-mono text-[9px]" style={{ color: t.textMuted }}>
              shrink-0 / 조건부 렌더
            </span>
          </div>

          {/* Content Area */}
          <div className="flex flex-row" style={{ height: '200px' }}>
            {/* Sidebar */}
            <div
              className="flex flex-col items-center justify-center border-r border-solid"
              style={{
                width: '120px',
                backgroundColor: isDark ? 'rgba(168,85,247,0.06)' : 'rgba(168,85,247,0.04)',
                borderColor: isDark ? 'rgba(168,85,247,0.15)' : 'rgba(168,85,247,0.10)',
              }}
            >
              <span className="font-mono text-[10px] font-bold" style={{ color: '#a855f7' }}>
                Sidebar
              </span>
              <span className="font-mono text-[9px] mt-1" style={{ color: t.textMuted }}>
                가변 너비
              </span>
            </div>

            {/* Main Content */}
            <div
              className="flex-1 flex flex-col items-center justify-center"
              style={{
                backgroundColor: isDark ? 'rgba(34,197,94,0.04)' : 'rgba(34,197,94,0.03)',
              }}
            >
              <span className="font-mono text-[10px] font-bold" style={{ color: '#22c55e' }}>
                Content
              </span>
              <span className="font-mono text-[9px] mt-1" style={{ color: t.textMuted }}>
                flex-1 / overflow-y-auto
              </span>
            </div>
          </div>
        </div>

        {/* wing.css 레이아웃 클래스 */}
        <div className="flex flex-col gap-3" style={{ maxWidth: '700px' }}>
          <h3 className="font-korean text-sm font-bold" style={{ color: t.textPrimary }}>
            레이아웃 클래스
          </h3>
          {SHELL_CLASSES.map((cls) => (
            <div
              key={cls.className}
              className="rounded-lg border border-solid px-4 py-3 flex flex-row items-center gap-4"
              style={{
                backgroundColor: t.cardBg,
                borderColor: t.cardBorder,
              }}
            >
              <span
                className="font-mono rounded border border-solid px-2 py-0.5 shrink-0"
                style={{
                  fontSize: '11px',
                  color: t.textAccent,
                  backgroundColor: t.cardBg,
                  borderColor: t.cardBorder,
                }}
              >
                {cls.className}
              </span>
              <span className="font-korean text-xs" style={{ color: t.textSecondary }}>
                {cls.role}
              </span>
              <span className="font-mono text-[10px] ml-auto" style={{ color: t.textMuted }}>
                {cls.styles}
              </span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default LayoutContent;
