"use strict";

const DEFAULTS = {
  url: "ws://127.0.0.1:17655",
  autoConnect: true,
  token: ""
};

const LABELS = {
  connected: "Mit der Tray-App verbunden",
  connecting: "Verbindungsaufbau …",
  disconnected: "Nicht verbunden"
};

const urlEl = document.getElementById("url");
const tokenEl = document.getElementById("token");
const autoEl = document.getElementById("autoConnect");
const savedEl = document.getElementById("saved");

const dotEl = document.getElementById("dot");
const stateEl = document.getElementById("state");
const statusUrlEl = document.getElementById("statusUrl");
const sinceEl = document.getElementById("since");
const statusErrEl = document.getElementById("statusErr");

/* ------------------------------------------------------- Verbindungsanzeige */

/** Verstrichene Zeit seit dem Verbindungsaufbau, in Worten. */
function elapsed(since) {
  const seconds = Math.max(0, Math.round((Date.now() - since) / 1000));
  if (seconds < 60) return `${seconds} s`;
  const minutes = Math.floor(seconds / 60);
  if (minutes < 60) return `${minutes} min`;
  const hours = Math.floor(minutes / 60);
  return `${hours} h ${minutes % 60} min`;
}

let lastStatus = null;

function renderStatus(status) {
  if (!status) return;
  lastStatus = status;

  dotEl.className = "dot " + status.state;
  stateEl.textContent = LABELS[status.state] || status.state;
  statusUrlEl.textContent = status.url;

  if (status.state === "connected" && status.connectedSince) {
    const time = new Date(status.connectedSince).toLocaleTimeString();
    sinceEl.textContent = `${time} (${elapsed(status.connectedSince)})`;
  } else {
    sinceEl.textContent = "–";
  }

  // Im verbundenen Zustand ist ein alter Fehlertext nur noch verwirrend.
  statusErrEl.textContent = status.state === "connected" ? "" : (status.lastError || "");
}

browser.runtime.onMessage.addListener((msg) => {
  if (msg && msg.type === "statusChanged") renderStatus(msg.status);
});

// Die Dauer laeuft weiter, ohne dass sich der Zustand aendert.
setInterval(() => {
  if (lastStatus && lastStatus.state === "connected") renderStatus(lastStatus);
}, 10000);

browser.runtime.sendMessage({ cmd: "getStatus" }).then(renderStatus);

/* ------------------------------------------------------------ Einstellungen */

async function restore() {
  const cfg = await browser.storage.local.get(DEFAULTS);
  urlEl.value = cfg.url;
  tokenEl.value = cfg.token;
  autoEl.checked = !!cfg.autoConnect;
}

document.getElementById("save").addEventListener("click", async () => {
  const url = urlEl.value.trim() || DEFAULTS.url;
  if (!/^wss?:\/\//i.test(url)) {
    savedEl.style.color = "#d1242f";
    savedEl.textContent = "URL muss mit ws:// oder wss:// beginnen";
    return;
  }
  await browser.storage.local.set({
    url,
    token: tokenEl.value.trim(),
    autoConnect: autoEl.checked
  });
  savedEl.style.color = "#2ea043";
  savedEl.textContent = "Gespeichert";
  setTimeout(() => (savedEl.textContent = ""), 2000);
});

restore();