// Another player's seat, as 无名杀's portrait card: the general's 立绘 filling a framed card in the faction's colour,
// the name in vertical brush script, the faction badge, the identity at the top right (主公 shown, others ? until
// revealed), HP as 勾玉, the hand count, equipment as text rows along the bottom, the judgement area's tricks as small
// marks, 横置 chains, 翻面, dying and dead, the current turn's glow and its phase, and target highlighting.
import { useGameView } from '../../../src/client/components/GameViewCtx';
import { useCountdownFraction } from '../../../src/client/hooks/useCountdown';
import { getCharacterMeta } from '../../../src/engine/data/character-meta';
import type { GameView, EquipSlot } from '../../../src/engine/types';
import type { HpChangeNumber } from '../../../src/client/hooks/useAnimationState';
import type { CSSProperties, ReactNode } from 'react';
import { portrait, cardArt, FACTION_KEY } from './art';
import { isRed } from './Card';

type Player = GameView['players'][number];
export const ID_SHORT: Record<string, string> = { 主公: '主', 忠臣: '忠', 反贼: '反', 内奸: '内' };
export const ID_KEY: Record<string, string> = { 主公: 'zhu', 忠臣: 'zhong', 反贼: 'fan', 内奸: 'nei' };
export const SLOTS: Array<[EquipSlot, string]> = [
  ['武器', '武'],
  ['防具', '防'],
  ['防御马', '+1'],
  ['进攻马', '-1'],
  ['宝物', '宝'],
];
const PHASE_SHORT: Record<string, string> = { 准备: '准备', 判定: '判定', 摸牌: '摸牌', 出牌: '出牌', 弃牌: '弃牌', 回合结束: '结束' };

export function Timer({ deadline, totalMs }: { deadline: number | null; totalMs?: number }) {
  const fill = useCountdownFraction(deadline, totalMs || 15000);
  if (deadline == null) return null;
  return (
    <div className="nm-timer">
      <div className="nm-timer-fill" ref={fill} />
    </div>
  );
}

/** HP as 无名杀 draws it: one 勾玉 per point, lost ones dark; green, then yellow, then red as it falls; a number past 5. */
export function Hp({ hp, max }: { hp: number; max: number }) {
  const level = hp > max / 2 ? 'high' : hp > max / 4 && hp > 1 ? 'mid' : 'low';
  if (max > 5)
    return (
      <div className={`nm-hp text ${level}`}>
        <i className="nm-jade" />
        <span>
          {Math.max(hp, 0)}/{max}
        </span>
      </div>
    );
  return (
    <div className={`nm-hp ${level}`}>
      {Array.from({ length: max }, (_, i) => (
        <i key={i} className={`nm-jade${i >= Math.max(hp, 0) ? ' lost' : ''}`} />
      ))}
    </div>
  );
}

export function faction(p: Player): string {
  return p.faction ?? (p.character ? getCharacterMeta(p.character)?.faction : undefined) ?? '群';
}

export const isChained = (p: Player) => p.marks.some((m) => m.id === 'chained');
export const isFlipped = (p: Player) => (p.tags ?? []).some((t) => t.endsWith('/翻面'));

/** The flags every seat card shows the same way, mine or not. */
export function seatState(p: Player, extra: Record<string, boolean | undefined>): string {
  const f = FACTION_KEY[faction(p)] ?? 'qun';
  const on = { dead: !p.alive, dying: p.alive && p.health <= 0, chained: isChained(p), flipped: isFlipped(p), ...extra };
  return `${f} ${Object.entries(on)
    .filter(([, v]) => v)
    .map(([k]) => k)
    .join(' ')}`;
}

export function Identity({ p, mine }: { p: Player; mine?: boolean }) {
  const id = p.identity;
  if (!id && !p.identityHidden && !mine) return null;
  return <div className={`nm-identity ${id ? ID_KEY[id] : 'unknown'}`} title={id ?? '身份未知'}>{id ? ID_SHORT[id] ?? id[0] : '?'}</div>;
}

export function Judges({ p, view }: { p: Player; view: GameView }) {
  const ids = p.pendingTricks ?? [];
  if (!ids.length) return null;
  return (
    <div className="nm-judges">
      {ids.map((id) => {
        const c = view.cardMap[id];
        return (
          <span key={id} className="nm-judge" title={c ? `${c.name} ${c.suit}${c.rank}` : id}>
            {c && cardArt(c.name) && <i style={{ backgroundImage: `url(${cardArt(c.name)})` }} />}
            <b>{(c?.name ?? '?')[0]}</b>
          </span>
        );
      })}
    </div>
  );
}

/** A horse's name as 无名杀 writes it: +1 horses with +, -1 horses with -. */
export const equipName = (slot: EquipSlot, name: string) => (slot === '防御马' ? `${name}+` : slot === '进攻马' ? `${name}-` : name);

