// The Dou Dizhu table, after DeskPark's DoudizhuBoard (apps/web/src/games/doudizhu, MIT, see viewer/NOTICE): the
// same layout, seats, hand, trick zones, card counter and result sheet, drawn from a View (model.ts) instead of
// DeskPark's engine, and acting through the room protocol: the buttons offer only what the room's legal list allows.
import { useMemo, useState } from 'react';
import { CardRow, Hand } from './deskpark/Hand';
import { PlayingCard } from './deskpark/PlayingCard';
import type { Card } from './deskpark/PlayingCard';
import { Avatar, Seat } from './deskpark/Seat';
import { CountChip, MoveZone, useHintCycle, useSelection } from './deskpark/trick';
import type { Move, Req, View } from './model';
import { ORDER, cardsFor, isBomb, moveOf, rankChar, sortHand } from './model';

const LABEL: Record<string, string> = { B: '小', R: '大', T: '10' };

function CardCounter({ v, me }: { v: View; me: number | null }) {
  const seen = [...v.played, ...(me !== null ? (v.hands[me] ?? []) : [])].map(rankChar);
  const order = [...ORDER].reverse();
  return (
    <div className="counter" aria-label="记牌器">
      {order.map((r) => {
        const joker = r === 'B' || r === 'R';
        const n = (joker ? 1 : 4) - seen.filter((x) => x === r).length;
        return (
          <span key={r} className={n === 0 ? 'is-zero' : n >= 4 || (joker && n === 1) ? 'is-full' : ''}>
            <em>{LABEL[r] ?? r}</em>
            <b className="num">{n}</b>
          </span>
        );
      })}
    </div>
  );
}

const zone = (m: Move) => (m === null ? null : m === 'pass' ? { type: 'pass' as const } : { type: 'play' as const, cards: m });

/** hint order, as DeskPark's: bombs last, then by the rank that repeats most, longer first */
function hintOrder(a: string, b: string) {
  const main = (m: string) => Math.max(...[...m].map((r) => [...m].filter((x) => x === r).length * 100 + ORDER.indexOf(r)));
  const key = (m: string) => (isBomb(m) ? 1e4 : 0) + (main(m) % 100);
  return key(a) - key(b) || b.length - a.length;
}

export interface BoardProps {
  v: View;
  /** the seat at the bottom of the table */
  me: number;
  /** a replay shows every hand */
  peek: boolean;
  /** seats this viewer plays */
  mine: number[];
  req: Req | null;
  onAct?: (action: string) => void;
}

