const PAGE = document.body.dataset.page;

const STORAGE_KEY = "chesscubing-arena-state-v2";
const BLOCK_DURATION_MS = 180000;
const MOVE_LIMIT_MS = 20000;
const TIME_MODE_INITIAL_CLOCK_MS = 600000;
const CUBE_TIME_CAP_MS = 120000;

const PRESETS = {
  fast: {
    label: "FAST",
    quota: 6,
    description: "6 coups par joueur et par block.",
  },
  freeze: {
    label: "FREEZE",
    quota: 8,
    description: "8 coups par joueur et par block.",
  },
  masters: {
    label: "MASTERS",
    quota: 10,
    description: "10 coups par joueur et par block.",
  },
};

const MODES = {
  twice: {
    label: "ChessCubing Twice",
    subtitle: "Le gagnant du cube ouvre le block suivant.",
  },
  time: {
    label: "ChessCubing Time",
    subtitle: "Chronos cumules et alternance bloc - / bloc +.",
  },
};

let match = readStoredMatch();
let dirty = false;

if (match) {
  normalizeRecoveredMatch(match);
  if (syncRunningState(match)) {
    dirty = true;
  }
}

window.addEventListener("beforeunload", flushState);
document.addEventListener("visibilitychange", () => {
  if (document.hidden) {
    if (match) {
      syncRunningState(match);
    }
    flushState();
  }
});

window.setInterval(() => {
  if (dirty) {
    persistMatch();
  }
}, 1000);

switch (PAGE) {
  case "setup":
    initSetupPage();
    break;
  case "chrono":
    initChronoPage();
    break;
  case "cube":
    initCubePage();
    break;
  default:
    break;
}

function initSetupPage() {
  const form = document.querySelector("#setupForm");
  const summary = document.querySelector("#setupSummary");
  const loadDemoButton = document.querySelector("#loadDemoButton");
  const resumeCard = document.querySelector("#resumeCard");

  if (!form || !summary || !loadDemoButton || !resumeCard) {
    return;
  }

  const renderSummary = () => {
    const mode = getRadioValue(form, "mode") || "twice";
    const preset = getRadioValue(form, "preset") || "fast";
    const quota = PRESETS[preset].quota;
    const timeImpact =
      mode === "time"
        ? "Chronos cumules de 10 minutes, ajustes apres chaque phase cube avec plafond de 120 s pris en compte."
        : "Le gagnant du cube commence le block suivant, avec double coup V2 possible.";

    summary.innerHTML = `
      <strong>${MODES[mode].label}</strong>
      <span>${PRESETS[preset].description}</span>
      <span>Chaque block dure 180 secondes, chaque coup est limite a 20 secondes.</span>
      <span>${timeImpact}</span>
      <span>Quota actif : ${quota} coups par joueur.</span>
    `;
  };

  const renderResume = () => {
    if (!match) {
      resumeCard.classList.add("empty");
      resumeCard.innerHTML = "<p>Aucun match en cours pour l'instant.</p>";
      return;
    }

    resumeCard.classList.remove("empty");
    const phaseLabel = match.result
      ? resultText(match)
      : match.phase === "cube"
        ? "Page cube prete"
        : match.awaitingBlockClosure
          ? "Fin de block a confirmer"
          : "Page chrono prete";

    resumeCard.innerHTML = `
      <strong>${escapeHtml(match.config.matchLabel)}</strong>
      <p>${escapeHtml(MODES[match.config.mode].label)}</p>
      <p>${escapeHtml(match.config.whiteName)} vs ${escapeHtml(match.config.blackName)}</p>
      <p>${escapeHtml(phaseLabel)}</p>
      <div class="resume-actions">
        <button class="button primary" id="resumeMatchButton" type="button">
          ${match.result ? "Voir le match" : "Reprendre la phase"}
        </button>
        <button class="button ghost" id="clearMatchButton" type="button">
          Effacer le match
        </button>
      </div>
    `;

    resumeCard.querySelector("#resumeMatchButton")?.addEventListener("click", () => {
      navigateTo(routeForMatch(match));
    });

    resumeCard.querySelector("#clearMatchButton")?.addEventListener("click", () => {
      clearMatch();
      renderResume();
    });
  };

  form.addEventListener("input", renderSummary);
  loadDemoButton.addEventListener("click", () => loadDemo(form, renderSummary));

  form.addEventListener("submit", (event) => {
    event.preventDefault();
    const config = {
      matchLabel: sanitizeText(form.elements.matchLabel.value) || "Rencontre ChessCubing",
      mode: getRadioValue(form, "mode") || "twice",
      preset: getRadioValue(form, "preset") || "fast",
      whiteName: sanitizeText(form.elements.whiteName.value) || "Blanc",
      blackName: sanitizeText(form.elements.blackName.value) || "Noir",
      arbiterName: sanitizeText(form.elements.arbiterName.value),
      eventName: sanitizeText(form.elements.eventName.value),
      notes: sanitizeText(form.elements.notes.value),
    };

    match = createMatch(config);
    dirty = true;
    persistMatch();
    navigateTo("chrono.html");
  });

  renderSummary();
  renderResume();
}

