// Your seat along the bottom, as 无名杀's mobile layout: your general's portrait card at the left (name, faction, HP,
// identity, judgement area), your equipment beside it as five slots, your hand across the middle, your skills as
// buttons at the right. Which skills and equipment can be used now is the upstream's own logic (PlayerCardLarge and
// EquipColumn, followed here): their actions, activeWhen and variants, and distribute picking equipment.
import type { ReactNode } from 'react';
import type { GameView, Json } from '../../../src/engine/types';
import type { SkillActionDef } from '../../../src/client/skillActionRegistry';
import type { HpChangeNumber } from '../../../src/client/hooks/useAnimationState';
import { useGameView } from '../../../src/client/components/GameViewCtx';
import { isActiveAction, isFreePlayWindow, skillActionVariants } from '../../../src/client/utils/gameViewHelpers';
import { EQUIPMENT_SKILL_NAMES } from '../../../src/client/components/gameViewConstants';
import { LORD_SKILLS } from '../../../src/engine/data/character-meta';
import { DEFAULT_SKILLS as ENGINE_DEFAULT_SKILLS } from '../../../src/engine/atoms/选将';
import { getSkillDescription } from '../../../src/engine/skills/lifecycle';
import { useSkillDescReady } from '../../../src/client/hooks/useSkillDescReady';
import { displaySkillName } from '../../../src/client/utils/skillDisplay';
import { Portrait, Identity, SLOTS, seatState, equipName } from './Seat';
import { isRed } from './Card';

const DEFAULT_SKILLS = new Set(ENGINE_DEFAULT_SKILLS);
type Player = GameView['players'][number];

interface Props {
  player: Player;
  index: number;
  isCurrent: boolean;
  phase: string;
  spectating: boolean;
  onSkillAction: (action: SkillActionDef, extraParams?: Record<string, Json>) => void;
  onEquipClick: (cardId: string) => void;
  distCandidates: Set<string> | null;
  distSelected: Set<string>;
  isDistributeActive: boolean;
  targetable: boolean;
  selected: boolean;
  onTarget: () => void;
  damaged?: number;
  healed?: number;
  hpChange?: HpChangeNumber;
  timer: ReactNode;
  hand: ReactNode;
}

export function Me(props: Props) {
  const { view, canOperate, skillActions } = useGameView();
  useSkillDescReady();
  const { player: p, index, isCurrent, phase, spectating, onSkillAction, onEquipClick, distCandidates, distSelected, isDistributeActive, targetable, selected, onTarget, damaged, healed, hpChange, timer, hand } = props;
  const actionCtx = { view, perspectiveIdx: index };

  // Skills (PlayerCardLarge): the active ones as buttons, those of the free play window that can't be used now greyed,
  // the rest as labels.
  const isLord = p.identity === '主公';
  const visible = p.skills.filter((s) => !DEFAULT_SKILLS.has(s) && !EQUIPMENT_SKILL_NAMES.has(s) && (isLord || !LORD_SKILLS.has(s)));
  const triggerable = skillActions.filter(
    (a) =>
      a.prompt.type === 'confirm' ||
      a.prompt.type === 'chooseOption' ||
      a.prompt.type === 'choosePlayer' ||
      a.prompt.type === 'selectTarget' ||
      (a.prompt.type === 'useCardAndTarget' && !!a.transform) ||
      (a.prompt.type === 'useCard' && !!a.transform) ||
      a.prompt.type === 'distribute',
  );
  const isSkillActive = (a: SkillActionDef) => canOperate && isActiveAction(a, actionCtx);
  const inFreePlayWindow = canOperate && isFreePlayWindow({ isMyTurn: isCurrent, phase: view.phase, pending: view.pending });
  const skills = visible.flatMap((s) => {
    const btns = triggerable.filter((a) => a.skillId === s);
    const desc = getSkillDescription(s) ?? btns[0]?.prompt.title;
    const display = displaySkillName(s);
    const variants = btns.flatMap((a) => skillActionVariants(a).map((v) => ({ ...v, action: a, label: v.label || (btns.length > 1 ? a.label || a.actionType : '') })));
    const active = variants.filter((v) => isSkillActive(v.action));
    if (active.length)
      return active.map((v) => (
        <button key={v.label ? `${s}:${v.label}` : s} className={`nm-skill on${v.action.style === 'danger' ? ' danger' : ''}`} title={v.description ?? desc} onClick={() => onSkillAction(v.action, v.params)}>
          {v.label ? (v.label.startsWith(display) ? v.label : `${display}·${v.label}`) : display}
        </button>
      ));
    if (btns[0] && inFreePlayWindow)
      return [
        <button key={s} className="nm-skill" disabled title={p.turnUsage?.[`${s}/usedThisTurn`] ? '本回合已发动过（每回合限一次）' : (desc ?? '')}>
          {display}
        </button>,
      ];
    return [
      <span key={s} className="nm-skill passive" title={desc}>
        {display}
      </span>,
    ];
  });

  // Equipment (EquipColumn): an equipment skill that can be used now, or a card distribute may pick, is clickable.
  const activeEquip = new Map<string, SkillActionDef>();
  for (const a of skillActions) if (EQUIPMENT_SKILL_NAMES.has(a.skillId) && canOperate && isActiveAction(a, actionCtx)) activeEquip.set(a.skillId, a);
  const equips = SLOTS.map(([slot]) => {
    const id = p.equipment[slot];
    const c = id ? view.cardMap[id] : undefined;
    if (!id) return <div key={slot} className="nm-myequip empty" title={slot} />;
    const skill = isDistributeActive ? undefined : activeEquip.get(c?.name ?? '');
    const cand = isDistributeActive && !!distCandidates?.has(id);
    const desc = c && EQUIPMENT_SKILL_NAMES.has(c.name) ? getSkillDescription(c.name) : c?.description;
    return (
      <div
        key={slot}
        className={`nm-myequip${skill ? ' usable' : ''}${cand ? ' candidate' : ''}${distSelected.has(id) ? ' picked' : ''}`}
        onClick={skill ? () => onSkillAction(skill) : cand ? () => onEquipClick(id) : undefined}
        title={`${c?.name ?? id}（${slot}）${desc ? `\n${desc}` : ''}`}
      >
        <span className="nm-equip-name">{c ? equipName(slot, c.name) : id}</span>
        {c && (
          <span className={`nm-equip-info${isRed(c.suit) ? ' red' : ''}`}>
            {c.suit}
            {c.rank}
          </span>
        )}
      </div>
    );
  });

  return (
    <div className={`nm-me${spectating ? ' spectating' : ''}`}>
      <div
        key={damaged ? `d${damaged}` : undefined}
        className={`nm-player mine ${seatState(p, { current: isCurrent, selectable: targetable, selected, damaged: !!damaged, healed: !!healed })}`}
        data-seat-index={index}
        data-player-name={p.name}
        onClick={onTarget}
      >
        <Portrait p={p} view={view} isCurrent={isCurrent} phase={phase} hpChange={hpChange}>
          <Identity p={p} mine />
        </Portrait>
      </div>
      <div className="nm-myequips">{equips}</div>
      <div className="nm-hand">
        {timer}
        {hand}
      </div>
      <div className="nm-skills">{skills}</div>
      <div className="nm-me-label">{spectating ? `旁观 · ${p.name}` : p.name}</div>
    </div>
  );
}