// The replay's controls in the top bar (step, play, speed, whose view), the live seat switch, and the end of a game as
// 无名杀's result dialog.
import type { GameView } from '../../../src/engine/types';
import type { UseReplayResult, ReplaySpeed } from '../../../src/client/hooks/useReplay';
import { ID_SHORT, ID_KEY } from './Seat';
import { portrait } from './art';

export function ReplayBar({ r }: { r: UseReplayResult }) {
  return (
    <div className="nm-replay">
      <button className="nm-mini" onClick={() => r.goTo(0)} title="回到开局" disabled={r.step <= 0}>
        ⏮
      </button>
      <button className="nm-mini" onClick={r.prev} title="上一步" disabled={r.step <= 0}>
        ◀
      </button>
      <button className="nm-mini play" onClick={r.togglePlay} title={r.playing ? '暂停' : '播放'}>
        {r.playing ? '❚❚' : '▶'}
      </button>
      <button className="nm-mini" onClick={r.next} title="下一步" disabled={r.step >= r.total}>
        ▶▏
      </button>
      <input type="range" min={0} max={r.total} value={r.step} onChange={(e) => r.goTo(Number(e.target.value))} aria-label="进度" />
      <span className="nm-step">
        {r.step}/{r.total}
      </span>
    </div>
  );
}

/** The replay's speed and whose view it shows (a seat's, or the spectator's). */
export function ReplayView({ r, names }: { r: UseReplayResult; names: string[] }) {
  return (
    <div className="nm-replay">
      <select value={r.speed} onChange={(e) => r.setSpeed(Number(e.target.value) as ReplaySpeed)} title="速度">
        {[0.5, 1, 2, 4].map((x) => (
          <option key={x} value={x}>
            {x}×
          </option>
        ))}
      </select>
      <select value={r.seat} onChange={(e) => r.setSeat(Number(e.target.value))} title="视角">
        {r.seats.map((s) => (
          <option key={s} value={s}>
            {s < 0 ? '旁观' : `${s + 1}号位 ${names[s] ?? ''}`}
          </option>
        ))}
      </select>
    </div>
  );
}

/** The live seat switch, when this viewer controls more than one seat. */
export function SeatSwitch({ seats, seat, view, onPick }: { seats: string[]; seat?: string; view: GameView; onPick: (s: string) => void }) {
  if (seats.length < 2) return null;
  return (
    <div className="nm-replay">
      {seats.map((x) => (
        <button key={x} className={`nm-mini${x === seat ? ' on' : ''}`} onClick={() => onPick(x)}>
          {view.players[Number(x)]?.character || `${Number(x) + 1}号位`}
        </button>
      ))}
    </div>
  );
}

const CAMP: Record<string, string> = { 主公: '主公', 忠臣: '主公', 反贼: '反贼', 内奸: '内奸' };
const COUNT: Record<number, [number, number]> = { 2: [0, 1], 3: [0, 1], 4: [1, 1], 5: [1, 2], 6: [1, 3], 7: [2, 3], 8: [2, 4] };

/** Who won, from what the view shows at the end: the lord alive means the lord's side; the lord dead, the rebels, unless
 *  the one left alive is the renegade (every loyalist and rebel is dead and shown). */
export function inferWinner(view: GameView): string {
  const lord = view.players.find((p) => p.identity === '主公');
  if (!lord) return '';
  if (lord.alive) return '主公';
  const alive = view.players.filter((p) => p.alive);
  const [zhong, fan] = COUNT[view.players.length] ?? [1, 2];
  const dead = (id: string) => view.players.filter((p) => !p.alive && p.identity === id).length;
  return alive.length === 1 && dead('忠臣') === zhong && dead('反贼') === fan ? '内奸' : '反贼';
}

export function Result({ view, camp, identities, me, labels }: { view: GameView; camp: string; identities?: Record<string, string>; me: number; labels?: string[] }) {
  const idOf = (i: number) => identities?.[String(i)] || view.players[i]?.identity || '';
  const mine = me >= 0 ? CAMP[idOf(me)] : '';
  const title = !camp ? '游戏结束' : mine ? (mine === camp ? '游戏胜利' : '游戏失败') : `${camp === '主公' ? '主公、忠臣' : camp}获胜`;
  return (
    <div className="nm-dialog-mask result">
      <div className={`nm-dialog result ${mine && camp ? (mine === camp ? 'win' : 'lose') : ''}`}>
        <div className="nm-result-title">{title}</div>
        <table className="nm-result">
          <tbody>
            {view.players.map((p, i) => {
              const id = idOf(i);
              const img = portrait(p.character);
              return (
                <tr key={i} className={`${CAMP[id] === camp ? 'won' : ''}${p.alive ? '' : ' dead'}`}>
                  <td>
                    <span className="nm-result-face" style={img ? { backgroundImage: `url(${img})` } : undefined} />
                  </td>
                  <td className="nm-result-name">{p.character}</td>
                  <td>{labels?.[i] ?? (p.name !== p.character ? p.name : '')}</td>
                  <td>
                    <span className={`nm-identity inline ${id ? ID_KEY[id] : 'unknown'}`}>
                      {id ? ID_SHORT[id] : ''}
                    </span>
                    {id || '未知'}
                  </td>
                  <td>{p.alive ? '存活' : '阵亡'}</td>
                  <td>{CAMP[id] === camp ? '胜' : id ? '负' : ''}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}