function initChronoPage() {
  if (!match) {
    replaceTo("index.html");
    return;
  }

  if (!match.result && match.phase === "cube") {
    replaceTo("cube.html");
    return;
  }

  const refs = {
    title: document.querySelector("#chronoTitle"),
    subtitle: document.querySelector("#chronoSubtitle"),
    blockTimer: document.querySelector("#blockTimer"),
    moveTimer: document.querySelector("#moveTimer"),
    centerLabel: document.querySelector("#chronoCenterLabel"),
    centerValue: document.querySelector("#chronoCenterValue"),
    spineLabel: document.querySelector("#spineLabel"),
    spineHeadline: document.querySelector("#spineHeadline"),
    spineText: document.querySelector("#spineText"),
    primaryButton: document.querySelector("#primaryChronoButton"),
    whiteName: document.querySelector("#whiteNameChrono"),
    blackName: document.querySelector("#blackNameChrono"),
    whiteMoves: document.querySelector("#whiteMovesChrono"),
    blackMoves: document.querySelector("#blackMovesChrono"),
    whiteClock: document.querySelector("#whiteClockChrono"),
    blackClock: document.querySelector("#blackClockChrono"),
    whiteHint: document.querySelector("#whiteHintChrono"),
    blackHint: document.querySelector("#blackHintChrono"),
    whiteButton: document.querySelector("#whiteMoveButton"),
    blackButton: document.querySelector("#blackMoveButton"),
    whiteZone: document.querySelector("#whiteZone"),
    blackZone: document.querySelector("#blackZone"),
    openArbiterButton: document.querySelector("#openArbiterButton"),
    closeArbiterButton: document.querySelector("#closeArbiterButton"),
    arbiterModal: document.querySelector("#arbiterModal"),
    arbiterStatus: document.querySelector("#arbiterStatus"),
    arbiterPauseButton: document.querySelector("#arbiterPauseButton"),
    arbiterCloseBlockButton: document.querySelector("#arbiterCloseBlockButton"),
    arbiterTimeoutButton: document.querySelector("#arbiterTimeoutButton"),
    arbiterSwitchTurnButton: document.querySelector("#arbiterSwitchTurnButton"),
    arbiterWhiteWinButton: document.querySelector("#arbiterWhiteWinButton"),
    arbiterBlackWinButton: document.querySelector("#arbiterBlackWinButton"),
    arbiterStopButton: document.querySelector("#arbiterStopButton"),
    arbiterResetButton: document.querySelector("#arbiterResetButton"),
  };

  const openModal = () => toggleModal(refs.arbiterModal, true);
  const closeModal = () => toggleModal(refs.arbiterModal, false);

  refs.openArbiterButton?.addEventListener("click", openModal);
  refs.closeArbiterButton?.addEventListener("click", closeModal);
  refs.arbiterModal?.addEventListener("click", (event) => {
    const target = event.target;
    if (target instanceof HTMLElement && target.dataset.closeModal === "true") {
      closeModal();
    }
  });

  refs.whiteButton?.addEventListener("click", () => handleChronoTap("white"));
  refs.blackButton?.addEventListener("click", () => handleChronoTap("black"));
  refs.primaryButton?.addEventListener("click", handlePrimaryChronoAction);

  refs.arbiterPauseButton?.addEventListener("click", () => {
    syncRunningState(match);
    if (match.result || match.phase !== "block") {
      return;
    }

    if (match.awaitingBlockClosure) {
      openCubePhase(match);
      dirty = true;
      persistMatch();
      navigateTo("cube.html");
      return;
    }

    if (match.running) {
      pauseBlock(match);
    } else {
      startBlock(match);
    }

    dirty = true;
    render();
  });

  refs.arbiterCloseBlockButton?.addEventListener("click", () => {
    syncRunningState(match);
    if (match.result || match.phase !== "block") {
      return;
    }

    if (match.awaitingBlockClosure) {
      openCubePhase(match);
      dirty = true;
      persistMatch();
      navigateTo("cube.html");
      return;
    }

    requestBlockClosure(match, "Cloture manuelle du block demandee par l'arbitre.");
    dirty = true;
    render();
  });

  refs.arbiterTimeoutButton?.addEventListener("click", () => {
    syncRunningState(match);
    if (match.result || match.phase !== "block") {
      return;
    }

    registerMoveTimeout(match, false);
    dirty = true;
    render();
  });

  refs.arbiterSwitchTurnButton?.addEventListener("click", () => {
    syncRunningState(match);
    if (match.result || match.phase !== "block") {
      return;
    }

    match.currentTurn = opponentOf(match.currentTurn);
    match.moveRemainingMs = MOVE_LIMIT_MS;
    logEvent(match, "Trait corrige manuellement par l'arbitre.");
    dirty = true;
    render();
  });

  refs.arbiterWhiteWinButton?.addEventListener("click", () => {
    syncRunningState(match);
    setResult(match, "white");
    dirty = true;
    render();
  });

  refs.arbiterBlackWinButton?.addEventListener("click", () => {
    syncRunningState(match);
    setResult(match, "black");
    dirty = true;
    render();
  });

  refs.arbiterStopButton?.addEventListener("click", () => {
    syncRunningState(match);
    setResult(match, "stopped");
    dirty = true;
    render();
  });

  refs.arbiterResetButton?.addEventListener("click", () => {
    clearMatch();
    replaceTo("index.html");
  });

  function handleChronoTap(color) {
    if (!match || match.result || match.phase !== "block") {
      return;
    }

    syncRunningState(match);

    if (match.awaitingBlockClosure) {
      if (match.currentTurn !== color) {
        return;
      }

      registerReliefMove(match);
      dirty = true;
      render();
      return;
    }

    if (!match.running || match.currentTurn !== color) {
      return;
    }

    if (match.doubleCoup.step === 1) {
      registerFreeDoubleMove(match);
    } else {
      registerCountedMove(match, {
        source: match.doubleCoup.step === 2 ? "double" : "standard",
      });
    }

    dirty = true;
    render();
  }

  function handlePrimaryChronoAction() {
    syncRunningState(match);

    if (match.result) {
      navigateTo("index.html");
      return;
    }

    if (match.phase !== "block") {
      navigateTo("cube.html");
      return;
    }

    if (match.awaitingBlockClosure) {
      openCubePhase(match);
      dirty = true;
      persistMatch();
      navigateTo("cube.html");
      return;
    }

    if (match.running) {
      pauseBlock(match);
    } else {
      startBlock(match);
    }

    dirty = true;
    render();
  }

  function renderZone(color) {
    const isWhite = color === "white";
    const button = isWhite ? refs.whiteButton : refs.blackButton;
    const name = isWhite ? refs.whiteName : refs.blackName;
    const moves = isWhite ? refs.whiteMoves : refs.blackMoves;
    const clock = isWhite ? refs.whiteClock : refs.blackClock;
    const hint = isWhite ? refs.whiteHint : refs.blackHint;
    const zone = isWhite ? refs.whiteZone : refs.blackZone;
    const actorName = playerName(match, color);
    const active = match.currentTurn === color;

    name.textContent = actorName;
    moves.textContent = `${match.moves[color]} / ${match.quota}`;
    clock.textContent = match.clocks
      ? `Chrono ${formatSignedClock(match.clocks[color])}`
      : `Dernier cube ${renderLastCube(match, color)}`;

    button.classList.toggle("active-turn", active && !match.result);
    zone.classList.toggle("active-zone", active && !match.result);

    if (match.result) {
      button.textContent = resultText(match);
      button.disabled = true;
      hint.textContent = "Le match est termine.";
      return;
    }

    if (match.awaitingBlockClosure) {
      if (active) {
        button.textContent = "Coup hors quota";
        button.disabled = false;
        hint.textContent = "A utiliser seulement si un roi est encore en echec avant la page cube.";
      } else {
        button.textContent = "En attente";
        button.disabled = true;
        hint.textContent = "Attente de la reponse adverse ou du passage a la page cube.";
      }
      return;
    }

    if (!match.running) {
      button.textContent = "Block en pause";
      button.disabled = true;
      hint.textContent = active
        ? "Le block n'a pas encore demarre ou a ete mis en pause."
        : `${playerName(match, match.currentTurn)} reprendra au demarrage.`;
      return;
    }

    if (!active) {
      button.textContent = "Attends";
      button.disabled = true;
      hint.textContent = `${playerName(match, match.currentTurn)} est en train de jouer.`;
      return;
    }

    if (match.doubleCoup.step === 1) {
      button.textContent = "1er coup gratuit";
      button.disabled = false;
      hint.textContent = "Ce coup ne compte pas et ne doit pas donner echec.";
      return;
    }

    if (match.doubleCoup.step === 2) {
      button.textContent = "2e coup du double";
      button.disabled = false;
      hint.textContent = "Ce coup compte dans le quota et l'echec redevient autorise.";
      return;
    }

    button.textContent = "J'ai fini mon coup";
    button.disabled = false;
    hint.textContent = "Tape des que ton coup est joue sur l'echiquier.";
  }

  function render() {
    if (!match) {
      return;
    }

    refs.title.textContent = match.config.matchLabel;
    refs.subtitle.textContent = `Block ${match.blockNumber} - ${MODES[match.config.mode].label} - ${renderModeContext(match)}`;
    refs.blockTimer.textContent = formatClock(match.blockRemainingMs);
    refs.moveTimer.textContent = formatClock(match.moveRemainingMs);

    if (match.result) {
      refs.centerLabel.textContent = "Resultat";
      refs.centerValue.textContent = resultText(match);
      refs.spineLabel.textContent = "Termine";
      refs.spineHeadline.textContent = resultText(match);
      refs.spineText.textContent = "Retournez a la configuration pour lancer une nouvelle rencontre.";
      refs.primaryButton.textContent = "Retour a l'accueil";
      refs.arbiterStatus.textContent = "Le match est termine. Vous pouvez revenir a l'accueil ou reinitialiser.";
    } else if (match.awaitingBlockClosure) {
      refs.centerLabel.textContent = "Transition";
      refs.centerValue.textContent = "Fin de block";
      refs.spineLabel.textContent = "Page suivante";
      refs.spineHeadline.textContent = "Passer a la page cube";
      refs.spineText.textContent = `${match.closureReason} Jouez encore des coups hors quota si necessaire, puis ouvrez la page cube.`;
      refs.primaryButton.textContent = "Ouvrir la page cube";
      refs.arbiterStatus.textContent = refs.spineText.textContent;
    } else if (match.running) {
      refs.centerLabel.textContent = "Trait";
      refs.centerValue.textContent = playerName(match, match.currentTurn);
      refs.spineLabel.textContent = "Chrono en cours";
      refs.spineHeadline.textContent = `Block ${match.blockNumber} actif`;
      refs.spineText.textContent = "Chaque joueur tape sur sa grande zone quand son coup est termine.";
      refs.primaryButton.textContent = "Pause arbitre";
      refs.arbiterStatus.textContent = `Block en cours. Joueur au trait : ${playerName(match, match.currentTurn)}.`;
    } else {
      refs.centerLabel.textContent = "Trait";
      refs.centerValue.textContent = playerName(match, match.currentTurn);
      refs.spineLabel.textContent = "Pret";
      refs.spineHeadline.textContent = `Block ${match.blockNumber}`;
      refs.spineText.textContent = "Demarrez le block, puis laissez uniquement les deux grandes zones aux joueurs.";
      refs.primaryButton.textContent = "Demarrer le block";
      refs.arbiterStatus.textContent = `Block pret. ${playerName(match, match.currentTurn)} commencera.`;
    }

    refs.arbiterCloseBlockButton.textContent = match.awaitingBlockClosure
      ? "Ouvrir la page cube"
      : "Clore le block";

    renderZone("black");
    renderZone("white");
  }

  render();

  window.setInterval(() => {
    if (!match) {
      return;
    }

    const changed = syncRunningState(match);
    if (changed) {
      dirty = true;
    }

    if (!match.result && match.phase === "cube") {
      persistMatch();
      navigateTo("cube.html");
      return;
    }

    render();
  }, 100);
}

