/** 방: 대기실 ↔ 게임 ↔ 결과를 한 주소에서 전환 (docs/06 §5–§9). */
import { useEffect, useMemo, useRef, useState } from 'react';
import { Link, useNavigate, useParams } from 'react-router';
import { botsAllowed, formatRoomCode, isBotId, type PublicUser, type RoomView } from '@bg/shared/lite';
import { Avatar, CodeLabel, ConfirmSheet, CopyButton, ShareButton, Sheet, TopBar } from '../components/ui';
import { NicknameForm } from '../components/NicknameForm';
import { GameNotice, gameName } from '../components/GameNotice';
import { QrModal } from '../components/QrModal';
import { api, type RoomPreview } from '../net/api';
import { socket, useRoom } from '../net/socket';
import { useSession } from '../store/session';
import { loadGameUI } from '../games/registry';
import type { GameUI } from '../games/types';
import { sounds } from '../lib/feedback';
import { ChatPanel, EmoteBubbles, useChatSeen } from '../components/ChatPanel';
import { useWide } from '../lib/media';
import { GameHelp } from '../components/GameHelp';

export default function RoomPage() {
  const { code = '' } = useParams();
  const me = useSession((s) => s.me);
  const nav = useNavigate();
  const [preview, setPreview] = useState<RoomPreview | null>(null);
  const [previewError, setPreviewError] = useState<string | null>(null);

  useEffect(() => {
    if (!/^\d{6}$/.test(code)) {
      setPreviewError('방 코드가 올바르지 않아요.');
      return;
    }
    if (!me) api.room(code).then(setPreview, (e) => setPreviewError((e as Error).message));
  }, [code, me]);

  useEffect(() => {
    if (me && /^\d{6}$/.test(code)) socket.join(code);
  }, [code, me]);

  if (!me) {
    return (
      <>
        <TopBar title="방에 들어가기" onBack={() => nav('/')} />
        <main className="page">
          {previewError ? (
            <RoomGone message={previewError} />
          ) : (
            <section className="card stack">
              {preview ? (
                <>
                  <h1>
                    {gameName(preview.gameId)} 방에 초대받았어요
                  </h1>
                  <p className="muted">
                    방장 {preview.host} · {preview.seated}/{preview.maxPlayers}명 · 코드 {preview.codeLabel}
                  </p>
                </>
              ) : (
                <p className="muted">방 정보를 불러오는 중…</p>
              )}
              <NicknameForm next={`/r/${code}`} submitLabel="이 이름으로 입장하기" />
            </section>
          )}
        </main>
      </>
    );
  }
  return <Room code={code} me={me} />;
}

function RoomGone({ message }: { message: string }) {
  const nav = useNavigate();
  return (
    <section className="card stack">
      <h1>{message}</h1>
      <button className="btn btn-primary btn-block" onClick={() => nav('/j')}>
        다른 코드 입력하기
      </button>
      <button className="btn btn-secondary btn-block" onClick={() => nav('/')}>
        홈으로
      </button>
    </section>
  );
}

