import { ansiToHtml } from "./ansi.js";

// ---------- state ----------
let token = localStorage.getItem("helmd_token") || "";
let sessions = [];
let current = null;      // valt sessionsnamn
let currentSeq = -1;
let shares = [];
let currentShare = null;
let es = null;           // EventSource
let pollTimer = null;

const $ = (id) => document.getElementById(id);

// ---------- api ----------
async function api(path, opts = {}) {
  opts.headers = Object.assign({ Authorization: "Bearer " + token }, opts.headers);
  const r = await fetch(path, opts);
  if (r.status === 401) { showLogin("Ogiltig token."); throw new Error("401"); }
  if (!r.ok) {
    let msg = r.statusText;
    try { msg = (await r.json()).error || msg; } catch {}
    throw new Error(msg);
  }
  const ct = r.headers.get("content-type") || "";
  return ct.includes("json") ? r.json() : r.text();
}
const post = (p, body) => api(p, { method: "POST", body: JSON.stringify(body) });

// ---------- login ----------
function showLogin(err = "") {
  stopLive();
  $("login").classList.remove("hidden");
  $("app").classList.add("hidden");
  $("loginError").textContent = err;
}

async function tryConnect() {
  try {
    const h = await api("/api/health");
    $("login").classList.add("hidden");
    $("app").classList.remove("hidden");
    $("verInfo").textContent = "helmd " + h.version;
    startLive();
    await Promise.all([refreshSessions(), refreshShares(), loadConfig()]);
    if (!current && sessions.length) selectSession(sessions[0].name);
  } catch (e) {
    if (e.message !== "401") showLogin("Kunde inte nå servern: " + e.message);
  }
}

$("tokenSave").onclick = () => {
  token = $("tokenInput").value.trim();
  localStorage.setItem("helmd_token", token);
  tryConnect();
};
$("tokenInput").addEventListener("keydown", (e) => { if (e.key === "Enter") $("tokenSave").click(); });
$("logoutBtn").onclick = () => { localStorage.removeItem("helmd_token"); token = ""; showLogin(); };

// ---------- tabs ----------
document.querySelectorAll(".tab").forEach((b) => {
  b.onclick = () => {
    document.querySelectorAll(".tab").forEach((x) => x.classList.toggle("active", x === b));
    ["sessions", "shares", "settings"].forEach((t) =>
      $("tab-" + t).classList.toggle("hidden", b.dataset.tab !== t));
    if (b.dataset.tab === "shares") { $("shareBadge").classList.add("hidden"); $("shareBadge").textContent = ""; }
  };
});

// ---------- SSE + poll ----------
function startLive() {
  stopLive();
  es = new EventSource("/api/events?token=" + encodeURIComponent(token));
  es.onopen = () => $("connDot").classList.add("ok");
  es.onerror = () => $("connDot").classList.remove("ok");
  es.addEventListener("screen", (e) => {
    const ev = JSON.parse(e.data);
    if (ev.session === current) refreshScreen();
    refreshSessions();
  });
  es.addEventListener("question", (e) => {
    const ev = JSON.parse(e.data);
    if (ev.session === current) renderQuestion(ev.data);
  });
  es.addEventListener("session", () => refreshSessions());
  es.addEventListener("share", (e) => {
    refreshShares();
    const b = $("shareBadge");
    if ($("tab-shares").classList.contains("hidden")) {
      b.textContent = String(Number(b.textContent || 0) + 1);
      b.classList.remove("hidden");
    }
  });
  // fallback-poll om SSE tappas
  pollTimer = setInterval(() => {
    if (es && es.readyState === 2) { startLive(); return; }
    if (current) refreshScreen();
  }, 5000);
}
function stopLive() {
  if (es) { es.close(); es = null; }
  if (pollTimer) { clearInterval(pollTimer); pollTimer = null; }
  $("connDot").classList.remove("ok");
}

// ---------- sessioner ----------
async function refreshSessions() {
  sessions = (await api("/api/sessions")) || [];
  sessions.sort((a, b) => a.name.localeCompare(b.name));
  const box = $("sessItems");
  box.innerHTML = "";
  for (const s of sessions) {
    const d = document.createElement("div");
    d.className = "sess-item" + (s.name === current ? " active" : "");
    d.innerHTML = `<span class="dot ${s.alive ? "ok" : ""}"></span>
      <span>${s.name}</span>${s.question ? '<span class="q" title="väntar på svar">❓</span>' : ""}`;
    d.onclick = () => selectSession(s.name);
    box.appendChild(d);
  }
  if (current) {
    const cur = sessions.find((s) => s.name === current);
    if (!cur) { current = null; $("sessPane").classList.add("hidden"); $("noSess").classList.remove("hidden"); }
    else if (cur.seq !== currentSeq) refreshScreen();
  }
}