function initCubePage() {
  if (!match) {
    replaceTo("index.html");
    return;
  }

  if (!match.result && match.phase !== "cube") {
    replaceTo("chrono.html");
    return;
  }

  const refs = {
    title: document.querySelector("#cubeTitle"),
    subtitle: document.querySelector("#cubeSubtitle"),
    blockLabel: document.querySelector("#cubeBlockLabel"),
    elapsed: document.querySelector("#cubeElapsed"),
    centerLabel: document.querySelector("#cubeCenterLabel"),
    centerValue: document.querySelector("#cubeCenterValue"),
    spineLabel: document.querySelector("#cubeSpineLabel"),
    spineHeadline: document.querySelector("#cubeSpineHeadline"),
    spineText: document.querySelector("#cubeSpineText"),
    primaryButton: document.querySelector("#primaryCubeButton"),
    whiteName: document.querySelector("#whiteNameCube"),
    blackName: document.querySelector("#blackNameCube"),
    whiteButton: document.querySelector("#whiteCubeButton"),
    blackButton: document.querySelector("#blackCubeButton"),
    whiteResult: document.querySelector("#whiteCubeResult"),
    blackResult: document.querySelector("#blackCubeResult"),
    whiteCap: document.querySelector("#whiteCubeCap"),
    blackCap: document.querySelector("#blackCubeCap"),
    whiteHint: document.querySelector("#whiteHintCube"),
    blackHint: document.querySelector("#blackHintCube"),
    openHelpButton: document.querySelector("#openCubeHelpButton"),
    closeHelpButton: document.querySelector("#closeCubeHelpButton"),
    helpModal: document.querySelector("#cubeHelpModal"),
    helpStatus: document.querySelector("#cubeHelpStatus"),
    replayCubeButton: document.querySelector("#replayCubeButton"),
    resetButton: document.querySelector("#cubeResetButton"),
  };

  const openModal = () => toggleModal(refs.helpModal, true);
  const closeModal = () => toggleModal(refs.helpModal, false);

  refs.openHelpButton?.addEventListener("click", openModal);
  refs.closeHelpButton?.addEventListener("click", closeModal);
  refs.helpModal?.addEventListener("click", (event) => {
    const target = event.target;
    if (target instanceof HTMLElement && target.dataset.closeCubeModal === "true") {
      closeModal();
    }
  });

  refs.whiteButton?.addEventListener("click", () => {
    captureCubeTime(match, "white");
    dirty = true;
    render();
  });

  refs.blackButton?.addEventListener("click", () => {
    captureCubeTime(match, "black");
    dirty = true;
    render();
  });

  refs.primaryButton?.addEventListener("click", () => {
    if (match.result) {
      navigateTo("index.html");
      return;
    }

    if (match.phase !== "cube") {
      navigateTo("chrono.html");
      return;
    }

    if (!match.cube.running && match.cube.times.white === null && match.cube.times.black === null) {
      startCubePhase(match);
      dirty = true;
      render();
      return;
    }

    if (match.cube.running) {
      return;
    }

    if (match.cube.times.white !== null && match.cube.times.black !== null) {
      if (match.config.mode === "twice" && match.cube.times.white === match.cube.times.black) {
        replayCubePhase(match);
        dirty = true;
        render();
        return;
      }

      applyCubeOutcome(match);
      dirty = true;
      persistMatch();
      navigateTo("chrono.html");
    }
  });

  refs.replayCubeButton?.addEventListener("click", () => {
    replayCubePhase(match);
    dirty = true;
    render();
  });

  refs.resetButton?.addEventListener("click", () => {
    clearMatch();
    replaceTo("index.html");
  });

  function renderCubeZone(color) {
    const isWhite = color === "white";
    const button = isWhite ? refs.whiteButton : refs.blackButton;
    const name = isWhite ? refs.whiteName : refs.blackName;
    const result = isWhite ? refs.whiteResult : refs.blackResult;
    const cap = isWhite ? refs.whiteCap : refs.blackCap;
    const hint = isWhite ? refs.whiteHint : refs.blackHint;
    const time = match.cube.times[color];

    name.textContent = playerName(match, color);
    result.textContent = time === null ? "--" : formatStopwatch(time);
    cap.textContent = renderCubeCap(match, time);

    if (match.result) {
      button.textContent = resultText(match);
      button.disabled = true;
      hint.textContent = "Le match est termine.";
      return;
    }

    if (match.phase !== "cube") {
      button.textContent = "Retour chrono";
      button.disabled = true;
      hint.textContent = "La page cube est terminee.";
      return;
    }

    if (!match.cube.running) {
      if (time !== null) {
        button.textContent = "Temps capture";
        button.disabled = true;
        hint.textContent = "Arret deja enregistre pour ce joueur.";
      } else {
        button.textContent = "Pret";
        button.disabled = true;
        hint.textContent = "Attente du demarrage de la phase cube.";
      }
      return;
    }

    if (time !== null) {
      button.textContent = "Temps capture";
      button.disabled = true;
      hint.textContent = "Le temps de ce joueur est deja enregistre.";
      return;
    }

    button.textContent = "J'ai fini le cube";
    button.disabled = false;
    hint.textContent = "Tape au moment exact ou le cube est resolu.";
  }

  function render() {
    refs.title.textContent = match.cube.number ? `Cube n${match.cube.number}` : "Phase cube";
    refs.subtitle.textContent = `Block ${match.blockNumber} - ${MODES[match.config.mode].label} - ${renderModeContext(match)}`;
    refs.blockLabel.textContent = `${match.blockNumber}`;
    refs.elapsed.textContent = renderCubeElapsed(match);

    if (match.result) {
      refs.centerLabel.textContent = "Resultat";
      refs.centerValue.textContent = resultText(match);
      refs.spineLabel.textContent = "Termine";
      refs.spineHeadline.textContent = resultText(match);
      refs.spineText.textContent = "Retournez a la configuration pour relancer une rencontre.";
      refs.primaryButton.textContent = "Retour a l'accueil";
      refs.helpStatus.textContent = "Le match est termine.";
    } else if (match.cube.running) {
      refs.centerLabel.textContent = "Etat";
      refs.centerValue.textContent = "Cube en cours";
      refs.spineLabel.textContent = "Arrets";
      refs.spineHeadline.textContent = "Attendre les deux fins";
      refs.spineText.textContent = "Chaque joueur tape sur sa grande zone des qu'il a resolu son cube.";
      refs.primaryButton.textContent = "Chrono cube en cours";
      refs.helpStatus.textContent = "Phase cube en cours. Les arrets sont saisis directement par les joueurs.";
    } else if (
      match.cube.times.white !== null &&
      match.cube.times.black !== null &&
      match.config.mode === "twice" &&
      match.cube.times.white === match.cube.times.black
    ) {
      refs.centerLabel.textContent = "Decision";
      refs.centerValue.textContent = "Egalite parfaite";
      refs.spineLabel.textContent = "Reglement";
      refs.spineHeadline.textContent = "Rejouer la phase cube";
      refs.spineText.textContent = "Le mode Twice impose de relancer immediatement la phase cube en cas d'egalite parfaite.";
      refs.primaryButton.textContent = "Rejouer la phase cube";
      refs.helpStatus.textContent = refs.spineText.textContent;
    } else if (match.cube.times.white !== null && match.cube.times.black !== null) {
      refs.centerLabel.textContent = "Decision";
      refs.centerValue.textContent = "Phase cube complete";
      refs.spineLabel.textContent = "Suite";
      refs.spineHeadline.textContent = "Ouvrir la page chrono";
      refs.spineText.textContent = "Appliquer le resultat du cube pour preparer le block suivant.";
      refs.primaryButton.textContent = "Appliquer et ouvrir la page chrono";
      refs.helpStatus.textContent = refs.spineText.textContent;
    } else {
      refs.centerLabel.textContent = "Etat";
      refs.centerValue.textContent = "Pret";
      refs.spineLabel.textContent = "Depart";
      refs.spineHeadline.textContent = "Lancer la phase cube";
      refs.spineText.textContent = "Demarrez le chrono commun, puis laissez chaque joueur utiliser uniquement sa grande zone.";
      refs.primaryButton.textContent = "Demarrer la phase cube";
      refs.helpStatus.textContent = "La phase cube n'a pas encore commence.";
    }

    renderCubeZone("black");
    renderCubeZone("white");
    refs.primaryButton.disabled = match.result ? false : match.cube.running;
  }

  render();

  window.setInterval(() => {
    if (!match) {
      return;
    }

    if (!match.result && match.phase !== "cube") {
      persistMatch();
      navigateTo("chrono.html");
      return;
    }

    render();
  }, 100);
}

