// FoundationsOverview.tsx — Foundations 탭 Overview 카드 그리드

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

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

interface OverviewCard {
  id: string;
  label: string;
  thumbnail: (isDark: boolean) => React.ReactNode;
}

// ---------- 썸네일 구현 ----------

const ColorThumbnail = ({ isDark }: { isDark: boolean }) => {
  // 3x3 도트 그리드: gray / pink / cyan 컬럼, 어두운 순
  const dots: string[][] = [
    ['#9ca3af', '#f9a8d4', '#67e8f9'],
    ['#4b5563', '#ec4899', '#06b6d4'],
    ['#1f2937', '#9d174d', '#0e7490'],
  ];

  return (
    <div className="w-full h-full flex items-center justify-center">
      <div
        className="grid gap-3"
        style={{ gridTemplateColumns: 'repeat(3, 1fr)', gridTemplateRows: 'repeat(3, 1fr)' }}
      >
        {dots.map((row, ri) =>
          row.map((color, ci) => (
            <div
              key={`${ri}-${ci}`}
              className="rounded-full"
              style={{
                width: '28px',
                height: '28px',
                backgroundColor: color,
                boxShadow: isDark ? `0 0 8px ${color}55` : `0 1px 3px rgba(0,0,0,0.15)`,
              }}
            />
          )),
        )}
      </div>
    </div>
  );
};

const TypographyThumbnail = ({ isDark }: { isDark: boolean }) => (
  <div className="w-full h-full flex items-center justify-center gap-1">
    <span
      style={{
        fontSize: '72px',
        lineHeight: 1,
        fontWeight: 700,
        fontFamily: 'sans-serif',
        color: isDark ? 'rgba(223,226,243,0.90)' : 'rgba(15,23,42,0.85)',
        letterSpacing: '-2px',
      }}
    >
      가
    </span>
    <span
      style={{
        fontSize: '64px',
        lineHeight: 1,
        fontWeight: 700,
        fontFamily: 'serif',
        color: isDark ? 'rgba(76,215,246,0.80)' : 'rgba(6,182,212,0.80)',
        letterSpacing: '-1px',
      }}
    >
      a
    </span>
  </div>
);

const RadiusThumbnail = ({ isDark }: { isDark: boolean }) => {
  const items = [
    { radius: '0px', size: 36 },
    { radius: '6px', size: 36 },
    { radius: '12px', size: 36 },
    { radius: '50%', size: 36 },
  ];

  const borderColor = isDark ? 'rgba(76,215,246,0.55)' : 'rgba(6,182,212,0.65)';
  const bgColor = isDark ? 'rgba(76,215,246,0.08)' : 'rgba(6,182,212,0.08)';

  return (
    <div className="w-full h-full flex items-center justify-center gap-4">
      {items.map(({ radius, size }) => (
        <div
          key={radius}
          style={{
            width: size,
            height: size,
            borderRadius: radius,
            border: `2px solid ${borderColor}`,
            backgroundColor: bgColor,
          }}
        />
      ))}
    </div>
  );
};

const LayoutThumbnail = ({ isDark }: { isDark: boolean }) => {
  const accent = isDark ? 'rgba(76,215,246,0.18)' : 'rgba(6,182,212,0.14)';
  const accentStrong = isDark ? 'rgba(76,215,246,0.40)' : 'rgba(6,182,212,0.38)';
  const faint = isDark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)';

  return (
    <div className="w-full h-full flex flex-col items-center justify-center gap-2 px-8">
      {/* 헤더 바 */}
      <div className="w-full rounded" style={{ height: '14px', backgroundColor: accentStrong }} />
      {/* 2열 바디 */}
      <div className="w-full flex gap-2" style={{ flex: 1, maxHeight: '52px' }}>
        <div className="rounded" style={{ width: '28%', backgroundColor: accent }} />
        <div className="flex flex-col gap-1.5" style={{ flex: 1 }}>
          <div className="w-full rounded" style={{ height: '12px', backgroundColor: faint }} />
          <div className="w-3/4 rounded" style={{ height: '12px', backgroundColor: faint }} />
          <div className="w-full rounded" style={{ height: '12px', backgroundColor: faint }} />
        </div>
      </div>
      {/* 푸터 바 */}
      <div className="w-full rounded" style={{ height: '10px', backgroundColor: accent }} />
    </div>
  );
};

