/** 벽 쌓기 길찾기 화면 (docs/games/quoridor.md §9). 판은 내 출발 쪽이 아래로 오도록 돌려서 그린다. */
import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
import type { Cell, QuoridorLegalWall, QuoridorMove, QuoridorOptions, QuoridorSeatView, QuoridorView, Seat, Wall } from '@bg/games/quoridor';
import type { PublicUser } from '@bg/shared/lite';
import { Avatar, ConfirmSheet, Sheet } from '../../components/ui';
import { TurnTimer, useServerNow } from '../../components/TurnTimer';
import { haptic, sounds } from '../../lib/feedback';
import { toast } from '../../store/toast';
import type { BoardProps, GameUI, OptionsProps } from '../types';
import { helpNow } from './help';
import { quickStart } from './quick';

type O = 'h' | 'v';
interface Pt {
  x: number;
  y: number;
}
const N = 9;
const G = 0.2; // 홈(groove) 폭
const PAD = 0.78;
const SEAT_KO: Record<Seat, string> = { S: '남', W: '서', N: '북', E: '동' };
const SEAT_COLOR: Record<Seat, string> = { S: '#dc2626', W: '#16a34a', N: '#2563eb', E: '#d97706' };
const COLOR_KO: Record<Seat, string> = { S: '빨강', W: '초록', N: '파랑', E: '주황' };
const SIDE_KO = { top: '맨 위', bottom: '맨 아래', left: '맨 왼쪽', right: '맨 오른쪽' } as const;
type Side = keyof typeof SIDE_KO;
const label = (p: Cell) => `${'abcdefghi'[p.c]}${p.r + 1}`;
const wallKey = (w: Wall) => `${w.o}:${w.c},${w.r}`;
/** 가로·세로는 보는 사람 화면 기준(서·동 자리는 판이 90° 돌아가 있음). */
const wallText = (w: Wall, swap = false) => `${(w.o === 'h') !== swap ? '가로' : '세로'} 벽 ${label(w)}`;
const swapFor = (seat: Seat | null) => seat === 'W' || seat === 'E';

const CSS = `
.qd-pawn { transition: transform 220ms ease-out; }
.qd-wall-new { animation: qd-drop 260ms ease-out both; transform-box: fill-box; transform-origin: center; }
.qd-turn-ring { animation: qd-pulse 1.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes qd-drop { 0% { transform: scale(1.35); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes qd-pulse { 0%, 100% { opacity: 0.95; } 50% { opacity: 0.35; } }
.qd-board * { pointer-events: none; }
.qd-board [data-cell], .qd-board [data-anchor] { pointer-events: auto; }
.qd-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.qd-modes .btn { min-height: 52px; padding-inline: 8px; white-space: nowrap; font-size: 1rem; }
.qd-modes .btn[aria-pressed='true'] { box-shadow: inset 0 0 0 3px var(--focus); }
.qd-tray { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-height: 52px; }
.qd-tray .btn { min-height: 48px; }
.qd-hint { flex: 1 1 100%; min-width: 0; font-weight: 700; }
.qd-tray .qd-confirm { flex: 2 1 0; }
.qd-tray .qd-rotate { flex: 1 1 0; }
.qd-hint.bad { color: var(--danger); }
.qd-bars { display: inline-flex; gap: 2px; align-items: flex-end; }
.qd-bars i { display: inline-block; width: 4px; height: 16px; border-radius: 2px; background: var(--warning); }
.qd-bars i.used { background: var(--border); opacity: 0.6; }
@media (prefers-reduced-motion: reduce) {
  .qd-pawn { transition: none; }
  .qd-wall-new, .qd-turn-ring { animation: none; }
}`;

/** 판 돌리기: 모델 좌표(x 오른쪽, y 위쪽, 0~9) ↔ 화면 좌표(y 아래쪽). 네 가지 모두 자기 자신이 역변환. */
function makeTf(seat: Seat | null) {
  const s = seat ?? 'S';
  const tf = (x: number, y: number): [number, number] =>
    s === 'S' ? [x, N - y] : s === 'N' ? [N - x, y] : s === 'W' ? [N - y, N - x] : [y, x];
  const swap = s === 'W' || s === 'E';
  return {
    swap,
    cellToScreen: (p: Cell): Pt => {
      const [x, y] = tf(p.c + 0.5, p.r + 0.5);
      return { x: Math.floor(x), y: Math.floor(y) };
    },
    screenToCell: (p: Pt): Cell => {
      const [x, y] = tf(p.x + 0.5, p.y + 0.5);
      return { c: Math.floor(x), r: Math.floor(y) };
    },
    /** 화면 앵커(0~7)와 화면 방향. */
    wallToScreen: (w: Wall): { a: Pt; o: O } => {
      const [x, y] = tf(w.c + 1, w.r + 1);
      return { a: { x: Math.round(x) - 1, y: Math.round(y) - 1 }, o: swap ? (w.o === 'h' ? 'v' : 'h') : w.o };
    },
    screenToWall: (a: Pt, o: O): Wall => {
      const [x, y] = tf(a.x + 1, a.y + 1);
      return { c: Math.round(x) - 1, r: Math.round(y) - 1, o: swap ? (o === 'h' ? 'v' : 'h') : o };
    },
    goalSide: (seat: Seat): Side => {
      const g: Record<Seat, [number, number]> = { S: [4.5, 9], N: [4.5, 0], W: [9, 4.5], E: [0, 4.5] };
      const [x, y] = tf(...g[seat]);
      return y < 0.5 ? 'top' : y > 8.5 ? 'bottom' : x < 0.5 ? 'left' : 'right';
    },
  };
}

function overlapsAny(walls: Wall[], w: Wall): boolean {
  const has = (o: O, c: number, r: number) => walls.some((x) => x.o === o && x.c === c && x.r === r);
  if (w.o === 'h') return has('h', w.c - 1, w.r) || has('h', w.c, w.r) || has('h', w.c + 1, w.r) || has('v', w.c, w.r);
  return has('v', w.c, w.r - 1) || has('v', w.c, w.r) || has('v', w.c, w.r + 1) || has('h', w.c, w.r);
}

function wallRect(a: Pt, o: O) {
  return o === 'h' ? { x: a.x + 0.05, y: a.y + 1 - G / 2, width: 2 - 0.1, height: G } : { x: a.x + 1 - G / 2, y: a.y + 0.05, width: G, height: 2 - 0.1 };
}

function moveText(m: QuoridorMove, swap = false): string {
  if (m.kind === 'move') return `${SEAT_KO[m.seat]} ${label(m.to)}${m.auto ? '(자동)' : ''}`;
  if (m.kind === 'wall') return `${SEAT_KO[m.seat]} ${wallText(m.wall, swap)}`;
  return `${SEAT_KO[m.seat]} 쉼`;
}