function createMatch(config) {
  const quota = PRESETS[config.preset].quota;
  const newMatch = {
    schemaVersion: 2,
    config,
    phase: "block",
    running: false,
    lastTickAt: null,
    blockNumber: 1,
    currentTurn: "white",
    blockRemainingMs: BLOCK_DURATION_MS,
    moveRemainingMs: MOVE_LIMIT_MS,
    quota,
    moves: {
      white: 0,
      black: 0,
    },
    clocks:
      config.mode === "time"
        ? {
            white: TIME_MODE_INITIAL_CLOCK_MS,
            black: TIME_MODE_INITIAL_CLOCK_MS,
          }
        : null,
    lastMover: null,
    awaitingBlockClosure: false,
    closureReason: "",
    result: null,
    cube: {
      number: null,
      running: false,
      startedAt: null,
      elapsedMs: 0,
      times: {
        white: null,
        black: null,
      },
      round: 1,
      history: [],
    },
    doubleCoup: {
      eligible: false,
      step: 0,
      starter: "white",
    },
    history: [],
  };

  logEvent(newMatch, `Match cree en mode ${MODES[config.mode].label}, cadence ${PRESETS[config.preset].label}.`);
  logEvent(newMatch, "Les Blancs commencent le block 1.");
  return newMatch;
}

