// 이 파일이 하는 일: 이 앱이 쓰는 "디자인 재료"를 한 화면에 모아 보여준다.
// 색·글자 크기·여백·모서리 토큰과 Lucide 아이콘 1,600여 개를 검색해서 골라 쓸 수 있다.
//
// 학습 포인트 1: 이런 화면을 "살아있는 스타일 가이드(living style guide)"라고 부른다.
//   디자인 규칙을 문서(그림)로 따로 그려 두면 코드와 금방 어긋난다. 대신 실제 CSS 변수와
//   실제 컴포넌트를 그대로 렌더링하면, 코드를 고치는 순간 이 화면도 같이 바뀐다.
//   "문서가 코드를 설명하는" 게 아니라 "코드가 스스로를 보여주는" 방식이다.
// 학습 포인트 2: 여기서 아이콘 이름을 복사해 쓰면 매번 웹을 뒤질 필요가 없다.
//   재료를 찾는 시간이 줄면 만드는 데 시간을 더 쓸 수 있다 — 도구를 갖추는 것도 실력이다.
import { useMemo, useState } from 'react';
import * as Lucide from 'lucide-react';

// 색 토큰 — global.css의 :root와 짝을 이룬다. 값은 CSS가 갖고 있으므로 여기선 이름만 안다.
// 학습 포인트: 이름만 알고 값은 CSS에서 읽어 오면(getComputedStyle) 다크 모드에서도
// 자동으로 맞는 값이 나온다. 값을 여기 또 적어 두면 두 곳을 고쳐야 하는 중복이 생긴다.
const COLOR_TOKENS = [
  ['--bg', '페이지 배경'],
  ['--card', '카드 배경'],
  ['--ink', '본문 글자'],
  ['--muted', '보조 글자'],
  ['--ink-faint', '더 옅은 글자'],
  ['--line', '테두리·구분선'],
  ['--primary', '브랜드 파랑 (링크·강조)'],
  ['--primary-soft', '파랑 옅은 배경'],
  ['--teal', '성공·완료'],
  ['--amber', '주의'],
  ['--rose', '오류'],
  ['--code-bg', '코드 블록 배경'],
];

const SPACE_TOKENS = ['--space-1', '--space-2', '--space-3', '--space-4', '--space-5', '--space-6', '--space-7'];
const TEXT_TOKENS = ['--text-xs', '--text-sm', '--text-md', '--text-lg', '--text-xl', '--text-2xl'];
const RADIUS_TOKENS = ['--radius-sm', '--radius', '--radius-lg', '--radius-full'];

// CSS 변수의 "지금 값"을 읽는다. 다크 모드면 다크 모드 값이 나온다.
function tokenValue(name) {
  return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
}

function Section({ title, desc, children }) {
  return (
    <section style={{ marginBottom: 'var(--space-7)' }}>
      <h2 style={{ fontSize: 'var(--text-xl)', marginBottom: 'var(--space-2)' }}>{title}</h2>
      <p className="muted" style={{ fontSize: 'var(--text-sm)', marginTop: 0, marginBottom: 'var(--space-4)' }}>
        {desc}
      </p>
      {children}
    </section>
  );
}

