import { useMemo, useState } from 'react';
import type { Jackpot } from '../game/types';
import './JackpotModal.css';

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

type Tab = 'overview' | 'rewards' | 'records';

/** 金额拆成单个数字，用于滚轮数字框 */
function digits(n: number) {
  return n.toLocaleString('en-US').replace(/,/g, '').split('');
}

/** 奖励牌型的演示牌面（天皇/朵皇/朵朵 默认 JOKER + 3♥） */
function MiniPair() {
  return (
    <span className="jp-pair">
      <span className="jp-card jp-card--joker">
        <b>JOKER</b>
      </span>
      <span className="jp-card jp-card--red">
        3<span className="jp-card__suit">♥</span>
      </span>
    </span>
  );
}

function Reel({ value }: { value: number }) {
  return (
    <div className="jp-reel">
      {digits(value).map((d, i) => (
        <span key={i} className="jp-reel__digit">
          {d}
        </span>
      ))}
    </div>
  );
}

export function JackpotModal({ jackpot, onClose }: Props) {
  const [tab, setTab] = useState<Tab>('rewards');
  // 开奖金币散落
  const coins = useMemo(
    () =>
      Array.from({ length: 18 }).map((_, i) => ({
        left: Math.round((i * 53 + 7) % 100),
        delay: (i % 9) * 0.18,
        dur: 1.4 + (i % 5) * 0.25,
        size: 14 + (i % 4) * 4,
      })),
    [],
  );

  return (
    <div className="jp-backdrop" onClick={onClose}>
      <div className="jp-coins" aria-hidden>
        {coins.map((c, i) => (
          <span
            key={i}
            className="jp-coin"
            style={{
              left: `${c.left}%`,
              animationDelay: `${c.delay}s`,
              animationDuration: `${c.dur}s`,
              width: c.size,
              height: c.size,
            }}
          />
        ))}
      </div>

      <div className="jp-panel" onClick={(e) => e.stopPropagation()}>
        <div className="jp-titlebar">
          <span className="jp-title">奖池</span>
        </div>
        <button className="jp-close" onClick={onClose} aria-label="关闭">
          ✕
        </button>

        <div className="jp-tabs">
          <button
            className={`jp-tab ${tab === 'overview' ? 'is-on' : ''}`}
            onClick={() => setTab('overview')}
          >
            奖池总览
          </button>
          <button
            className={`jp-tab ${tab === 'rewards' ? 'is-on' : ''}`}
            onClick={() => setTab('rewards')}
          >
            奖励牌型
          </button>
          <button
            className={`jp-tab ${tab === 'records' ? 'is-on' : ''}`}
            onClick={() => setTab('records')}
          >
            奖池记录
          </button>
        </div>

        <div className="jp-body">
          {tab === 'overview' && (
            <>
              <div className="jp-sub">奖池总奖金</div>
              <Reel value={jackpot.total} />
              <div className="jp-sub2">各级别奖金</div>
              <div className="jp-levels">
                {jackpot.levels.map((lv) => (
                  <div key={lv.label} className="jp-level">
                    <div className="jp-level__name">{lv.label}</div>
                    <div className="jp-level__cap">奖池数额</div>
                    <div className="jp-level__reel">
                      {digits(lv.amount).map((d, i) => (
                        <span key={i} className="jp-level__digit">
                          {d}
                        </span>
                      ))}
                    </div>
                  </div>
                ))}
              </div>
            </>
          )}

          {tab === 'rewards' && (
            <>
              <div className="jp-sub">1皮奖池总奖金</div>
              <Reel value={jackpot.total} />
              <div className="jp-rewards-head">
                <span>获奖牌型</span>
                <span>获奖比例</span>
              </div>
              {jackpot.rewards.map((r, i) => (
                <div key={i} className="jp-reward">
                  <span className="jp-reward__name">{r.hand}</span>
                  <span className="jp-reward__cards">
                    <MiniPair />
                    <MiniPair />
                  </span>
                  <span
                    className="jp-ring"
                    style={{
                      background: `conic-gradient(#4fd07a ${r.percent * 3.6}deg, rgba(0,0,0,0.35) 0)`,
                    }}
                  >
                    <span className="jp-ring__hole">{r.percent}%</span>
                  </span>
                </div>
              ))}
              <div className="jp-note">{jackpot.note}</div>
            </>
          )}

          {tab === 'records' && (
            <>
              <div className="jp-sub jp-sub--gold">最大赢家</div>
              <div className="jp-topwin">
                <span className="jp-topwin__player">玩家{jackpot.topWinner.player}</span>
                <span className="jp-topwin__hand">{jackpot.topWinner.hand}</span>
                <span className="jp-topwin__amt">{jackpot.topWinner.amount}</span>
                <span className="jp-topwin__date">{jackpot.topWinner.date}</span>
              </div>
              <div className="jp-sub jp-sub--gold">得奖记录</div>
              <div className="jp-records">
                {jackpot.records.map((rec, i) => (
                  <div key={i} className="jp-record">
                    <span className="jp-record__player">玩家{rec.player}</span>
                    <span className="jp-record__hand">{rec.hand}</span>
                    <span className="jp-record__amt">{rec.amount}</span>
                    <span className="jp-record__date">{rec.date}</span>
                  </div>
                ))}
              </div>
            </>
          )}
        </div>
      </div>
    </div>
  );
}