function readStoredMatch() {
  try {
    const raw = localStorage.getItem(STORAGE_KEY);
    if (!raw) {
      return null;
    }

    const parsed = JSON.parse(raw);
    if (!parsed || parsed.schemaVersion !== 2) {
      return null;
    }

    return parsed;
  } catch {
    return null;
  }
}

function normalizeRecoveredMatch(storedMatch) {
  if (storedMatch.phase === "block" && typeof storedMatch.lastTickAt !== "number") {
    storedMatch.lastTickAt = null;
  }

  if (!storedMatch.cube) {
    storedMatch.cube = {
      number: null,
      running: false,
      startedAt: null,
      elapsedMs: 0,
      times: { white: null, black: null },
      round: 1,
      history: [],
    };
  }

  if (!storedMatch.doubleCoup) {
    storedMatch.doubleCoup = {
      eligible: false,
      step: 0,
      starter: "white",
    };
  }
}

function syncRunningState(storedMatch) {
  if (!storedMatch || storedMatch.result) {
    return false;
  }

  if (!storedMatch.running || storedMatch.phase !== "block" || !storedMatch.lastTickAt) {
    return false;
  }

  const now = Date.now();
  const delta = now - storedMatch.lastTickAt;
  if (delta <= 0) {
    return false;
  }

  storedMatch.lastTickAt = now;
  storedMatch.blockRemainingMs = Math.max(0, storedMatch.blockRemainingMs - delta);
  storedMatch.moveRemainingMs = Math.max(0, storedMatch.moveRemainingMs - delta);

  if (storedMatch.clocks) {
    storedMatch.clocks[storedMatch.currentTurn] -= delta;
  }

  if (storedMatch.blockRemainingMs === 0) {
    requestBlockClosure(storedMatch, "Les 180 secondes du block sont ecoulees.");
  } else if (storedMatch.moveRemainingMs === 0) {
    registerMoveTimeout(storedMatch, true);
  }

  return true;
}