function PawnMark({ seat, cx, cy, r = 0.34, ghost }: { seat: Seat; cx: number; cy: number; r?: number; ghost?: boolean }) {
  return (
    <g opacity={ghost ? 0.5 : 1}>
      {!ghost && <circle cx={cx + 0.03} cy={cy + 0.05} r={r} fill="#000" opacity={0.25} />}
      <circle cx={cx} cy={cy} r={r} fill={SEAT_COLOR[seat]} stroke="#fff" strokeWidth={0.05} />
      <text x={cx} y={cy + 0.01} fontSize={r * 0.95} fontWeight={800} fill="#fff" textAnchor="middle" dominantBaseline="central">
        {SEAT_KO[seat]}
      </text>
    </g>
  );
}

type Mode = 'move' | 'wall';

function QuoridorBoard({ view: v, players, act, pending, tapConfirm }: BoardProps<QuoridorView>) {
  const me = v.seats.find((x) => x.seat === v.mySeat) ?? null;
  const myTurn = v.phase === 'playing' && !!me && v.turn === me.seat && v.legalPawnMoves !== null;
  const t = useMemo(() => makeTf(v.mySeat), [v.mySeat]);
  const [mode, setMode] = useState<Mode>('move');
  const [orient, setOrient] = useState<O>('h');
  const [wallAt, setWallAt] = useState<Pt | null>(null); // 화면 앵커(고정된 미리보기)
  const [hoverAnchor, setHoverAnchor] = useState<Pt | null>(null);
  const [hoverCell, setHoverCell] = useState<Pt | null>(null);
  const [movePreview, setMovePreview] = useState<Pt | null>(null);
  const [cursor, setCursor] = useState<Pt>({ x: 4, y: 8 });
  const [kbd, setKbd] = useState(false);
  const [announce, setAnnounce] = useState('');
  const svgRef = useRef<SVGSVGElement>(null);
  const prevCount = useRef(v.moveCount);
  const prevWalls = useRef(v.walls.length);
  const [newWall, setNewWall] = useState<string | null>(null);

  const legalCells = useMemo(() => {
    const m = new Set<string>();
    for (const c of v.legalPawnMoves ?? []) {
      const p = t.cellToScreen(c);
      m.add(`${p.x},${p.y}`);
    }
    return m;
  }, [v.legalPawnMoves, t]);
  const legalWalls = useMemo(() => {
    const m = new Map<string, QuoridorLegalWall>();
    for (const w of v.legalWalls ?? []) m.set(wallKey(w), w);
    return m;
  }, [v.legalWalls]);

  // 새 수: 소리·진동·스크린리더 안내, 미리보기 지우기, 차례가 오면 커서를 내 말로.
  useLayoutEffect(() => {
    const prev = prevCount.current;
    prevCount.current = v.moveCount;
    setMovePreview(null);
    setWallAt(null);
    if (v.walls.length > prevWalls.current) setNewWall(wallKey(v.walls[v.walls.length - 1]!));
    else setNewWall(null);
    prevWalls.current = v.walls.length;
    if (v.moveCount <= prev) return;
    const added = v.moves.slice(prev);
    const texts = added.map((m) => (m.kind === 'pass' ? `${SEAT_KO[m.seat]}은 움직일 곳이 없어 차례를 넘겼어요.` : `${moveText(m, t.swap)}.`));
    for (const m of added) if (m.kind === 'pass' && m.seat === v.mySeat) toast('움직일 곳도 세울 벽도 없어서 차례를 넘겼어요');
    setAnnounce(texts.join(' '));
    if (added.some((m) => m.kind !== 'pass')) sounds.stone();
    if (v.phase === 'playing' && v.mySeat === v.turn) {
      haptic(40);
      if (document.visibilityState === 'hidden') sounds.myTurn();
    }
  }, [v.moveCount]); // eslint-disable-line react-hooks/exhaustive-deps

  useEffect(() => {
    if (myTurn && me?.pos) setCursor(t.cellToScreen(me.pos));
    if (!myTurn) setMode('move');
  }, [myTurn]); // eslint-disable-line react-hooks/exhaustive-deps

  const wallsLeft = me?.wallsLeft ?? 0;
  const canWall = myTurn && wallsLeft > 0;

  /** 화면 앵커·방향의 벽에 대한 판정: 합법이면 정보, 아니면 이유. */
  const judge = (a: Pt, o: O): { wall: Wall; legal: QuoridorLegalWall | null; why: string | null } => {
    const wall = t.screenToWall(a, o);
    if (wallsLeft <= 0) return { wall, legal: null, why: '남은 벽이 없어요.' };
    const legal = legalWalls.get(wallKey(wall)) ?? null;
    if (legal) return { wall, legal, why: null };
    return { wall, legal: null, why: overlapsAny(v.walls, wall) ? '다른 벽과 겹쳐요.' : '누군가의 길을 완전히 막을 수 없어요.' };
  };

  const doMove = (p: Pt) => {
    act({ type: 'move', to: t.screenToCell(p) });
    setMovePreview(null);
    setHoverCell(null);
  };
  const doWall = (a: Pt) => {
    const j = judge(a, orient);
    if (j.why) {
      haptic([30, 30, 30]);
      setAnnounce(j.why);
      toast(j.why);
      return;
    }
    act({ type: 'placeWall', ...j.wall });
    setWallAt(null);
    setHoverAnchor(null);
  };
  const refuseCell = (p: Pt) => {
    const c = t.screenToCell(p);
    const occupied = v.seats.some((x) => x.pos && x.pos.c === c.c && x.pos.r === c.r);
    const msg = occupied ? '말이 있는 칸이에요.' : '그 칸으로는 갈 수 없어요. 밝게 표시된 칸으로 움직일 수 있어요.';
    haptic([30, 30, 30]);
    setAnnounce(msg);
    toast(msg);
  };

  const tapCell = (p: Pt, mouse: boolean) => {
    setCursor(p);
    if (!myTurn) return;
    if (!legalCells.has(`${p.x},${p.y}`)) {
      refuseCell(p);
      return;
    }
    if (mouse || !tapConfirm || (movePreview && movePreview.x === p.x && movePreview.y === p.y)) {
      if (!pending) doMove(p);
      return;
    }
    setMovePreview(p);
  };
  const tapAnchor = (a: Pt) => {
    if (!canWall) return;
    if (wallAt && wallAt.x === a.x && wallAt.y === a.y) {
      setOrient((o) => (o === 'h' ? 'v' : 'h'));
      return;
    }
    setWallAt(a);
    setCursor(a);
  };

  const pointer = (e: React.PointerEvent<SVGSVGElement>): { x: number; y: number } | null => {
    const svg = svgRef.current;
    if (!svg) return null;
    const pt = svg.createSVGPoint();
    pt.x = e.clientX;
    pt.y = e.clientY;
    const loc = pt.matrixTransform(svg.getScreenCTM()!.inverse());
    return { x: loc.x, y: loc.y };
  };
  const toCell = (p: { x: number; y: number }): Pt | null => {
    const x = Math.floor(p.x);
    const y = Math.floor(p.y);
    return x >= 0 && y >= 0 && x < N && y < N ? { x, y } : null;
  };
  /** 가장 가까운 교차점으로 스냅. */
  const toAnchor = (p: { x: number; y: number }): Pt | null => {
    if (p.x < -0.3 || p.y < -0.3 || p.x > N + 0.3 || p.y > N + 0.3) return null;
    return { x: Math.min(7, Math.max(0, Math.round(p.x) - 1)), y: Math.min(7, Math.max(0, Math.round(p.y) - 1)) };
  };

  const setModeTo = (m: Mode) => {
    setMode(m);
    setMovePreview(null);
    setWallAt(null);
    if (m === 'wall' && me?.pos) {
      const p = t.cellToScreen(me.pos);
      // 내 말 바로 위쪽 교차점에서 시작(상대 쪽으로 세우기 쉽게).
      setCursor({ x: Math.min(7, Math.max(0, p.x - 1)), y: Math.min(7, Math.max(0, p.y - 2)) });
    } else if (m === 'move' && me?.pos) setCursor(t.cellToScreen(me.pos));
    setAnnounce(m === 'wall' ? '벽 세우기: 방향키로 자리를 고르고 R로 방향을 바꾼 뒤 Enter로 세워요.' : '말 움직이기: 방향키로 칸을 고르고 Enter로 움직여요.');
  };

  const onKey = (e: React.KeyboardEvent) => {
    setKbd(true);
    const d: Record<string, [number, number]> = { ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, -1], ArrowDown: [0, 1] };
    const max = mode === 'wall' ? 7 : 8;
    if (d[e.key]) {
      e.preventDefault();
      const next = { x: Math.min(max, Math.max(0, cursor.x + d[e.key]![0])), y: Math.min(max, Math.max(0, cursor.y + d[e.key]![1])) };
      setCursor(next);
      if (mode === 'wall') {
        setWallAt(next);
        const j = judge(next, orient);
        setAnnounce(`${wallText(j.wall, t.swap)} ${j.why ?? '세울 수 있음'}`);
      } else {
        const c = t.screenToCell(next);
        const who = v.seats.find((x) => x.pos && x.pos.c === c.c && x.pos.r === c.r);
        setAnnounce(`${label(c)} ${who ? `${SEAT_KO[who.seat]} 말` : legalCells.has(`${next.x},${next.y}`) ? '갈 수 있음' : '빈칸'}`);
      }
    } else if ((e.key === 'r' || e.key === 'R') && mode === 'wall') {
      e.preventDefault();
      const o = orient === 'h' ? 'v' : 'h';
      setOrient(o);
      setWallAt(cursor);
      const j = judge(cursor, o);
      setAnnounce(`${wallText(j.wall, t.swap)} ${j.why ?? '세울 수 있음'}`);
    } else if (e.key === 'w' || e.key === 'W') {
      e.preventDefault();
      if (canWall) setModeTo(mode === 'wall' ? 'move' : 'wall');
    } else if (e.key === 'Escape') {
      setWallAt(null);
      setMovePreview(null);
    } else if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      if (!myTurn || pending) return;
      if (mode === 'wall') doWall(cursor);
      else if (legalCells.has(`${cursor.x},${cursor.y}`)) doMove(cursor);
      else refuseCell(cursor);
    }
  };

  // 미리보기 대상(고정 > 마우스 올림 > 키보드 커서).
  const previewAnchor = mode === 'wall' && canWall ? (wallAt ?? hoverAnchor ?? (kbd ? cursor : null)) : null;
  const preview = previewAnchor ? judge(previewAnchor, orient) : null;
  const ghostCell = mode === 'move' && myTurn ? (movePreview ?? (hoverCell && legalCells.has(`${hoverCell.x},${hoverCell.y}`) ? hoverCell : null)) : null;
  const path = myTurn && v.showPath && v.myShortestPath && me?.pos ? [me.pos, ...v.myShortestPath].map((c) => t.cellToScreen(c)) : null;
  const goalSides = v.seats.filter((x) => x.status === 'playing' || (x.status === 'finished' && v.phase === 'finished')).map((x) => ({ seat: x.seat, side: t.goalSide(x.seat) }));
  const nick = (id: string) => players[id]?.nickname ?? '알 수 없음';
  const lastWall = v.lastMove?.kind === 'wall' ? wallKey(v.lastMove.wall) : null;
  const lastTo = v.lastMove?.kind === 'move' ? t.cellToScreen(v.lastMove.to) : null;
  const lastFrom = v.lastMove?.kind === 'move' ? t.cellToScreen(v.lastMove.from) : null;
  const myGoal = me ? SIDE_KO[t.goalSide(me.seat)] : null;

  const band = (side: Side, k: number) => {
    const w = 0.16;
    const off = -0.1 - w - k * (w + 0.04);
    if (side === 'top') return { x: 0, y: off, width: N, height: w };
    if (side === 'bottom') return { x: 0, y: N - off - w, width: N, height: w };
    if (side === 'left') return { x: off, y: 0, width: w, height: N };
    return { x: N - off - w, y: 0, width: w, height: N };
  };

  return (
    <div className="board-wrap stack" style={{ gap: 10, maxWidth: 'min(100%, calc(100vh - 340px))', minWidth: 'min(100%, 300px)' }}>
      <style>{CSS}</style>
      <svg
        ref={svgRef}
        className="qd-board"
        viewBox={`${-PAD} ${-PAD} ${N + 2 * PAD} ${N + 2 * PAD}`}
        style={{ width: '100%', display: 'block', background: 'var(--wood)', borderRadius: 14, touchAction: 'manipulation', cursor: myTurn ? 'pointer' : 'default', boxShadow: 'var(--shadow)' }}
        data-my-seat={v.mySeat ?? ''}
        data-mode={mode}
        data-path={path && v.myShortestPath ? v.myShortestPath.map(label).join(' ') : ''}
        data-preview={preview ? `${preview.wall.o}:${label(preview.wall)}${preview.why ? ':bad' : ''}` : ''}
        onPointerMove={(e) => {
          if (e.pointerType !== 'mouse' || !myTurn) return;
          const p = pointer(e);
          if (!p) return;
          if (mode === 'wall') {
            const a = toAnchor(p);
            if (a?.x !== hoverAnchor?.x || a?.y !== hoverAnchor?.y) setHoverAnchor(a);
          } else {
            const c = toCell(p);
            if (c?.x !== hoverCell?.x || c?.y !== hoverCell?.y) setHoverCell(c);
          }
        }}
        onPointerLeave={() => {
          setHoverAnchor(null);
          setHoverCell(null);
        }}
        onPointerUp={(e) => {
          setKbd(false);
          const p = pointer(e);
          if (!p) return;
          if (mode === 'wall') {
            const a = toAnchor(p);
            if (a) tapAnchor(a);
          } else {
            const c = toCell(p);
            if (c) tapCell(c, e.pointerType === 'mouse');
          }
        }}
        tabIndex={0}
        role="grid"
        aria-label={`벽 쌓기 길찾기 판 9×9, 지금은 ${mode === 'wall' ? '벽 세우기' : '말 움직이기'}. 방향키로 고르고 Enter로 정해요. W는 모드 바꾸기, R은 벽 방향 바꾸기예요.${myGoal ? ` 내 목표는 ${myGoal} 줄이에요.` : ''}`}
        onKeyDown={onKey}
      >
        {goalSides.map((g, k) => {
          const sameSide = goalSides.filter((x, j) => j < k && x.side === g.side).length;
          return <rect key={`g${g.seat}`} {...band(g.side, sameSide)} rx={0.06} fill={SEAT_COLOR[g.seat]} opacity={0.9} />;
        })}
        {Array.from({ length: N }, (_, i) => {
          const bottom = t.screenToCell({ x: i, y: N - 1 });
          const left = t.screenToCell({ x: 0, y: i });
          return (
            <g key={`l${i}`} fill="var(--wood-line)" fontSize={0.28} fontWeight={700} textAnchor="middle" dominantBaseline="central" aria-hidden>
              <text x={i + 0.5} y={N + PAD - 0.2}>
                {t.swap ? bottom.r + 1 : 'abcdefghi'[bottom.c]}
              </text>
              <text x={-PAD + 0.2} y={i + 0.5}>
                {t.swap ? 'abcdefghi'[left.c] : left.r + 1}
              </text>
            </g>
          );
        })}
        {Array.from({ length: N * N }, (_, i) => {
          const x = i % N;
          const y = Math.floor(i / N);
          const legal = myTurn && mode === 'move' && legalCells.has(`${x},${y}`);
          return (
            <rect
              key={`c${i}`}
              x={x + G / 2}
              y={y + G / 2}
              width={1 - G}
              height={1 - G}
              rx={0.08}
              fill={legal ? 'rgba(255, 255, 255, 0.92)' : 'rgba(255, 255, 255, 0.32)'}
              stroke={legal ? 'var(--primary)' : 'none'}
              strokeWidth={legal ? 0.06 : 0}
              data-cell={label(t.screenToCell({ x, y }))}
              data-legal={legal ? '1' : undefined}
            />
          );
        })}
        {lastFrom && <rect x={lastFrom.x + G / 2 + 0.05} y={lastFrom.y + G / 2 + 0.05} width={1 - G - 0.1} height={1 - G - 0.1} rx={0.08} fill="none" stroke="var(--wood-line)" strokeWidth={0.04} strokeDasharray="0.1 0.08" />}
        {path && path.length > 1 && (
          <polyline
            points={path.map((p) => `${p.x + 0.5},${p.y + 0.5}`).join(' ')}
            fill="none"
            stroke={SEAT_COLOR[me!.seat]}
            strokeWidth={0.07}
            strokeDasharray="0.14 0.12"
            strokeLinecap="round"
            strokeLinejoin="round"
            opacity={0.75}
          />
        )}
        {myTurn &&
          mode === 'move' &&
          [...legalCells].map((k) => {
            const [x, y] = k.split(',').map(Number) as [number, number];
            return <circle key={`d${k}`} cx={x + 0.5} cy={y + 0.5} r={0.11} fill="var(--primary)" opacity={0.8} />;
          })}
        {v.walls.map((w) => {
          const s = t.wallToScreen(w);
          const k = wallKey(w);
          return (
            <rect
              key={k}
              className={k === newWall ? 'qd-wall-new' : undefined}
              {...wallRect(s.a, s.o)}
              rx={0.05}
              fill="#3b2412"
              stroke={k === lastWall ? 'var(--focus)' : '#f3e2c0'}
              strokeWidth={k === lastWall ? 0.05 : 0.025}
              data-wall={`${w.o}:${label(w)}`}
            />
          );
        })}
        {v.seats.map((x) => {
          if (!x.pos) return null;
          const p = t.cellToScreen(x.pos);
          const turn = v.phase === 'playing' && v.turn === x.seat;
          return (
            <g key={x.seat} className="qd-pawn" style={{ transform: `translate(${p.x + 0.5}px, ${p.y + 0.5}px)` }} data-pawn={x.seat} data-at={label(x.pos)}>
              {turn && <circle className="qd-turn-ring" cx={0} cy={0} r={0.45} fill="none" stroke={SEAT_COLOR[x.seat]} strokeWidth={0.06} />}
              <PawnMark seat={x.seat} cx={0} cy={0} />
            </g>
          );
        })}
        {lastTo && <circle cx={lastTo.x + 0.5 + 0.27} cy={lastTo.y + 0.5 - 0.27} r={0.08} fill="var(--focus)" stroke="#fff" strokeWidth={0.02} />}
        {ghostCell && me && <PawnMark seat={me.seat} cx={ghostCell.x + 0.5} cy={ghostCell.y + 0.5} ghost />}
        {preview && previewAnchor && (
          <rect
            {...wallRect(previewAnchor, orient)}
            rx={0.05}
            fill={preview.why ? 'rgba(220, 38, 38, 0.6)' : SEAT_COLOR[me!.seat]}
            opacity={preview.why ? 1 : 0.6}
            stroke={preview.why ? '#7f1d1d' : '#fff'}
            strokeWidth={0.04}
            strokeDasharray={wallAt ? undefined : '0.12 0.08'}
          />
        )}
        {myTurn && mode === 'wall' && (
          <g aria-hidden>
            {Array.from({ length: 64 }, (_, i) => {
              const a = { x: i % 8, y: Math.floor(i / 8) };
              const w = t.screenToWall(a, 'h');
              return <circle key={`a${i}`} cx={a.x + 1} cy={a.y + 1} r={0.09} fill="var(--wood-line)" opacity={0.35} data-anchor={label(w)} />;
            })}
          </g>
        )}
        {myTurn && kbd && mode === 'move' && (
          <rect x={cursor.x + 0.04} y={cursor.y + 0.04} width={0.92} height={0.92} rx={0.1} fill="none" stroke="var(--focus)" strokeWidth={0.07} />
        )}
        {myTurn && kbd && mode === 'wall' && <circle cx={cursor.x + 1} cy={cursor.y + 1} r={0.16} fill="none" stroke="var(--focus)" strokeWidth={0.06} />}
      </svg>
      <p className="sr-only" aria-live="polite">
        {announce}
      </p>
      {me && v.phase === 'playing' && me.status === 'playing' && (
        <div className="qd-modes" role="group" aria-label="할 일 고르기">
          <button type="button" className={`btn ${mode === 'move' ? 'btn-primary' : 'btn-secondary'}`} aria-pressed={mode === 'move'} disabled={!myTurn} onClick={() => setModeTo('move')}>
            🚶 말 움직이기
          </button>
          <button type="button" className={`btn ${mode === 'wall' ? 'btn-primary' : 'btn-secondary'}`} aria-pressed={mode === 'wall'} disabled={!canWall} onClick={() => setModeTo('wall')}>
            🧱 벽 세우기 ({wallsLeft}개)
          </button>
        </div>
      )}
      {myTurn && mode === 'wall' && (
        <div className="qd-tray">
          <span className={`qd-hint small${preview?.why ? ' bad' : ''}`} role="status">
            {!preview
              ? '판의 홈(칸 사이) 교차점을 눌러 벽 자리를 골라요.'
              : preview.why
                ? `${wallText(preview.wall, t.swap)}: ${preview.why}`
                : `${wallText(preview.wall, t.swap)} · 상대 길 +${preview.legal!.opp}칸${preview.legal!.me ? ` · 내 길 +${preview.legal!.me}칸` : ''}`}
          </span>
          <button type="button" className="btn btn-secondary qd-rotate" onClick={() => {
            const o = orient === 'h' ? 'v' : 'h';
            setOrient(o);
          }} aria-label={`벽 방향 바꾸기, 지금 ${orient === 'h' ? '가로' : '세로'}`}>
            ↻ {orient === 'h' ? '가로' : '세로'}
          </button>
          <button type="button" className="btn btn-primary qd-confirm" disabled={!previewAnchor || !!preview?.why || pending} onClick={() => previewAnchor && doWall(previewAnchor)}>
            벽 세우기 확인
          </button>
        </div>
      )}
      {myTurn && mode === 'move' && movePreview && (
        <div className="row">
          <button className="btn btn-primary" style={{ flex: 2 }} disabled={pending} onClick={() => doMove(movePreview)}>
            {label(t.screenToCell(movePreview))}으로 이동
          </button>
          <button className="btn btn-secondary" style={{ flex: 1 }} onClick={() => setMovePreview(null)}>
            취소
          </button>
        </div>
      )}
      {me && v.phase === 'playing' && !(myTurn && mode === 'wall') && (
        <p className="small muted" style={{ margin: 0, textAlign: 'center' }}>
          {me.status === 'playing'
            ? `내 말은 ${COLOR_KO[me.seat]}(${SEAT_KO[me.seat]})이에요. ${myGoal} 줄(${COLOR_KO[me.seat]} 띠)에 먼저 닿으면 이겨요.`
            : me.status === 'finished'
              ? '목표에 도착했어요! 남은 사람들의 순위가 정해질 때까지 지켜봐요.'
              : '게임에서 빠졌어요. 계속 지켜볼 수 있어요.'}
        </p>
      )}
      {!me && (
        <p className="small muted" style={{ margin: 0, textAlign: 'center' }}>
          {v.seats.map((x) => `${nick(x.playerId)}: ${COLOR_KO[x.seat]} → ${SIDE_KO[t.goalSide(x.seat)]} 줄`).join(' · ')}
        </p>
      )}
    </div>
  );
}

