// Choosing a general, as 无名杀's 选将 dialog: the candidates as portrait cards with faction, HP and skills; pick one,
// then 确定. The move is the upstream's own (OverlaysLayer): 系统规则 · 选将 with the general's name.
import { useState } from 'react';
import { getCharacterMeta } from '../../../src/engine/data/character-meta';
import { getSkillDescription } from '../../../src/engine/skills/lifecycle';
import { displaySkillName } from '../../../src/client/utils/skillDisplay';
import type { ActionMsg } from '../../../src/client/types';
import { portrait, FACTION_KEY } from './art';
import { Hp, Timer } from './Seat';

interface Props {
  candidates: Array<{ name: string; skills: string[] }>;
  target: number;
  mine: boolean;
  deadline: number | null;
  totalMs: number;
  onAction: (a: ActionMsg) => void;
}

export function CharSelect({ candidates, target, mine, deadline, totalMs, onAction }: Props) {
  const [pick, setPick] = useState<string | null>(null);
  const [sent, setSent] = useState(false);
  if (sent || !mine) return <div className="nm-dialog-wait">等待其他角色选择武将…</div>;
  return (
    <div className="nm-dialog-mask">
      <div className="nm-dialog choose">
        <div className="nm-dialog-title">请选择武将</div>
        <div className="nm-choose-row">
          {candidates.map((c) => {
            const meta = getCharacterMeta(c.name);
            const fac = meta?.faction ?? '群';
            const img = portrait(c.name);
            return (
              <button key={c.name} className={`nm-choose ${FACTION_KEY[fac] ?? 'qun'}${pick === c.name ? ' selected' : ''}`} onClick={() => setPick(c.name)} onDoubleClick={() => setPick(c.name)}>
                <div className="nm-avatar" style={img ? { backgroundImage: `url(${img})` } : undefined} />
                <div className="nm-frame" />
                <div className={`nm-faction ${FACTION_KEY[fac] ?? 'qun'}`}>{fac}</div>
                <div className={`nm-name${c.name.length > 4 ? ' long' : ''}`}>{c.name}</div>
                {meta && <Hp hp={meta.maxHealth} max={meta.maxHealth} />}
                <div className="nm-choose-skills">
                  {c.skills.map((s) => (
                    <span key={s} title={getSkillDescription(s) ?? ''}>
                      {displaySkillName(s)}
                    </span>
                  ))}
                </div>
              </button>
            );
          })}
        </div>
        <Timer deadline={deadline} totalMs={totalMs} />
        <div className="nm-control in-dialog">
          <button
            className="nm-btn ok"
            disabled={!pick}
            onClick={() => {
              if (!pick) return;
              setSent(true);
              onAction({ skillId: '系统规则', actionType: '选将', ownerId: target, params: { character: pick } });
            }}
          >
            确定
          </button>
        </div>
      </div>
    </div>
  );
}