function Room({ code, me }: { code: string; me: PublicUser }) {
  const nav = useNavigate();
  const { room, game, result, status, joinError, pending, slow, needsRefresh } = useRoom();
  const [ui, setUi] = useState<GameUI | null>(null);
  const [menu, setMenu] = useState(false);
  const [leaveAsk, setLeaveAsk] = useState(false);
  const [chatOpen, setChatOpen] = useState(false);
  const gameId = room?.gameId;

  useEffect(() => {
    if (gameId) loadGameUI(gameId).then(setUi);
  }, [gameId]);

  const players = useMemo(() => {
    const map: Record<string, PublicUser> = {};
    for (const s of room?.seats ?? []) if (s) map[s.user.id] = s.user;
    for (const u of room?.spectators ?? []) map[u.id] = u;
    return map;
  }, [room]);

  useTurnTitle(ui, game?.view, me.id);

  if (status === 'replaced') {
    return (
      <main className="page">
        <section className="card stack">
          <h1>다른 창에서 이 방을 열었어요</h1>
          <p className="muted">한 번에 한 창에서만 할 수 있어요.</p>
          <button className="btn btn-primary btn-block" onClick={() => socket.reclaim()}>
            여기서 계속하기
          </button>
        </section>
      </main>
    );
  }
  if (joinError) {
    return (
      <>
        <TopBar title="방" onBack={() => nav('/')} />
        <main className="page">
          <RoomGone message={joinError} />
        </main>
      </>
    );
  }
  if (!room || room.code !== code || !ui) {
    return (
      <>
        <TopBar title={`방 ${formatRoomCode(code)}`} onBack={() => nav('/')} />
        <main className="page muted">방에 들어가는 중…</main>
      </>
    );
  }

  const g = { nameKo: gameName(room.gameId) };
  const inGame = room.status === 'playing' || room.status === 'paused' || (room.status === 'finished' && !!game);
  // Games with their own chat channels (마피아) close the room chat while playing (the server refuses it too).
  const roomChatClosed = !!ui.ownChat && (room.status === 'playing' || room.status === 'paused');
  const isHost = room.hostId === me.id;
  const doLeave = () => {
    socket.leave();
    nav('/');
  };

  return (
    <>
      <nav className="room-bar" aria-label="방 메뉴">
        <h1 className="sr-only">
          {g.nameKo} 방 {formatRoomCode(code)}
        </h1>
        <div className="room-bar-inner">
          <button className="btn btn-ghost btn-sm" onClick={() => nav('/')} aria-label="홈으로">
            ← 홈
          </button>
          <strong className="rb-game" style={{ fontSize: '1.1rem' }}>
            {g.nameKo}
          </strong>
          <CopyButton text={`${location.origin}/r/${code}`} label={<>방 <CodeLabel code={code} /> 🔗</>} done="링크 복사됨 ✓" className="btn btn-ghost btn-sm" />
          <span style={{ flex: 1 }} />
          {!roomChatClosed && (
            <span className="phone-only">
              <ChatButton onOpen={() => setChatOpen(true)} />
            </span>
          )}
          <button className="btn btn-ghost btn-sm wide-only" onClick={() => nav(`/rules/${room.gameId}`)}>
            📖 규칙
          </button>
          <button className="btn btn-secondary btn-sm" onClick={() => setMenu(true)} aria-label="메뉴">
            ⋯ 메뉴
          </button>
        </div>
      </nav>
      {needsRefresh && (
        <div className="card row" style={{ margin: 12, justifyContent: 'space-between' }}>
          <span>새 버전이 있어요.</span>
          <button className="btn btn-primary btn-sm" onClick={() => location.reload()}>
            새로고침
          </button>
        </div>
      )}
      {inGame && game ? (
        <GameView room={room} ui={ui} me={me} players={players} pending={pending !== null} slow={slow} />
      ) : (
        <Lobby room={room} ui={ui} me={me} />
      )}
      {room.status === 'finished' && result && game && <ResultPanel room={room} me={me} players={players} onLeave={doLeave} />}
      <EmoteBubbles room={room} />
      {chatOpen && !roomChatClosed && (
        <Sheet onClose={() => setChatOpen(false)} label="채팅">
          <ChatPanel room={room} me={me} />
          <button className="btn btn-secondary btn-block" onClick={() => setChatOpen(false)}>
            닫기
          </button>
        </Sheet>
      )}
      {menu && (
        <Sheet onClose={() => setMenu(false)} label="메뉴">
          <h2>메뉴</h2>
          <button className="btn btn-secondary btn-block" onClick={() => nav(`/rules/${room.gameId}`)}>
            📖 규칙 보기
          </button>
          <button className="btn btn-secondary btn-block" onClick={() => nav('/me')}>
            ⚙️ 글자 크기 · 소리 설정
          </button>
          {isHost && room.status === 'paused' && (
            <button className="btn btn-danger btn-block" onClick={() => (socket.send({ t: 'void' }), setMenu(false))}>
              게임 끝내기(무효)
            </button>
          )}
          <button className="btn btn-danger btn-block" onClick={() => (setMenu(false), setLeaveAsk(true))}>
            🚪 방 나가기
          </button>
        </Sheet>
      )}
      {leaveAsk && (
        <ConfirmSheet
          title="방에서 나갈까요?"
          body={room.status === 'playing' && room.seats.some((s) => s?.user.id === me.id) ? '게임 중에 나가면 기권으로 처리돼요.' : undefined}
          confirm="나가기"
          danger
          onConfirm={doLeave}
          onClose={() => setLeaveAsk(false)}
        />
      )}
    </>
  );
}