export function Board({ v, me, peek, mine, req, onAct }: BoardProps) {
  const right = (me + 1) % 3;
  const left = (me + 2) % 3;
  const over = !!v.result;
  const myTurn = !!req && req.seat === me && !over;
  const hand = useMemo(() => sortHand(v.hands[me] ?? []), [v.hands, me]);
  const [sel, setSel] = useSelection(hand, req?.version);
  const [sent, setSent] = useState(0);
  const waiting = myTurn && sent === req!.version;
  const canAct = myTurn && !waiting;
  const legal = useMemo(() => new Set(req?.legal ?? []), [req]);

  const candidates = useMemo(() => {
    if (!req) return [] as number[][];
    return req.legal
      .filter((m) => m !== 'pass')
      .sort(hintOrder)
      .map((m) => cardsFor(hand, m).map((c) => c.id));
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [req?.version, me]);
  const nextHint = useHintCycle(candidates, req?.version);

  const selected = hand.filter((c) => sel.has(c.id));
  const move = moveOf(selected);
  const playable = canAct && selected.length > 0 && legal.has(move);
  const send = (a: string) => {
    if (!req) return;
    onAct?.(a);
    setSent(req.version);
    setSel(new Set());
  };

  const role = (s: number) => (v.landlord === null ? undefined : s === v.landlord ? '地主' : '农民');
  const tone = (s: number) => (s === v.landlord ? 'gold' : 'plain') as 'gold' | 'plain';
  // RLCard 1.2.0 fixes the landlord seat; do not invent a bidding phase.
  const bubble = (s: number) => (v.step === 0 && s === v.landlord && !over ? '固定地主' : undefined);
  const player = (s: number) => ({ name: v.names[s], isBot: v.bots[s], isMe: mine.includes(s) });
  const shown = (s: number): Card[] | null => (peek || over ? v.hands[s] : null);

  const opponent = (s: number, side: 'left' | 'right') => (
    <div className={`ddz__seat is-${side}`}>
      <Seat
        player={player(s)}
        active={v.turn === s && !over}
        tag={role(s)}
        tagTone={tone(s)}
        sub={
          <span className="ddz__sub">
            <CountChip n={v.counts[s]} />
          </span>
        }
        bubble={bubble(s)}
        bubbleSide={side === 'left' ? 'right' : 'left'}
      />
      {shown(s) && (
        <div className={`peek is-${side}`}>
          {sortHand(shown(s)!).map((c) => (
            <PlayingCard key={c.id} card={c} w="var(--cw-xs)" />
          ))}
        </div>
      )}
    </div>
  );

  return (
    <div className="ddz">
      <div className="ddz__info">
        <div className="ddz__bottom">
          {v.bottom.length
            ? sortHand(v.bottom).map((c) => <PlayingCard key={c.id} card={c} w="var(--cw-xs)" />)
            : [0, 1, 2].map((i) => <PlayingCard key={i} faceDown w="var(--cw-xs)" />)}
        </div>
        <div className="info-chips">
          <span className="chip">
            底分 <b className="num">1</b>
          </span>
          <span className="chip is-gold">
            倍数 <b className="num">×{2 ** v.bombs * (v.result?.spring ? 2 : 1)}</b>
          </span>
          {v.bombs > 0 && (
            <span className="chip">
              炸弹 <b className="num">{v.bombs}</b>
            </span>
          )}
        </div>
      </div>

      {v.landlord !== null && <CardCounter v={v} me={peek || mine.includes(me) ? me : null} />}

      {opponent(left, 'left')}
      {opponent(right, 'right')}

      <div className="ddz__center">
        <div className="ddz__zone is-left">
          <MoveZone move={zone(v.moves[left])} from="left" />
        </div>
        <div className="ddz__zone is-right">
          <MoveZone move={zone(v.moves[right])} from="right" />
        </div>
        <div className="ddz__zone is-me">
          <MoveZone move={zone(v.moves[me])} from="bottom" />
        </div>
      </div>

      <div className="ddz__me">
        <div className="ddz__myseat">
          <Seat
            player={player(me)}
            active={v.turn === me && !over}
            tag={role(me)}
            tagTone={tone(me)}
            sub={hand.length ? undefined : <CountChip n={v.counts[me]} />}
            bubble={bubble(me)}
            bubbleSide="right"
            layout="row"
            size={54}
          />
        </div>
        {canAct && (
          <div className="action-bar">
            {legal.size === 1 && legal.has('pass') ? (
              <button className="btn btn--felt-primary btn--md" onClick={() => send('pass')}>
                要不起
              </button>
            ) : (
              <>
                {legal.has('pass') && (
                  <button className="btn btn--felt btn--md" onClick={() => send('pass')}>
                    不出
                  </button>
                )}
                <button className="btn btn--felt btn--md" onClick={() => setSel(new Set(nextHint() ?? []))}>
                  提示
                </button>
                <button className="btn btn--felt-primary btn--md" disabled={!playable} onClick={() => send(move)}>
                  出牌
                </button>
              </>
            )}
          </div>
        )}
        {waiting && <div className="action-hint">已出牌，等待牌桌</div>}
        {!myTurn && !over && v.turn !== null && mine.length > 0 && (
          <div className="action-hint">
            等待 <b>{v.names[v.turn]}</b> 出牌
          </div>
        )}
        {mine.length === 0 && !peek && !over && <div className="action-hint">观战中</div>}
      </div>

      <div className="ddz__hand">
        {hand.length > 0 && (
          <Hand cards={hand} selected={sel} onChange={canAct ? setSel : undefined} disabled={!canAct} dealKey={peek ? 'replay' : 'live'} />
        )}
      </div>

      {v.fx && (
        <div key={`${v.step}-${v.fx}`} className={`fx ${v.fx === '春天' ? 'is-spring' : 'is-bomb'}`}>
          <span>{v.fx}</span>
        </div>
      )}
      {over && <Result v={v} me={me} mine={mine} />}
    </div>
  );
}

function Result({ v, me, mine }: { v: View; me: number; mine: number[] }) {
  const r = v.result!;
  const [open, setOpen] = useState(true);
  if (!open) return null;
  const playing = mine.includes(me);
  const iWon = r.landlordWon !== null && r.landlordWon === (me === v.landlord);
  const title =
    r.landlordWon === null ? '牌局中止' : playing ? (iWon ? '胜利' : '失败') : r.landlordWon ? '地主胜' : '农民胜';
  const details = [
    v.landlord !== null ? `地主 ${v.names[v.landlord]}` : '',
    v.bombs ? `炸弹 ${v.bombs}` : '',
    r.spring ? (r.landlordWon ? '春天' : '反春') : '',
    `×${2 ** v.bombs * (r.spring ? 2 : 1)}`,
  ].filter(Boolean);
  return (
    <div className="sheet-backdrop is-late" onClick={() => setOpen(false)}>
      <div className="sheet" onClick={(e) => e.stopPropagation()}>
        <div className="sheet__body">
          <div className="result">
            <div className={`result__title ${!playing || iWon ? 'is-win' : 'is-lose'}`}>{title}</div>
            <div className="result__sub">{details.join(' · ')}</div>
            <table className="result__table">
              <thead>
                <tr>
                  <th>玩家</th>
                  <th className="num">本局</th>
                </tr>
              </thead>
              <tbody>
                {[0, 1, 2].map((s) => (
                  <tr key={s} className={mine.includes(s) ? 'is-me' : ''}>
                    <td>
                      <span className="result__who">
                        <Avatar name={v.names[s]} size={26} />
                        {v.names[s]}
                        <span className={`mini-tag ${s === v.landlord ? '' : 'is-plain'}`}>
                          {s === v.landlord ? '地主' : '农民'}
                        </span>
                      </span>
                    </td>
                    <td className={`num ${r.points[s] >= 0 ? 'delta-pos' : 'delta-neg'}`}>
                      {r.points[s] > 0 ? `+${r.points[s]}` : r.points[s]}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
            <div className="result__hands">
              {[0, 1, 2]
                .filter((s) => (v.hands[s] ?? []).length > 0)
                .map((s) => (
                  <div className="result__hand" key={s}>
                    <span>{v.names[s]}</span>
                    <CardRow cards={sortHand(v.hands[s]!)} w="var(--cw-xs)" overlap={0.5} />
                  </div>
                ))}
            </div>
          </div>
        </div>
        <div className="sheet__foot">
          <button className="btn btn--secondary btn--md" onClick={() => setOpen(false)}>
            看牌桌
          </button>
        </div>
      </div>
    </div>
  );
}