async function selectSession(name) {
  current = name; currentSeq = -1;
  $("noSess").classList.add("hidden");
  $("sessPane").classList.remove("hidden");
  $("sessTitle").textContent = name;
  const s = sessions.find((x) => x.name === name);
  renderQuestion(s && s.question);
  await refreshScreen();
  refreshSessions();
}

async function refreshScreen() {
  if (!current) return;
  try {
    const s = sessions.find((x) => x.name === current);
    if (s) currentSeq = s.seq;
    const txt = await api(`/api/sessions/${current}/screen?ansi=1`);
    const el = $("screen");
    const stick = el.scrollTop + el.clientHeight >= el.scrollHeight - 30;
    el.innerHTML = ansiToHtml(txt);
    if (stick) el.scrollTop = el.scrollHeight;
    const st = await api(`/api/sessions/${current}`);
    renderQuestion(st.question);
  } catch {}
}

function renderQuestion(q) {
  const card = $("questionCard");
  if (!q) { card.classList.add("hidden"); card.innerHTML = ""; return; }
  card.classList.remove("hidden");
  card.innerHTML = `<h3>❓ ${escapeHtml(q.text)}</h3><div class="opts"></div>`;
  const opts = card.querySelector(".opts");
  q.options.forEach((o, i) => {
    const b = document.createElement("button");
    b.textContent = (o.num ? o.num + ". " : "") + o.label;
    if (i === q.selected) b.classList.add("selected");
    b.onclick = async () => {
      b.disabled = true;
      try { await post(`/api/sessions/${current}/answer`, { option: i + 1 }); }
      catch (e) { alert("Kunde inte svara: " + e.message); b.disabled = false; }
    };
    opts.appendChild(b);
  });
}

$("newSessBtn").onclick = () => $("newSessForm").classList.toggle("hidden");
$("newSessCancel").onclick = () => $("newSessForm").classList.add("hidden");
$("newSessForm").onsubmit = async (e) => {
  e.preventDefault();
  try {
    await post("/api/sessions", {
      name: $("newSessName").value.trim(),
      cmd: $("newSessCmd").value.trim(),
      cwd: $("newSessCwd").value.trim(),
    });
    $("newSessForm").reset();
    $("newSessForm").classList.add("hidden");
    await refreshSessions();
    selectSession($("newSessName").value.trim() || sessions[sessions.length - 1]?.name);
  } catch (err) { alert(err.message); }
};

$("killBtn").onclick = async () => {
  if (!current || !confirm(`Döda sessionen ${current}?`)) return;
  await api(`/api/sessions/${current}`, { method: "DELETE" });
  current = null;
  refreshSessions();
  $("sessPane").classList.add("hidden");
  $("noSess").classList.remove("hidden");
};

const sendKeys = (keys) => current && post(`/api/sessions/${current}/keys`, { keys }).catch(() => {});
$("keyEsc").onclick = () => sendKeys(["Escape"]);
$("keyUp").onclick = () => sendKeys(["Up"]);
$("keyDown").onclick = () => sendKeys(["Down"]);
$("keyEnter").onclick = () => sendKeys(["Enter"]);
$("keyCtrlC").onclick = () => sendKeys(["C-c"]);
$("modeBtn").onclick = () => current && post(`/api/sessions/${current}/mode`, { action: "cycle" }).catch(() => {});

$("promptForm").onsubmit = async (e) => {
  e.preventDefault();
  const t = $("promptText").value;
  if (!t.trim() || !current) return;
  try {
    await post(`/api/sessions/${current}/prompt`, { text: t });
    $("promptText").value = "";
  } catch (err) { alert("Kunde inte skicka: " + err.message); }
};
$("promptText").addEventListener("keydown", (e) => {
  if (e.key === "Enter" && !e.shiftKey) {
    e.preventDefault();
    $("promptForm").requestSubmit();
  }
});

// ---------- delningar ----------
async function refreshShares() {
  shares = (await api("/api/shares")) || [];
  const box = $("shareItems");
  box.innerHTML = "";
  for (const sh of shares) {
    const d = document.createElement("div");
    d.className = "share-item" + (currentShare === sh.id ? " active" : "");
    const when = new Date(sh.created).toLocaleString("sv-SE", { dateStyle: "short", timeStyle: "short" });
    d.innerHTML = `<button class="del danger" title="ta bort">✕</button>
      <div class="name">${escapeHtml(sh.name)}</div>
      <div class="meta">${when}${sh.session ? " · " + escapeHtml(sh.session) : ""}${sh.note ? "<br>" + escapeHtml(sh.note) : ""}</div>`;
    d.querySelector(".del").onclick = async (e) => {
      e.stopPropagation();
      await api(`/api/shares/${sh.id}`, { method: "DELETE" });
      if (currentShare === sh.id) { currentShare = null; $("shareView").innerHTML = "Välj en delning i listan"; }
      refreshShares();
    };
    d.onclick = () => viewShare(sh);
    box.appendChild(d);
  }
}