export default function DesignPage() {
  const [query, setQuery] = useState('');
  const [copied, setCopied] = useState('');

  // 학습 포인트: lucide-react가 내보내는 것 중 대문자로 시작하는 게 아이콘 컴포넌트다.
  //   useMemo로 한 번만 계산한다 — 5,000개가 넘어서 매 렌더마다 걸러 내면 화면이 버벅인다.
  //   ⚠️ 이 페이지는 라이브러리를 통째로 import하므로 무겁다. 그래서 App.jsx에서
  //   lazy(지연 로딩)로 불러 이 화면에 들어올 때만 내려받게 했다.
  // ⚠️ lucide-react는 아이콘 하나를 이름 3개로 내보낸다: Rocket, RocketIcon, LucideRocket.
  //   전부 세면 5,981개가 나오지만 실제 아이콘은 1,993개다. 별칭을 걸러야 검색 결과에
  //   같은 그림이 세 번 나오지 않는다.
  //   학습 포인트: "목록을 그대로 믿지 말고 무엇이 들어있는지 확인하라" — 개수가
  //   예상과 다르면 대개 중복이나 별칭이다.
  const allIcons = useMemo(
    () => Object.keys(Lucide).filter((k) => /^[A-Z]/.test(k) && !/Icon$/.test(k) && !/^Lucide/.test(k)),
    []
  );

  const icons = useMemo(() => {
    const q = query.trim().toLowerCase();
    const list = q ? allIcons.filter((n) => n.toLowerCase().includes(q)) : allIcons;
    return list.slice(0, 240); // 한 번에 다 그리면 느리다 — 앞에서 240개만.
  }, [allIcons, query]);

  function copy(text) {
    navigator.clipboard?.writeText(text);
    setCopied(text);
    setTimeout(() => setCopied(''), 1200);
  }

  return (
    <div>
      <div className="hero">
        <div className="eyebrow">Design System</div>
        <h1>디자인 재료 모음</h1>
        <p>
          색·글자·여백은 여기 있는 <strong>토큰 이름</strong>만 쓰세요. 값을 직접 적으면 다크 모드에서 깨지고,
          화면마다 미묘하게 어긋납니다. 아이콘은 아래에서 검색해 이름을 복사해 쓰면 됩니다.
        </p>
        <div className="chip-row">
          <span className="chip">클릭하면 복사돼요</span>
          <span className="chip">규약은 ICONS.md</span>
          <span className="chip">아이콘 {allIcons.length.toLocaleString()}개</span>
        </div>
      </div>

      <Section title="색" desc="global.css의 :root에 정의돼 있습니다. 다크 모드에서는 같은 이름이 다른 값으로 바뀝니다.">
        <div className="grid-cards" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(190px, 1fr))' }}>
          {COLOR_TOKENS.map(([name, desc]) => (
            <button
              key={name}
              type="button"
              className="card card-clickable"
              style={{ textAlign: 'left', cursor: 'pointer' }}
              onClick={() => copy(`var(${name})`)}
            >
              <div
                style={{
                  height: 44,
                  borderRadius: 'var(--radius-sm)',
                  background: `var(${name})`,
                  border: '1px solid var(--line)',
                  marginBottom: 'var(--space-2)',
                }}
              />
              <code style={{ fontSize: 'var(--text-sm)', fontWeight: 'var(--weight-bold)' }}>{name}</code>
              <p className="muted" style={{ fontSize: 'var(--text-xs)', margin: '4px 0 0' }}>{desc}</p>
            </button>
          ))}
        </div>
      </Section>

      <Section title="글자 크기" desc="본문은 --text-md(15px)입니다. 13px과 13.5px이 한 화면에 섞이지 않도록 이 계단만 밟으세요.">
        {TEXT_TOKENS.map((t) => (
          <div key={t} style={{ display: 'flex', alignItems: 'baseline', gap: 'var(--space-4)', marginBottom: 'var(--space-2)' }}>
            <code style={{ width: 120, flexShrink: 0, fontSize: 'var(--text-sm)', color: 'var(--primary)' }}>{t}</code>
            <span className="muted" style={{ width: 56, flexShrink: 0, fontSize: 'var(--text-xs)' }}>{tokenValue(t)}</span>
            <span style={{ fontSize: `var(${t})` }}>다람쥐 헌 쳇바퀴에 타고파</span>
          </div>
        ))}
      </Section>

      <Section title="글자 굵기" desc="variable font라 아래 굵기가 전부 파일 하나(285KB)에서 나옵니다.">
        {[['--weight-regular', '본문'], ['--weight-medium', '살짝 강조'], ['--weight-bold', '제목'], ['--weight-black', '숫자·수치']].map(([t, d]) => (
          <div key={t} style={{ display: 'flex', alignItems: 'baseline', gap: 'var(--space-4)', marginBottom: 'var(--space-2)' }}>
            <code style={{ width: 150, flexShrink: 0, fontSize: 'var(--text-sm)', color: 'var(--primary)' }}>{t}</code>
            <span className="muted" style={{ width: 40, flexShrink: 0, fontSize: 'var(--text-xs)' }}>{tokenValue(t)}</span>
            <span style={{ fontSize: 'var(--text-lg)', fontWeight: `var(${t})` }}>어썸데브 학습 플랫폼 {d}</span>
          </div>
        ))}
      </Section>

      <Section title="여백" desc="4의 배수 사다리입니다. 이 계단만 밟으면 화면 요소들이 저절로 정렬됩니다.">
        {SPACE_TOKENS.map((t) => (
          <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-4)', marginBottom: 6 }}>
            <code style={{ width: 120, flexShrink: 0, fontSize: 'var(--text-sm)', color: 'var(--primary)' }}>{t}</code>
            <span className="muted" style={{ width: 56, flexShrink: 0, fontSize: 'var(--text-xs)' }}>{tokenValue(t)}</span>
            <div style={{ width: `var(${t})`, height: 20, background: 'var(--primary)', borderRadius: 3 }} />
          </div>
        ))}
      </Section>

      <Section title="모서리" desc="카드는 --radius, 작은 요소는 --radius-sm, 배지·알약 모양은 --radius-full.">
        <div style={{ display: 'flex', gap: 'var(--space-4)', flexWrap: 'wrap' }}>
          {RADIUS_TOKENS.map((t) => (
            <div key={t} style={{ textAlign: 'center' }}>
              <div
                style={{
                  width: 84, height: 56, background: 'var(--primary-soft)',
                  border: '1px solid var(--line)', borderRadius: `var(${t})`, marginBottom: 6,
                }}
              />
              <code style={{ fontSize: 'var(--text-xs)' }}>{t}</code>
            </div>
          ))}
        </div>
      </Section>

      <Section
        title="아이콘"
        desc="Lucide 아이콘입니다. 이름을 클릭하면 import 구문이 복사됩니다. 굵기는 항상 strokeWidth={1.5}로 맞추세요."
      >
        <input
          className="input"
          type="search"
          placeholder="아이콘 검색 (영문) — database, shield, rocket …"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          style={{ marginBottom: 'var(--space-4)' }}
          aria-label="아이콘 검색"
        />
        <p className="muted" style={{ fontSize: 'var(--text-sm)', marginTop: 0 }}>
          {query ? `"${query}" 검색 결과` : '전체'} {icons.length}개 표시
          {icons.length === 240 && ' (앞의 240개만 — 검색으로 좁혀 보세요)'}
        </p>
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fill, minmax(112px, 1fr))',
            gap: 'var(--space-2)',
          }}
        >
          {icons.map((name) => {
            const Icon = Lucide[name];
            return (
              <button
                key={name}
                type="button"
                onClick={() => copy(`import { ${name} } from 'lucide-react';`)}
                title={`클릭하면 import 구문 복사: ${name}`}
                style={{
                  display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
                  padding: 'var(--space-3) var(--space-2)', background: 'var(--card)',
                  border: '1px solid var(--line)', borderRadius: 'var(--radius-sm)',
                  cursor: 'pointer', color: 'var(--ink)',
                }}
              >
                <Icon size={22} strokeWidth={1.5} aria-hidden="true" />
                <span
                  style={{
                    fontSize: 11, color: 'var(--muted)', wordBreak: 'break-all',
                    lineHeight: 1.3, textAlign: 'center',
                  }}
                >
                  {name}
                </span>
              </button>
            );
          })}
        </div>
        {icons.length === 0 && <p className="empty">그런 이름의 아이콘이 없어요. 영문으로 검색해 보세요.</p>}
      </Section>

      {/* 복사 완료 알림 — 화면 아래에 잠깐 떴다 사라진다 */}
      {copied && (
        <div
          role="status"
          style={{
            position: 'fixed', bottom: 24, left: '50%', transform: 'translateX(-50%)',
            background: 'var(--ink)', color: 'var(--bg)', padding: '10px 18px',
            borderRadius: 'var(--radius-full)', fontSize: 'var(--text-sm)',
            boxShadow: 'var(--shadow)', zIndex: 50, maxWidth: '90vw', overflow: 'hidden',
            textOverflow: 'ellipsis', whiteSpace: 'nowrap',
          }}
        >
          복사됨: {copied}
        </div>
      )}
    </div>
  );
}
