/** 그림 맞히기 30초 규칙 요약 (docs/07 §5). */
import type { ReactNode } from 'react';
import type { QuickCard } from '../types';

function Pic({ children }: { children: ReactNode }) {
  return (
    <svg viewBox="0 0 250 150" width={250} height={150} aria-hidden>
      {children}
    </svg>
  );
}

/** White drawing paper with a simple cat doodle. */
function Paper({ x, y, w = 120, blank = false }: { x: number; y: number; w?: number; blank?: boolean }) {
  const k = w / 120;
  return (
    <g transform={`translate(${x} ${y}) scale(${k})`}>
      <rect x={0} y={0} width={120} height={110} rx={8} fill="#fff" stroke="#94a3b8" strokeWidth={2} />
      {!blank && <Cat />}
    </g>
  );
}

function Cat() {
  return (
    <>
      <g fill="none" stroke="#1f2937" strokeWidth={3} strokeLinecap="round" strokeLinejoin="round">
        <circle cx={60} cy={62} r={28} />
        <path d="M38 44 L36 22 L52 36" />
        <path d="M82 44 L84 22 L68 36" />
        <path d="M30 66 L12 62 M30 72 L12 76 M90 66 L108 62 M90 72 L108 76" />
        <path d="M54 72 Q60 78 66 72" />
      </g>
      <circle cx={50} cy={56} r={3.5} fill="#1f2937" />
      <circle cx={70} cy={56} r={3.5} fill="#1f2937" />
    </>
  );
}

function Bubble({ x, y, text, ok }: { x: number; y: number; text: string; ok?: boolean }) {
  return (
    <g>
      <rect x={x} y={y} width={92} height={30} rx={15} fill={ok ? '#dcfce7' : '#f1f5f9'} stroke={ok ? '#16a34a' : '#94a3b8'} strokeWidth={2} />
      <text x={x + 46} y={y + 20} textAnchor="middle" fontSize={14} fontWeight={700} fill="#1f2937">
        {text}
      </text>
    </g>
  );
}

export const quickStart: QuickCard[] = [
  {
    pic: (
      <Pic>
        <Paper x={8} y={20} />
        <text x={118} y={36} fontSize={26} aria-hidden>
          🖍
        </text>
        <Bubble x={150} y={22} text="강아지?" />
        <Bubble x={150} y={62} text="호랑이?" />
        <Bubble x={150} y={102} text="고양이!" ok />
      </Pic>
    ),
    alt: '그림판에 고양이 그림이 있고, 옆에 사람들이 정답을 써 보낸 말풍선이 있어요',
    title: '한 명이 그리고 모두 맞혀요',
    text: '차례대로 한 사람이 단어를 그림으로 그리고, 나머지는 그림을 보고 정답을 채팅 칸에 써서 맞혀요.',
  },
  {
    pic: (
      <Pic>
        <Paper x={20} y={20} blank />
        <text x={80} y={70} textAnchor="middle" fontSize={30} fontWeight={800} fill="#475569" opacity={0.85}>
          고양이
        </text>
        <g stroke="#dc2626" strokeWidth={7} strokeLinecap="round">
          <line x1={40} y1={34} x2={120} y2={114} />
          <line x1={120} y1={34} x2={40} y2={114} />
        </g>
        <g transform="translate(160 28)">
          {['○', '○', '○'].map((c, i) => (
            <g key={i}>
              <rect x={i * 28} y={0} width={24} height={30} rx={5} fill="#f1f5f9" stroke="#94a3b8" />
              <text x={i * 28 + 12} y={21} textAnchor="middle" fontSize={15} fill="#334155">
                {c}
              </text>
            </g>
          ))}
          {['ㄱ', 'ㅇ', 'ㅇ'].map((c, i) => (
            <g key={i}>
              <rect x={i * 28} y={50} width={24} height={30} rx={5} fill="#f1f5f9" stroke="#94a3b8" />
              <text x={i * 28 + 12} y={71} textAnchor="middle" fontSize={15} fontWeight={700} fill="#334155">
                {c}
              </text>
            </g>
          ))}
        </g>
      </Pic>
    ),
    alt: '그림판에 글자를 쓴 것에 빨간 ✕ 표시가 있고, 옆에 글자 수와 첫소리 힌트 칸이 있어요',
    title: '글자는 쓰면 안 돼요',
    text: '그리는 사람만 단어를 보고, 글자나 숫자 없이 그림으로만 설명해요. 방 설정에 따라 글자 수·첫소리 힌트가 보여요.',
  },
  {
    pic: (
      <Pic>
        {[
          ['1등', '+10', 48],
          ['2등', '+8', 125],
          ['3등', '+6', 202],
        ].map(([a, b, x]) => (
          <g key={a as string}>
            <circle cx={x as number} cy={60} r={32} fill="#fef3c7" stroke="#d97706" strokeWidth={3} />
            <text x={x as number} y={55} textAnchor="middle" fontSize={15} fontWeight={700} fill="#92400e">
              {a}
            </text>
            <text x={x as number} y={77} textAnchor="middle" fontSize={20} fontWeight={800} fill="#92400e">
              {b}
            </text>
          </g>
        ))}
        <text x={125} y={130} textAnchor="middle" fontSize={15} fontWeight={700} fill="currentColor">
          빨리 맞힐수록 점수가 커요
        </text>
      </Pic>
    ),
    alt: '먼저 맞힌 순서대로 1등 10점, 2등 8점, 3등 6점을 받는 모습이에요',
    title: '빨리 맞히면 점수가 커요',
    text: '먼저 맞힐수록 점수를 많이 받고, 누가 맞히면 그린 사람도 점수를 받아요. 모두 다 그린 뒤 점수가 가장 높으면 우승!',
  },
];