/** Blink the tab title when it's my turn and the tab is hidden (docs/07 §6). */
function useTurnTitle(ui: GameUI | null, view: unknown, me: string) {
  const myTurn = !!ui && !!view && ui.isMyTurn(view, me);
  const prev = useRef(false);
  useEffect(() => {
    if (myTurn && !prev.current && document.visibilityState === 'hidden') sounds.myTurn();
    prev.current = myTurn;
    if (!myTurn) return;
    const base = document.title;
    let on = false;
    const t = setInterval(() => {
      if (document.visibilityState === 'visible') {
        document.title = base;
        return;
      }
      on = !on;
      document.title = on ? '● 내 차례예요' : base;
    }, 1000);
    return () => {
      clearInterval(t);
      document.title = base;
    };
  }, [myTurn]);
}

// ---------------------------------------------------------------- lobby

function Lobby({ room, ui, me }: { room: RoomView; ui: GameUI; me: PublicUser }) {
  const [qr, setQr] = useState(false);
  const [settings, setSettings] = useState(false);
  const isHost = room.hostId === me.id;
  const mySeat = room.seats.findIndex((s) => s?.user.id === me.id);
  const seated = room.seats.filter(Boolean).length;
  const need = Math.max(0, room.minPlayers - seated);
  const url = `${location.origin}/r/${room.code}`;
  const gName = gameName(room.gameId);
  const host = room.seats.find((s) => s?.user.id === room.hostId)?.user.nickname ?? me.nickname;
  const shareText = `${host}님이 ${gName} 방에 초대했어요! 코드 ${formatRoomCode(room.code)}`;
  const notReady = room.seats.filter((s) => s && !s.ready && s.user.id !== room.hostId).length;
  const [askStart, setAskStart] = useState(false);
  // Computer players (docs/06 §12): the host fills empty seats; a room with them is a practice room.
  const canAddBot = isHost && botsAllowed(room.gameId);
  const practice = room.seats.some((s) => s && isBotId(s.user.id));
  // Offered on the first empty seat only, so big rooms don't show a column of the same button.
  const firstEmpty = room.seats.findIndex((s) => s === null);

  const wide = useWide();
  const invite = (
    <section className="card stack" style={{ textAlign: 'center' }} aria-label="초대하기">
      <p className="muted">친구에게 이 코드를 알려 주세요</p>
      <p style={{ fontSize: '3.2rem', fontWeight: 800, lineHeight: 1.1 }}>
        <CodeLabel code={room.code} />
      </p>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(140px, 1fr))', gap: 8 }}>
        <CopyButton text={room.code} label="🔢 코드 복사" />
        <CopyButton text={url} label="🔗 링크 복사" />
        <ShareButton title={`${gName} 같이 해요`} text={shareText} url={url} />
        <button className="btn btn-secondary" onClick={() => setQr(true)}>
          📷 QR 보기
        </button>
      </div>
    </section>
  );
  const seats = (
    <section className="stack" aria-label="자리">
      <h2>
        자리 ({seated}/{room.maxPlayers})
      </h2>
      <div style={{ display: 'grid', gridTemplateColumns: wide && room.seats.length > 4 ? '1fr 1fr' : '1fr', gap: 10 }}>
        {room.seats.map((s, i) =>
          s && isBotId(s.user.id) ? (
            <div key={i} className="card row" style={{ gap: 12, flexWrap: 'nowrap' }}>
              <Avatar user={s.user} size={44} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontWeight: 700 }}>{s.user.nickname}</div>
                <div className="row small" style={{ gap: 6 }}>
                  <span className="badge">🤖 컴퓨터</span>
                </div>
              </div>
              {isHost && (
                <button className="btn btn-ghost" onClick={() => socket.send({ t: 'removeBot', userId: s.user.id })} aria-label={`${s.user.nickname} 빼기`}>
                  ✕
                </button>
              )}
            </div>
          ) : s ? (
            <div key={i} className="card row" style={{ gap: 12, flexWrap: 'nowrap' }}>
              <Avatar user={s.user} size={44} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontWeight: 700, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                  {room.hostId === s.user.id && <span aria-label="방장">👑 </span>}
                  {s.user.nickname}
                  {s.user.id === me.id && <span className="muted small"> (나)</span>}
                </div>
                <div className="row small" style={{ gap: 6 }}>
                  <span className="dot" style={{ background: s.connected ? 'var(--success)' : s.away ? 'var(--text-sub)' : 'var(--warning)' }} />
                  {s.connected ? '접속 중' : s.away ? '자리 비움' : '연결 끊김'}
                  {room.hostId !== s.user.id && (s.ready ? <span className="badge success">준비 완료</span> : <span className="badge">준비 중</span>)}
                </div>
              </div>
              {isHost && s.user.id !== me.id && <HostMenu room={room} target={s.user} />}
            </div>
          ) : (
            <div key={i} className="row" style={{ gap: 8, flexWrap: 'nowrap' }}>
              <button className="card row" style={{ flex: 1, border: '2px dashed var(--border)', boxShadow: 'none', cursor: 'pointer', minHeight: 76, justifyContent: 'center', color: 'var(--text-sub)' }} onClick={() => (mySeat < 0 ? socket.send({ t: 'seat', seat: i }) : setQr(true))}>
                {mySeat < 0 ? '＋ 여기 앉기' : '＋ 빈자리 · 친구 초대하기'}
              </button>
              {canAddBot && i === firstEmpty && (
                <button className="btn btn-secondary" style={{ minHeight: 76 }} onClick={() => socket.send({ t: 'addBot', seat: i })}>
                  🤖 컴퓨터 넣기
                </button>
              )}
            </div>
          ),
        )}
      </div>
      {room.spectators.length > 0 && <p className="muted small">관전 {room.spectators.length}명: {room.spectators.map((u) => u.nickname).join(', ')}</p>}
      {mySeat >= 0 && room.allowSpectators && (
        <button className="btn btn-ghost" style={{ alignSelf: 'flex-start' }} onClick={() => socket.send({ t: 'unseat' })}>
          관전으로 바꾸기
        </button>
      )}
    </section>
  );
  const settingsCard = (
    <section className="card stack">
      <div className="row" style={{ justifyContent: 'space-between' }}>
        <div>
          <h2>게임 설정</h2>
          <p className="muted">{ui.optionsSummary(room.options)}</p>
        </div>
        {isHost && !wide && (
          <button className="btn btn-secondary btn-sm" onClick={() => setSettings(true)}>
            설정 바꾸기
          </button>
        )}
      </div>
      <p className="muted small">{room.visibility === 'public' ? '공개 방 (누구나 들어올 수 있어요)' : '친구만 (코드·링크로만 들어와요)'}</p>
      {practice && <p className="small">🤖 연습 게임이에요. 기록에는 남지 않아요.</p>}
      {room.lockedOptions.length > 0 && <p className="muted small">🔒 일부 규칙은 관리자가 정해 두어서 바꿀 수 없어요.</p>}
      <GameNotice gameId={room.gameId} />
      {isHost && wide && <SettingsForm room={room} ui={ui} inline />}
    </section>
  );
  const action = (
    <div className="bottom-bar inline-wide">
      <div className="bottom-bar-inner">
        {isHost ? (
          <button className="btn btn-primary" style={{ minHeight: 64, fontSize: '1.2rem' }} disabled={need > 0} onClick={() => (notReady > 0 ? setAskStart(true) : socket.send({ t: 'start' }))}>
            {need > 0 ? `${need}명 더 필요해요` : '▶ 게임 시작'}
          </button>
        ) : mySeat >= 0 ? (
          room.seats[mySeat]!.ready ? (
            <button className="btn btn-secondary" style={{ minHeight: 64 }} onClick={() => socket.send({ t: 'ready', ready: false })}>
              준비 취소
            </button>
          ) : (
            <button className="btn btn-success" style={{ minHeight: 64, fontSize: '1.2rem' }} onClick={() => socket.send({ t: 'ready', ready: true })}>
              ✓ 준비하기
            </button>
          )
        ) : (
          <button className="btn btn-primary" style={{ minHeight: 64 }} disabled={!room.seats.some((s) => s === null)} onClick={() => socket.send({ t: 'seat' })}>
            {room.seats.some((s) => s === null) ? '자리에 앉기' : '자리가 다 찼어요 (관전 중)'}
          </button>
        )}
      </div>
    </div>
  );

  return (
    <main className="page">
      <div className="two-col">
        <div className="stack" style={{ gap: 20 }}>
          {invite}
          {wide ? settingsCard : seats}
          {wide && (
            <section className="card stack">
              <h2>규칙 요약</h2>
              <ui.Rules options={room.options} />
            </section>
          )}
          {!wide && settingsCard}
        </div>
        <div className="stack" style={{ gap: 16, position: wide ? 'sticky' : undefined, top: 140 }}>
          {wide && seats}
          {action}
          {wide && <ChatPanel room={room} me={me} />}
        </div>
      </div>

      {qr && <QrModal url={url} code={room.code} onClose={() => setQr(false)} />}
      {settings && <SettingsSheet room={room} ui={ui} onClose={() => setSettings(false)} />}
      {askStart && (
        <ConfirmSheet title="준비 안 된 사람이 있어요" body="그래도 시작할까요?" confirm="시작하기" onConfirm={() => socket.send({ t: 'start' })} onClose={() => setAskStart(false)} />
      )}
    </main>
  );
}