// ---------------------------------------------------------------- side panel

function WallBars({ left, total }: { left: number; total: number }) {
  return (
    <span className="qd-bars" aria-label={`남은 벽 ${left}개`} role="img">
      {Array.from({ length: total }, (_, i) => (
        <i key={i} className={i < left ? undefined : 'used'} />
      ))}
    </span>
  );
}

function PlayerRow({ v, x, players, deadline, me }: { v: QuoridorView; x: QuoridorSeatView; players: Record<string, PublicUser>; deadline: number | null; me: string | null }) {
  const u = players[x.playerId] ?? { id: x.playerId, nickname: '알 수 없음', avatar: null, kind: 'guest' as const };
  const active = v.phase === 'playing' && v.turn === x.seat;
  const now = useServerNow(500);
  const tc = v.timeControl;
  let clock: React.ReactNode = null;
  if (x.status === 'playing' && tc.kind === 'fischer') {
    const ms = Math.max(0, v.remainingMs[x.seat] - (active ? now - v.turnStartedAt : 0));
    const s = Math.ceil(ms / 1000);
    clock = (
      <span style={{ fontVariantNumeric: 'tabular-nums', fontWeight: 700, color: active && s <= 10 ? 'var(--danger)' : undefined }}>
        {Math.floor(s / 60)}:{String(s % 60).padStart(2, '0')}
      </span>
    );
  } else if (active) {
    const total = tc.kind === 'perMove' ? tc.perMoveSec * 1000 : deadline ? Math.max(1000, deadline - v.turnStartedAt) : 300_000;
    clock = <TurnTimer deadline={deadline} totalMs={total} mine={x.playerId === me} size={40} />;
  }
  const state =
    x.status === 'finished'
      ? `${x.finishOrder}등 도착`
      : x.status === 'resigned'
        ? '기권'
        : x.status === 'timedOut'
          ? '시간패'
          : `남은 길 ${x.distance}칸${x.autoMoveStreak > 0 ? ` · 자리 비움 ${x.autoMoveStreak}번` : ''}`;
  return (
    <div
      className="card row"
      style={{ padding: '8px 12px', gap: 10, border: `3px solid ${active ? SEAT_COLOR[x.seat] : 'transparent'}`, opacity: x.status === 'resigned' || x.status === 'timedOut' ? 0.6 : 1 }}
    >
      <svg width={28} height={28} viewBox="-0.5 -0.5 1 1" aria-hidden>
        <PawnMark seat={x.seat} cx={0} cy={0} r={0.45} />
      </svg>
      <Avatar user={u} size={32} />
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontWeight: 700, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
          {u.nickname}
          {x.playerId === me && <span className="muted small"> (나)</span>}
        </div>
        <div className="muted small" style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
          {COLOR_KO[x.seat]} · {state}
        </div>
      </div>
      <WallBars left={x.wallsLeft} total={v.wallsPerPlayer} />
      <span className="small" style={{ fontWeight: 800, minWidth: '2ch', textAlign: 'right', fontVariantNumeric: 'tabular-nums' }} aria-hidden>
        {x.wallsLeft}
      </span>
      {clock}
    </div>
  );
}