async function viewShare(sh) {
  currentShare = sh.id;
  refreshShares();
  const v = $("shareView");
  v.classList.remove("empty");
  const raw = `/api/shares/${sh.id}/raw?token=${encodeURIComponent(token)}`;
  const ext = sh.name.toLowerCase().split(".").pop();
  if (["png", "jpg", "jpeg", "gif", "svg"].includes(ext)) {
    v.innerHTML = `<img src="${raw}" alt="${escapeHtml(sh.name)}">`;
  } else if (["html", "htm", "pdf"].includes(ext)) {
    v.innerHTML = `<iframe src="${raw}" sandbox="allow-scripts"></iframe>`;
  } else if (ext === "md") {
    const txt = await api(`/api/shares/${sh.id}/raw`);
    v.innerHTML = `<div class="md">${mdToHtml(txt)}</div>`;
  } else {
    const txt = await api(`/api/shares/${sh.id}/raw`);
    v.innerHTML = `<pre>${escapeHtml(txt)}</pre>`;
  }
}

// ---------- inställningar ----------
async function loadConfig() {
  const c = await api("/api/config");
  $("cfgCmd").value = c.agent_cmd || "";
  $("cfgArgs").value = (c.agent_args || []).join(" ");
  $("cfgWorkdir").value = c.workdir || "";
  $("cfgPoll").value = c.poll_ms || 500;
  $("cfgNtfyOn").checked = !!c.ntfy?.enabled;
  $("cfgNtfyQ").checked = !!c.ntfy?.notify_on_question;
  $("cfgNtfyServer").value = c.ntfy?.server || "";
  $("cfgNtfyTopic").value = c.ntfy?.topic || "";
  window._ntfyAllowed = c.ntfy?.allowed_topics || ["agent-helm", "claude"];
}

$("cfgForm").onsubmit = async (e) => {
  e.preventDefault();
  try {
    await api("/api/config", {
      method: "PUT",
      body: JSON.stringify({
        agent_cmd: $("cfgCmd").value.trim(),
        agent_args: $("cfgArgs").value.trim() ? $("cfgArgs").value.trim().split(/\s+/) : [],
        workdir: $("cfgWorkdir").value.trim(),
        poll_ms: Number($("cfgPoll").value),
        ntfy: {
          enabled: $("cfgNtfyOn").checked,
          notify_on_question: $("cfgNtfyQ").checked,
          server: $("cfgNtfyServer").value.trim(),
          topic: $("cfgNtfyTopic").value.trim(),
          allowed_topics: window._ntfyAllowed,
        },
      }),
    });
    $("cfgStatus").textContent = "Sparat ✓";
    setTimeout(() => ($("cfgStatus").textContent = ""), 2500);
  } catch (err) { $("cfgStatus").textContent = "Fel: " + err.message; }
};

// ---------- hjälp ----------
function escapeHtml(s) {
  return String(s).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
}

// Miniminimal markdown: rubriker, fet/kursiv, kod, listor, länkar, hr.
function mdToHtml(md) {
  const blocks = md.split(/\n{2,}/);
  return blocks.map((b) => {
    if (/^```/.test(b)) return `<pre>${escapeHtml(b.replace(/^```\w*\n?|```$/g, ""))}</pre>`;
    if (/^#{1,6} /.test(b)) {
      const n = b.match(/^#+/)[0].length;
      return `<h${n}>${inline(b.replace(/^#+ /, ""))}</h${n}>`;
    }
    if (/^([-*] |\d+\. )/m.test(b)) {
      const items = b.split("\n").filter(Boolean).map((l) => `<li>${inline(l.replace(/^([-*]|\d+\.) /, ""))}</li>`).join("");
      return /^\d/.test(b) ? `<ol>${items}</ol>` : `<ul>${items}</ul>`;
    }
    if (/^(-{3,}|_{3,}|\*{3,})$/.test(b.trim())) return "<hr>";
    return `<p>${inline(b)}</p>`;
  }).join("\n");
  function inline(s) {
    return escapeHtml(s)
      .replace(/`([^`]+)`/g, "<code>$1</code>")
      .replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>")
      .replace(/\*([^*]+)\*/g, "<em>$1</em>")
      .replace(/\[([^\]]+)\]\(([^)\s]+)\)/g, '<a href="$2" target="_blank" rel="noopener">$1</a>')
      .replace(/\n/g, "<br>");
  }
}

// ---------- start ----------
if (token) tryConnect(); else showLogin();