function HostMenu({ room, target }: { room: RoomView; target: PublicUser }) {
  const [open, setOpen] = useState(false);
  const [kick, setKick] = useState(false);
  void room;
  return (
    <>
      <button className="btn btn-ghost" onClick={() => setOpen(true)} aria-label={`${target.nickname} 관리`}>
        ⋯
      </button>
      {open && (
        <Sheet onClose={() => setOpen(false)} label={`${target.nickname} 관리`}>
          <h2>{target.nickname}</h2>
          <button className="btn btn-secondary btn-block" onClick={() => (socket.send({ t: 'host', userId: target.id }), setOpen(false))}>
            👑 방장 넘기기
          </button>
          <button className="btn btn-danger btn-block" onClick={() => (setOpen(false), setKick(true))}>
            내보내기
          </button>
        </Sheet>
      )}
      {kick && (
        <ConfirmSheet
          title={`${target.nickname}님을 내보낼까요?`}
          body="내보낸 사람은 이 방에 다시 들어올 수 없어요."
          confirm="내보내기"
          danger
          onConfirm={() => socket.send({ t: 'kick', userId: target.id })}
          onClose={() => setKick(false)}
        />
      )}
    </>
  );
}

function SettingsSheet({ room, ui, onClose }: { room: RoomView; ui: GameUI; onClose: () => void }) {
  return (
    <Sheet onClose={onClose} label="게임 설정">
      <h2>게임 설정</h2>
      <SettingsForm room={room} ui={ui} onDone={onClose} />
    </Sheet>
  );
}