function QuoridorSide({ view: v, me, players, act, pending, deadline }: BoardProps<QuoridorView>) {
  const [confirm, setConfirm] = useState<null | 'resign' | 'draw'>(null);
  const mine = v.seats.find((x) => x.seat === v.mySeat);
  const live = v.phase === 'playing' && mine?.status === 'playing';
  const incoming =
    live && v.mySeat
      ? v.undo.pending && v.undo.pending.by !== v.mySeat && !v.undo.pending.accepted.includes(v.mySeat)
        ? 'undo'
        : v.draw.pendingBy && v.draw.pendingBy !== v.mySeat && !v.draw.accepted.includes(v.mySeat)
          ? 'draw'
          : null
      : null;
  const waitingOthers = live && v.mySeat && ((v.undo.pending && (v.undo.pending.by === v.mySeat || v.undo.pending.accepted.includes(v.mySeat))) || (v.draw.pendingBy && (v.draw.pendingBy === v.mySeat || v.draw.accepted.includes(v.mySeat))));
  const outgoing = !!v.mySeat && (v.undo.pending?.by === v.mySeat || v.draw.pendingBy === v.mySeat);
  const undoLeft = v.mySeat ? v.undo.remaining[v.mySeat] : null;
  const requester = v.undo.pending?.by ?? v.draw.pendingBy;
  // 내 자리가 맨 아래, 나머지는 차례 순서대로 위에.
  const order = mine ? [...v.seats.filter((x) => x.seat !== mine.seat), mine] : v.seats;
  const four = v.seats.length === 4;
  return (
    <>
      {order.map((x) => (
        <PlayerRow key={x.seat} v={v} x={x} players={players} deadline={deadline} me={me} />
      ))}
      {live && (
        <div style={{ display: 'grid', gridTemplateColumns: v.undo.allowed && v.draw.allowed ? '1fr 1fr 1fr' : '1fr 1fr', gap: 8 }}>
          {v.undo.allowed && (
            <button className="btn btn-secondary btn-sm" disabled={!!requester || undoLeft === 0 || !v.moves.some((m) => m.kind !== 'pass' && m.seat === v.mySeat)} onClick={() => act({ type: 'requestUndo' })} title={undoLeft !== null ? `${undoLeft}번 남음` : '무제한'}>
              ↩ 무르기{undoLeft !== null ? ` ${undoLeft}` : ''}
            </button>
          )}
          {v.draw.allowed && (
            <button className="btn btn-secondary btn-sm" disabled={!!requester} onClick={() => setConfirm('draw')}>
              🤝 무승부
            </button>
          )}
          <button className="btn btn-danger btn-sm" onClick={() => setConfirm('resign')}>
            🏳 기권
          </button>
        </div>
      )}
      {waitingOthers && (
        <div className="card row" style={{ justifyContent: 'space-between', padding: 10 }}>
          <span className="small">다른 사람의 답을 기다리는 중…</span>
          {outgoing && (
            <button className="btn btn-ghost btn-sm" onClick={() => act({ type: 'cancelOffer' })}>
              요청 취소
            </button>
          )}
        </div>
      )}
      <MoveList view={v} />
      {incoming && requester && (
        <Sheet onClose={() => {}} label="다른 사람의 요청">
          <h2>{incoming === 'undo' ? `${SEAT_KO[requester]}(${COLOR_KO[requester]})이 무르기를 요청했어요` : `${SEAT_KO[requester]}(${COLOR_KO[requester]})이 무승부를 제안했어요`}</h2>
          <p className="muted">
            {incoming === 'undo'
              ? `수락하면 ${v.undo.pending!.plies}개의 행동이 되돌려져요.${four ? ' 다른 사람도 모두 수락해야 해요.' : ''}`
              : `수락하면 이 판은 무승부로 끝나요.${four ? ' 남은 사람이 모두 수락해야 해요.' : ''}`}
          </p>
          <div className="row">
            <button className="btn btn-primary" style={{ flex: 1 }} disabled={pending} onClick={() => act(incoming === 'undo' ? { type: 'respondUndo', accept: true } : { type: 'respondDraw', accept: true })}>
              수락
            </button>
            <button className="btn btn-secondary" style={{ flex: 1 }} disabled={pending} onClick={() => act(incoming === 'undo' ? { type: 'respondUndo', accept: false } : { type: 'respondDraw', accept: false })}>
              거절
            </button>
          </div>
        </Sheet>
      )}
      {confirm === 'resign' && (
        <ConfirmSheet
          title="기권할까요?"
          body={four ? '기권하면 내 말이 판에서 빠지고, 남은 벽은 사라져요.' : '기권하면 이 판은 상대가 이겨요.'}
          confirm="기권하기"
          danger
          onConfirm={() => act({ type: 'resign' })}
          onClose={() => setConfirm(null)}
        />
      )}
      {confirm === 'draw' && <ConfirmSheet title="무승부를 제안할까요?" confirm="제안하기" onConfirm={() => act({ type: 'offerDraw' })} onClose={() => setConfirm(null)} />}
    </>
  );
}