// ---------- 카드 정의 ----------

const OVERVIEW_CARDS: OverviewCard[] = [
  {
    id: 'color',
    label: 'Color',
    thumbnail: (isDark) => <ColorThumbnail isDark={isDark} />,
  },
  {
    id: 'typography',
    label: 'Typography',
    thumbnail: (isDark) => <TypographyThumbnail isDark={isDark} />,
  },
  {
    id: 'radius',
    label: 'Radius',
    thumbnail: (isDark) => <RadiusThumbnail isDark={isDark} />,
  },
  {
    id: 'layout',
    label: 'Layout',
    thumbnail: (isDark) => <LayoutThumbnail isDark={isDark} />,
  },
];

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

interface FoundationsOverviewProps {
  theme: DesignTheme;
  onNavigate: (id: string) => void;
}

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

const FoundationsOverview = ({ theme, onNavigate }: FoundationsOverviewProps) => {
  const t = theme;
  const isDark = t.mode === 'dark';

  const cardBg = isDark ? 'rgba(255,255,255,0.03)' : '#f5f5f5';
  const cardBorder = isDark ? 'rgba(255,255,255,0.06)' : '#e5e5e5';
  const thumbnailBorderBottom = isDark ? 'rgba(255,255,255,0.06)' : '#e0e0e0';

  return (
    <div className="pt-24 px-12 pb-16 max-w-5xl flex flex-col gap-12">
      {/* ── 헤더 영역 ── */}
      <div className="flex flex-col gap-3">
        <span
          className="font-mono text-caption font-semibold uppercase"
          style={{ letterSpacing: '1.4px', color: t.textAccent }}
        >
          Foundations
        </span>
        <h1 className="font-sans text-4xl font-bold leading-tight" style={{ color: t.textPrimary }}>
          Overview
        </h1>
        <p className="font-korean text-body-2 leading-6" style={{ color: t.textSecondary }}>
          디자인의 기반이 되는 핵심 요소 사용 기준입니다.
        </p>
      </div>

      {/* ── 3열 카드 그리드 ── */}
      <div className="grid gap-5" style={{ gridTemplateColumns: 'repeat(3, 1fr)' }}>
        {OVERVIEW_CARDS.map((card) => (
          <div
            key={card.id}
            className="rounded-lg border border-solid flex flex-col cursor-pointer transition-all duration-200"
            style={{
              backgroundColor: cardBg,
              borderColor: cardBorder,
            }}
            onClick={() => onNavigate(card.id)}
            onMouseEnter={(e) => {
              const el = e.currentTarget;
              el.style.transform = 'scale(1.025)';
              el.style.boxShadow = isDark
                ? '0 8px 24px rgba(0,0,0,0.35)'
                : '0 6px 18px rgba(0,0,0,0.10)';
              el.style.borderColor = isDark ? 'rgba(76,215,246,0.22)' : 'rgba(6,182,212,0.28)';
            }}
            onMouseLeave={(e) => {
              const el = e.currentTarget;
              el.style.transform = 'scale(1)';
              el.style.boxShadow = 'none';
              el.style.borderColor = cardBorder;
            }}
          >
            {/* 썸네일 영역 */}
            <div
              className="h-48 rounded-t-lg overflow-hidden"
              style={{
                borderBottom: `1px solid ${thumbnailBorderBottom}`,
              }}
            >
              {card.thumbnail(isDark)}
            </div>

            {/* 카드 라벨 */}
            <div className="px-5 py-4">
              <span
                className="font-sans text-body-2 font-semibold"
                style={{ color: t.textPrimary }}
              >
                {card.label}
              </span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default FoundationsOverview;