/** Host settings: game options + room options. Inline on PC, in a sheet on narrow screens. */
function SettingsForm({ room, ui, inline, onDone }: { room: RoomView; ui: GameUI; inline?: boolean; onDone?: () => void }) {
  const [options, setOptions] = useState(room.options);
  const [visibility, setVisibility] = useState(room.visibility);
  const [allowSpectators, setAllowSpectators] = useState(room.allowSpectators);
  const [chatEnabled, setChatEnabled] = useState(room.chatEnabled);
  // Follow server-side changes (e.g. admin locks) when not editing.
  useEffect(() => setOptions(room.options), [room.options]);
  const dirty =
    JSON.stringify(options) !== JSON.stringify(room.options) ||
    visibility !== room.visibility ||
    allowSpectators !== room.allowSpectators ||
    chatEnabled !== room.chatEnabled;
  const save = () => {
    socket.send({ t: 'config', options, visibility, allowSpectators, chatEnabled });
    onDone?.();
  };
  const seg = (value: boolean, set: (v: boolean) => void, on: string, off: string) => (
    <div className="segmented">
      <button type="button" aria-pressed={value} onClick={() => set(true)}>
        {on}
      </button>
      <button type="button" aria-pressed={!value} onClick={() => set(false)}>
        {off}
      </button>
    </div>
  );
  return (
    <div className="stack" style={{ gap: 14 }}>
      {room.lockedOptions.length > 0 && <p className="muted small">🔒 관리자가 고정한 규칙은 바꿔도 저장되지 않아요.</p>}
      <ui.Options value={options} onChange={setOptions} />
      <hr style={{ border: 0, borderTop: '1px solid var(--border)', width: '100%' }} />
      <div style={{ display: 'grid', gridTemplateColumns: inline ? 'repeat(3, minmax(0, 1fr))' : '1fr', gap: 12 }}>
        <div className="stack" style={{ gap: 6 }}>
          <strong>방 공개</strong>
          {room.seats.some((s) => s && isBotId(s.user.id)) ? (
            <p className="muted small">컴퓨터가 있는 방은 친구만 들어와요.</p>
          ) : (
            seg(visibility === 'public', (v) => setVisibility(v ? 'public' : 'private'), '누구나', '친구만')
          )}
        </div>
        <div className="stack" style={{ gap: 6 }}>
          <strong>관전</strong>
          {seg(allowSpectators, setAllowSpectators, '허용', '안 됨')}
        </div>
        <div className="stack" style={{ gap: 6 }}>
          <strong>채팅</strong>
          {seg(chatEnabled, setChatEnabled, '켜기', '끄기')}
        </div>
      </div>
      <div className="row">
        <button className="btn btn-primary" style={{ flex: 2 }} disabled={inline && !dirty} onClick={save}>
          {inline ? (dirty ? '설정 저장' : '저장됨') : '저장'}
        </button>
        {!inline && (
          <button className="btn btn-secondary" style={{ flex: 1 }} onClick={onDone}>
            취소
          </button>
        )}
      </div>
    </div>
  );
}