function MoveList({ view: v }: { view: QuoridorView }) {
  const ref = useRef<HTMLOListElement>(null);
  useEffect(() => {
    ref.current?.scrollTo({ top: ref.current.scrollHeight });
  }, [v.moveCount]);
  if (v.moveCount === 0) return null;
  let n = 0;
  return (
    <details className="card wide-open" open style={{ padding: 12 }}>
      <summary style={{ cursor: 'pointer', fontWeight: 700 }}>기록 ({v.moves.filter((m) => m.kind !== 'pass').length}수)</summary>
      <ol ref={ref} style={{ margin: '8px 0 0', paddingLeft: 0, listStyle: 'none', maxHeight: 132, overflow: 'auto', display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(130px, 1fr))', gap: '2px 8px', fontVariantNumeric: 'tabular-nums' }}>
        {v.moves.map((m, i) => (
          <li key={i} className={`small${m.kind === 'pass' ? ' muted' : ''}`}>
            {m.kind !== 'pass' && <span className="muted">{++n}. </span>}
            <span style={{ color: SEAT_COLOR[m.seat], fontWeight: 800 }} aria-hidden>
              ●{' '}
            </span>
            {moveText(m, swapFor(v.mySeat))}
          </li>
        ))}
      </ol>
    </details>
  );
}

function statusText(v: QuoridorView, me: string | null, players: Record<string, PublicUser>): string {
  if (v.phase === 'finished') return v.result?.summaryKo ?? '게임이 끝났어요';
  const mine = v.seats.find((x) => x.seat === v.mySeat);
  if (mine && mine.status === 'playing') {
    if (v.undo.pending && v.undo.pending.by !== mine.seat && !v.undo.pending.accepted.includes(mine.seat)) return '무르기 요청이 왔어요';
    if (v.draw.pendingBy && v.draw.pendingBy !== mine.seat && !v.draw.accepted.includes(mine.seat)) return '무승부 제안이 왔어요';
  }
  if (mine && v.turn === mine.seat && mine.status === 'playing') {
    return mine.wallsLeft > 0 ? '내 차례예요. 말을 움직이거나 벽을 세워요' : '내 차례예요. 남은 벽이 없어서 말을 움직여요';
  }
  const turnSeat = v.seats.find((x) => x.seat === v.turn)!;
  const nick = players[turnSeat.playerId]?.nickname ?? SEAT_KO[v.turn];
  if (mine?.status === 'finished') return `도착했어요! ${nick}님 차례예요`;
  return mine ? `${nick}님(${COLOR_KO[v.turn]})이 생각 중이에요…` : `${nick}님(${COLOR_KO[v.turn]}) 차례예요`;
}

// ---------------------------------------------------------------- options

function Seg<T extends string | number>({ value, options, onChange, label: aria }: { value: T; options: [T, string][]; onChange: (v: T) => void; label: string }) {
  return (
    <div className="segmented" role="group" aria-label={aria}>
      {options.map(([k, l]) => (
        <button key={String(k)} type="button" aria-pressed={value === k} onClick={() => onChange(k)}>
          {l}
        </button>
      ))}
    </div>
  );
}

function Field({ label: title, children }: { label: string; children: React.ReactNode }) {
  return (
    <div className="stack" style={{ gap: 6 }}>
      <strong>{title}</strong>
      {children}
    </div>
  );
}

const TIME_PRESETS: [string, string, Partial<QuoridorOptions['timeControl']>][] = [
  ['pm15', '한 수 15초', { kind: 'perMove', perMoveSec: 15 }],
  ['pm30', '한 수 30초', { kind: 'perMove', perMoveSec: 30 }],
  ['pm60', '한 수 60초', { kind: 'perMove', perMoveSec: 60 }],
  ['f3', '3분 + 2초', { kind: 'fischer', baseSec: 180, incSec: 2 }],
  ['f5', '5분 + 3초', { kind: 'fischer', baseSec: 300, incSec: 3 }],
  ['none', '시간 제한 없음', { kind: 'none' }],
];

function timeKey(tc: QuoridorOptions['timeControl']): string {
  if (tc.kind === 'none') return 'none';
  if (tc.kind === 'perMove') return `pm${tc.perMoveSec}`;
  return `f${Math.round(tc.baseSec / 60)}`;
}

function timeLabel(tc: QuoridorOptions['timeControl']): string {
  if (tc.kind === 'none') return '시간 제한 없음';
  if (tc.kind === 'perMove') return `한 수 ${tc.perMoveSec}초`;
  const m = Math.floor(tc.baseSec / 60);
  const sec = tc.baseSec % 60;
  return `${m}분${sec ? ` ${sec}초` : ''} + ${tc.incSec}초`;
}

function Options({ value: o, onChange }: OptionsProps<QuoridorOptions>) {
  const [more, setMore] = useState(false);
  const set = (patch: Partial<QuoridorOptions>) => onChange({ ...o, ...patch });
  const onOff = (v: boolean) => (v ? 'on' : 'off');
  const known = TIME_PRESETS.some((p) => p[0] === timeKey(o.timeControl));
  return (
    <div className="stack" style={{ gap: 16 }}>
      <Field label="시간">
        <Seg
          label="시간"
          value={timeKey(o.timeControl)}
          options={[...TIME_PRESETS.map(([k, l]) => [k, l] as [string, string]), ...(known ? [] : [[timeKey(o.timeControl), `${timeLabel(o.timeControl)}(관리자 설정)`] as [string, string]])]}
          onChange={(k) => {
            const preset = TIME_PRESETS.find((p) => p[0] === k);
            if (preset) set({ timeControl: { ...o.timeControl, ...preset[2] } });
          }}
        />
      </Field>
      <Field label="2명일 때 1인당 벽 수">
        <Seg
          label="2명일 때 1인당 벽 수"
          value={o.wallsPerPlayer}
          options={[...([10, 8, 6] as const).map((n) => [n, n === 10 ? '10개(기본)' : `${n}개(빠른 게임)`] as [number, string]), ...([10, 8, 6].includes(o.wallsPerPlayer) ? [] : [[o.wallsPerPlayer, `${o.wallsPerPlayer}개`] as [number, string]])]}
          onChange={(wallsPerPlayer) => set({ wallsPerPlayer })}
        />
        <span className="small muted">4명이면 1인당 5개로 정해져 있어요. 3명은 할 수 없어요.</span>
      </Field>
      <Field label="내 최단 길 힌트">
        <Seg label="내 최단 길 힌트" value={onOff(o.showPath)} options={[['on', '점선으로 보여 주기'], ['off', '안 보여 주기']]} onChange={(k) => set({ showPath: k === 'on' })} />
      </Field>
      <button type="button" className="btn btn-ghost" onClick={() => setMore(!more)} aria-expanded={more}>
        {more ? '▲ 자세한 설정 닫기' : '▼ 자세한 설정'}
      </button>
      {more && (
        <>
          <Field label="대각선으로 넘어갈 수 있는 때">
            <Seg
              label="대각선으로 넘어갈 수 있는 때"
              value={o.diagonalJumpTrigger}
              options={[
                ['wallEdgePawn', '말 뒤가 벽·판 끝·다른 말'],
                ['wallOnly', '말 뒤가 벽일 때만'],
              ]}
              onChange={(diagonalJumpTrigger) => set({ diagonalJumpTrigger })}
            />
          </Field>
          <Field label="시작 자리">
            <Seg label="시작 자리" value={o.seatOrder} options={[['random', '무작위'], ['joinOrder', '들어온 순서']]} onChange={(seatOrder) => set({ seatOrder })} />
          </Field>
          <Field label="4명일 때 1등이 나오면">
            <Seg label="4명일 때 1등이 나오면" value={onOff(o.continueForRanking)} options={[['off', '바로 끝내기'], ['on', '계속해서 2·3등 가리기']]} onChange={(k) => set({ continueForRanking: k === 'on' })} />
          </Field>
          {o.timeControl.kind === 'perMove' && (
            <Field label="시간이 다 되면">
              <Seg label="시간이 다 되면" value={o.timeoutPolicy} options={[['autoMove', '최단 길로 한 칸 자동 이동'], ['lose', '시간패']]} onChange={(timeoutPolicy) => set({ timeoutPolicy })} />
            </Field>
          )}
          <Field label="무르기">
            <Seg label="무르기" value={o.undo} options={[['off', '안 씀'], ['1', '1번'], ['3', '3번'], ['unlimited', '무제한']]} onChange={(undo) => set({ undo })} />
          </Field>
          <Field label="무승부 제안">
            <Seg label="무승부 제안" value={onOff(o.drawOffer)} options={[['on', '허용'], ['off', '안 함']]} onChange={(k) => set({ drawOffer: k === 'on' })} />
          </Field>
        </>
      )}
    </div>
  );
}

function optionsSummary(o: QuoridorOptions): string {
  return [timeLabel(o.timeControl), `벽 ${o.wallsPerPlayer}개(2명)`, ...(o.showPath ? ['길 힌트'] : []), ...(o.diagonalJumpTrigger === 'wallOnly' ? ['대각은 벽 뒤만'] : []), ...(o.continueForRanking ? ['순위 끝까지'] : [])].join(' · ');
}

// ---------------------------------------------------------------- rules

/** 규칙 그림: 5×5 조각판. pawns: [열, 행(위=0), 자리], walls: [앵커 열, 앵커 행, 방향], marks: 갈 수 있는 칸. */
function Diagram({ pawns, walls = [], marks = [], caption }: { pawns: [number, number, Seat][]; walls?: [number, number, O, boolean?][]; marks?: [number, number][]; caption: string }) {
  const n = 5;
  return (
    <figure style={{ margin: 0, textAlign: 'center' }}>
      <svg viewBox={`-0.1 -0.1 ${n + 0.2} ${n + 0.2}`} style={{ width: '100%', maxWidth: 170, display: 'block', margin: '0 auto', background: 'var(--wood)', borderRadius: 8 }} aria-hidden>
        {Array.from({ length: n * n }, (_, i) => (
          <rect key={i} x={(i % n) + G / 2} y={Math.floor(i / n) + G / 2} width={1 - G} height={1 - G} rx={0.08} fill="rgba(255,255,255,0.35)" />
        ))}
        {marks.map(([x, y]) => (
          <g key={`m${x}${y}`}>
            <rect x={x + G / 2} y={y + G / 2} width={1 - G} height={1 - G} rx={0.08} fill="rgba(255,255,255,0.92)" stroke="var(--primary)" strokeWidth={0.06} />
            <circle cx={x + 0.5} cy={y + 0.5} r={0.11} fill="var(--primary)" />
          </g>
        ))}
        {walls.map(([x, y, o, red], i) => (
          <rect key={`w${i}`} {...wallRect({ x, y }, o)} rx={0.05} fill={red ? 'rgba(220, 38, 38, 0.7)' : '#3b2412'} stroke={red ? '#7f1d1d' : '#f3e2c0'} strokeWidth={0.03} strokeDasharray={red ? '0.12 0.08' : undefined} />
        ))}
        {pawns.map(([x, y, s]) => (
          <PawnMark key={`p${x}${y}`} seat={s} cx={x + 0.5} cy={y + 0.5} />
        ))}
      </svg>
      <figcaption className="small muted" style={{ marginTop: 4 }}>
        {caption}
      </figcaption>
    </figure>
  );
}

function Rules({ options }: { options?: QuoridorOptions }) {
  const wallOnly = options?.diagonalJumpTrigger === 'wallOnly';
  return (
    <div className="stack">
      <p>
        9×9 판에서 <strong>내 말을 반대편 끝줄까지 먼저 보내면</strong> 이겨요. 2명이면 마주 보고, 4명이면 네 방향에서 시작해요(3명은 할 수 없어요). 화면에서는 내 목표 줄이 항상 위쪽이고, 판 가장자리의 색 띠가 각자의 목표 줄이에요.
      </p>
      <p>
        내 차례에는 <strong>말을 한 칸 움직이거나</strong>, <strong>벽을 하나 세워요</strong>(둘 중 하나만). 벽은 2명이면 1인당 {options?.wallsPerPlayer ?? 10}개, 4명이면 5개예요. 한 번 세운 벽은 옮기거나 치울 수 없어요.
      </p>
      <p>
        <strong>말 이동</strong>: 위·아래·왼쪽·오른쪽으로 한 칸. 벽이 있거나 다른 말이 있는 칸으로는 못 가요. 대각선 이동은 기본으로는 안 돼요.
      </p>
      <p>
        <strong>뛰어넘기</strong>: 바로 앞에 다른 말이 있으면 그 말을 곧게 뛰어넘을 수 있어요. 넘을 말 뒤가 {wallOnly ? '벽으로 막혀 있으면' : '벽·판 끝·다른 말로 막혀 있으면'} 그 말의 왼쪽이나 오른쪽(대각선)으로 갈 수 있어요. 곧게 넘을 수 있을 때는 대각선으로 못 가고, 한 번에 말 하나만 넘을 수 있어요.
      </p>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(140px, 1fr))', gap: 12 }}>
        <Diagram pawns={[[2, 3, 'S'], [2, 2, 'N']]} marks={[[2, 1], [1, 3], [3, 3], [2, 4]]} caption="① 앞의 말을 곧게 뛰어넘기" />
        <Diagram pawns={[[2, 3, 'S'], [2, 2, 'N']]} walls={[[2, 1, 'h']]} marks={[[1, 2], [3, 2], [1, 3], [3, 3], [2, 4]]} caption="② 뒤가 벽이면 대각선으로" />
        <Diagram pawns={[[2, 3, 'S'], [2, 2, 'N']]} walls={[[2, 1, 'h'], [1, 1, 'v']]} marks={[[3, 2], [1, 3], [3, 3], [2, 4]]} caption="③ 한쪽도 벽이면 다른 쪽만" />
      </div>
      <p>
        <strong>벽 세우기</strong>: 벽은 칸 2개 길이로, 칸 사이 홈에 세워요. 다른 벽과 겹치거나 같은 자리에서 십자로 엇갈릴 수 없어요. 그리고 <strong>누구의 길도 완전히 막으면 안 돼요</strong>. 돌아가더라도 모든 사람에게 목표 줄까지 가는 길이 하나는 남아 있어야 해요(말은 길을 막는 것으로 치지 않아요).
      </p>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(140px, 1fr))', gap: 12 }}>
        <Diagram pawns={[[2, 0, 'N']]} walls={[[1, 0, 'v'], [2, 0, 'h'], [3, 0, 'v', true]]} caption="④ 길을 완전히 막는 벽은 안 돼요" />
        <Diagram pawns={[[2, 0, 'N']]} walls={[[1, 0, 'v'], [2, 0, 'h']]} marks={[[3, 0]]} caption="⑤ 돌아갈 길이 남으면 괜찮아요" />
      </div>
      <p>
        <strong>세우는 방법</strong>: "벽 세우기"를 누르고 칸 사이 교차점을 누르면 벽이 반투명하게 미리 보여요. 같은 곳을 한 번 더 누르거나 "↻" 버튼으로 가로·세로를 바꾸고, "벽 세우기 확인"을 누르면 세워져요. 세울 수 없는 자리면 빨갛게 보이고 이유가 나와요. 키보드로는 방향키로 고르고 R로 방향을 바꾸고 Enter로 세워요(W로 모드 바꾸기).
      </p>
      <p>
        <strong>이기는 방법</strong>: 목표 줄의 아무 칸에나 닿는 순간 이겨요. 4명일 때 나머지 순위는 남은 길이가 짧은 순서예요{options?.continueForRanking ? '(이 방은 1등이 나와도 계속해서 2·3등을 가려요)' : ''}. 움직일 곳도 세울 벽도 없으면 자동으로 차례를 넘겨요.
      </p>
      <p className="muted">팁: 벽은 아끼는 것도 전략이에요. 상대가 목표에 가까워졌을 때 길을 크게 돌아가게 만드는 벽이 가장 효과가 커요. 미리보기에 "상대 길 +몇 칸"이 나와요.</p>
    </div>
  );
}

const ui: GameUI<QuoridorView, QuoridorOptions> = {
  Board: QuoridorBoard,
  Side: QuoridorSide,
  statusText,
  isMyTurn: (v, me) => v.phase === 'playing' && !!v.mySeat && v.seats.some((x) => x.seat === v.turn && x.playerId === me && x.status === 'playing'),
  Options,
  optionsSummary,
  Rules,
  quickStart,
  helpNow,
};

export default ui;