import { showNotification } from "../notification.js";
import { refreshHud } from "../hud.js";

export async function loadMine(buildingId) {
  const actionsTab = document.getElementById("tab-actions");
  if (!actionsTab) return;
  actionsTab.innerHTML = `<div class="mine-loading">Lade Mineninfo...</div>`;
  await renderMineStatus(buildingId);
}

async function renderMineStatus(buildingId) {
  const actionsTab = document.getElementById("tab-actions");
  try {
    const res = await fetch("/api/mine/" + buildingId + "/status");
    if (!res.ok) throw new Error("API Fehler");
    const data = await res.json();

    if (data.error) {
      actionsTab.innerHTML = "<p class='mine-error'> " + data.error + "</p>";
      return;
    }

    const minutesLeft = Math.floor(data.next_cycle_in_seconds / 60);
    const secondsLeft = data.next_cycle_in_seconds % 60;

    const resourceRows = data.available
      .map((r) => {
        const icon = resourceIcon(r.resource);
        const label = resourceLabel(r.resource);
        return (
          "<div class='mine-resource-row " +
          (data.ready ? "mine-resource-ready" : "") +
          "'>" +
          "<span class='mine-resource-icon'>" +
          icon +
          "</span>" +
          "<span class='mine-resource-label'>" +
          label +
          "</span>" +
          "<span class='mine-resource-amount'>" +
          r.amount +
          "</span>" +
          "</div>"
        );
      })
      .join("");

    actionsTab.innerHTML =
      "<div class='mine-panel'>" +
      "<div class='mine-header-row'>" +
      "<span class='mine-level-badge'>Level " +
      data.level +
      "</span>" +
      "<span class='mine-cycles'>" +
      (data.cycles > 0 ? data.cycles + "x Zyklus abgeschlossen" : "Laeuft...") +
      "</span>" +
      "</div>" +
      "<div class='mine-divider'></div>" +
      "<p class='mine-section-title'>Abgebaut</p>" +
      "<div class='mine-resources'>" +
      resourceRows +
      "</div>" +
      "<div class='mine-divider'></div>" +
      "<div class='mine-timer-row'>" +
      "<span class='mine-timer-label'>Naechster Zyklus in</span>" +
      "<span class='mine-timer' id='mine-countdown' data-seconds='" +
      data.next_cycle_in_seconds +
      "'>" +
      minutesLeft +
      "m " +
      secondsLeft +
      "s" +
      "</span>" +
      "</div>" +
      "<div class='mine-actions'>" +
      "<button class='mine-btn-collect " +
      (data.ready ? "" : "mine-btn-disabled") +
      "'" +
      " id='mine-collect-btn'" +
      " data-building='" +
      buildingId +
      "'" +
      (data.ready ? "" : " disabled") +
      ">" +
      (data.ready ? "Abholen" : "Noch nicht bereit") +
      "</button>" +
      "</div>" +
      "</div>";

    startCountdown(buildingId);
  } catch (err) {
    console.error("Mine Fehler:", err);
    actionsTab.innerHTML =
      "<p class='mine-error'>Fehler beim Laden der Mineninfo.</p>";
  }
}

document.addEventListener("click", async (e) => {
  const btn = e.target.closest("#mine-collect-btn");
  if (!btn || btn.disabled) return;

  const buildingId = btn.dataset.building;
  btn.disabled = true;
  btn.textContent = "Wird abgeholt...";

  try {
    const res = await fetch("/api/mine/" + buildingId + "/collect", {
      method: "POST",
    });
    if (!res.ok) throw new Error("API Fehler");
    const data = await res.json();

    if (data.error) {
      showNotification(
        data.ready_in_display
          ? "Die Mine ist noch nicht bereit.\nBereit in: " +
              data.ready_in_display
          : data.error,
        "Mine",
        "⛏️",
      );
      await renderMineStatus(buildingId);
      return;
    }

    const lines = data.collected
      .map(
        (c) =>
          resourceLabel(c.resource) +
          ": +" +
          c.amount,
      )
      .join("\n");

    showNotification("Erfolgreich abgeholt!\n\n" + lines, "Mine", "⛏️");
    await renderMineStatus(buildingId);
    await refreshHud();
  } catch (err) {
    console.error("Abholen Fehler:", err);
    showNotification(
      "Fehler beim Abholen. Bitte erneut versuchen.",
      "Fehler",
      "⚠️",
    );
    await renderMineStatus(buildingId);
  }
});

let countdownInterval = null;

function startCountdown(buildingId) {
  if (countdownInterval) clearInterval(countdownInterval);

  countdownInterval = setInterval(() => {
    const el = document.getElementById("mine-countdown");
    if (!el) {
      clearInterval(countdownInterval);
      return;
    }

    let secs = parseInt(el.dataset.seconds, 10) - 1;
    if (secs < 0) secs = 0;
    el.dataset.seconds = secs;
    el.textContent = Math.floor(secs / 60) + "m " + (secs % 60) + "s";

    if (secs === 0) {
      clearInterval(countdownInterval);
      renderMineStatus(buildingId);
    }
  }, 1000);
}

function resourceIcon(resource) {
  if (resource === "iron") {
    return (
      "<span class='mine-resource-icon-iron'>" +
      "<img src='/images/items/eisen.png' alt=''>" +
      "</span>"
    );
  }
  if (resource === "gold") {
    return (
      "<span class='mine-resource-icon-gold'>" +
      "<img src='/images/items/goldmuenze.png' alt=''>" +
      "</span>"
    );
  }
  if (resource === "wood") {
    return (
      "<span class='mine-resource-icon-wood'>" +
      "<img src='/images/items/holz.png' alt=''>" +
      "</span>"
    );
  }
  if (resource === "stone") {
    return (
      "<span class='mine-resource-icon-stone'>" +
      "<img src='/images/items/stein.png' alt=''>" +
      "</span>"
    );
  }
  const map = {
    copper: "🟤",
    silver: "⚪",
  };
  return map[resource] || "📦";
}

function resourceLabel(resource) {
  const map = {
    gold: "Gold",
    copper: "Kupfer",
    silver: "Silber",
    iron: "Eisen",
    stone: "Stein",
    wood: "Holz",
  };
  return map[resource] || resource;
}