import './HandRankModal.css';

interface Props {
  onClose: () => void;
}

interface Row {
  level: string;
  name: string;
  compose: string;
}

// 牌型大小（从大到小），按 QQ 官方《扯旋》规则
const RANKS: Row[] = [
  { level: '1', name: '丁皇（丁二皇）', compose: '红3 + 大王' },
  { level: '2', name: '天牌', compose: '一对红Q' },
  { level: '3', name: '地牌', compose: '一对红2' },
  { level: '4', name: '人牌', compose: '一对红8' },
  { level: '5', name: '和牌', compose: '一对红4' },
  { level: '6', name: '梅十 / 板凳 / 长三', compose: '对黑10 / 对黑4 / 对黑6' },
  { level: '7', name: '虎头 / 苕十 / 猫猫 / 膏药', compose: '对黑J / 对红10 / 对红6 / 对红7' },
  { level: '8', name: '普通对子', compose: '对黑5 / 黑7 / 黑8 / 黑9' },
  { level: '9', name: '奶狗（王）', compose: '红Q + 9' },
  { level: '10', name: '天杠 / 地杠', compose: '红Q+8 / 红2+8' },
  { level: '11', name: '9点系', compose: '天关九 > 地关九 > 灯笼九 … 乌龙九' },
  { level: '12', name: '散牌（点数）', compose: '8点 … 0点，按牌面相加取个位' },
];

const SPECIAL = [
  { name: '三花十', compose: '红10 + 黑10 + 黑J + 任一张', note: '不输不赢' },
  { name: '三花六', compose: '红6 + 黑6 + 大王 + 任一张', note: '不输不赢' },
];

export function HandRankModal({ onClose }: Props) {
  return (
    <div className="hr-mask" onClick={onClose}>
      <div className="hr-card" onClick={(e) => e.stopPropagation()}>
        <div className="hr-card__title">牌型大小</div>
        <div className="hr-card__sub">口诀：天地人和梅板三，斧十猫膏下是烂</div>
        <div className="hr-list">
          {RANKS.map((r) => (
            <div key={r.level} className="hr-row">
              <span className="hr-row__lvl">{r.level}</span>
              <span className="hr-row__name">{r.name}</span>
              <span className="hr-row__compose">{r.compose}</span>
            </div>
          ))}
        </div>
        <div className="hr-card__title hr-card__title--sm">特殊牌型</div>
        <div className="hr-list">
          {SPECIAL.map((r) => (
            <div key={r.name} className="hr-row hr-row--special">
              <span className="hr-row__name">{r.name}</span>
              <span className="hr-row__compose">{r.compose}</span>
              <span className="hr-row__note">{r.note}</span>
            </div>
          ))}
        </div>
        <button className="hr-close" onClick={onClose}>
          知道了
        </button>
      </div>
    </div>
  );
}
