// FloatOverlayContent.tsx — Map Overlay + Map Popup 카탈로그

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

interface FloatOverlayContentProps {
  theme: DesignTheme;
}

const OVERLAY_CASES = [
  {
    component: 'BacktrackReplayBar',
    position: '하단 중앙',
    zIndex: 'z-40',
    pointerEvents: 'auto',
    desc: '역추적 재생 컨트롤 바. 재생/일시정지/슬라이더.',
    source: 'common/components/map/BacktrackReplayBar.tsx',
  },
  {
    component: 'MeasureOverlay',
    position: '마커 위치',
    zIndex: 'z-40',
    pointerEvents: 'auto',
    desc: '거리 측정 마커 "지우기" 버튼. MapLibre Marker 컴포넌트 활용.',
    source: 'common/components/map/MeasureOverlay.tsx',
  },
  {
    component: 'OilDetectionOverlay',
    position: 'inset-0 + 우하단 정보',
    zIndex: 'z-[15]',
    pointerEvents: 'none',
    desc: '유류 탐지 결과 마스크 렌더링. OffscreenCanvas 기반. 정보 패널만 클릭 가능.',
    source: 'tabs/aerial/components/OilDetectionOverlay.tsx',
  },
  {
    component: 'WeatherMapOverlay',
    position: 'absolute inset-0',
    zIndex: 'map layer',
    pointerEvents: 'none',
    desc: '기상 데이터 레이어 오버레이.',
    source: 'tabs/weather/components/WeatherMapOverlay.tsx',
  },
  {
    component: 'OceanForecastOverlay',
    position: 'absolute inset-0',
    zIndex: 'map layer',
    pointerEvents: 'none',
    desc: '해양 예측 레이어 오버레이.',
    source: 'tabs/weather/components/OceanForecastOverlay.tsx',
  },
];

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

  const mapMockBg = isDark ? '#0f1a2e' : '#c8d8e8';
  const mapGridColor = isDark ? 'rgba(255,255,255,0.04)' : 'rgba(0,0,0,0.06)';

  return (
    <div className="px-8 py-10 flex flex-col gap-12 max-w-[1200px]">
      {/* ── 개요 ── */}
      <div className="flex flex-col gap-3">
        <h2 className="font-sans text-xl font-bold" style={{ color: t.textPrimary }}>
          Overlay
        </h2>
        <p className="font-korean text-sm leading-6" style={{ color: t.textSecondary }}>
          지도 컨테이너 위에
          <code
            className="font-mono text-xs px-1.5 py-0.5 mx-1 rounded"
            style={{
              backgroundColor: isDark ? 'rgba(76,215,246,0.08)' : 'rgba(6,182,212,0.06)',
              color: t.textAccent,
            }}
          >
            position: absolute
          </code>
          로 레이어되는 UI. 백드롭 없이 지도 위에 기능 UI를 표시한다. Modal과 달리 화면 상호작용을
          차단하지 않으며, 지도 컨테이너의 크기 변화에 반응한다.
        </p>
      </div>

      {/* ── Overlay vs Modal 비교 ── */}
      <div className="flex flex-col gap-4">
        <h3 className="font-sans text-base font-bold" style={{ color: t.textPrimary }}>
          Overlay vs Modal
        </h3>
        <div
          className="rounded-lg border border-solid overflow-hidden"
          style={{ backgroundColor: t.tableContainerBg, borderColor: t.cardBorder }}
        >
          <div
            className="grid"
            style={{
              gridTemplateColumns: '160px 1fr 1fr',
              backgroundColor: t.tableHeaderBg,
              borderBottom: `1px solid ${t.tableRowBorder}`,
            }}
          >
            {['속성', 'Overlay', 'Modal'].map((col) => (
              <div key={col} className="py-2.5 px-4">
                <span
                  className="font-mono text-caption uppercase"
                  style={{ letterSpacing: '1px', color: t.textMuted }}
                >
                  {col}
                </span>
              </div>
            ))}
          </div>
          {[
            { attr: 'position', overlay: 'absolute (지도 기준)', modal: 'fixed (뷰포트 기준)' },
            { attr: '백드롭', overlay: '없음', modal: 'rgba(0,0,0,0.65) + blur' },
            { attr: '클릭 차단', overlay: 'pointer-events: none (일반)', modal: '전체 화면 차단' },
            { attr: 'z-index', overlay: 'z-40 (지도 UI 위)', modal: 'z-[9999] (최상위)' },
            { attr: '크기 기준', overlay: '지도 컨테이너 = 100%', modal: '고정 너비 (380~720px)' },
            {
              attr: '닫기 방식',
              overlay: '기능 비활성화 시 사라짐',
              modal: '닫기 버튼 / 백드롭 클릭',
            },
          ].map((row, idx) => (
            <div
              key={row.attr}
              className="grid items-center"
              style={{
                gridTemplateColumns: '160px 1fr 1fr',
                borderTop: idx === 0 ? 'none' : `1px solid ${t.tableRowBorder}`,
              }}
            >
              <div className="py-2.5 px-4">
                <span className="font-mono text-caption" style={{ color: t.textMuted }}>
                  {row.attr}
                </span>
              </div>
              <div className="py-2.5 px-4">
                <span className="font-korean text-xs" style={{ color: t.textSecondary }}>
                  {row.overlay}
                </span>
              </div>
              <div className="py-2.5 px-4">
                <span className="font-korean text-xs" style={{ color: t.textSecondary }}>
                  {row.modal}
                </span>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* ── 지도 목업 다이어그램 ── */}
      <div className="flex flex-col gap-4">
        <h3 className="font-sans text-base font-bold" style={{ color: t.textPrimary }}>
          Overlay 배치 다이어그램
        </h3>
        <div
          className="rounded-lg border border-solid p-4 flex flex-col gap-3"
          style={{ backgroundColor: t.cardBg, borderColor: t.cardBorder }}
        >
          <span
            className="font-mono text-caption uppercase"
            style={{ letterSpacing: '1px', color: t.textMuted }}
          >
            지도 컨테이너 기준 절대 위치
          </span>

          {/* 지도 목업 */}
          <div
            className="relative rounded overflow-hidden"
            style={{ backgroundColor: mapMockBg, minHeight: '280px' }}
          >
            {/* 격자 배경 (지도 모사) */}
            <div
              className="absolute inset-0"
              style={{
                backgroundImage: `linear-gradient(${mapGridColor} 1px, transparent 1px), linear-gradient(90deg, ${mapGridColor} 1px, transparent 1px)`,
                backgroundSize: '40px 40px',
              }}
            />

            {/* 지도 레이블 */}
            <div className="absolute top-3 left-3">
              <span
                className="font-mono text-caption"
                style={{ color: isDark ? 'rgba(255,255,255,0.25)' : 'rgba(0,0,0,0.25)' }}
              >
                MapView (position: relative)
              </span>
            </div>

            {/* OilDetectionOverlay — 전체 영역 */}
            <div
              className="absolute inset-0 pointer-events-none"
              style={{ border: `1.5px dashed rgba(6,182,212,0.35)`, borderRadius: '4px' }}
            >
              <div className="absolute top-10 left-3">
                <span
                  className="font-mono text-caption rounded px-1.5 py-0.5"
                  style={{ backgroundColor: 'rgba(6,182,212,0.15)', color: t.textAccent }}
                >
                  OilDetectionOverlay — inset-0, z-[15], pointer-events:none
                </span>
              </div>
            </div>

            {/* MeasureOverlay 마커 */}
            <div className="absolute" style={{ top: '80px', left: '120px' }}>
              <div
                className="rounded-full w-3 h-3 border-2 border-solid"
                style={{ backgroundColor: '#ef4444', borderColor: '#ffffff' }}
              />
              <div
                className="rounded border border-solid px-2 py-0.5 mt-1"
                style={{
                  backgroundColor: isDark ? 'rgba(239,68,68,0.85)' : 'rgba(239,68,68,0.90)',
                  borderColor: 'transparent',
                }}
              >
                <span className="font-korean text-caption" style={{ color: '#ffffff' }}>
                  지우기
                </span>
              </div>
              <div className="absolute -top-4 left-8">
                <span
                  className="font-mono text-caption rounded px-1 py-0.5"
                  style={{
                    backgroundColor: 'rgba(239,68,68,0.15)',
                    color: '#ef4444',
                    whiteSpace: 'nowrap',
                  }}
                >
                  MeasureOverlay — Marker 위치
                </span>
              </div>
            </div>

            {/* BacktrackReplayBar — 하단 중앙 */}
            <div
              className="absolute bottom-3 left-1/2 rounded border border-solid px-4 py-2 flex items-center gap-3"
              style={{
                transform: 'translateX(-50%)',
                backgroundColor: isDark ? 'rgba(23,27,40,0.92)' : 'rgba(255,255,255,0.92)',
                borderColor: isDark ? 'rgba(66,71,84,0.40)' : '#e2e8f0',
                backdropFilter: 'blur(6px)',
              }}
            >
              <span className="font-mono text-caption" style={{ color: t.textAccent }}>
                ◀◀
              </span>
              <span className="font-mono text-caption" style={{ color: t.textAccent }}>
                ▶
              </span>
              <div
                className="w-24 h-1 rounded"
                style={{ backgroundColor: isDark ? 'rgba(66,71,84,0.40)' : '#e2e8f0' }}
              >
                <div className="h-1 w-10 rounded" style={{ backgroundColor: t.textAccent }} />
              </div>
              <span className="font-mono text-caption" style={{ color: t.textMuted }}>
                ▶▶
              </span>
            </div>
            <div className="absolute bottom-14 left-1/2" style={{ transform: 'translateX(-50%)' }}>
              <span
                className="font-mono text-caption rounded px-1.5 py-0.5"
                style={{
                  backgroundColor: isDark ? 'rgba(76,215,246,0.12)' : 'rgba(6,182,212,0.10)',
                  color: t.textAccent,
                  whiteSpace: 'nowrap',
                }}
              >
                BacktrackReplayBar — bottom-3 center, z-40
              </span>
            </div>
          </div>
        </div>
      </div>

      {/* ── Map Popup 서브패턴 ── */}
      <div className="flex flex-col gap-4">
        <h3 className="font-sans text-base font-bold" style={{ color: t.textPrimary }}>
          Map Popup — 위치 앵커드 패턴
        </h3>
        <div
          className="rounded-lg border border-solid p-5 flex flex-col gap-4"
          style={{ backgroundColor: t.cardBg, borderColor: t.cardBorder }}
        >
          <p className="font-korean text-sm leading-6" style={{ color: t.textSecondary }}>
            <strong>ScatPopup</strong>은 지도 마커에 앵커된 컨텍스트 팝업이다. Modal(fixed 뷰포트
            중앙)과 달리 마커 위치에서 동적으로 좌표를 계산하며, 지도 패닝·줌 시 위치가 함께
            업데이트된다.
          </p>
          <div className="grid grid-cols-3 gap-3">
            {[
              {
                label: '위치 계산',
                value: 'map.project(lngLat)',
                desc: '지도 좌표 → 픽셀 좌표 변환',
              },
              { label: '위치 업데이트', value: 'map.on("move")', desc: '패닝/줌 시 재계산' },
              { label: 'z-index', value: 'z-[9999]', desc: '다른 오버레이 위' },
            ].map((item) => (
              <div
                key={item.label}
                className="rounded border border-solid px-3 py-2.5 flex flex-col gap-1"
                style={{ borderColor: t.cardBorder }}
              >
                <span className="font-mono text-caption" style={{ color: t.textMuted }}>
                  {item.label}
                </span>
                <span className="font-mono text-xs" style={{ color: t.textAccent }}>
                  {item.value}
                </span>
                <span className="font-korean text-caption" style={{ color: t.textSecondary }}>
                  {item.desc}
                </span>
              </div>
            ))}
          </div>
          <div
            className="rounded border border-solid px-3 py-2"
            style={{
              backgroundColor: isDark ? 'rgba(234,179,8,0.06)' : 'rgba(234,179,8,0.04)',
              borderColor: 'rgba(234,179,8,0.25)',
            }}
          >
            <span className="font-korean text-xs" style={{ color: '#eab308' }}>
              주의: ScatPopup은 MapLibre GL JS의 Popup/Marker 컴포넌트가 아닌 React DOM으로 구현됨.
              지도 컨테이너 내부에 position: absolute로 렌더링된다.
            </span>
          </div>
          <div className="flex items-center gap-2">
            <span className="font-mono text-caption" style={{ color: t.textMuted }}>
              Source:
            </span>
            <span className="font-mono text-caption" style={{ color: t.textAccent }}>
              tabs/scat/components/ScatPopup.tsx
            </span>
          </div>
        </div>
      </div>

      {/* ── 사용 사례 목록 ── */}
      <div className="flex flex-col gap-4">
        <h3 className="font-sans text-base font-bold" style={{ color: t.textPrimary }}>
          현재 사용 사례
        </h3>
        <div
          className="rounded-lg border border-solid overflow-hidden"
          style={{ backgroundColor: t.tableContainerBg, borderColor: t.cardBorder }}
        >
          <div
            className="grid"
            style={{
              gridTemplateColumns: '200px 120px 80px 100px 1fr',
              backgroundColor: t.tableHeaderBg,
              borderBottom: `1px solid ${t.tableRowBorder}`,
            }}
          >
            {['Component', 'Position', 'Z-Index', 'Events', 'Description'].map((col) => (
              <div key={col} className="py-2.5 px-3">
                <span
                  className="font-mono text-caption uppercase"
                  style={{ letterSpacing: '1px', color: t.textMuted }}
                >
                  {col}
                </span>
              </div>
            ))}
          </div>
          {OVERLAY_CASES.map((item, idx) => (
            <div
              key={item.component}
              className="grid items-start"
              style={{
                gridTemplateColumns: '200px 120px 80px 100px 1fr',
                borderTop: idx === 0 ? 'none' : `1px solid ${t.tableRowBorder}`,
              }}
            >
              <div className="py-2.5 px-3">
                <span className="font-mono text-xs" style={{ color: t.textPrimary }}>
                  {item.component}
                </span>
              </div>
              <div className="py-2.5 px-3">
                <span className="font-korean text-caption" style={{ color: t.textSecondary }}>
                  {item.position}
                </span>
              </div>
              <div className="py-2.5 px-3">
                <span
                  className="font-mono text-caption rounded border border-solid px-1.5 py-0.5"
                  style={{ color: t.textAccent, borderColor: t.cardBorder }}
                >
                  {item.zIndex}
                </span>
              </div>
              <div className="py-2.5 px-3">
                <span
                  className="font-mono text-caption rounded px-1.5 py-0.5"
                  style={{
                    color: item.pointerEvents === 'none' ? t.textMuted : '#22c55e',
                    backgroundColor:
                      item.pointerEvents === 'none'
                        ? isDark
                          ? 'rgba(140,144,159,0.10)'
                          : 'rgba(148,163,184,0.10)'
                        : isDark
                          ? 'rgba(34,197,94,0.10)'
                          : 'rgba(34,197,94,0.08)',
                  }}
                >
                  {item.pointerEvents}
                </span>
              </div>
              <div className="py-2.5 px-3">
                <span className="font-korean text-xs leading-5" style={{ color: t.textSecondary }}>
                  {item.desc}
                </span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default FloatOverlayContent;