'use client';

import { Suspense, useEffect, useState } from 'react';
import Link from 'next/link';
import { useSearchParams } from 'next/navigation';
import DicePlane from './diceplane';
import { DEFAULT_ASSETS, getAssets } from './asset-storage';
import { useRoom } from '@/lib/rooms/client';
import { SHOW_DEBUG_UI } from '@/lib/ui/debug';

function GamePageInner() {
  const searchParams = useSearchParams();
  const roomId = searchParams.get('roomId');
  const [backgroundSrc, setBackgroundSrc] = useState(DEFAULT_ASSETS.background);
  const [ready, setReady] = useState(false);
  const [simAmount, setSimAmount] = useState(1000);
  const [settingsOpen, setSettingsOpen] = useState(false);
  const [addDiceCount, setAddDiceCount] = useState(1);
  const [addDiceHint, setAddDiceHint] = useState<string | null>(null);
  const { room, error, consumeDice, simulateDonation, addDice } = useRoom(roomId);
  const chzzkOn = Boolean(room?.settings.chzzkEnabled);
  const manualMode = Boolean(roomId) && room != null && !chzzkOn;

  useEffect(() => {
    setBackgroundSrc(getAssets().background);
    setReady(true);
  }, []);

  useEffect(() => {
    if (!settingsOpen) setAddDiceHint(null);
  }, [settingsOpen]);

  const onAddDice = async () => {
    if (!roomId || !chzzkOn) return;
    const count = Math.max(1, Math.trunc(addDiceCount) || 1);
    const result = await addDice(count);
    if (!result.ok) {
      setAddDiceHint(result.error || '추가 실패');
      return;
    }
    setAddDiceHint(`주사위 +${count} 추가했습니다.`);
  };

  return (
    <div className="relative h-screen w-screen overflow-hidden">
      {ready && (
        // eslint-disable-next-line @next/next/no-img-element
        <img
          src={backgroundSrc}
          alt=""
          aria-hidden
          draggable={false}
          className="pointer-events-none absolute inset-0 z-0 h-full w-full object-cover"
        />
      )}
      <div className="absolute inset-0 z-0 bg-black/25" aria-hidden />

      {SHOW_DEBUG_UI && (
        <div className="absolute top-3 left-3 z-40 flex flex-col items-start gap-2">
          {roomId && chzzkOn && (
            <div className="max-w-[min(100vw-2rem,20rem)] rounded-xl bg-black/75 px-3 py-2 text-xs text-white">
              <p className="font-semibold">주사위 큐: {room?.diceQueue ?? '…'}</p>
              {room?.settings.channelId && (
                <p className="mt-1 break-all font-mono text-[10px] text-white/50">
                  채널 ID: {room.settings.channelId}
                </p>
              )}
              {room && (
                <p className="mt-1 text-white/70">
                  {room.channelName || room.settings.channelId || '—'} · {room.chatStatus}
                  {` · ${room.settings.cheesePerDice}원/${
                    room.settings.multiplyByCheese
                      ? `배수${room.settings.maxMultiplier > 0 ? `≤${room.settings.maxMultiplier}` : ''}`
                      : '1회'
                  }`}
                </p>
              )}
              {error && <p className="mt-1 text-red-300">{error}</p>}
              {room?.chatError && <p className="mt-1 text-red-300">{room.chatError}</p>}
              {room?.lastDonations?.[0] && (
                <p className="mt-1 text-amber-200">
                  최근: {room.lastDonations[0].donatorNickname}{' '}
                  {room.lastDonations[0].payAmount}원 → +{room.lastDonations[0].diceAdded}
                </p>
              )}
              <div className="mt-2 flex items-center gap-1">
                <input
                  type="number"
                  min={1}
                  value={simAmount}
                  onChange={(e) => setSimAmount(Number(e.target.value) || 1)}
                  className="w-24 rounded border border-white/20 bg-black/50 px-2 py-1 text-white"
                />
                <button
                  type="button"
                  className="rounded bg-white/15 px-2 py-1 hover:bg-white/25"
                  onClick={() => void simulateDonation(simAmount).catch(() => undefined)}
                >
                  후원 시뮬
                </button>
              </div>
            </div>
          )}
          {manualMode && (
            <div className="max-w-[min(100vw-2rem,20rem)] rounded-xl bg-black/75 px-3 py-2 text-xs text-white">
              <p className="font-semibold">수동 모드</p>
              <p className="mt-1 text-white/70">
                치지직·채팅 연동 없음 · 주사위는 자유롭게 굴릴 수 있습니다.
              </p>
              {error && <p className="mt-1 text-red-300">{error}</p>}
            </div>
          )}
        </div>
      )}

      <div className="relative z-10 h-full w-full">
        <DicePlane
          requireDiceQueue={chzzkOn}
          diceQueue={room?.diceQueue ?? 0}
          onConsumeDice={consumeDice}
          showChatFeed={chzzkOn}
          chatFeed={chzzkOn ? room?.chatFeed ?? [] : []}
          settingsButton={
            <button
              type="button"
              aria-label="설정"
              aria-expanded={settingsOpen}
              onClick={() => setSettingsOpen((v) => !v)}
              className="rounded-md bg-black/70 px-3 py-1.5 text-sm font-semibold text-white shadow-md hover:bg-black/85"
            >
              설정
            </button>
          }
        />
      </div>

      {settingsOpen && (
        <div
          className="absolute inset-0 z-50 flex items-center justify-center bg-black/45 p-4"
          role="dialog"
          aria-modal="true"
          aria-label="게임 설정"
          onClick={() => setSettingsOpen(false)}
        >
          <div
            className="w-full max-w-sm rounded-2xl border border-white/15 bg-slate-950/95 px-5 py-4 text-white shadow-2xl"
            onClick={(e) => e.stopPropagation()}
          >
            <div className="flex items-center justify-between gap-3">
              <h2 className="text-base font-semibold">설정</h2>
              <button
                type="button"
                className="rounded px-2 py-1 text-sm text-white/70 hover:bg-white/10 hover:text-white"
                onClick={() => setSettingsOpen(false)}
              >
                닫기
              </button>
            </div>

            <div className="mt-4 flex flex-col gap-3">
              <Link
                href="/"
                className="rounded-lg bg-white/10 px-4 py-2.5 text-center text-sm font-medium hover:bg-white/15"
              >
                홈으로
              </Link>

              {roomId && chzzkOn ? (
                <div className="rounded-lg border border-white/10 bg-black/30 p-3">
                  <p className="text-xs text-white/60">주사위 큐 수동 추가</p>
                  <p className="mt-1 text-sm text-white/80">
                    현재 큐: <span className="font-semibold">{room?.diceQueue ?? 0}</span>
                  </p>
                  <div className="mt-2 flex items-center gap-2">
                    <input
                      type="number"
                      min={1}
                      value={addDiceCount}
                      onChange={(e) => setAddDiceCount(Number(e.target.value) || 1)}
                      className="w-20 rounded border border-white/20 bg-black/50 px-2 py-1.5 text-sm text-white"
                    />
                    <button
                      type="button"
                      className="rounded-lg bg-sky-700 px-3 py-1.5 text-sm font-medium hover:bg-sky-600"
                      onClick={() => void onAddDice()}
                    >
                      카운트 추가
                    </button>
                  </div>
                  {addDiceHint && (
                    <p className="mt-2 text-xs text-amber-200">{addDiceHint}</p>
                  )}
                </div>
              ) : (
                <p className="rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-xs text-white/65">
                  {manualMode
                    ? '수동 모드에서는 주사위 큐 없이 바로 굴릴 수 있습니다.'
                    : '치지직 연동 방에 입장하면 여기서 주사위 카운트를 추가할 수 있습니다.'}
                </p>
              )}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

export default function GamePage() {
  return (
    <Suspense
      fallback={
        <div className="flex h-screen items-center justify-center bg-black text-white">
          불러오는 중…
        </div>
      }
    >
      <GamePageInner />
    </Suspense>
  );
}