// FloatDropdownContent.tsx — Dropdown/ComboBox 카탈로그

import { useState } from 'react';
import type { DesignTheme } from '../designTheme';
import { ComboBox } from '@common/components/ui/ComboBox';

interface FloatDropdownContentProps {
  theme: DesignTheme;
}

const DEMO_OPTIONS = [
  { value: 'option1', label: '연속 유출 (Continuous)' },
  { value: 'option2', label: '순간 유출 (Instantaneous)' },
  { value: 'option3', label: '밀도가스 유출 (Dense Gas)' },
  { value: 'option4', label: '수중 유출 (Subsurface)' },
  { value: 'option5', label: '증발 유출 (Evaporative)' },
];

const ALGORITHM_OPTIONS = [
  { value: 'slick', label: 'Slick Formation Model' },
  { value: 'gnome', label: 'GNOME (NOAA)' },
  { value: 'medslik', label: 'MEDSLIK-II' },
];

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

  const [demoValue, setDemoValue] = useState('option1');
  const [algoValue, setAlgoValue] = useState('slick');

  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 }}>
          Dropdown
        </h2>
        <p className="font-korean text-body-2 leading-6" style={{ color: t.textSecondary }}>
          트리거 요소에{' '}
          <code
            className="font-mono text-caption px-1.5 py-0.5 rounded"
            style={{
              backgroundColor: isDark ? 'rgba(76,215,246,0.08)' : 'rgba(6,182,212,0.06)',
              color: t.textAccent,
            }}
          >
            position: absolute
          </code>
          로 부착되는 선택 목록. 5개 이상의 선택지가 있는 단일 선택에 사용한다. 프로젝트 공통
          컴포넌트는{' '}
          <code
            className="font-mono text-caption px-1.5 py-0.5 rounded"
            style={{
              backgroundColor: isDark ? 'rgba(76,215,246,0.08)' : 'rgba(6,182,212,0.06)',
              color: t.textAccent,
            }}
          >
            ComboBox
          </code>
          다.
        </p>
      </div>

      {/* ── Live Preview ── */}
      <div className="flex flex-col gap-4">
        <div className="flex items-center gap-2">
          <h3 className="font-sans text-base font-bold" style={{ color: t.textPrimary }}>
            Live Preview
          </h3>
          <span
            className="font-mono text-caption px-2 py-0.5 rounded"
            style={{
              backgroundColor: isDark ? 'rgba(34,197,94,0.10)' : 'rgba(34,197,94,0.08)',
              color: '#22c55e',
            }}
          >
            interactive
          </span>
        </div>
        <div
          className="rounded-lg border border-solid p-6 flex flex-col gap-6"
          style={{ backgroundColor: t.cardBg, borderColor: t.cardBorder }}
        >
          <div className="grid grid-cols-2 gap-6">
            <div className="flex flex-col gap-2">
              <span className="font-korean text-caption" style={{ color: t.textMuted }}>
                유출 유형
              </span>
              <ComboBox
                value={demoValue}
                onChange={setDemoValue}
                options={DEMO_OPTIONS}
                placeholder="유형 선택"
              />
              <span className="font-mono text-caption" style={{ color: t.textAccent }}>
                선택값: {DEMO_OPTIONS.find((o) => o.value === demoValue)?.label}
              </span>
            </div>
            <div className="flex flex-col gap-2">
              <span className="font-korean text-caption" style={{ color: t.textMuted }}>
                예측 알고리즘
              </span>
              <ComboBox
                value={algoValue}
                onChange={setAlgoValue}
                options={ALGORITHM_OPTIONS}
                placeholder="알고리즘 선택"
              />
              <span className="font-mono text-caption" style={{ color: t.textAccent }}>
                선택값: {ALGORITHM_OPTIONS.find((o) => o.value === algoValue)?.label}
              </span>
            </div>
          </div>
          <p className="font-korean text-caption" style={{ color: t.textMuted }}>
            위 컴포넌트는{' '}
            <code className="font-mono" style={{ color: t.textAccent }}>
              @common/components/ui/ComboBox
            </code>
            를 직접 렌더링합니다. 외부 클릭 시 자동으로 닫힙니다.
          </p>
        </div>
      </div>

      {/* ── Anatomy ── */}
      <div className="flex flex-col gap-4">
        <h3 className="font-sans text-base font-bold" style={{ color: t.textPrimary }}>
          Anatomy
        </h3>
        <div className="grid grid-cols-2 gap-6">
          {/* 구조 다이어그램 */}
          <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 }}
            >
              Structure
            </span>
            <div className="flex flex-col gap-0.5 p-4">
              {/* 트리거 */}
              <div
                className="rounded border border-solid flex items-center justify-between px-3 py-2"
                style={{
                  backgroundColor: isDark ? '#1b1f2c' : '#ffffff',
                  borderColor: isDark ? 'rgba(66,71,84,0.40)' : '#e2e8f0',
                }}
              >
                <span className="font-korean text-caption" style={{ color: t.textSecondary }}>
                  선택된 옵션
                </span>
                <span className="font-mono text-caption" style={{ color: t.textMuted }}>
                  ▼
                </span>
              </div>
              {/* 리스트 */}
              <div
                className="rounded border border-solid flex flex-col overflow-hidden mt-0.5"
                style={{
                  backgroundColor: isDark ? '#1b1f2c' : '#ffffff',
                  borderColor: isDark ? 'rgba(66,71,84,0.40)' : '#e2e8f0',
                  boxShadow: '0 4px 12px rgba(0,0,0,0.25)',
                }}
              >
                {['옵션 A (선택됨)', '옵션 B', '옵션 C', '옵션 D'].map((opt, i) => (
                  <div
                    key={opt}
                    className="px-3 py-1.5"
                    style={{
                      backgroundColor:
                        i === 0
                          ? isDark
                            ? 'rgba(76,215,246,0.10)'
                            : 'rgba(6,182,212,0.07)'
                          : 'transparent',
                      borderTop: i === 0 ? 'none' : `1px solid ${t.tableRowBorder}`,
                      borderLeft: i === 0 ? `2px solid ${t.textAccent}` : '2px solid transparent',
                    }}
                  >
                    <span
                      className="font-korean text-caption"
                      style={{ color: i === 0 ? t.textAccent : t.textSecondary }}
                    >
                      {opt}
                    </span>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* 위치 지정 규칙 */}
          <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 }}
            >
              Position Rules
            </span>
            <div className="flex flex-col gap-2">
              {[
                { label: 'trigger', rule: 'position: relative', desc: '드롭다운 기준점' },
                {
                  label: 'list',
                  rule: 'position: absolute, top: calc(100% + 2px)',
                  desc: '트리거 바로 아래',
                },
                { label: 'z-index', rule: 'z-[1000]', desc: '모달(9999) 아래, 일반 UI 위' },
                { label: 'max-height', rule: '200px + overflow-y: auto', desc: '스크롤 한계' },
                { label: 'animation', rule: 'fadeSlideDown 0.15s ease-out', desc: '부드러운 등장' },
              ].map((item) => (
                <div key={item.label} className="flex items-start gap-2">
                  <span
                    className="font-mono text-caption rounded px-1.5 py-0.5 shrink-0"
                    style={{
                      backgroundColor: isDark ? 'rgba(76,215,246,0.08)' : 'rgba(6,182,212,0.06)',
                      color: t.textAccent,
                    }}
                  >
                    {item.label}
                  </span>
                  <div className="flex flex-col gap-0.5">
                    <span className="font-mono text-caption" style={{ color: t.textPrimary }}>
                      {item.rule}
                    </span>
                    <span className="font-korean text-caption" style={{ color: t.textMuted }}>
                      {item.desc}
                    </span>
                  </div>
                </div>
              ))}
            </div>
          </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="grid grid-cols-4 gap-3">
          {[
            {
              label: 'Default',
              desc: '닫힘, 값 미선택',
              borderColor: isDark ? 'rgba(66,71,84,0.40)' : '#e2e8f0',
              textColor: t.textMuted,
            },
            {
              label: 'Open',
              desc: '리스트 표시 중',
              borderColor: t.textAccent,
              textColor: t.textAccent,
            },
            {
              label: 'Selected',
              desc: '값 선택됨',
              borderColor: isDark ? 'rgba(66,71,84,0.40)' : '#e2e8f0',
              textColor: t.textPrimary,
            },
            {
              label: 'Disabled',
              desc: '비활성',
              borderColor: isDark ? 'rgba(66,71,84,0.20)' : '#f1f5f9',
              textColor: isDark ? 'rgba(140,144,159,0.40)' : '#cbd5e1',
            },
          ].map((state) => (
            <div
              key={state.label}
              className="rounded-lg border border-solid p-3 flex flex-col gap-2"
              style={{ backgroundColor: t.cardBg, borderColor: t.cardBorder }}
            >
              <span className="font-mono text-caption font-bold" style={{ color: t.textPrimary }}>
                {state.label}
              </span>
              <div
                className="rounded border border-solid flex items-center justify-between px-2 py-1.5"
                style={{
                  borderColor: state.borderColor,
                  opacity: state.label === 'Disabled' ? 0.45 : 1,
                }}
              >
                <span className="font-korean text-caption" style={{ color: state.textColor }}>
                  {state.label === 'Selected' ? '연속 유출' : '선택하세요'}
                </span>
                <span className="font-mono text-caption" style={{ color: state.textColor }}>
                  {state.label === 'Open' ? '▲' : '▼'}
                </span>
              </div>
              <span className="font-korean text-caption" style={{ color: t.textMuted }}>
                {state.desc}
              </span>
            </div>
          ))}
        </div>
      </div>

      {/* ── Props 테이블 ── */}
      <div className="flex flex-col gap-4">
        <h3 className="font-sans text-base font-bold" style={{ color: t.textPrimary }}>
          Props (ComboBox)
        </h3>
        <div
          className="rounded-lg border border-solid overflow-hidden"
          style={{ backgroundColor: t.tableContainerBg, borderColor: t.cardBorder }}
        >
          <div
            className="grid"
            style={{
              gridTemplateColumns: '140px 160px 80px 1fr',
              backgroundColor: t.tableHeaderBg,
              borderBottom: `1px solid ${t.tableRowBorder}`,
            }}
          >
            {['Prop', 'Type', 'Required', 'Description'].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>
          {[
            { prop: 'value', type: 'string | number', required: 'Y', desc: '현재 선택값' },
            {
              prop: 'onChange',
              type: '(value: string) => void',
              required: 'Y',
              desc: '선택 변경 콜백',
            },
            {
              prop: 'options',
              type: 'ComboBoxOption[]',
              required: 'Y',
              desc: '{ value, label } 배열',
            },
            { prop: 'placeholder', type: 'string', required: 'N', desc: '미선택 상태 표시 텍스트' },
            { prop: 'className', type: 'string', required: 'N', desc: '트리거 추가 스타일' },
          ].map((row, idx) => (
            <div
              key={row.prop}
              className="grid items-center"
              style={{
                gridTemplateColumns: '140px 160px 80px 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.textAccent }}>
                  {row.prop}
                </span>
              </div>
              <div className="py-2.5 px-4">
                <span className="font-mono text-caption" style={{ color: t.textSecondary }}>
                  {row.type}
                </span>
              </div>
              <div className="py-2.5 px-4">
                <span
                  className="font-mono text-caption"
                  style={{ color: row.required === 'Y' ? '#22c55e' : t.textMuted }}
                >
                  {row.required}
                </span>
              </div>
              <div className="py-2.5 px-4">
                <span className="font-korean text-caption" style={{ color: t.textSecondary }}>
                  {row.desc}
                </span>
              </div>
            </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="grid grid-cols-2 gap-3">
          {[
            {
              title: 'clickOutside 처리 필수',
              desc: 'useEffect + mousedown 이벤트로 외부 클릭 감지. ComboBox 내부에 구현됨.',
              type: 'rule',
            },
            {
              title: '5개 이상 선택지',
              desc: '4개 이하는 Radio 버튼 또는 버튼 그룹으로 대체. 너무 많은 옵션은 검색 필터 추가 고려.',
              type: 'rule',
            },
            {
              title: '모달 내부 사용 시',
              desc: '모달 z-index(9999) 내부에 있으면 드롭다운 z-[1000]이 자연스럽게 모달 위에 렌더링됨.',
              type: 'info',
            },
            {
              title: '너비 상속',
              desc: '드롭다운 리스트는 트리거와 동일한 너비. left: 0, right: 0으로 너비 상속.',
              type: 'info',
            },
          ].map((item) => (
            <div
              key={item.title}
              className="rounded border border-solid px-4 py-3 flex flex-col gap-1"
              style={{
                backgroundColor: t.cardBg,
                borderColor:
                  item.type === 'rule'
                    ? isDark
                      ? 'rgba(76,215,246,0.20)'
                      : 'rgba(6,182,212,0.20)'
                    : t.cardBorder,
              }}
            >
              <span
                className="font-korean text-body-2 font-medium"
                style={{ color: t.textPrimary }}
              >
                {item.title}
              </span>
              <span
                className="font-korean text-caption leading-5"
                style={{ color: t.textSecondary }}
              >
                {item.desc}
              </span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default FloatDropdownContent;
