"use strict";

const LABELS = {
  connected: "Verbunden",
  connecting: "Verbinde …",
  disconnected: "Getrennt"
};

const dot = document.getElementById("dot");
const stateEl = document.getElementById("state");
const urlEl = document.getElementById("url");
const errEl = document.getElementById("err");
const toggleBtn = document.getElementById("toggle");

function render(status) {
  if (!status) return;
  dot.className = "dot " + status.state;
  stateEl.textContent = LABELS[status.state] || status.state;
  urlEl.textContent = status.url;
  errEl.textContent = status.state === "connected" ? "" : (status.lastError || "");
  toggleBtn.textContent = status.state === "disconnected" ? "Verbinden" : "Trennen";
  toggleBtn.dataset.action = status.state === "disconnected" ? "connect" : "disconnect";
}

toggleBtn.addEventListener("click", async () => {
  const action = toggleBtn.dataset.action || "connect";
  render(await browser.runtime.sendMessage({ cmd: action }));
});

document.getElementById("options").addEventListener("click", () => {
  browser.runtime.openOptionsPage();
  window.close();
});

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

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