"use client";

import Image from "next/image";
import Link from "next/link";
import { useTranslation } from "react-i18next";

import { CurrencySwitcher } from "@/components/currency-switcher";
import { LanguageSwitcher } from "@/components/language-switcher";
import { PlayerNotificationBell } from "@/components/layout/player-notification-bell";
import { HallBettingGrid } from "@/features/hall/hall-betting-grid";
import { useActivePlayerCurrency } from "@/hooks/use-active-player-currency";
import { HallDrawPanel } from "@/features/hall/hall-draw-panel";
import { HallWalletStrip } from "@/features/hall/hall-wallet-strip";
import { JackpotBurstOverlay } from "@/features/hall/jackpot-burst-overlay";
import { useHallDrawLive } from "@/features/hall/use-hall-draw-live";
import { useJackpotBurstLive } from "@/features/hall/use-jackpot-burst-live";
import { playerHeaderControl, playerPageInset } from "@/lib/player-spacing";
import { cn } from "@/lib/utils";

/**
 * 下注大厅：钱包条 §4 + 当期期号 §4.2（封盘置灰 / 倒计时错误色 / WS+轮询）；玩法目录 §12.3；下注表格 §13.3。
 */
export function HallScreen() {
  const { t: tp } = useTranslation("player");
  const drawLive = useHallDrawLive();
  const { activeCurrency } = useActivePlayerCurrency();
  const { burstEvent, clearBurstEvent } = useJackpotBurstLive(tp);

  return (
    <div className="mx-auto w-full max-w-[480px]">
      <section className={cn("bg-white text-slate-900", playerPageInset)}>
        <header className="relative z-20 mb-2 flex min-h-9 items-center gap-2 overflow-visible">
          <div className="flex min-w-0 flex-1 items-center">
            <Image
              src="/logo.png"
              alt="Nlotto"
              width={243}
              height={84}
              className="h-8 w-auto max-w-[min(100%,200px)] object-contain object-left"
              priority
            />
          </div>
          <div className="flex shrink-0 items-center gap-1">
            <CurrencySwitcher
              variant="minimal"
              menuAlign="end"
              showLabel
              className={cn(
                playerHeaderControl,
                "rounded-full border border-[#e4eaf4] bg-[#f8fafc] [&_button]:h-8 [&_button]:gap-1 [&_button]:px-2 [&_button]:py-0 [&_button]:text-xs [&_button]:font-bold [&_button]:text-[#0b3f96]",
              )}
            />
            <LanguageSwitcher
              variant="minimal"
              menuAlign="end"
              showFlag={false}
              className={cn(
                playerHeaderControl,
                "rounded-full border border-[#e4eaf4] bg-[#f8fafc] [&_button]:h-8 [&_button]:gap-1 [&_button]:px-2 [&_button]:py-0 [&_button]:text-xs",
              )}
            />
            <Link
              href="/rules"
              className={cn(
                playerHeaderControl,
                "rounded-full border border-[#e4eaf4] bg-[#f8fafc] px-2.5 text-xs font-bold text-[#0b3f96] hover:bg-[#f1f6ff]",
              )}
            >
              {tp("nav.rules")}
            </Link>
            <PlayerNotificationBell />
          </div>
        </header>

        <HallDrawPanel drawLive={drawLive} />

        <HallWalletStrip />

        <HallBettingGrid key={activeCurrency} drawLive={drawLive} />
      </section>
      <JackpotBurstOverlay event={burstEvent} onClose={clearBurstEvent} />
    </div>
  );
}