export function Equips({ p, view }: { p: Player; view: GameView }) {
  const rows = SLOTS.filter(([slot]) => p.equipment[slot]);
  if (!rows.length) return null;
  return (
    <div className="nm-equips">
      {rows.map(([slot, label]) => {
        const c = view.cardMap[p.equipment[slot]!];
        return (
          <div key={slot} className="nm-equip" title={c ? `${c.name}（${slot}）${c.description ? `\n${c.description}` : ''}` : slot}>
            <span className="nm-equip-slot">{label}</span>
            <span className="nm-equip-name">{c ? equipName(slot, c.name) : slot}</span>
            {c && (
              <span className={`nm-equip-info${isRed(c.suit) ? ' red' : ''}`}>
                {c.suit}
                {c.rank}
              </span>
            )}
          </div>
        );
      })}
    </div>
  );
}

export function HpFloat({ change }: { change?: HpChangeNumber }) {
  if (!change) return null;
  return (
    <div key={change.version} className={`nm-hpfloat ${change.kind}`}>
      {change.kind === 'heal' ? `+${change.amount}` : `-${change.amount}`}
    </div>
  );
}

/** The 立绘 and what lies on it, shared by the others' seats and mine. */
export function Portrait({ p, view, isCurrent, phase, hpChange, children }: { p: Player; view: GameView; isCurrent: boolean; phase: string; hpChange?: HpChangeNumber; children?: ReactNode }) {
  const img = portrait(p.character);
  const fac = faction(p);
  const name = p.character || '';
  return (
    <>
      <div className="nm-avatar" style={img ? { backgroundImage: `url(${img})` } : undefined}>
        {!img && name && <span className="nm-avatar-none">{name}</span>}
      </div>
      <div className="nm-frame" />
      {name && <div className={`nm-faction ${FACTION_KEY[fac] ?? 'qun'}`}>{fac}</div>}
      {name && <div className={`nm-name${name.length > 4 ? ' long' : ''}`}>{name}</div>}
      {name && <Hp hp={p.health} max={p.maxHealth} />}
      <div className="nm-count" title={`手牌 ${p.handCount}`}>
        {p.handCount}
      </div>
      {children}
      <Judges p={p} view={view} />
      {isChained(p) && <div className="nm-chain" />}
      {isFlipped(p) && <div className="nm-flipped">翻面</div>}
      {p.alive && p.health <= 0 && <div className="nm-dying">濒死</div>}
      {!p.alive && <div className={`nm-dead ${p.identity ? ID_KEY[p.identity] : ''}`}>{p.identity ? <b>{p.identity}</b> : null}阵亡</div>}
      {isCurrent && p.alive && <div className="nm-phase-mark">{PHASE_SHORT[phase] ?? phase}</div>}
      <HpFloat change={hpChange} />
    </>
  );
}

export interface SeatProps {
  player: Player;
  index: number;
  style: CSSProperties;
  isCurrent: boolean;
  phase: string;
  needsTarget: boolean;
  targetable: boolean;
  selected: boolean;
  onClick: () => void;
  damaged?: number;
  healed?: number;
  hpChange?: HpChangeNumber;
  deadline: number | null;
  totalMs?: number;
  distance: number | null;
  reason: string | null;
  /** Who sits there (a route, a bot, a person), when it is not just the general's name. */
  label?: string;
}

export function Seat(props: SeatProps) {
  const { view } = useGameView();
  const { player: p, index, style, isCurrent, phase, needsTarget, targetable, selected, onClick, damaged, healed, hpChange, deadline, totalMs, distance, reason, label = p.name } = props;
  const clickable = needsTarget && p.alive && targetable;
  const cls = seatState(p, { current: isCurrent, selectable: clickable, selected, unselectable: needsTarget && p.alive && !targetable, damaged: !!damaged, healed: !!healed });
  return (
    <div
      key={damaged ? `d${damaged}` : undefined}
      className={`nm-seat${needsTarget && clickable ? ' pick' : ''}`}
      style={style}
      data-seat-index={index}
      data-player-name={p.name}
      onClick={() => clickable && onClick()}
      title={needsTarget && !targetable && reason ? `不可选择：${reason}` : undefined}
    >
      <div className={`nm-player ${cls}`}>
        <Portrait p={p} view={view} isCurrent={isCurrent} phase={phase} hpChange={hpChange}>
          <Identity p={p} />
          <Equips p={p} view={view} />
          {needsTarget && distance != null && p.alive && <div className="nm-distance">距{distance}</div>}
        </Portrait>
      </div>
      {label && label !== p.character && <div className="nm-seat-label">{label}</div>}
      <Timer deadline={deadline} totalMs={totalMs} />
    </div>
  );
}