function startBlock(storedMatch) {
  if (!storedMatch || storedMatch.phase !== "block" || storedMatch.result) {
    return;
  }

  storedMatch.running = true;
  storedMatch.awaitingBlockClosure = false;
  storedMatch.closureReason = "";
  storedMatch.lastTickAt = Date.now();
  logEvent(
    storedMatch,
    storedMatch.blockNumber === 1 && storedMatch.moves.white === 0 && storedMatch.moves.black === 0
      ? "Block 1 demarre."
      : `Block ${storedMatch.blockNumber} relance.`,
  );
}

function pauseBlock(storedMatch) {
  if (!storedMatch || !storedMatch.running) {
    return;
  }

  storedMatch.running = false;
  storedMatch.lastTickAt = null;
  logEvent(storedMatch, `Block ${storedMatch.blockNumber} mis en pause.`);
}

function requestBlockClosure(storedMatch, reason) {
  if (!storedMatch || storedMatch.awaitingBlockClosure) {
    return;
  }

  storedMatch.running = false;
  storedMatch.lastTickAt = null;
  storedMatch.awaitingBlockClosure = true;
  storedMatch.closureReason = reason;
  storedMatch.moveRemainingMs = MOVE_LIMIT_MS;
  logEvent(storedMatch, `${reason} Verifier si des coups hors quota sont encore necessaires avant la page cube.`);
}

function openCubePhase(storedMatch) {
  if (!storedMatch) {
    return;
  }

  storedMatch.phase = "cube";
  storedMatch.running = false;
  storedMatch.lastTickAt = null;
  storedMatch.awaitingBlockClosure = false;
  storedMatch.closureReason = "";
  storedMatch.cube.number = pickCubeNumber();
  storedMatch.cube.running = false;
  storedMatch.cube.startedAt = null;
  storedMatch.cube.elapsedMs = 0;
  storedMatch.cube.times = { white: null, black: null };
  storedMatch.cube.round = 1;
  logEvent(storedMatch, `Page cube ouverte. Cube n${storedMatch.cube.number} designe.`);
}

function startCubePhase(storedMatch) {
  if (!storedMatch || storedMatch.phase !== "cube" || storedMatch.result) {
    return;
  }

  if (!storedMatch.cube.number) {
    storedMatch.cube.number = pickCubeNumber();
  }

  storedMatch.cube.running = true;
  storedMatch.cube.startedAt = Date.now();
  storedMatch.cube.elapsedMs = 0;
  logEvent(storedMatch, `Phase cube demarree sur le cube n${storedMatch.cube.number}.`);
}

function captureCubeTime(storedMatch, color) {
  if (
    !storedMatch ||
    storedMatch.phase !== "cube" ||
    !storedMatch.cube.running ||
    storedMatch.cube.times[color] !== null
  ) {
    return;
  }

  const elapsedMs = Date.now() - storedMatch.cube.startedAt;
  storedMatch.cube.times[color] = elapsedMs;
  storedMatch.cube.elapsedMs = Math.max(storedMatch.cube.elapsedMs, elapsedMs);
  logEvent(storedMatch, `${playerName(storedMatch, color)} arrete le cube en ${formatStopwatch(elapsedMs)}.`);

  if (
    storedMatch.cube.times.white !== null &&
    storedMatch.cube.times.black !== null
  ) {
    storedMatch.cube.running = false;
    storedMatch.cube.history.push({
      blockNumber: storedMatch.blockNumber,
      number: storedMatch.cube.number,
      white: storedMatch.cube.times.white,
      black: storedMatch.cube.times.black,
    });
  }
}

function applyCubeOutcome(storedMatch) {
  if (!storedMatch || storedMatch.phase !== "cube") {
    return;
  }

  const white = storedMatch.cube.times.white;
  const black = storedMatch.cube.times.black;

  if (white === null || black === null) {
    return;
  }

  if (storedMatch.config.mode === "twice") {
    const winner = white < black ? "white" : "black";
    prepareNextTwiceBlock(storedMatch, winner);
    return;
  }

  applyTimeAdjustments(storedMatch, white, black);
  prepareNextTimeBlock(storedMatch);
}

function prepareNextTwiceBlock(storedMatch, winner) {
  const hadDouble = storedMatch.lastMover !== winner && storedMatch.lastMover !== null;
  logEvent(storedMatch, `${playerName(storedMatch, winner)} gagne la phase cube et ouvrira le block suivant.`);

  storedMatch.blockNumber += 1;
  storedMatch.phase = "block";
  storedMatch.running = false;
  storedMatch.lastTickAt = null;
  storedMatch.blockRemainingMs = BLOCK_DURATION_MS;
  storedMatch.moveRemainingMs = MOVE_LIMIT_MS;
  storedMatch.moves = { white: 0, black: 0 };
  storedMatch.currentTurn = winner;
  storedMatch.doubleCoup = {
    eligible: hadDouble,
    step: hadDouble ? 1 : 0,
    starter: winner,
  };
  storedMatch.cube.running = false;
  storedMatch.cube.startedAt = null;
  storedMatch.cube.elapsedMs = 0;
  storedMatch.cube.times = { white: null, black: null };
  storedMatch.cube.number = null;

  if (hadDouble) {
    logEvent(storedMatch, `Double coup disponible pour ${playerName(storedMatch, winner)}.`);
  } else {
    logEvent(storedMatch, "Aucun double coup n'est accorde sur ce depart.");
  }
}

