// Combat HUD (research 06 §11.3/§11.7, research 09 §3.1 / §6.3): DP counter at the right edge and the bottom-centre
// pills.
//   Client-side combat (`client` prop, DESIGN §14 — the official behaviour):
//     * own normal battle over: "⌛ 作战结束，等待队友完成作战" with each teammate's live progress (kills / total, ✓);
//     * observing a teammate (team row → 前往查看): "👁 name" + 返回战场;
//     * 联防 / 最终攻势: the ‹ › pill switches the camera LEFT half / 全景 / RIGHT half ("你自己" / name / "全景"); it
//       replaces the observing pill on such a field watched with 前往查看 (a 联防 leaker, an eliminated spectator — the
//       official non-helper pill "‹ 👁 helper# ›"), with 返回战场 beside the arrows (DESIGN §20.15);
//     * there is NO view switcher during normal combat.
//   Server-run combat (legacy streaming mode): the ‹ 自己 › switcher cycling the live fields of m.public.fields.

import { html, Icon } from './components.js';
import { DpCounter } from './hud.js';
import { GIcon } from './gameComponents.js';
import { switcherLabel, cycleField } from './gameLogic.js';
import { t } from '../../../shared/i18n.js';

const cx = (...p) => p.flat().filter(Boolean).join(' ');

/** Teammates' progress under the waiting pill (css/screens/game.css .chud__progress / .chud__prog). */
function ProgressList({ list }) {
  if (!Array.isArray(list) || !list.length) return null;
  return html`<div class="chud__progress" role="list" aria-label=${t('队友作战进度')}>
    ${list.map((p) => html`<span key=${p.playerId} role="listitem" class=${cx('chud__prog', p.done && 'is-done')}>
      <b>${p.name}</b>
      ${p.done
        ? html`<span class="chud__prog__ok" aria-label=${t('作战结束')}>✓</span>`
        : html`<span class="num">${(p.resolved ?? p.killed) != null && p.total != null ? `${p.resolved ?? p.killed}/${p.total}` : '•••'}</span>`}
    </span>`)}
  </div>`;
}

/**
 * @param {{ pub:any, myId:string, watching:string|null, hud:any, myDone:boolean, onWatch:(fieldId:string)=>void, spectating?: boolean,
 *   client?: null | { progress?: any[]|null, observing?: { name: string }|null, onBack?: () => void,
 *                     layers?: Array<{ key: string, label: string, self: boolean, watch: boolean }>, layer?: string, onLayer?: (k: string) => void } }} props
 */
export function CombatHud({ pub, myId, watching, hud, myDone, onWatch, spectating = false, spectator = false, client = null }) {
  // `spectator`: a spectator seat (community report #26) watches like an eliminated player, under its own caption
  if (client) return ClientHud({ hud, myDone, spectating, spectator, client });
  const fields = (Array.isArray(pub?.fields) ? pub.fields : []).filter((f) => f && f.live !== false);
  // the watched field may already have finished (not live): still name it
  const label = switcherLabel(pub, watching, myId, spectating);
  const canCycle = fields.length > 1;
  return html`<div class="chud">
    <${DpCounter} dp=${hud?.dp} />
    <div class="chud__bottom">
      ${myDone ? html`<div class="chud__msg" role="status"><${Icon} name="hourglass" /><span>${t('作战结束，等待队友完成作战')}</span></div>` : null}
      ${spectating ? (spectator ? html`<div class="chud__msg" role="status"><${GIcon} name="eye" /><span>${t('观战中')}</span></div>`
        : html`<div class="chud__msg chud__msg--dead" role="status"><${Icon} name="close" /><span>${t('你已被淘汰，正在观战')}</span></div>`) : null}
      ${fields.length ? html`<div class=${cx('vswitch', !canCycle && 'is-single')}>
        <button type="button" class="vswitch__arrow" disabled=${!canCycle} aria-label=${t('上一个战场')}
          onClick=${() => { const n = cycleField(fields, watching, -1); if (n && n !== watching) onWatch(n); }}><${Icon} name="chevronLeft" /></button>
        <span class="vswitch__label">${label}</span>
        <button type="button" class="vswitch__arrow" disabled=${!canCycle} aria-label=${t('下一个战场')}
          onClick=${() => { const n = cycleField(fields, watching, 1); if (n && n !== watching) onWatch(n); }}><${Icon} name="chevronRight" /></button>
      </div>` : null}
    </div>
  </div>`;
}

function ClientHud({ hud, myDone, spectating, spectator = false, client }) {
  const layers = Array.isArray(client.layers) ? client.layers : [];
  const idx = Math.max(0, layers.findIndex((l) => l.key === (client.layer || 'ALL')));
  const cur = layers[idx] || null;
  const step = (d) => {
    if (!layers.length || !client.onLayer) return;
    const n = Math.min(layers.length - 1, Math.max(0, idx + d));
    if (n !== idx) client.onLayer(layers[n].key);
  };
  const observing = client.observing;
  const halves = layers.length > 0;
  return html`<div class="chud">
    <${DpCounter} dp=${hud?.dp} />
    <div class="chud__bottom">
      ${myDone && !observing ? html`<div class="chud__msg chud__wait" role="status"><${Icon} name="hourglass" /><span>${t('作战结束，等待队友完成作战')}</span></div>
        <${ProgressList} list=${client.progress} />` : null}
      ${spectating && !observing ? (spectator ? html`<div class="chud__msg" role="status"><${GIcon} name="eye" /><span>${t('观战中，可点击左侧成员头像前往查看')}</span></div>`
        : html`<div class="chud__msg chud__msg--dead" role="status"><${Icon} name="close" /><span>${t('你已被淘汰，可点击队友头像前往查看')}</span></div>`) : null}
      ${observing && !halves ? html`<div class="vswitch chud__observe is-single" role="status">
        <span class="vswitch__label"><${GIcon} name="eye" /><span>${observing.name}</span></span>
        ${client.onBack ? html`<button type="button" class="btn btn--secondary btn--sm chud__back" onClick=${() => client.onBack()}>
          <span class="btn__label">${t('返回战场')}</span></button>` : null}
      </div>` : null}
      ${halves ? html`<div class=${cx('vswitch', 'chud__layers', observing && 'is-observing')}>
        <button type="button" class="vswitch__arrow" disabled=${idx <= 0} aria-label=${t('左侧战场')} onClick=${() => step(-1)}><${Icon} name="chevronLeft" /></button>
        <span class="vswitch__label">
          ${cur && cur.watch ? html`<${GIcon} name="eye" />` : null}<span>${cur ? cur.label : t('全景')}</span></span>
        <button type="button" class="vswitch__arrow" disabled=${idx >= layers.length - 1} aria-label=${t('右侧战场')} onClick=${() => step(1)}><${Icon} name="chevronRight" /></button>
        ${observing && client.onBack ? html`<button type="button" class="btn btn--secondary btn--sm chud__back" onClick=${() => client.onBack()}>
          <span class="btn__label">${t('返回战场')}</span></button>` : null}
      </div>` : null}
    </div>
  </div>`;
}