import { useRef } from 'react';
import type { GameState } from '../game/types';
import { SeatView } from './SeatView';
import { TableNotice } from './TableNotice';
import { DealAnim } from './DealAnim';
import './GameTable.css';

interface Props {
  game: GameState;
  /** 当前发话玩家倒计时剩余比例（0~1）；undefined 表示不显示 */
  turnCountdown?: number;
  /** 强制秀牌：对手暗牌全部翻开 */
  forceShow?: boolean;
  /** 发牌动画触发键（每轮发牌递增） */
  dealKey?: number;
  /** 整局剩余时间（mm:ss）；undefined 不显示 */
  clock?: string;
}

// 5 名对手围绕竖屏牌桌上半部分的位置（本人单独放在底部区域）
const OPP_POSITIONS = [
  'pos-left-low',
  'pos-left-top',
  'pos-top',
  'pos-right-top',
  'pos-right-low',
];

export function GameTable({ game, turnCountdown, forceShow = false, dealKey = 0, clock }: Props) {
  const hero = game.seats.find((s) => s.isHero)!;
  const opponents = game.seats.filter((s) => !s.isHero);
  const showTimer = game.phase === 'betting' && typeof turnCountdown === 'number';
  const feltRef = useRef<HTMLDivElement>(null);
  const perSeat = game.round <= 1 ? 2 : 1;

  return (
    <div className="table-area">
      <div className="table-tags">
        <span className="ttag">第 {game.round}/3 轮</span>
        <span className="ttag">簸簸 {game.bobo}</span>
        {clock && <span className="ttag ttag--clock">⏱ {clock}</span>}
      </div>

      <div className="felt-rim">
        <span className="stud stud--tl" />
        <span className="stud stud--tr" />
        <span className="stud stud--bl" />
        <span className="stud stud--br" />

        <div className="felt" ref={feltRef}>
          <div className="felt__glow" />

          <div className="felt__logo">
            <span className="felt__logo-main">丁二皇</span>
            <span className="felt__logo-sub">扯 旋 · 地 九 王</span>
          </div>

          <div className="felt__center">
            <div className="pool-rows">
              <span className="pool-row pool-row--table">
                <i className="pool-row__ic" />桌池 <b>{game.pot}</b>
              </span>
              <span className="pool-row pool-row--mango">
                <i className="pool-row__ic" />休芒×{game.mangoMult} <b>{game.mangoPool}</b>
              </span>
              <span className="pool-row pool-row--pi">
                <i className="pool-row__ic" />皮池 <b>{game.piPool}</b>
              </span>
            </div>

            <div className="table-info">
              <span className="table-info__line">房间号：{game.roomId}</span>
              <span className="table-info__line">底皮：1/3</span>
              <span className="table-info__acts">休芒 ｜ 撅芒 ｜ 圈芒</span>
              <span className="table-info__phase">必发招 ｜ 可休</span>
              {clock && <span className="table-info__line">剩余时间 {clock}</span>}
              <span className="table-info__variant">地 九 王</span>
            </div>
          </div>

          {opponents.map((seat, i) => (
            <div
              key={seat.id}
              className={`seat-slot ${OPP_POSITIONS[i] ?? 'pos-top'}`}
              data-deal={seat.status === 'folded' ? undefined : '1'}
            >
              <SeatView
                seat={seat}
                countdown={showTimer && seat.isActive ? turnCountdown : undefined}
                reveal={forceShow}
              />
            </div>
          ))}

          <div className="seat-slot hero-pod-slot">
            <SeatView
              seat={hero}
              variant="pod"
              countdown={showTimer && hero.isActive ? turnCountdown : undefined}
            />
          </div>
          <div className="seat-slot hero-cards-slot" data-deal={hero.status === 'folded' ? undefined : '1'}>
            <SeatView seat={hero} variant="cards" />
          </div>

          <DealAnim feltRef={feltRef} dealKey={dealKey} perSeat={perSeat} />

          {game.notice && <TableNotice notice={game.notice} />}
        </div>
      </div>
    </div>
  );
}
