import { ACTIONS, ACTION_IDS, MATCH_COUNTDOWN_MS, TURN_DURATION_MS } from '../../constants/gameplay.js';
import type { ActionId } from '../shared/types.js';
import type { LocalMatchState } from '../shared/p2p-types.js';
import { appearanceKey, type FighterAppearance } from '../shared/cosmetics.js';
import { createActionRenderer } from './action-renderer.js';
import { actionIcon, ashPileArt, checkIcon, fighterArt } from './fighter-art.js';
import { createFinishCutscene } from './finish-cutscene.js';

const fighter = (i: number, appearance?: FighterAppearance) => `<div class="fighter" data-fighter="${i}">
  <div class="avatar"><div class="aura"></div><div class="motion-trails"><i></i><i></i><i></i></div><div class="character-direction">${fighterArt(i, false, appearance)}</div>${ashPileArt()}<div class="projectile"></div><div class="shield"></div><div class="impact"></div></div>
  <div class="fighter-caption"><span class="choice-status"></span><span class="action-label"></span><span class="energy-change" aria-hidden="true"></span></div>
</div>`;

export function createMatchView(container: HTMLElement, onAction: (action: ActionId) => Promise<boolean>, onRematch: () => void, onLeave: () => void, onResult: () => void = () => {}, onRules: () => void = () => {}, appearances?: [FighterAppearance, FighterAppearance]) {
  container.innerHTML = `<div class="match-top"><div class="match-title"><span class="mode-label"></span><h1 class="turn-heading"></h1></div><details class="match-menu"><summary aria-label="대전 메뉴">메뉴</summary><div class="match-menu-items"><button class="match-rules quiet">규칙</button><button class="leave quiet">나가기</button></div></details></div>
    <div class="timing"><span class="selection-status" role="status"></span><span class="time-label" aria-label="남은 시간"></span><div class="time-track" role="progressbar" aria-label="남은 선택 시간" aria-valuemin="0" aria-valuemax="100"><span></span></div></div>
    <div class="arena"><div class="arena-floor" aria-hidden="true"></div><div class="result-banner" hidden><h2></h2><p class="finish-reason"></p></div>${fighter(0, appearances?.[0])}<div class="duel-cue"><span class="versus" aria-hidden="true">VS</span><strong class="countdown-number" role="status"></strong></div><span class="clash-label" role="status"></span><div class="clash-burst" aria-hidden="true"></div>${fighter(1, appearances?.[1])}</div>
    <div class="player-controls" role="group" aria-label="내 행동 선택"><div class="energy">${actionIcon('charge')}<strong class="energy-count"></strong></div><div class="action-buttons">${ACTION_IDS.map(id => `<button data-action="${id}" aria-label="${ACTIONS[id].name}, ${ACTIONS[id].effect}${ACTIONS[id].cost ? `, 기 ${ACTIONS[id].cost} 소모` : ''}"><span class="action-symbol">${actionIcon(id)}</span><strong>${ACTIONS[id].name}</strong><small>${id === 'charge' || id === 'guard' ? ACTIONS[id].effect : `기 ${ACTIONS[id].cost} 소모`}</small><span class="chosen-mark">${checkIcon}</span></button>`).join('')}</div></div>
    <div class="match-result" hidden><div class="result-stats"></div><p class="save-status" role="status"></p><div class="split"><button class="rematch primary">다시 대전</button><button class="home-return">시작 화면</button></div><p class="rematch-status" role="status"></p></div>`;
  const arena = container.querySelector<HTMLElement>('.arena')!;
  const renderer = createActionRenderer(arena);
  const cutscene = createFinishCutscene(() => { tick(); el('.result-banner h2').focus({ preventScroll: true }); }, appearances);
  const appearanceSignatures = [0, 1].map(i => appearanceKey(appearances?.[i]));
  let current: LocalMatchState | undefined, offset = 0, busy = false, lastId = '', resultReported = '', submission = 0;
  const el = <T extends HTMLElement = HTMLElement>(selector: string) => container.querySelector<T>(selector)!;
  el('.result-banner h2').tabIndex = -1;
  const buttons = Array.from(container.querySelectorAll<HTMLButtonElement>('[data-action]'));
  buttons.forEach(button => button.addEventListener('click', async () => {
    if (busy || !current || current.phase !== 'selecting' || current.ownAction || Date.now() + offset >= current.deadline) return;
    const action = button.dataset.action as ActionId;
    if (current.energy[current.selfIndex] < ACTIONS[action].cost) return;
    busy = true; tick();
    const submittedMatch = current.matchId, submittedTurn = current.turnId, request = ++submission;
    try {
      const accepted = await onAction(action);
      if (request !== submission || !current) return;
      if (accepted && current.matchId === submittedMatch && current.turnId === submittedTurn && current.phase === 'selecting' && !current.ownAction) current.ownAction = action;
    } finally {
      if (request === submission) { busy = false; tick(); }
    }
  }));
  el('.leave').onclick = onLeave; el('.home-return').onclick = onLeave; el('.rematch').onclick = onRematch;
  el('.match-rules').onclick = () => {
    el<HTMLDetailsElement>('.match-menu').open = false;
    el('.match-menu summary').focus();
    onRules();
  };
  function tick() {
    if (!current) return;
    const now = Date.now() + offset, s = current;
    const revealing = !!s.reveal && now < s.reveal.revealEndsAt;
    const resultVisible = s.phase === 'finished' && !revealing;
    const phase = revealing ? 'revealing' : resultVisible ? 'finished' : s.phase;
    container.dataset.phase = phase;
    container.dataset.locked = String(!!s.ownAction);
    const finishing = arena.dataset.outcome === 'hit';
    el('.player-controls').hidden = finishing || resultVisible;
    el('.timing').hidden = finishing || resultVisible;
    el('.match-result').hidden = !resultVisible;
    el('.result-banner').hidden = !resultVisible;
    el('.mode-label').textContent = s.ranked ? '랭킹 대전' : s.mode === 'bot' ? '봇 대전' : '친구 대전';
    el('.rematch').textContent = s.ranked ? '다시 매칭' : '다시 대전';
    el('.turn-heading').textContent = s.phase === 'countdown' ? '대전 준비' : resultVisible ? '대전 종료' : `${s.turnId} 턴`;
    const remaining = s.phase === 'countdown' ? Math.max(0, s.startsAt - now) : Math.max(0, s.deadline - now);
    const count = Number.isFinite(remaining) ? String(Math.ceil(remaining / 1000)) : '';
    const countdown = el('.countdown-number');
    if (s.phase === 'countdown' && countdown.textContent !== count) { countdown.textContent = count; countdown.dataset.count = count; }
    el('.duel-cue').hidden = revealing || resultVisible;
    el('.selection-status').textContent = !resultVisible && !s.opponentPresent ? '연결 복구 중' : s.phase === 'countdown' ? Number.isFinite(remaining) ? '' : '상대 연결 중' : revealing ? '동시 공개' : resultVisible ? '' : busy ? '선택 중' : s.ownAction ? '선택 완료' : remaining > 0 ? '행동 선택' : '결과 대기';
    el('.time-label').textContent = s.phase === 'selecting' && !revealing ? `${(remaining / 1000).toFixed(1)}초` : '';
    const progress = s.phase === 'countdown' ? remaining / MATCH_COUNTDOWN_MS : s.phase === 'selecting' ? remaining / TURN_DURATION_MS : 0;
    el('.time-track').style.setProperty('--time', String(Math.min(1, progress)));
    el('.time-track').setAttribute('aria-valuenow', String(Math.round(Math.min(1, progress) * 100)));
    el('.time-track').setAttribute('aria-label', s.phase === 'countdown' ? '대전 시작까지 남은 시간' : '남은 선택 시간');
    el('.timing').dataset.urgent = String(s.phase === 'selecting' && remaining <= 1000 && !s.ownAction);
    buttons.forEach(button => {
      const id = button.dataset.action as ActionId;
      const affordable = s.energy[s.selfIndex] >= ACTIONS[id].cost;
      button.disabled = busy || !s.opponentPresent || s.phase !== 'selecting' || !!s.ownAction || now < s.startsAt || now >= s.deadline || !affordable;
      button.dataset.unavailable = String(!affordable);
      button.classList.toggle('chosen', s.ownAction === id); button.setAttribute('aria-pressed', String(s.ownAction === id));
      button.title = !affordable ? `기 ${ACTIONS[id].cost} 필요 · ${ACTIONS[id].effect}` : ACTIONS[id].effect;
      button.querySelector('small')!.textContent = !affordable ? `기 ${ACTIONS[id].cost} 필요` : id === 'charge' || id === 'guard' ? ACTIONS[id].effect : `기 ${ACTIONS[id].cost} 소모`;
    });
    container.querySelectorAll<HTMLElement>('[data-fighter]').forEach((node, i) => {
      const self = i === s.selfIndex;
      node.dataset.locked = String(self && !!s.ownAction && phase === 'selecting');
      if (resultVisible && !s.aborted && s.finished?.reason === 'hit' && s.reveal?.matchId === s.matchId
        && s.reveal.hitIndex === i && s.reveal.actions[1 - i] === 'beam') node.dataset.ash = 'true';
      else delete node.dataset.ash;
      node.querySelector('.choice-status')!.textContent = phase === 'selecting' ? self && s.ownAction ? `${ACTIONS[s.ownAction].name} · 선택 완료` : !self && !s.opponentPresent ? '연결 끊김' : '' : '';
      if (resultVisible && s.finished && !s.aborted && !finishing) node.dataset.reaction = s.finished.winnerIndex === null ? 'draw' : s.finished.winnerIndex === i ? 'win' : 'loss';
      else delete node.dataset.reaction;
    });
    if (resultVisible && s.finished) {
      if (resultReported !== s.matchId) { resultReported = s.matchId; onResult(); }
      const f = s.finished;
      const outcome = s.aborted ? 'aborted' : f.winnerIndex === null ? 'draw' : f.winnerIndex === s.selfIndex ? 'win' : 'loss';
      container.dataset.outcome = outcome;
      arena.dataset.result = outcome;
      el('.result-banner h2').textContent = ({ win: '승리!', loss: '패배', draw: '무승부', aborted: '대전 중단' })[outcome];
      el('.match-result').dataset.result = outcome;
      el('.finish-reason').textContent = ({ hit: '명중', timeout: '선택 시간 초과', double_timeout: '양쪽 선택 시간 초과', forfeit: '기권', disconnect: '연결 종료', double_disconnect: '양쪽 연결 종료', connection_failed: '연결을 복구하지 못했습니다.', protocol_error: '대전 상태를 맞추지 못했습니다.' })[f.reason];
      const stats = f.stats[s.mode];
      el('.result-stats').textContent = f.saved ? `현재 연승 ${stats.current} · 최고 연승 ${stats.best}` : '';
      el('.save-status').textContent = s.saveStatus === 'failed' ? '기록을 저장하지 못했습니다. 다시 시도하세요.' : f.saved ? '' : '기록 저장 중';
      el<HTMLButtonElement>('.rematch').disabled = !f.saved || (!s.ranked && (!!s.rematch[s.selfIndex] || s.opponentLeft));
      el('.rematch-status').textContent = s.ranked ? '' : s.opponentLeft ? '상대가 나갔습니다.' : s.rematch[s.selfIndex] ? '상대의 재대전 동의 대기' : s.rematch[s.selfIndex === 0 ? 1 : 0] ? '상대가 재대전을 요청했습니다.' : '';
    } else {
      delete arena.dataset.result;
      if (arena.dataset.outcome) container.dataset.outcome = arena.dataset.outcome;
      else delete container.dataset.outcome;
    }
  }
  const interval = setInterval(tick, 100);
  return {
    update(state: LocalMatchState) {
      if (current?.matchId === state.matchId && current.version > state.version) return;
      if (lastId !== state.matchId) { cutscene.reset(); renderer.reset(); lastId = state.matchId; busy = false; submission++; }
      if (current && current.turnId !== state.turnId) { busy = false; submission++; }
      current = state; offset = state.clockNow - Date.now();
      container.dataset.self = String(state.selfIndex);
      el('.energy-count').textContent = String(state.energy[state.selfIndex]);
      el('.energy').setAttribute('aria-label', `내 기 ${state.energy[state.selfIndex]}`);
      container.querySelectorAll<HTMLElement>('[data-fighter]').forEach((node, i) => {
        const appearance = (state.appearances ?? appearances)?.[i];
        const signature = appearanceKey(appearance);
        if (appearanceSignatures[i] !== signature) {
          node.querySelector('.character-direction')!.innerHTML = fighterArt(i, false, appearance);
          appearanceSignatures[i] = signature;
        }
        node.classList.toggle('self', i === state.selfIndex);
        node.setAttribute('role', 'group');
        node.setAttribute('aria-label', i === state.selfIndex ? '내 캐릭터' : state.mode === 'bot' ? '봇 캐릭터' : '상대 캐릭터');
      });
      if (state.reveal && !state.aborted && (!state.finished || state.finished.reason === 'hit')) renderer.play(state.reveal, Date.now() + offset);
      else renderer.reset();
      tick();
      cutscene.update(state);
    }, destroy() { submission++; clearInterval(interval); cutscene.destroy(); renderer.destroy(); container.innerHTML = ''; current = undefined; },
  };
}