// ---------------------------------------------------------------- game

function GameView({ room, ui, me, players, pending, slow }: { room: RoomView; ui: GameUI; me: PublicUser; players: Record<string, PublicUser>; pending: boolean; slow: boolean }) {
  const game = useRoom((s) => s.game)!;
  const tapConfirm = useSession((s) => s.settings.tapConfirm);
  const wide = useWide();
  const myTurn = ui.isMyTurn(game.view, me.id);
  const isPlayer = room.seats.some((s) => s?.user.id === me.id) && game.active !== undefined;
  const props = {
    view: game.view,
    me: me.id,
    players,
    act: (a: unknown) => socket.act(a),
    pending,
    deadline: game.deadline,
    active: game.active,
    tapConfirm,
  };
  const status = (
    <div
      className="card turn-status"
      role="status"
      aria-live="polite"
      style={{
        padding: '14px 16px',
        fontWeight: 700,
        fontSize: '1.15rem',
        background: myTurn ? 'var(--primary)' : 'var(--surface)',
        color: myTurn ? 'var(--primary-text)' : 'var(--text)',
        width: '100%',
      }}
    >
      {room.status === 'paused' ? '오류로 게임이 멈췄어요. 방장이 끝낼 수 있어요.' : ui.statusText(game.view, me.id, players)}
      {slow && <span className="small"> · 연결 확인 중…</span>}
      {!isPlayer && (
        <span className="badge" style={{ marginLeft: 8 }}>
          관전 중
        </span>
      )}
    </div>
  );
  // [?] 지금 할 수 있는 것 sits right next to the turn status (docs/07 §5).
  const statusRow = (
    <div className="row" style={{ flexWrap: 'nowrap', gap: 8, width: '100%', alignItems: 'stretch' }}>
      {status}
      <GameHelp room={room} ui={ui} title={gameName(room.gameId)} me={me.id} players={players} />
    </div>
  );
  return (
    <div className="game-layout">
      <div className="game-main">
        {!wide && statusRow}
        <ui.Board {...props} />
      </div>
      <aside className="game-side" aria-label="게임 정보">
        {wide && statusRow}
        <ui.Side {...props} />
        {wide && !(ui.ownChat && (room.status === 'playing' || room.status === 'paused')) && <ChatPanel room={room} me={me} title={false} />}
      </aside>
    </div>
  );
}

