document.addEventListener("DOMContentLoaded", () => {
  const backendBaseUrl = document.body.dataset.backendBaseUrl || "http://127.0.0.1:8000";
  const searchForm = document.getElementById("stats-search-form");
  const searchInput = document.getElementById("stats-search-input");
  const searchStateNode = document.getElementById("stats-search-state");
  const searchHelpNode = document.getElementById("stats-search-help");
  const resultListNode = document.getElementById("stats-result-list");
  const backendStateNode = document.getElementById("stats-backend-state");
  const profilePanel = document.getElementById("stats-profile-panel");
  const profileTitle = document.getElementById("stats-profile-title");
  const profileStateNode = document.getElementById("stats-profile-state");
  const summaryGrid = document.getElementById("stats-summary-grid");
  const weeklySummaryNode = document.getElementById("stats-weekly-summary");
  const monthlySummaryNode = document.getElementById("stats-monthly-summary");
  const annualForm = document.getElementById("stats-annual-form");
  const annualYearInput = document.getElementById("stats-annual-year");
  const annualStateNode = document.getElementById("stats-annual-state");
  const annualContentNode = document.getElementById("stats-annual-content");

  const annualDefaultYear = new Date().getUTCFullYear();
  const annualMetric = "kills";
  const annualMetricSupportedOnly = "kills";
  const annualLimit = 20;
  const annualServerId = "all";

  const messages = {
    backendChecking: "Comprobando disponibilidad del backend",
    backendOnline: "Backend operativo",
    backendUnavailable: "Backend no disponible. Reintenta en unos segundos.",
    backendUnavailableForSearch:
      "Backend no disponible. No se pueden buscar jugadores ni cargar su perfil.",
    backendUnavailableForAnnual:
      "Backend no disponible. No se puede consultar el ranking anual.",
    searchNoInput: "Escribe un nombre o ID para buscar.",
    searchLoading: "Buscando jugadores...",
    searchEmpty: "Sin resultados. Prueba con otro texto o ID.",
    searchError:
      "Error al buscar jugadores. Verifica backend y reintenta.",
    searchReadyPrefix: "Se encontraron ",
    searchReadySuffix:
      " jugador(es). Selecciona uno para ver sus estadisticas.",
    searchShortQueryHelp:
      "Usa al menos 1 caracter para iniciar la busqueda.",
    profileLoading: "Cargando estadisticas personales...",
    profileNoStats:
      "Jugador sin estadisticas suficientes para mostrar datos personales.",
    profileError: "No fue posible cargar las estadisticas del jugador.",
    annualLoading: "Cargando ranking anual...",
    annualMissing:
      "No hay snapshot generado para el ano solicitado. Mostrara estado missing hasta que exista.",
    annualReadyEmpty:
      "Snapshot anual listo pero sin datos para el ano y servidor seleccionado.",
    annualUnsupportedMetric:
      "La metrica anual solicitada no esta soportada en V1.",
    annualMetricInvalid:
      "Parametro de ranking anual invalido. Usa metric=kills en V1.",
    annualReadyPrefix: "Ranking anual listo para",
    weeklyPlaceholder:
      "Sin datos semanales. El ranking semanal se actualiza al cargar un jugador.",
    monthlyPlaceholder:
      "Sin datos mensuales. El ranking mensual se actualiza al cargar un jugador.",
    profileReadyTitle: "Perfil personal",
    profileEmptyTitle: "Selecciona un jugador para ver sus estadisticas.",
    weeklySummaryHelp:
      "Resumen semanal: muestra la ventana activa del jugador.",
    monthlySummaryHelp:
      "Resumen mensual: muestra la ventana activa del jugador.",
  };

  let isBackendOnline = false;

  if (searchHelpNode) {
    searchHelpNode.textContent =
      "Usa el buscador para encontrar un jugador. Al seleccionar uno veras resumen semanal y mensual. " +
      "El ranking anual se consulta por separado con el ano indicado.";
  }

  setBackendState(messages.backendChecking, false);
  if (annualYearInput) {
    annualYearInput.value = String(annualDefaultYear);
  }
  clearProfilePanel(false);
  refreshBackendHealth();

  if (annualForm && annualYearInput) {
    annualForm.addEventListener("submit", (event) => {
      event.preventDefault();
      void loadAnnualRanking();
    });
  }

  if (searchForm && searchInput) {
    searchForm.addEventListener("submit", (event) => {
      event.preventDefault();
      const query = (searchInput.value || "").trim();
      if (!query) {
        setSearchState("error", messages.searchNoInput);
        return;
      }
      void searchPlayers(query);
    });
  }

  function setBackendState(label, isOnline) {
    isBackendOnline = isOnline;
    if (!backendStateNode) {
      return;
    }
    backendStateNode.textContent = label;
    backendStateNode.classList.toggle("status-chip--ok", isOnline);
    backendStateNode.classList.toggle("status-chip--fallback", !isOnline);
  }

  function markAsBackendUnavailable() {
    setBackendState(messages.backendUnavailable, false);
    if (searchStateNode) {
      searchStateNode.textContent = messages.backendUnavailableForSearch;
      searchStateNode.className = "stats-state stats-state--error";
    }
    setAnnualState("error", messages.backendUnavailableForAnnual);
  }

  function setSearchState(state, message) {
    if (!searchStateNode) {
      return;
    }
    searchStateNode.textContent = message;
    searchStateNode.className = `stats-state stats-state--${state}`;
  }

  function setAnnualState(state, message) {
    if (!annualStateNode) {
      return;
    }
    annualStateNode.textContent = message;
    annualStateNode.className = `stats-state stats-state--${state}`;
  }

  function setProfileState(state, message) {
    if (!profileStateNode || !profilePanel) {
      return;
    }
    profilePanel.hidden = false;
    profileStateNode.textContent = message;
    profileStateNode.className = `stats-state stats-state--${state}`;
    summaryGrid.innerHTML = "";
    if (weeklySummaryNode) {
      weeklySummaryNode.textContent = "Cargando ...";
    }
    if (monthlySummaryNode) {
      monthlySummaryNode.textContent = "Cargando ...";
    }
  }

  async function refreshBackendHealth() {
    try {
      const response = await fetch(`${backendBaseUrl}/health`);
      if (!response.ok) {
        throw new Error(`Health request failed with ${response.status}`);
      }
      const payload = await response.json();
      if (!payload || payload.status !== "ok") {
        throw new Error("Unexpected health payload");
      }

      setBackendState(messages.backendOnline, true);
      setAnnualState(
        "neutral",
        "Backend disponible. Selecciona un ano para cargar el ranking anual (kills).",
      );
      void loadAnnualRanking();
    } catch (error) {
      markAsBackendUnavailable();
      console.warn("Backend health check failed", error);
    }
  }

  async function searchPlayers(query) {
    if (!resultListNode) {
      return;
    }
    if (!query) {
      setSearchState("error", messages.searchShortQueryHelp);
      return;
    }
    if (!isBackendOnline) {
      markAsBackendUnavailable();
      return;
    }

    setSearchState("loading", messages.searchLoading);
    clearProfilePanel(true);
    resultListNode.innerHTML = "";

    try {
      const searchResponse = await fetch(
        `${backendBaseUrl}/api/stats/players/search?q=${encodeURIComponent(query)}`,
      );
      if (!searchResponse.ok) {
        throw new Error(`Search request failed with ${searchResponse.status}`);
      }

      const payload = await searchResponse.json();
      if (!payload || payload.status !== "ok") {
        throw new Error(payload?.message || "Respuesta de busqueda invalida");
      }

      const items = normalizeArray(payload.data?.items);
      if (!items.length) {
        setSearchState("empty", messages.searchEmpty);
        return;
      }

      setSearchState(
        "ready",
        `${messages.searchReadyPrefix}${items.length}${messages.searchReadySuffix}`,
      );
      resultListNode.innerHTML = items.map(renderResultItem).join("");
      resultListNode.querySelectorAll("[data-player-id]").forEach((button) => {
        button.addEventListener("click", () => {
          const playerId = button.getAttribute("data-player-id");
          if (playerId) {
            void loadPlayerProfile(playerId);
          }
        });
      });
    } catch (error) {
      console.warn("Player search failed", error);
      markAsBackendUnavailable();
      setSearchState("error", messages.searchError);
    }
  }

  async function loadAnnualRanking() {
    if (!annualForm || !annualYearInput || !annualContentNode) {
      return;
    }
    if (!isBackendOnline) {
      markAsBackendUnavailable();
      return;
    }

    const year = resolveAnnualYear();
    if (year === null) {
      setAnnualState("error", "El ano ingresado no es valido.");
      return;
    }

    setAnnualState("loading", messages.annualLoading);
    annualContentNode.innerHTML = "";

    try {
      const annualUrl =
        `${backendBaseUrl}/api/stats/rankings/annual?` +
        `year=${encodeURIComponent(year)}&` +
        `server_id=${encodeURIComponent(annualServerId)}&` +
        `metric=${encodeURIComponent(annualMetric)}&` +
        `limit=${encodeURIComponent(annualLimit)}`;

      const annualResponse = await fetch(annualUrl);
      if (!annualResponse.ok) {
        const annualErrorPayload = await safeParseJson(annualResponse);
        const annualErrorMessage = String(
          annualErrorPayload?.message || annualErrorPayload?.detail || "",
        ).toLowerCase();

        if (isAnnualMetricUnsupportedError(annualResponse.status, annualErrorMessage)) {
          setAnnualState("warning", messages.annualUnsupportedMetric);
          return;
        }

        if (annualResponse.status === 400 && annualErrorMessage.includes("metric")) {
          setAnnualState("warning", messages.annualMetricInvalid);
          return;
        }

        throw new Error(`Annual ranking request failed with ${annualResponse.status}`);
      }

      const payload = await annualResponse.json();
      if (!payload || payload.status !== "ok") {
        throw new Error(payload?.message || "Respuesta de ranking anual invalida");
      }

      renderAnnualRanking(payload.data || {});
    } catch (error) {
      console.warn("Annual ranking failed", error);
      markAsBackendUnavailable();
      setAnnualState("error", "Error al cargar ranking anual.");
      annualContentNode.innerHTML = "";
    }
  }

  function isAnnualMetricUnsupportedError(statusCode, message) {
    const normalized = String(message || "").toLowerCase();
    return (
      statusCode === 400 &&
      normalized.includes("metric") &&
      normalized.includes("unsupported") &&
      annualMetric.toLowerCase() === annualMetricSupportedOnly
    );
  }

  function resolveAnnualYear() {
    const normalized = Number.parseInt(String(annualYearInput?.value || "").trim(), 10);
    if (!Number.isFinite(normalized) || normalized <= 0) {
      return null;
    }
    return normalized;
  }

  function renderAnnualRanking(data) {
    if (!annualContentNode || !annualStateNode) {
      return;
    }

    const snapshotStatus = String(data.snapshot_status || "").toLowerCase();
    const items = normalizeArray(data.items);
    const limit = safeInt(data.limit, 0);
    const serverId = String(data.server_id || annualServerId);
    const sourceMatches = safeInt(data.source_matches_count, 0);
    const generatedAt = formatDateTime(data.generated_at);
    const year = safeInt(data.year, annualDefaultYear);
    const metric = escapeHtml(String(data.metric || annualMetric));

    if (snapshotStatus !== "ready" || !items.length) {
      const isReadyButEmpty = snapshotStatus === "ready" && !items.length;
      setAnnualState(
        "neutral",
        isReadyButEmpty ? messages.annualReadyEmpty : messages.annualMissing,
      );
      annualContentNode.innerHTML = "";
      return;
    }

    setAnnualState(
      "neutral",
      `${messages.annualReadyPrefix} ${serverId}, ano ${year}, metrica ${metric}`,
    );

    annualContentNode.innerHTML = `
      <article class="stats-summary-card">
        <p class="stats-summary-title">Top ${limit} anual</p>
        <div class="stats-annual-meta">
          <p><strong>Servidor:</strong> ${escapeHtml(serverId)}</p>
          <p><strong>Metrica:</strong> ${escapeHtml(metric)}</p>
          <p><strong>Partidas fuente:</strong> ${safeInt(sourceMatches, 0)}</p>
          <p><strong>Actualizado:</strong> ${escapeHtml(generatedAt || "No disponible")}</p>
        </div>
        ${renderAnnualRows(items)}
      </article>
    `;
  }

  function renderAnnualRows(items) {
    return items
      .map((item) => {
        const rank = safeInt(item.ranking_position, 0);
        const playerId = escapeHtml(String(item.player_id || ""));
        const playerName = escapeHtml(String(item.player_name || "Jugador sin nombre"));
        const metricValue = safeInt(item.metric_value, 0);
        const matches = safeInt(item.matches_considered, 0);
        const kills = safeInt(item.kills, 0);
        const deaths = safeInt(item.deaths, 0);
        const teamkills = safeInt(item.teamkills, 0);
        const kd = safeDecimal(item.kd_ratio, 2, "0.00");

        return `
          <article class="stats-annual-item">
            <p><strong>#${rank}</strong> ${playerName} <span class="stats-annual-sub">(ID: ${playerId})</span></p>
            <p><strong>Valor:</strong> ${metricValue} - <strong>Partidas:</strong> ${matches}</p>
            <p><strong>Kills:</strong> ${kills} - <strong>Deaths:</strong> ${deaths} - <strong>Teamkills:</strong> ${teamkills} - <strong>K/D:</strong> ${kd}</p>
          </article>
        `;
      })
      .join("");
  }

  function renderResultItem(item) {
    const playerId = escapeHtml(String(item.player_id || ""));
    const playerName = escapeHtml(String(item.player_name || "Jugador sin nombre"));
    const matches = Number.isFinite(Number(item.matches_considered))
      ? Number(item.matches_considered)
      : 0;
    const lastSeen = formatDateTime(item.last_seen_at);
    const serversSeen = Array.isArray(item.servers_seen)
      ? item.servers_seen
          .filter(Boolean)
          .map((server) => escapeHtml(String(server)))
          .join(", ")
      : "";

    return `
      <article class="stats-result-item">
        <button
          class="stats-result-item__button"
          type="button"
          data-player-id="${playerId}"
          aria-label="Cargar perfil de ${playerName}"
        >
          <div class="stats-result-item__main">
            <p class="stats-result-item__name">${playerName}</p>
            <p class="stats-result-item__meta">ID: ${playerId}</p>
          </div>
          <p class="stats-result-item__metrics">
            Partidas: ${matches} - Ultima aparicion: ${lastSeen}
          </p>
          ${serversSeen ? `<p class="stats-result-item__meta">Servidores: ${serversSeen}</p>` : ""}
        </button>
      </article>
    `;
  }

  async function loadPlayerProfile(playerId) {
    if (!isBackendOnline) {
      markAsBackendUnavailable();
      return;
    }

    setProfileState("loading", messages.profileLoading);
    if (!profilePanel) {
      return;
    }

    try {
      const response = await fetch(
        `${backendBaseUrl}/api/stats/players/${encodeURIComponent(playerId)}?timeframe=weekly`,
      );
      if (!response.ok) {
        throw new Error(`Profile request failed with ${response.status}`);
      }

      const payload = await response.json();
      if (!payload || payload.status !== "ok") {
        throw new Error(payload?.message || "Respuesta de perfil invalida");
      }

      const data = payload.data || {};
      profilePanel.hidden = false;
      profileTitle.textContent = messages.profileReadyTitle;
      const playerName = String(data.player_name || "Sin nombre");
      const playerIdText = String(data.player_id || playerId);
      const hasStats = Number(data.matches_considered || 0) > 0;

      profileStateNode.textContent = hasStats
        ? `${playerName} (${playerIdText})`
        : `${messages.profileNoStats} (${playerIdText})`;
      profileStateNode.className = hasStats
        ? "stats-state stats-state--neutral"
        : "stats-state stats-state--warning";

      summaryGrid.innerHTML = `
        <article class="stats-summary-card">
          <p class="stats-summary-title">Identidad</p>
          <p><strong>Jugador:</strong> ${escapeHtml(playerName)}</p>
          <p><strong>ID:</strong> ${escapeHtml(playerIdText)}</p>
          <p><strong>Partidas:</strong> ${safeInt(data.matches_considered, 0)}</p>
        </article>
        <article class="stats-summary-card">
          <p class="stats-summary-title">Totales</p>
          <p><strong>Kills:</strong> ${safeInt(data.kills, 0)}</p>
          <p><strong>Deaths:</strong> ${safeInt(data.deaths, 0)}</p>
          <p><strong>Teamkills:</strong> ${safeInt(data.teamkills, 0)}</p>
        </article>
        <article class="stats-summary-card">
          <p class="stats-summary-title">Ratios</p>
          <p><strong>K/D:</strong> ${safeDecimal(data.kd_ratio, 2, "0.00")}</p>
          <p><strong>Kills/partida:</strong> ${safeDecimal(data.kills_per_match, 2, "0.00")}</p>
          <p><strong>Deaths/partida:</strong> ${safeDecimal(data.deaths_per_match, 2, "0.00")}</p>
        </article>
      `;

      weeklySummaryNode.innerHTML = formatRankingSummary(
        data.weekly_ranking,
        "Semanal",
      );
      monthlySummaryNode.innerHTML = formatRankingSummary(
        data.monthly_ranking,
        "Mensual",
      );

      setBackendState(messages.backendOnline, true);
      isBackendOnline = true;
    } catch (error) {
      console.warn("Player profile failed", error);
      markAsBackendUnavailable();
      if (profilePanel) {
        profilePanel.hidden = false;
      }
      profileTitle.textContent = messages.profileReadyTitle;
      profileStateNode.textContent = messages.profileError;
      profileStateNode.className = "stats-state stats-state--error";
      summaryGrid.innerHTML = "";
      if (weeklySummaryNode) {
        weeklySummaryNode.textContent = messages.weeklyPlaceholder;
      }
      if (monthlySummaryNode) {
        monthlySummaryNode.textContent = messages.monthlyPlaceholder;
      }
    }
  }

  function clearProfilePanel(openPanel) {
    if (!profilePanel || !summaryGrid || !profileStateNode) {
      return;
    }
    if (openPanel) {
      profilePanel.hidden = true;
    }
    summaryGrid.innerHTML = "";
    if (weeklySummaryNode) {
      weeklySummaryNode.textContent = messages.weeklyPlaceholder;
    }
    if (monthlySummaryNode) {
      monthlySummaryNode.textContent = messages.monthlyPlaceholder;
    }
    profileStateNode.textContent = messages.profileEmptyTitle;
    profileStateNode.className = "stats-state stats-state--neutral";
  }

  function formatRankingSummary(ranking, timeframeLabel) {
    if (!ranking || !Number.isFinite(safeParseNumber(ranking.ranking_position))) {
      return `Sin ranking ${timeframeLabel.toLowerCase()} registrado para este jugador.`;
    }

    const rank = safeInt(ranking.ranking_position, 0);
    const metric = escapeHtml(String(ranking.metric || annualMetric));
    const windowLabel = escapeHtml(String(ranking.window_kind || ""));
    const windowStart = formatDateTime(ranking.window_start);
    const windowEnd = formatDateTime(ranking.window_end);
    const windowRange = windowLabel
      ? `${windowLabel}: ${windowStart} - ${windowEnd}`
      : `Ventana: ${windowStart} - ${windowEnd}`;

    return `
      <p><strong>Posicion:</strong> ${rank}</p>
      <p><strong>Metric:</strong> ${metric}</p>
      <p>${windowRange}</p>
    `;
  }

  function safeInt(value, fallback = 0) {
    const parsed = Number(value);
    if (!Number.isFinite(parsed)) {
      return fallback;
    }
    return parsed;
  }

  function safeDecimal(value, maximumFractionDigits, fallback = "0") {
    const parsed = Number(value);
    if (!Number.isFinite(parsed)) {
      return fallback;
    }
    return parsed.toLocaleString("es-ES", {
      minimumFractionDigits: maximumFractionDigits,
      maximumFractionDigits,
    });
  }

  function safeParseNumber(value) {
    const parsed = Number(value);
    return Number.isFinite(parsed) ? parsed : Number.NaN;
  }

  function safeParseJson(response) {
    if (!response) {
      return null;
    }
    return response
      .json()
      .then((parsed) => parsed)
      .catch(() => null);
  }

  function formatDateTime(value) {
    if (!value) {
      return "No disponible";
    }
    const parsedDate = new Date(String(value));
    if (Number.isNaN(parsedDate.getTime())) {
      return "No disponible";
    }

    return new Intl.DateTimeFormat("es-ES", {
      dateStyle: "short",
      timeStyle: "short",
    }).format(parsedDate);
  }

  function normalizeArray(items) {
    return Array.isArray(items) ? items : [];
  }

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