// The viewer's two modes (docs/games.md §8.4). Replay: kit/bridge.js hands over a replay, which plays move by move
// with step controls. Live (index.html?live): the room page posts the room's messages in batches, and a move made at
// the table goes back through shoalAct. Nothing is stored: the frame is sandboxed, with no storage to rely on.
import { useEffect, useMemo, useState } from 'react';
import type { ReactNode } from 'react';
import { createRoot } from 'react-dom/client';
import './deskpark/deskpark.css';
import './shoal.css';
import { Board } from './Board';
import type { Msg, Replay as ReplayData } from './model';
import { liveView, replayView } from './model';

interface Batch {
  room: string;
  you?: (string | number)[];
  messages: Msg[];
}

declare global {
  interface Window {
    shoalReplay(start: (text: string, name: string) => void): void;
    shoalLive(fn: (batch: Batch) => void): void;
    shoalAct(seat: string, version: number, action: string): void;
  }
}

function Shell({ sub, right, children }: { sub: string; right?: ReactNode; children?: ReactNode }) {
  return (
    <div className="table">
      <header className="table__top">
        <div className="table__top-left">
          <div className="table__title">
            <strong>斗地主</strong>
            <span title="RLCard 1.2.0 对局：0 号座位固定地主，无叫牌；炸弹、王炸和春天翻倍。">固定地主 · 无叫牌</span>
            <span>{sub}</span>
          </div>
        </div>
        <div className="table__top-right">{right}</div>
      </header>
      <div className="board">{children}</div>
    </div>
  );
}

function ReplayMode() {
  const [R, setR] = useState<ReplayData | null>(null);
  const [t, setT] = useState(0);
  const [playing, setPlaying] = useState(false);
  useEffect(
    () =>
      window.shoalReplay((text) => {
        setR(JSON.parse(text));
        setT(0);
        setPlaying(true);
      }),
    [],
  );
  const n = R ? R.moveHistory.length : 0;
  useEffect(() => {
    if (!R || !playing) return;
    if (t >= n) return setPlaying(false);
    const id = setTimeout(() => setT(t + 1), t === 0 ? 1200 : 850);
    return () => clearTimeout(id);
  }, [R, t, n, playing]);
  if (!R) return <Shell sub="回放" />;
  const go = (x: number) => {
    setPlaying(false);
    setT(Math.max(0, Math.min(n, x)));
  };
  const controls = (
    <div className="replay-bar">
      <button className="btn btn--felt btn--sm" aria-label="上一手" onClick={() => go(t - 1)}>
        ◀
      </button>
      <button
        className="btn btn--felt btn--sm"
        aria-label={playing ? '暂停' : '播放'}
        onClick={() => (playing ? setPlaying(false) : (t >= n && setT(0), setPlaying(true)))}
      >
        {playing ? '❚❚' : '▶'}
      </button>
      <button className="btn btn--felt btn--sm" aria-label="下一手" onClick={() => go(t + 1)}>
        ▶▏
      </button>
      <input type="range" min={0} max={n} value={t} aria-label="第几手" onChange={(e) => go(Number(e.target.value))} />
      <span className="num">
        {t} / {n}
      </span>
    </div>
  );
  return (
    <Shell sub="回放" right={controls}>
      <Board v={replayView(R, t)} me={0} peek mine={[]} req={null} />
    </Shell>
  );
}

function LiveMode() {
  const [s, setS] = useState({ room: '', you: [] as string[], msgs: new Map<number, Msg>() });
  useEffect(
    () =>
      window.shoalLive((b) =>
        setS((old) => {
          const msgs = new Map(old.msgs); // batches may overlap: n is the message's identity
          for (const m of b.messages ?? []) msgs.set(m.n, m);
          return { room: b.room, you: (b.you ?? []).map(String), msgs };
        }),
      ),
    [],
  );
  const { v, reqs } = useMemo(() => liveView([...s.msgs.values()].sort((a, b) => a.n - b.n), s.you), [s]);
  const req = reqs[0] ?? null;
  const mine = s.you.map(Number);
  const me = req ? req.seat : mine.length ? mine[0] : (v.landlord ?? 0);
  const status = v.result ? '已结束' : req ? '轮到你出牌' : v.landlord === null ? '等待开局' : '对局中';
  return (
    <Shell sub={`直播${s.room ? ` · 房间 ${s.room}` : ''}`} right={<span className="live-dot">{status}</span>}>
      <Board
        v={v}
        me={me}
        peek={false}
        mine={mine}
        req={req}
        onAct={(a) => req && window.shoalAct(String(req.seat), req.version, a)}
      />
    </Shell>
  );
}

const live = new URLSearchParams(location.search).has('live');
createRoot(document.getElementById('root')!).render(live ? <LiveMode /> : <ReplayMode />);