function prepareNextTimeBlock(storedMatch) {
  storedMatch.blockNumber += 1;
  storedMatch.phase = "block";
  storedMatch.running = false;
  storedMatch.lastTickAt = null;
  storedMatch.blockRemainingMs = BLOCK_DURATION_MS;
  storedMatch.moveRemainingMs = MOVE_LIMIT_MS;
  storedMatch.moves = { white: 0, black: 0 };
  storedMatch.doubleCoup = {
    eligible: false,
    step: 0,
    starter: storedMatch.currentTurn,
  };
  storedMatch.cube.running = false;
  storedMatch.cube.startedAt = null;
  storedMatch.cube.elapsedMs = 0;
  storedMatch.cube.times = { white: null, black: null };
  storedMatch.cube.number = null;
  logEvent(
    storedMatch,
    `Block ${storedMatch.blockNumber} pret. Le trait est conserve : ${playerName(
      storedMatch,
      storedMatch.currentTurn,
    )} reprend.`,
  );
}

function applyTimeAdjustments(storedMatch, whiteTime, blackTime) {
  if (!storedMatch.clocks) {
    return;
  }

  const cappedWhite = Math.min(whiteTime, CUBE_TIME_CAP_MS);
  const cappedBlack = Math.min(blackTime, CUBE_TIME_CAP_MS);
  const blockType = getTimeBlockType(storedMatch.blockNumber);

  if (blockType === "minus") {
    storedMatch.clocks.white -= cappedWhite;
    storedMatch.clocks.black -= cappedBlack;
    logEvent(
      storedMatch,
      `Bloc - : ${formatStopwatch(cappedWhite)} retire au chrono Blanc, ${formatStopwatch(
        cappedBlack,
      )} retire au chrono Noir.`,
    );
  } else {
    storedMatch.clocks.white += cappedBlack;
    storedMatch.clocks.black += cappedWhite;
    logEvent(
      storedMatch,
      `Bloc + : ${formatStopwatch(cappedBlack)} ajoute au chrono Blanc, ${formatStopwatch(
        cappedWhite,
      )} ajoute au chrono Noir.`,
    );
  }
}

function replayCubePhase(storedMatch) {
  if (!storedMatch || storedMatch.phase !== "cube") {
    return;
  }

  storedMatch.cube.running = false;
  storedMatch.cube.startedAt = null;
  storedMatch.cube.elapsedMs = 0;
  storedMatch.cube.times = { white: null, black: null };
  storedMatch.cube.round += 1;
  logEvent(storedMatch, `Phase cube relancee (tentative ${storedMatch.cube.round}).`);
}

function registerCountedMove(storedMatch, { source }) {
  if (!storedMatch || storedMatch.phase !== "block") {
    return;
  }

  const actor = storedMatch.currentTurn;
  if (storedMatch.moves[actor] >= storedMatch.quota) {
    logEvent(
      storedMatch,
      `${playerName(storedMatch, actor)} a deja atteint son quota. Utiliser le mode hors quota si necessaire.`,
    );
    return;
  }

  storedMatch.moves[actor] += 1;
  storedMatch.lastMover = actor;
  storedMatch.moveRemainingMs = MOVE_LIMIT_MS;

  if (source === "double") {
    storedMatch.doubleCoup.step = 0;
  }

  logEvent(
    storedMatch,
    `${playerName(storedMatch, actor)} valide son coup (${storedMatch.moves[actor]} / ${storedMatch.quota}).`,
  );

  storedMatch.currentTurn = opponentOf(actor);
  verifyQuotaCompletion(storedMatch);
}

function registerFreeDoubleMove(storedMatch) {
  if (!storedMatch || storedMatch.doubleCoup.step !== 1) {
    return;
  }

  const actor = storedMatch.currentTurn;
  storedMatch.lastMover = actor;
  storedMatch.moveRemainingMs = MOVE_LIMIT_MS;
  storedMatch.doubleCoup.step = 2;
  logEvent(
    storedMatch,
    `Premier coup gratuit du double coup joue par ${playerName(storedMatch, actor)}.`,
  );
}

function registerReliefMove(storedMatch) {
  if (!storedMatch || storedMatch.phase !== "block") {
    return;
  }

  const actor = storedMatch.currentTurn;
  storedMatch.lastMover = actor;
  storedMatch.currentTurn = opponentOf(actor);
  storedMatch.moveRemainingMs = MOVE_LIMIT_MS;
  logEvent(
    storedMatch,
    `Coup hors quota joue par ${playerName(storedMatch, actor)} avant la page cube.`,
  );
}

function registerMoveTimeout(storedMatch, automatic) {
  if (!storedMatch || storedMatch.phase !== "block") {
    return;
  }

  const actor = storedMatch.currentTurn;

  if (storedMatch.doubleCoup.step === 1) {
    storedMatch.doubleCoup.step = 0;
    storedMatch.moveRemainingMs = MOVE_LIMIT_MS;
    logEvent(
      storedMatch,
      `Depassement sur le premier coup gratuit de ${playerName(storedMatch, actor)} : le double coup est annule.`,
    );
    return;
  }

  if (storedMatch.moves[actor] < storedMatch.quota) {
    storedMatch.moves[actor] += 1;
  }

  if (storedMatch.doubleCoup.step === 2) {
    storedMatch.doubleCoup.step = 0;
  }

  storedMatch.currentTurn = opponentOf(actor);
  storedMatch.moveRemainingMs = MOVE_LIMIT_MS;
  logEvent(
    storedMatch,
    `${automatic ? "Temps par coup ecoule." : "Depassement manuel 20 s."} ${playerName(
      storedMatch,
      actor,
    )} perd son coup, qui reste compte dans le quota.`,
  );
  verifyQuotaCompletion(storedMatch);
}

function verifyQuotaCompletion(storedMatch) {
  if (
    storedMatch.moves.white >= storedMatch.quota &&
    storedMatch.moves.black >= storedMatch.quota
  ) {
    requestBlockClosure(storedMatch, "Les deux joueurs ont atteint leur quota de coups.");
  }
}