function ResultPanel({ room, me, players, onLeave }: { room: RoomView; me: PublicUser; players: Record<string, PublicUser>; onLeave: () => void }) {
  const result = useRoom((s) => s.result)!;
  const [hidden, setHidden] = useState(false);
  const played = useRef(false);
  const seatedAll = room.seats.filter(Boolean).map((s) => s!.user.id);
  const amSeated = seatedAll.includes(me.id);
  // Computer players always agree to a rematch.
  const seated = seatedAll.filter((u) => !isBotId(u));
  const voted = room.rematchVotes.includes(me.id);
  // Solo games (e.g. 요트 다이스) have one ranked player: neither a draw nor a win.
  const solo = result.ranking.flat().length === 1;
  const allFirst = !solo && result.ranking.length === 1;
  const won = !solo && !allFirst && result.ranking[0]?.includes(me.id);
  const lost = !solo && !allFirst && !won && result.ranking.some((g) => g.includes(me.id));
  useEffect(() => {
    if (played.current) return;
    played.current = true;
    if (won) sounds.win();
    else if (lost) sounds.lose();
  }, [won, lost]);
  if (hidden) {
    return (
      <div className="bottom-bar">
        <div className="bottom-bar-inner">
          <button className="btn btn-primary" onClick={() => setHidden(false)}>
            결과 다시 보기
          </button>
        </div>
      </div>
    );
  }
  return (
    <Sheet onClose={() => setHidden(true)} label="게임 결과">
      <h1 style={{ textAlign: 'center' }}>{allFirst ? '무승부예요' : won ? '🎉 이겼어요!' : lost ? '아쉽게 졌어요' : '게임이 끝났어요'}</h1>
      <p style={{ textAlign: 'center' }}>{result.summary}</p>
      {seatedAll.length > seated.length && <p className="muted small" style={{ textAlign: 'center' }}>🤖 연습 게임이라 기록에는 남지 않아요.</p>}
      <div className="stack">
        {result.ranking.map((group, i) =>
          group.map((u) => (
            <div key={u} className="row">
              <strong style={{ width: 40 }}>{i + 1}등</strong>
              {players[u] && <Avatar user={players[u]!} size={28} />}
              <span>{players[u]?.nickname ?? '나간 사람'}</span>
              <span className="muted small" style={{ marginLeft: 'auto' }}>
                이 방에서 {room.sessionStats[u]?.wins ?? 0}승 / {room.sessionStats[u]?.played ?? 0}판
              </span>
            </div>
          )),
        )}
      </div>
      {amSeated && (
        <button className="btn btn-primary btn-block" disabled={voted} onClick={() => socket.send({ t: 'rematch' })}>
          {voted ? `다른 사람을 기다리는 중… (${room.rematchVotes.length}/${seated.length})` : `🔁 한 판 더 (${room.rematchVotes.length}/${seated.length})`}
        </button>
      )}
      <button className="btn btn-secondary btn-block" onClick={() => setHidden(true)}>
        판 다시 보기
      </button>
      {room.lastGamePk && result.ranking.some((g) => g.includes(me.id)) && (
        <Link className="btn btn-secondary btn-block" to={`/replay/${room.lastGamePk}`}>
          ▶ 처음부터 다시 보기
        </Link>
      )}
      <button className="btn btn-ghost btn-block" onClick={onLeave}>
        방 나가기
      </button>
      {room.lastSeed && (
        <FairnessCheck seedHash={room.seedHash} seed={room.lastSeed} />
      )}
    </Sheet>
  );
}

/**
 * docs/04 §5: the seed's SHA-256 was published when the game started; the seed is revealed at the end.
 * The browser recomputes the hash itself so players don't have to trust the server's word.
 */
function FairnessCheck({ seedHash, seed }: { seedHash: string | null; seed: string }) {
  const [verdict, setVerdict] = useState<null | boolean>(null);
  const check = async () => {
    const digest = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(seed));
    const hex = [...new Uint8Array(digest)].map((b) => b.toString(16).padStart(2, '0')).join('');
    setVerdict(hex === seedHash);
  };
  return (
    <details className="small muted">
      <summary>공정성 확인</summary>
      <p>시작할 때 공개한 값(SHA-256): {seedHash ?? '-'}</p>
      <p>끝나고 공개한 난수 씨앗: {seed}</p>
      <button type="button" className="btn btn-secondary btn-sm" onClick={check}>
        내 브라우저에서 직접 확인하기
      </button>
      {verdict !== null && (
        <p style={{ fontWeight: 700, color: verdict ? 'var(--success)' : 'var(--danger)' }}>
          {verdict ? '✓ 일치해요. 게임 도중 카드 순서나 난수가 바뀌지 않았어요.' : '✗ 일치하지 않아요. 관리자에게 알려 주세요.'}
        </p>
      )}
    </details>
  );
}

// ---------------------------------------------------------------- chat

function ChatButton({ onOpen }: { onOpen: () => void }) {
  const total = useRoom((s) => s.chat.length);
  const seen = useChatSeen((s) => s.seen);
  const unread = Math.max(0, total - seen);
  return (
    <button className="btn btn-ghost btn-sm" onClick={onOpen} aria-label={`채팅${unread ? `, 새 메시지 ${unread}개` : ''}`}>
      💬 채팅{unread > 0 && <span className="badge warning">{unread}</span>}
    </button>
  );
}