import sceneHall from '../assets/ui/scene-hall.webp';
import { AppBottomNav } from '../components/AppBottomNav';
import { AppTopBar } from '../components/AppTopBar';
import { QuickActionRail } from '../components/QuickActionRail';
import { Signboard } from '../components/Signboard';
import type { GameId, GameRoom } from '../navigation';
import './GameSelect.css';

interface Props {
  gameId: GameId;
  onBack: () => void;
  onEnterRoom: (room: GameRoom) => void;
}

interface HallOption {
  id: string;
  name: string;
  description: string;
  baseChip: Record<GameId, number>;
  online: number;
  capacity: number;
}

const HALL_OPTIONS: HallOption[] = [
  {
    id: 'newbie',
    name: '新手厅',
    description: '轻松入门',
    baseChip: { chexuan: 10, mahjong: 20 },
    online: 326,
    capacity: 600,
  },
  {
    id: 'mass',
    name: '大众厅',
    description: '标准对局',
    baseChip: { chexuan: 50, mahjong: 100 },
    online: 284,
    capacity: 500,
  },
  {
    id: 'premium',
    name: '至尊厅',
    description: '高倍刺激',
    baseChip: { chexuan: 500, mahjong: 1000 },
    online: 98,
    capacity: 300,
  },
  {
    id: 'master',
    name: '高手厅',
    description: '老手专场',
    baseChip: { chexuan: 100, mahjong: 200 },
    online: 142,
    capacity: 400,
  },
  {
    id: 'match',
    name: '比赛厅',
    description: '赛制体验',
    baseChip: { chexuan: 500, mahjong: 2000 },
    online: 62,
    capacity: 200,
  },
];

const USER = {
  nickname: '川妹子',
  playerId: '418417',
  coins: 286_840,
  diamonds: 128,
  avatarText: '川',
};

export function GameSelect({ gameId, onBack, onEnterRoom }: Props) {
  const gameName = gameId === 'mahjong' ? '红中断勾卡' : '扯旋';

  return (
    <div className="select-screen">
      <img className="select-screen__scene" src={sceneHall} alt="" aria-hidden="true" />

      <AppTopBar
        nickname={USER.nickname}
        playerId={USER.playerId}
        coins={USER.coins}
        diamonds={USER.diamonds}
        avatarText={USER.avatarText}
        subtitle={`选择场次 · ${gameName}`}
        onBack={onBack}
        backLabel="返回大厅"
      />

      <main className="select-screen__content">
        <div className="select-screen__rail-wrap">
          <QuickActionRail />
        </div>

        <section className="select-screen__list">
          {HALL_OPTIONS.map((room) => (
            <Signboard
              key={room.id}
              title={room.name}
              subtitle={`底分 ${room.baseChip[gameId]} · 在线 ${room.online}`}
              onClick={() =>
                onEnterRoom({
                  id: room.id,
                  name: room.name,
                  baseChip: room.baseChip[gameId],
                  online: room.online,
                  capacity: room.capacity,
                  badge: room.description,
                  description: `${room.description} · ${gameName}`,
                })
              }
            />
          ))}
        </section>
      </main>

      <AppBottomNav />
    </div>
  );
}
