/** 섯다 30초 규칙 요약 (docs/07 §5). */
import type { CSSProperties, ReactNode } from 'react';
import { HwatuCard, type HwatuInfo } from '../../components/cards/HwatuCard';
import type { QuickCard } from '../types';

/** Illustration card: month + 광/열끗 (special) or 띠/기러기. Same idea as the 족보표 in index.tsx. */
function hw(month: number, special: boolean): HwatuInfo {
  const gwang = [1, 3, 8].includes(month);
  const kind: HwatuInfo['kind'] = special ? (gwang ? 'gwang' : 'yeol') : month === 8 ? 'pi' : 'tti';
  return {
    id: (month - 1) * 4 + (special ? 0 : 1),
    month,
    kind,
    ...(kind === 'tti' ? { tti: 'plain' as const } : {}),
    name: `${month}월 ${special ? (gwang ? '광' : '열끗') : month === 8 ? '기러기' : '띠'}`,
  };
}

function Pair({ a, b, label, size = 'sm' }: { a: [number, boolean]; b: [number, boolean]; label: string; size?: 'sm' | 'md' }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}>
      <div style={{ display: 'flex' }}>
        <HwatuCard card={hw(...a)} size={size} />
        <HwatuCard card={hw(...b)} size={size} style={{ marginLeft: size === 'md' ? 4 : -10 }} />
      </div>
      <strong style={{ fontSize: size === 'md' ? '1.1rem' : '0.85rem', whiteSpace: 'nowrap' }}>{label}</strong>
    </div>
  );
}

function Row({ children, gap = 10 }: { children: ReactNode; gap?: number }) {
  return <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap, maxWidth: 260 }}>{children}</div>;
}

const btn = (bg: string): CSSProperties => ({
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  minWidth: 74,
  height: 40,
  borderRadius: 10,
  background: bg,
  color: '#fff',
  fontWeight: 800,
  fontSize: '1.05rem',
});

function Buttons() {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 8, width: 170 }} aria-hidden>
      <span style={btn('#dc2626')}>다이</span>
      <span style={btn('#2563eb')}>체크</span>
      <span style={btn('#2563eb')}>콜</span>
      <span style={btn('#7c3aed')}>하프</span>
    </div>
  );
}

const gt = <span style={{ fontSize: '1.3rem', fontWeight: 900 }}>&gt;</span>;

export const quickStart: QuickCard[] = [
  {
    pic: (
      <Row>
        <Pair a={[3, true]} b={[8, true]} label="38광땡" size="md" />
      </Row>
    ),
    alt: '3월 광과 8월 광 화투 두 장이 놓여 있고 38광땡이라고 적혀 있어요',
    title: '2장 조합이 센 사람이 이겨요',
    text: '화투 2장의 조합(족보)을 겨뤄요. 가장 센 족보를 가진 사람이 가운데 모인 칩을 모두 가져가요.',
  },
  {
    pic: <Buttons />,
    alt: '다이, 체크, 콜, 하프라고 적힌 버튼 네 개가 있어요',
    title: '차례가 오면 칩을 걸어요',
    text: '[체크]·[콜]·[하프] 같은 버튼으로 칩을 걸고, 패가 약하면 [다이]로 이번 판을 포기해요. 다른 사람이 다 다이하면 내가 가져가요.',
  },
  {
    pic: (
      <Row gap={6}>
        <Pair a={[10, true]} b={[10, false]} label="장땡" />
        {gt}
        <Pair a={[1, true]} b={[2, false]} label="알리" />
        {gt}
        <Pair a={[3, false]} b={[5, false]} label="8끗" />
      </Row>
    ),
    alt: '장땡, 알리, 8끗 순서로 화투 두 장씩 놓여 있고 사이에 큰 쪽 표시가 있어요',
    title: '땡 > 알리 > 끗 순서예요',
    text: "광땡 > 땡(같은 달 2장) > 알리·독사 등 > 끗(두 달을 더한 일의 자리) 순으로 세요. 화면의 '족보표'를 보면 쉬워요.",
  },
];