/** 포커 30초 규칙 요약 (docs/07 §5). Chips are play points only. */
import { PlayingCard } from '../../components/cards/PlayingCard';
import { ChipIcon } from '../../components/cards/Chips';
import type { QuickCard } from '../types';

function Fan({ cards, label }: { cards: string[]; label: string }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }} aria-hidden>
      <div style={{ display: 'flex' }}>
        {cards.map((c, i) => (
          <PlayingCard key={c} card={c} size="md" style={i > 0 ? { marginLeft: -16 } : undefined} />
        ))}
      </div>
      <strong style={{ fontSize: '1.2rem' }}>{label}</strong>
    </div>
  );
}

function MiniButton({ text, sub, color }: { text: string; sub: string; color: string }) {
  return (
    <span
      style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', width: 58, height: 52, borderRadius: 10, background: color, color: '#fff', fontWeight: 800, lineHeight: 1.15 }}
    >
      <span style={{ fontSize: '1.05rem' }}>{text}</span>
      <small style={{ fontSize: '0.75rem', opacity: 0.9 }}>{sub}</small>
    </span>
  );
}

function BetPic() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10 }} aria-hidden>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontWeight: 900, fontSize: '1.3rem' }}>
        <ChipIcon size={26} />
        <span>모인 칩 120</span>
      </div>
      <div style={{ display: 'flex', gap: 4 }}>
        <MiniButton text="다이" sub="포기" color="#dc2626" />
        <MiniButton text="체크" sub="0 칩" color="#2563eb" />
        <MiniButton text="콜" sub="+10 칩" color="#2563eb" />
        <MiniButton text="하프" sub="+60 칩" color="#7c3aed" />
      </div>
    </div>
  );
}

function HandPic() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }} aria-hidden>
      <div style={{ display: 'flex', gap: 4 }}>
        <PlayingCard card="QH" size="md" />
        <PlayingCard card="QS" size="md" />
        <PlayingCard card="7D" size="md" />
      </div>
      <span style={{ fontSize: '1.3rem', fontWeight: 900, padding: '2px 12px', borderRadius: 999, background: '#fde047', color: '#422006' }}>지금: 원페어</span>
    </div>
  );
}

export const quickStart: QuickCard[] = [
  {
    pic: <Fan cards={['KS', 'KH', 'KD', '7C', '7S']} label="풀하우스" />,
    alt: '카드 5장(K 세 장과 7 두 장)이 펼쳐져 있고 아래에 풀하우스라고 적혀 있어요',
    title: '족보가 센 사람이 이겨요',
    text: '모드마다 카드를 받는 방법은 달라도, 마지막까지 남은 사람끼리 카드를 비교해 족보가 가장 센 사람이 모인 칩을 가져가요.',
  },
  {
    pic: <BetPic />,
    alt: '모인 칩 숫자 아래에 다이, 체크, 콜, 하프 버튼이 나란히 있어요',
    title: '차례마다 칩을 걸어요',
    text: '내 차례에 [체크]로 넘기거나 [콜]로 앞사람만큼 맞추거나 더 올려요. [다이]·[폴드]를 누르면 이번 판은 포기해요.',
  },
  {
    pic: <HandPic />,
    alt: '퀸 두 장과 7 한 장 아래에 지금 원페어라고 노란 글씨로 적혀 있어요',
    title: '내 족보는 "지금:"에',
    text: '족보 표시가 켜진 방에서는 내 카드 아래 "지금:"에 족보가 보여요. 순서는 [족보] 칸에 있어요. 모두 포기하면 남은 한 명이 가져가요.',
  },
];