function setResult(storedMatch, winner) {
  if (!storedMatch || storedMatch.result) {
    return;
  }

  storedMatch.running = false;
  storedMatch.lastTickAt = null;
  storedMatch.result = winner;
  logEvent(storedMatch, `${resultText(storedMatch)}.`);
}

function renderModeContext(storedMatch) {
  if (storedMatch.config.mode === "time") {
    return getTimeBlockType(storedMatch.blockNumber) === "minus"
      ? "Bloc - : temps cube retire a son propre chrono"
      : "Bloc + : temps cube ajoute au chrono adverse";
  }

  if (storedMatch.doubleCoup.step === 1) {
    return `Double coup actif pour ${playerName(storedMatch, storedMatch.doubleCoup.starter)}`;
  }

  if (storedMatch.doubleCoup.step === 2) {
    return "Deuxieme coup du double en attente";
  }

  return "Le gagnant du cube ouvrira le prochain block";
}

function renderLastCube(storedMatch, color) {
  const last = storedMatch.cube.history.at(-1);
  if (!last) {
    return "--";
  }

  return formatStopwatch(last[color]);
}

function renderCubeElapsed(storedMatch) {
  if (storedMatch.phase !== "cube") {
    return "00:00.0";
  }

  if (storedMatch.cube.running) {
    return formatStopwatch(Date.now() - storedMatch.cube.startedAt);
  }

  if (storedMatch.cube.elapsedMs > 0) {
    return formatStopwatch(storedMatch.cube.elapsedMs);
  }

  return "00:00.0";
}

function renderCubeCap(storedMatch, time) {
  if (time === null) {
    return "";
  }

  if (storedMatch.config.mode !== "time") {
    return "temps capture";
  }

  if (time <= CUBE_TIME_CAP_MS) {
    return "plafond non atteint";
  }

  return `pris en compte ${formatStopwatch(CUBE_TIME_CAP_MS)}`;
}

function resultText(storedMatch) {
  if (storedMatch.result === "white") {
    return `Victoire de ${playerName(storedMatch, "white")}`;
  }

  if (storedMatch.result === "black") {
    return `Victoire de ${playerName(storedMatch, "black")}`;
  }

  return "Partie arretee";
}

function routeForMatch(storedMatch) {
  if (!storedMatch) {
    return "index.html";
  }

  return storedMatch.phase === "cube" && !storedMatch.result ? "cube.html" : "chrono.html";
}

function navigateTo(target) {
  persistMatch();
  window.location.href = target;
}

function replaceTo(target) {
  window.location.replace(target);
}

function persistMatch() {
  if (!match) {
    localStorage.removeItem(STORAGE_KEY);
    dirty = false;
    return;
  }

  localStorage.setItem(STORAGE_KEY, JSON.stringify(match));
  dirty = false;
}

function flushState() {
  if (match) {
    syncRunningState(match);
  }

  if (dirty) {
    persistMatch();
  }
}

function clearMatch() {
  match = null;
  persistMatch();
}

function toggleModal(element, open) {
  if (!element) {
    return;
  }

  element.classList.toggle("hidden", !open);
  element.setAttribute("aria-hidden", String(!open));
}

function loadDemo(form, onRender) {
  form.elements.matchLabel.value = "Demo officielle ChessCubing";
  setRadioValue(form, "mode", "twice");
  setRadioValue(form, "preset", "freeze");
  form.elements.whiteName.value = "Nora";
  form.elements.blackName.value = "Leo";
  form.elements.arbiterName.value = "Arbitre demo";
  form.elements.eventName.value = "Session telephone";
  form.elements.notes.value = "8 cubes verifies, variante prete, tirage au sort effectue.";
  onRender();
}

function getRadioValue(form, name) {
  const selected = form.querySelector(`input[name="${name}"]:checked`);
  return selected ? selected.value : "";
}

function setRadioValue(form, name, value) {
  const input = form.querySelector(`input[name="${name}"][value="${value}"]`);
  if (input) {
    input.checked = true;
  }
}

function playerName(storedMatch, color) {
  return color === "white" ? storedMatch.config.whiteName : storedMatch.config.blackName;
}

function opponentOf(color) {
  return color === "white" ? "black" : "white";
}

function getTimeBlockType(blockNumber) {
  return blockNumber % 2 === 1 ? "minus" : "plus";
}

function pickCubeNumber() {
  return Math.floor(Math.random() * 4) + 1;
}

function logEvent(storedMatch, message) {
  storedMatch.history.push({
    message,
    time: new Date().toLocaleTimeString("fr-FR", {
      hour: "2-digit",
      minute: "2-digit",
      second: "2-digit",
    }),
  });
}

function formatClock(ms) {
  const totalSeconds = Math.max(0, Math.floor(ms / 1000));
  const minutes = String(Math.floor(totalSeconds / 60)).padStart(2, "0");
  const seconds = String(totalSeconds % 60).padStart(2, "0");
  return `${minutes}:${seconds}`;
}

function formatSignedClock(ms) {
  const negative = ms < 0 ? "-" : "";
  const totalSeconds = Math.floor(Math.abs(ms) / 1000);
  const minutes = String(Math.floor(totalSeconds / 60)).padStart(2, "0");
  const seconds = String(totalSeconds % 60).padStart(2, "0");
  return `${negative}${minutes}:${seconds}`;
}

function formatStopwatch(ms) {
  const totalSeconds = Math.floor(Math.abs(ms) / 1000);
  const minutes = String(Math.floor(totalSeconds / 60)).padStart(2, "0");
  const seconds = String(totalSeconds % 60).padStart(2, "0");
  const tenths = Math.floor((Math.abs(ms) % 1000) / 100);
  return `${minutes}:${seconds}.${tenths}`;
}

function sanitizeText(value) {
  return String(value || "")
    .replace(/[<>]/g, "")
    .trim()
    .replace(/\s+/g, " ");
}

function escapeHtml(value) {
  return String(value || "")
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#39;");
}