/* ════════════════════════════════════════════════════════════════
   Derez — User Portal
   ════════════════════════════════════════════════════════════════ */

/* ─── API Base & Endpoints ───────────────────────────────────── */
const API_BASE = "https://n8n.derez.ai/webhook";

const AUTH_URL = `${API_BASE}/account/login`; // POST (sign in), DELETE (sign out)
const AGENTS_URL = `${API_BASE}/agent/list`; // GET ?email=
const AGENT_INFO_URL = `${API_BASE}/agent/info`; // GET ?uuid=  |  POST {uuid,key,value}
const KEYS_URL = `${API_BASE}/agent/key`; // GET ?uuid=
const PASSWORD_URL = `${API_BASE}/agent/password`; // POST {uuid,email,password}
const RESTART_URL = `${API_BASE}/agent/service/restart`; // POST {uuid,email,action:"restart"}
const BACKUP_URL = `${API_BASE}/agent/service/backup`; // GET ?uuid=  |  POST {uuid}  |  PUT restore
const CONTRACT_URL = `${API_BASE}/account/contract`; // GET ?uuid=
const ACCOUNT_PASSWORD_URL = `${API_BASE}/account/password/change`; // POST {email,password}
const PW_RESET_URL = `${API_BASE}/account/password/init_change`; // POST {email}
const SIGNUP_URL = `${API_BASE}/etc/signup`; // POST {email,password,agent,location}
const COUPON_URL = `${API_BASE}/etc/coupon`; // POST {code}
const CHAT_URL = `${API_BASE}/etc/chat`; // POST {message,sessionId,email}
const REFERRAL_URL = `${API_BASE}/etc/referral`; // POST {referrer,friend_name,friend_email,uuid}
// WIZZARD=false is written via AGENT_INFO_URL (POST { uuid, key, value })
const CREDITS_URL = `${API_BASE}/payment/credits`; // hidden form POST → 302 Stripe redirect
const INVOICES_URL = `${API_BASE}/invoices`; // GET ?email=
const INVOICE_EMAIL_URL = `${API_BASE}/user`; // POST {email, invoice_email}
const CONTRACT_EXTEND_URL = "https://derez.ai"; // ← replace with Stripe payment link
const CONTRACT_CANCEL_URL = "https://derez.ai"; // ← replace with Stripe cancellation link

/* ─── State ─────────────────────────────────────────────────── */
let currentEmail = null;
let currentSession = null;
let couponApplied = false;
let agents = [];
let activeUUID = null;
let activeAgentInfo = null;
let chatId = null; // generated on first panel open
let talkOpen = false;

// Wizard state
let wizardPhase = null; // 'skills' | 'integrations' | 'fields' | 'review'
let wizardSkillsData = null; // cached from skills/index.json
let wizardIntegrationsData = null; // cached from integrations/index.json
let wizardSkillsCache = {}; // { filename: full skill object (with prompt) }
let wizardIntegrationsCache = {}; // { filename: full integration object (with prompt) }
let wizardSelectedSkills = new Set();
let wizardSelectedIntegrations = new Set();
let wizardFieldValues = {}; // { stepIndex: { fieldKey: value } }
let wizardIntegrationStep = 0; // current index in fields phase
let wizardSelectedIntegrationList = [];
let invoicesData = []; // cached full invoice list for filtering/export

/* ─── Debug logger ─────────────────────────────────────────── */
function dbg(label, data) {
  console.log(`[Derez] ${label}`);
  console.log(data);
}

/* ─── Response normalisers ──────────────────────────────────── */
// n8n can wrap items as {json:{…}} or double-wrap arrays [[…]]
function normalizeAgents(raw) {
  if (raw !== null && typeof raw === "object" && !Array.isArray(raw)) {
    // { data: [...] } envelope — recurse into the array
    if (Array.isArray(raw.data)) return normalizeAgents(raw.data);
    // Plain single agent object — wrap it
    return [raw];
  }
  if (!Array.isArray(raw)) return [];
  // unwrap double-wrapped array: [[{…}]] → [{…}]
  if (raw.length > 0 && Array.isArray(raw[0])) return normalizeAgents(raw[0]);
  // unwrap [{data:[…]}] envelope (agents list with nested data array)
  if (
    raw.length > 0 &&
    raw[0] !== null &&
    typeof raw[0] === "object" &&
    Array.isArray(raw[0].data)
  ) {
    return normalizeAgents(raw[0].data);
  }
  // unwrap n8n {json:{…}} envelope
  if (
    raw.length > 0 &&
    raw[0] !== null &&
    typeof raw[0] === "object" &&
    "json" in raw[0]
  ) {
    return raw.map((item) => item.json);
  }
  return raw;
}

/* ═══════════════════════════════════════════════════════════════
   BOOT
═══════════════════════════════════════════════════════════════ */
document.addEventListener("DOMContentLoaded", () => {
  const sessionId = getCookie("al_session");
  if (sessionId) {
    currentSession = sessionId;
    currentEmail = getCookie("al_email") || "";
    showApp();
    loadAgents();
  } else {
    showAuth();
  }

  // Close confirm on backdrop click
  document.getElementById("confirm-backdrop").addEventListener("click", (e) => {
    if (e.target === e.currentTarget) confirmClose(false);
  });

  // Close user panel when clicking outside of it (skip while modal is open)
  document.addEventListener("click", (e) => {
    const wrap = document.getElementById("user-panel-wrap");
    const modal = document.getElementById("account-backdrop");
    if (modal && modal.classList.contains("open")) return;
    if (wrap && !wrap.contains(e.target)) closeUserPanel();
  });
});

/* ═══════════════════════════════════════════════════════════════
   AUTH — tab switch
═══════════════════════════════════════════════════════════════ */
function switchAuthTab(tab) {
  document
    .querySelectorAll(".auth-switch-btn")
    .forEach((b) => b.classList.toggle("active", b.dataset.tab === tab));
  document.getElementById("signin-form").style.display =
    tab === "signin" ? "" : "none";
  document.getElementById("signup-form").style.display =
    tab === "signup" ? "" : "none";

  // Clear stale error/success messages
  document.getElementById("signin-error").style.display = "none";
  document.getElementById("signup-error").style.display = "none";
  document.getElementById("signup-success").style.display = "none";
  const _rpw = document.getElementById("reset-pw-wrap");
  if (_rpw) _rpw.style.display = "none";
}

/* ═══════════════════════════════════════════════════════════════
   AUTH — sign in
   Sends the email to the agents webhook; a 200 response means
   the account exists and we proceed to the app.
═══════════════════════════════════════════════════════════════ */
async function doSignIn() {
  const email = document.getElementById("signin-email").value.trim();
  const password = document.getElementById("signin-password").value;
  hideAuthError("signin-error");

  if (!isValidEmail(email)) {
    showAuthError("signin-error", "Please enter a valid email address.");
    return;
  }
  if (!password) {
    showAuthError("signin-error", "Please enter your password.");
    return;
  }

  const btn = document.getElementById("signin-btn");
  btnLoad(btn, "Signing in\u2026");

  try {
    dbg("\u2192 Sign In", AUTH_URL);
    const res = await fetch(AUTH_URL, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ email, password }),
    });
    if (!res.ok)
      throw new Error(
        "Account not found or incorrect password. Please try again.",
      );

    const data = await res.json();
    dbg("\u2190 Sign In", data);
    const raw = Array.isArray(data) ? data[0] : data;
    // unwrap n8n {json:{...}} envelope if present
    const item =
      raw && typeof raw === "object" && "json" in raw ? raw.json : raw;
    const sessionId = item?.sessionid;
    if (!sessionId) throw new Error("Authentication failed. Please try again.");

    currentSession = sessionId;
    currentEmail = email;
    setCookie("al_session", sessionId, 30);
    setCookie("al_email", email, 30);
    showApp();
    loadAgents();
  } catch (err) {
    showAuthError("signin-error", err.message);
    showResetOption();
  } finally {
    btnReset(btn);
  }
}

/* ═══════════════════════════════════════════════════════════════
   AUTH — sign up
═══════════════════════════════════════════════════════════════ */
async function doSignUp() {
  const email = document.getElementById("signup-email").value.trim();
  const password = document.getElementById("signup-password").value;
  const agent = document.getElementById("signup-agent").value;
  const location = document.getElementById("signup-location").value;

  hideAuthError("signup-error");
  document.getElementById("signup-success").style.display = "none";

  if (!isValidEmail(email)) {
    showAuthError("signup-error", "Please enter a valid email address.");
    return;
  }
  if (password.length < 8) {
    showAuthError("signup-error", "Password must be at least 8 characters.");
    return;
  }

  const btn = document.getElementById("signup-btn");
  btnLoad(btn, "Hiring agent\u2026");

  // Open a blank tab NOW while we still have the user-gesture context.
  // Browsers block window.open called after an await, so we must do this
  // synchronously before any async work begins.
  const stripeTab = window.open("", "_blank");

  try {
    // Step 1: authenticate to get a session
    dbg("\u2192 Hire Agent \u2013 auth", AUTH_URL);
    const authRes = await fetch(AUTH_URL, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ email, password }),
    });
    if (!authRes.ok)
      throw new Error("Account creation failed. Please try again later.");

    const authData = await authRes.json();
    dbg("\u2190 Hire Agent \u2013 auth", authData);
    const authRaw = Array.isArray(authData) ? authData[0] : authData;
    // unwrap n8n {json:{...}} envelope if present
    const authItem =
      authRaw && typeof authRaw === "object" && "json" in authRaw
        ? authRaw.json
        : authRaw;
    const sessionId = authItem?.sessionid;
    if (!sessionId)
      throw new Error("Account creation failed. Please try again.");

    currentSession = sessionId;
    currentEmail = email;
    setCookie("al_session", sessionId, 30);
    setCookie("al_email", email, 30);

    // Step 2: trigger agent creation
    dbg("\u2192 Hire Agent \u2013 create", SIGNUP_URL);
    const createRes = await fetch(SIGNUP_URL, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ email, password, agent, location }),
    });
    if (!createRes.ok) {
      throw new Error("Agent provisioning failed. Please contact support.");
    }

    const createData = await createRes.json();
    dbg("\u2190 Hire Agent \u2013 create", createData);
    const createRaw = Array.isArray(createData) ? createData[0] : createData;
    const createItem =
      createRaw && typeof createRaw === "object" && "json" in createRaw
        ? createRaw.json
        : createRaw;

    // Navigate the pre-opened tab to the Stripe checkout URL
    const checkoutUrl =
      createItem?.checkout_url || createItem?.checkoutUrl || createItem?.url;
    if (checkoutUrl && checkoutUrl.startsWith("http")) {
      stripeTab.location.href = checkoutUrl;
    } else {
      stripeTab.close();
    }

    // Enter the app and load agents now that the agent has been created
    showApp();
    loadAgents();
  } catch (err) {
    stripeTab?.close();
    showAuthError("signup-error", err.message);
  } finally {
    btnReset(btn);
  }
}

/* ═══════════════════════════════════════════════════════════════
   AUTH — sign out
═══════════════════════════════════════════════════════════════ */
/* ─── Coupon ────────────────────────────────────────────────── */
function handleCouponKey(e) {
  if (e.key === "Enter") {
    e.preventDefault();
    applyCoupon();
  }
}

async function applyCoupon() {
  const input = document.getElementById("coupon-input");
  const spinner = document.getElementById("coupon-spinner");
  const errorEl = document.getElementById("coupon-error");
  const code = input.value.trim();

  if (!code) return;

  input.disabled = true;
  input.classList.remove("coupon-input-error");
  errorEl.style.display = "none";
  spinner.style.display = "";

  try {
    const res = await apiFetch(COUPON_URL, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ code }),
    });

    const text = (await res.text()).trim();
    if (text === "OK") {
      // Valid coupon — hide the box, show success
      couponApplied = true;
      document.getElementById("coupon-box").style.display = "none";
      document.getElementById("coupon-success").style.display = "";
    } else {
      input.classList.add("coupon-input-error");
      errorEl.style.display = "";
      input.disabled = false;
    }
  } catch (err) {
    input.classList.add("coupon-input-error");
    errorEl.textContent = "Could not validate coupon. Try again.";
    errorEl.style.display = "";
    input.disabled = false;
  } finally {
    spinner.style.display = "none";
  }
}

function doSignOut() {
  // Invalidate server session (fire-and-forget)
  if (currentSession) {
    fetch(AUTH_URL, {
      method: "DELETE",
      headers: {
        "Content-Type": "application/json",
        "X-Session-Id": currentSession,
      },
      body: JSON.stringify({ sessionid: currentSession }),
    }).catch(() => {});
  }
  deleteCookie("al_session");
  deleteCookie("al_email");
  localStorage.removeItem("al_email"); // clean up legacy storage
  currentSession = null;
  currentEmail = null;
  agents = [];
  activeUUID = null;
  chatId = null;
  talkOpen = false;
  const tp = document.getElementById("talk-panel");
  if (tp) {
    tp.classList.remove("open");
  }
  const chev = document.getElementById("talk-chevron");
  if (chev) {
    chev.style.transform = "";
  }
  const chatMsgs = document.getElementById("chat-msgs");
  if (chatMsgs) {
    chatMsgs.innerHTML = "";
  }

  // Reset signup form state so it's clean on next visit
  document.getElementById("signup-btn").style.display = "";
  document.getElementById("signup-success").style.display = "none";
  document.getElementById("signup-email").value = "";
  document.getElementById("signup-password").value = "";

  // Reset coupon state
  couponApplied = false;
  const couponBox = document.getElementById("coupon-box");
  if (couponBox) couponBox.style.display = "";
  const couponSuccessEl = document.getElementById("coupon-success");
  if (couponSuccessEl) couponSuccessEl.style.display = "none";
  const couponInput = document.getElementById("coupon-input");
  if (couponInput) {
    couponInput.value = "";
    couponInput.classList.remove("coupon-input-error");
  }
  const couponError = document.getElementById("coupon-error");
  if (couponError) couponError.style.display = "none";

  closeUserPanel();
  window.location.reload();
}

/* ─── View switching ────────────────────────────────────────── */
function showAuth() {
  document.getElementById("auth-card").style.display = "";
  document.getElementById("app-shell").style.display = "flex";
  document.getElementById("app-shell").classList.add("demo-mode");
  document.body.classList.add("auth-layout");
  populateDemoShell();
}

function showApp() {
  const authCard = document.getElementById("auth-card");
  const shell = document.getElementById("app-shell");
  const fromAuth = document.body.classList.contains("auth-layout");

  function reveal() {
    authCard.style.display = "none";
    authCard.classList.remove("auth-leaving");
    document.body.classList.remove("auth-layout");

    // Make shell visible and play entry animation
    shell.style.display = "flex";
    shell.classList.remove("demo-mode");
    shell.classList.add("app-entering");
    document.getElementById("user-email-label").textContent = currentEmail;

    setTimeout(() => shell.classList.remove("app-entering"), 620);
  }

  if (fromAuth) {
    // Transitioning from the auth screen: animate auth card out first
    authCard.classList.add("auth-leaving");
    setTimeout(reveal, 310);
  } else {
    // Direct page load while already logged in: skip the auth animation
    reveal();
  }
}

function populateDemoShell() {
  hide("wizard-card");
  // Header
  document.getElementById("user-email-label").textContent = "preview";
  renderComment("My AI Assistant");

  // Agent tab
  document.getElementById("agent-tabs-bar").innerHTML = `
    <button class="agent-tab active">
      <span class="agent-tab-dot"></span>
      <span>hermes</span>
      <span class="agent-tab-badge">EU</span>
    </button>
    <a class="agent-tab-add" href="https://derez.ai/add.html?email=${encodeURIComponent(currentEmail || "")}" target="_blank" title="Add agent">+ Add Agent</a>`;

  // Show agent panel with demo data
  hide("no-agents");
  document.getElementById("agent-panel").style.display = "flex";

  // API Keys
  const keysDot = document.getElementById("keys-status-dot");
  keysDot.className = "contract-dot contract-dot--green";
  keysDot.style.visibility = "visible";
  document.getElementById("keys-body").innerHTML = `
    <div class="key-row">
      <div class="key-info">
        <div class="key-name">Default Key
          <span style="font-size:10px;font-weight:500;padding:1px 7px;border-radius:10px;
            background:#0e2e1c;color:var(--success);margin-left:6px;vertical-align:middle;">Active</span>
        </div>
        <div class="key-stats">
          <span><span class="key-stat-val">350</span>
          <span class="text-muted"> / 500 credits remaining</span></span>
          <span class="sep-dot">&middot;</span>
          <span class="text-muted">Expires Dec 31, 2026</span>
        </div>

      </div>
      <button class="btn btn-ghost btn-sm">Buy Credits</button>
    </div>`;

  // Server info
  document.getElementById("server-info-body").innerHTML = `
    <div class="server-info-row">
      <span class="server-info-label">Agent Type</span>
      <span class="server-info-val">Hermes</span>
    </div>
    <div class="server-info-row">
      <span class="server-info-label">Dashboard</span>
      <span class="server-info-val"><a href="#" class="server-info-link" onclick="return false">hermes.derez.ai</a></span>
    </div>
    <div class="server-info-row server-info-row--copy" title="Click to copy">
      <span class="server-info-label">SSH Access</span>
      <span class="server-info-val server-info-copyval">ssh root@hermes.derez.ai -p 2201</span>
    </div>
    <div class="server-info-row">
      <span class="server-info-label">Created</span>
      <span class="server-info-val">2026-01-01</span>
    </div>`;

  // Contract
  const demoDot = document.getElementById("contract-status-dot");
  demoDot.className = "contract-dot contract-dot--green";
  demoDot.style.visibility = "visible";
  document.getElementById("contract-body").innerHTML = `
    <div class="contract-row">
      <div class="contract-info">
        <span class="contract-type">Junior \u2013 Monthly</span>
      </div>
    </div>`;

  // Backups
  document.getElementById("backups-body").innerHTML = `
    <div class="backups-list">
      <div class="backup-row">
        <div class="backup-info"><div class="backup-date">2026-05-30 09:12</div></div>
        <button class="btn btn-ghost btn-sm">Restore</button>
      </div>
      <div class="backup-row">
        <div class="backup-info"><div class="backup-date">2026-05-31 14:47</div></div>
        <button class="btn btn-ghost btn-sm">Restore</button>
      </div>
    </div>`;
}

/* ═══════════════════════════════════════════════════════════════
   AGENTS — load & render tabs
═══════════════════════════════════════════════════════════════ */
async function loadAgents() {
  const bar = document.getElementById("agent-tabs-bar");
  bar.innerHTML =
    '<div class="tabs-loading"><div class="spinner"></div> Loading agents&hellip;</div>';
  hide("agent-panel");
  hide("no-agents");

  try {
    const _agentsUrl2 = `${AGENTS_URL}?email=${encodeURIComponent(currentEmail)}`;
    dbg("→ List Agents", _agentsUrl2);
    const res = await apiFetch(_agentsUrl2);
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    let data = [];
    try {
      data = await res.json();
    } catch (_) {}
    dbg("← List Agents", data);
    processAgents(normalizeAgents(data));
  } catch (err) {
    bar.innerHTML = `<span class="tabs-error">${escHtml(err.message)}</span>`;
  }
}

function processAgents(data) {
  agents = data;
  dbg(
    "processAgents agents[0] (JSON)",
    agents.length ? JSON.stringify(agents[0]) : "(empty)",
  );
  renderAgentTabs();

  if (agents.length > 0) {
    // Accept UUID (spec) or uuid (n8n lowercase) as fallback
    selectAgent(agents[0].UUID || agents[0].uuid || "");
  } else {
    show("no-agents");
    hide("agent-panel");
  }
}

function renderAgentTabs() {
  const bar = document.getElementById("agent-tabs-bar");
  if (!agents.length) {
    bar.innerHTML = '<span class="tabs-empty">No agents on your account</span>';
    return;
  }
  bar.innerHTML =
    agents
      .map((a) => {
        const uuid = a.UUID || a.uuid || "";
        const server = a.server || "";
        return `
        <button class="agent-tab${uuid === activeUUID ? " active" : ""}"
                onclick="selectAgent('${escAttr(uuid)}')">
            <span class="agent-tab-dot"></span>
            <span>${escHtml(uuid)}</span>
            <span class="agent-tab-badge">${escHtml(server.toUpperCase())}</span>
        </button>
    `;
      })
      .join("") +
    `<a class="agent-tab-add" href="https://derez.ai/add.html?email=${encodeURIComponent(currentEmail || "")}" target="_blank" title="Add agent">+ Add Agent</a>`;
}

function selectAgent(uuid) {
  activeUUID = uuid;
  renderAgentTabs();

  hide("no-agents");
  // Show agent panel using flex so its children lay out correctly
  const panel = document.getElementById("agent-panel");
  panel.style.display = "flex";

  // Reset password field
  document.getElementById("pw-new-input").value = "";
  togglePwSave("");

  // Reset comment
  cancelComment();
  renderComment("");

  hide("wizard-card");
  loadKeys(uuid);
  loadBackups(uuid);
  loadAgentInfo(uuid);
  loadContract(uuid);
}

/* ═══════════════════════════════════════════════════════════════
   AGENT INFO
═══════════════════════════════════════════════════════════════ */
// Strip the extra surrounding quotes n8n injects into string values: '"Hermes"' → 'Hermes'
function stripQuotes(v) {
  if (v == null) return "—";
  return String(v).replace(/^"|"$/g, "").trim() || "—";
}

async function loadAgentInfo(uuid) {
  const body = document.getElementById("server-info-body");
  body.innerHTML = '<div class="loading-row"><div class="spinner"></div></div>';
  activeAgentInfo = null;
  hide("wizard-card");

  try {
    const _infoUrl = `${AGENT_INFO_URL}?uuid=${encodeURIComponent(uuid)}`;
    dbg("→ Agent Info", _infoUrl);
    const res = await apiFetch(_infoUrl);
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    const json = await res.json();
    dbg("← Agent Info", json);

    // Unwrap [[{...}]], [{...}], or plain {...}
    let info = json;
    if (Array.isArray(info)) info = info[0]; // outer array
    if (Array.isArray(info)) info = info[0]; // inner array ([[...]])
    if (!info || typeof info !== "object")
      throw new Error("Unexpected agent info format");

    activeAgentInfo = info;
    renderAgentInfo(info);
    renderComment(info.comment);
    loadWizard(info);
  } catch (err) {
    body.innerHTML = `<p class="inline-error">${escHtml(err.message)}</p>`;
  }
}

/* ─── Header comment ────────────────────────────────────────── */
function renderComment(text) {
  const el = document.getElementById("header-comment-display");
  if (text && text.trim()) {
    el.textContent = stripQuotes(text);
    el.classList.remove("comment-empty");
  } else {
    el.textContent = "Name your Agent";
    el.classList.add("comment-empty");
  }
}

function editComment() {
  const display = document.getElementById("header-comment-display");
  const edit = document.getElementById("header-comment-edit");
  const input = document.getElementById("header-comment-input");
  const current = display.classList.contains("comment-empty")
    ? ""
    : display.textContent;
  input.value = current;
  display.style.display = "none";
  edit.style.display = "flex";
  input.focus();
  input.select();
}

function cancelComment() {
  document.getElementById("header-comment-display").style.display = "";
  document.getElementById("header-comment-edit").style.display = "none";
}

function handleCommentKey(e) {
  if (e.key === "Enter") {
    e.preventDefault();
    saveComment();
  }
  if (e.key === "Escape") cancelComment();
}

async function saveComment() {
  const input = document.getElementById("header-comment-input");
  const btn = document.getElementById("comment-save-btn");
  const text = input.value.trim();
  btnLoad(btn, "Saving…");
  try {
    dbg("→ Save Comment", AGENT_INFO_URL);
    const res = await apiFetch(AGENT_INFO_URL, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ uuid: activeUUID, key: "comment", value: text }),
    });
    if (!res.ok)
      throw new Error(`Failed to save comment (HTTP ${res.status}).`);
    renderComment(text);
    cancelComment();
    toast("Comment saved.", "success");
  } catch (err) {
    toast(err.message, "error");
  } finally {
    btnReset(btn);
  }
}

function renderAgentInfo(info) {
  const body = document.getElementById("server-info-body");
  const domain = stripQuotes(info.domain);
  const domainHref =
    domain !== "—"
      ? domain.startsWith("http")
        ? domain
        : `https://${domain}`
      : null;

  const port = stripQuotes(info.ssh_port);
  const sshCmd = `ssh root@${activeUUID}.derez.ai -p ${port}`;

  const rows = [
    `<div class="server-info-row">
      <span class="server-info-label">Agent Type</span>
      <span class="server-info-val">${escHtml(stripQuotes(info.agent))}</span>
    </div>`,
    `<div class="server-info-row">
      <span class="server-info-label">Dashboard</span>
      <span class="server-info-val">${
        domainHref
          ? `<a href="${escAttr(domainHref)}" target="_blank" rel="noopener" class="server-info-link">${escHtml(domain)}</a>`
          : escHtml(domain)
      }</span>
    </div>`,
    `<div class="server-info-row server-info-row--copy" onclick="copySSHAccess()" title="Click to copy">
      <span class="server-info-label">SSH Access</span>
      <span class="server-info-val server-info-copyval">${escHtml(sshCmd)}</span>
    </div>`,
    `<div class="server-info-row">
      <span class="server-info-label">Created</span>
      <span class="server-info-val">${escHtml(stripQuotes(info.created))}</span>
    </div>`,
  ];
  body.innerHTML = rows.join("");
}

function copySSHAccess() {
  if (!activeAgentInfo) return;
  const port = stripQuotes(activeAgentInfo.ssh_port);
  const cmd = `ssh root@${activeUUID}.derez.ai -p ${port}`;
  navigator.clipboard
    .writeText(cmd)
    .then(() => toast("SSH command copied to clipboard.", "info"))
    .catch(() => toast("Could not access clipboard.", "error"));
}

function openAgent() {
  if (!activeAgentInfo) {
    toast("Agent info not loaded yet.", "warning");
    return;
  }
  const domain = stripQuotes(activeAgentInfo.domain);
  if (!domain || domain === "\u2014") {
    toast("No dashboard URL available for this agent.", "warning");
    return;
  }
  const href = domain.startsWith("http") ? domain : `https://${domain}`;
  window.open(href, "_blank", "noopener");
}

function openWizard() {
  const card = document.getElementById("wizard-card");
  const btn = document.getElementById("wizard-toggle-btn");
  if (card.style.display !== "none") {
    // Wizard is visible — close it, restore button label
    hide("wizard-card");
    if (btn) btn.textContent = "Integrations";
    return;
  }
  // Wizard is hidden — open from step 1, update button label
  wizardPhase = "skills";
  wizardSelectedSkills = new Set();
  wizardSelectedIntegrations = new Set();
  wizardFieldValues = {};
  wizardIntegrationStep = 0;
  wizardSelectedIntegrationList = [];
  show("wizard-card");
  if (btn) btn.textContent = "Backup";
  renderWizardStep();
}

/* ═══════════════════════════════════════════════════════════════
   KEYS
═══════════════════════════════════════════════════════════════ */
async function loadKeys(uuid) {
  const body = document.getElementById("keys-body");
  body.innerHTML = '<div class="loading-row"><div class="spinner"></div></div>';
  document.getElementById("keys-status-dot").style.visibility = "hidden";

  try {
    const _keysUrl = `${KEYS_URL}?uuid=${encodeURIComponent(uuid)}`;
    dbg("→ List API Keys", _keysUrl);
    const res = await apiFetch(_keysUrl);
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    const json = await res.json();
    dbg("← List API Keys", json);
    // Response is [{data: [...]}, ...]  or  {data: [...]}  or  flat array
    const first = Array.isArray(json) ? json[0] : json;
    const keys =
      first && Array.isArray(first.data)
        ? first.data
        : Array.isArray(json)
          ? json
          : [];
    renderKeys(keys);
  } catch (err) {
    body.innerHTML = `<p class="inline-error">${escHtml(err.message)}</p>`;
  }
}

function renderKeys(keys) {
  const body = document.getElementById("keys-body");
  const dot = document.getElementById("keys-status-dot");

  if (!keys.length) {
    dot.className = "contract-dot contract-dot--red";
    dot.style.visibility = "visible";
    body.innerHTML =
      '<p class="text-muted" style="font-size:13px; padding: 4px 0;">No API keys found.</p>';
    return;
  }

  const hasActive = keys.some((k) => !k.disabled);
  dot.className = `contract-dot ${hasActive ? "contract-dot--green" : "contract-dot--red"}`;
  dot.style.visibility = "visible";

  body.innerHTML = keys
    .map((k) => {
      const used = (k.limit || 0) - (k.limit_remaining || 0);
      const total = k.limit || 0;
      const pct =
        total > 0 ? Math.min(100, Math.round((used / total) * 100)) : 0;
      const progClass =
        pct < 50 ? "prog-low" : pct < 80 ? "prog-mid" : "prog-high";
      const exp = k.expires_at
        ? new Date(k.expires_at).toLocaleDateString("en-US", {
            month: "short",
            day: "numeric",
            year: "numeric",
          })
        : "";
      const statusColor = k.disabled ? "var(--danger)" : "var(--success)";
      const statusLabel = k.disabled ? "Disabled" : "Active";

      return `
        <div class="key-row">
            <div class="key-info">
                <div class="key-name">
                    ${escHtml(k.name)}
                    <span style="font-size:10px; font-weight:500; padding:1px 7px; border-radius:10px;
                                 background:${k.disabled ? "var(--danger-dim)" : "#0e2e1c"};
                                 color:${statusColor}; margin-left:6px; vertical-align:middle;">
                        ${statusLabel}
                    </span>
                </div>
                <div class="key-stats">
                    <span>
                        <span class="key-stat-val">${k.limit_remaining ?? "\u2014"}</span>
                        <span class="text-muted"> / ${total} credits</span>
                    </span>
                    ${exp ? `<span class="sep-dot">&middot;</span><span class="text-muted">${escHtml(exp)}</span>` : ""}
                </div>

            </div>
            <button type="button" class="btn btn-ghost btn-sm"
                    style="align-self:center"
                    onclick="buyCredits('${escAttr(k.name)}')">
                Buy Credits
            </button>
        </div>`;
    })
    .join("");
}

function buyCredits(keyName) {
  const backdrop = document.getElementById("credits-backdrop");
  backdrop._keyName = keyName;
  document.getElementById("credits-key-name").textContent = keyName;
  // default to first option
  const radios = backdrop.querySelectorAll('input[name="credits-amount"]');
  radios.forEach((r, i) => (r.checked = i === 0));
  backdrop.classList.add("open");
}

function buyCreditsClose() {
  document.getElementById("credits-backdrop").classList.remove("open");
}

function buyCreditsSubmit() {
  const backdrop = document.getElementById("credits-backdrop");
  const selected = backdrop.querySelector(
    'input[name="credits-amount"]:checked',
  );
  if (!selected) {
    toast("Please select an amount.", "warning");
    return;
  }

  const keyName = backdrop._keyName;
  const params = new URLSearchParams(window.location.search);
  const activeAgent = agents.find((a) => a.UUID === activeUUID);
  const couponInput = document.getElementById("coupon-input");
  const coupon = couponApplied && couponInput ? couponInput.value.trim() : "";

  const fields = {
    product: "prod_Ufj2wCf4rhemT8",
    key: keyName || "",
    value: selected.value,
    agent: activeUUID || "",
    period: "",
    location: activeAgent?.server || "",
    email: currentEmail || "",
    coupon,
    utm_source: params.get("utm_source") || "",
    utm_medium: params.get("utm_medium") || "",
    utm_campaign: params.get("utm_campaign") || "",
    utm_term: params.get("utm_term") || "",
    utm_content: params.get("utm_content") || "",
  };

  const form = document.createElement("form");
  form.method = "POST";
  form.action = CREDITS_URL;
  form.target = "_self";

  for (const [name, val] of Object.entries(fields)) {
    const inp = document.createElement("input");
    inp.type = "hidden";
    inp.name = name;
    inp.value = val;
    form.appendChild(inp);
  }

  document.body.appendChild(form);
  form.submit();
}

/* ═══════════════════════════════════════════════════════════════
   INSTANCE PASSWORD
═══════════════════════════════════════════════════════════════ */
function togglePwSave(value) {
  document.getElementById("pw-save-btn").style.display = value
    ? "flex"
    : "none";
}

async function savePassword() {
  const newPw = document.getElementById("pw-new-input").value;
  const btn = document.getElementById("pw-save-btn");

  if (!newPw) {
    toast("Please enter a new password.", "warning");
    return;
  }
  if (newPw.length < 8) {
    toast("Password must be at least 8 characters.", "warning");
    return;
  }

  // Lock the button immediately so a second click can't corrupt the dialog Promise
  btn.disabled = true;

  const ok = await confirmDialog(
    "Update Instance Password",
    "This will immediately update the root password on your server. Make sure to save it somewhere safe. Continue?",
  );

  if (!ok) {
    btn.disabled = false; // user cancelled — restore button
    return;
  }

  btnLoad(btn, "Saving\u2026");

  try {
    dbg("\u2192 Update Password", PASSWORD_URL);
    const res = await apiFetch(PASSWORD_URL, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        uuid: activeUUID,
        email: currentEmail,
        password: newPw,
      }),
    });
    if (!res.ok)
      throw new Error(`Failed to update password (HTTP ${res.status}).`);

    toast("Password updated successfully.", "success");
    document.getElementById("pw-new-input").value = "";
    togglePwSave("");
  } catch (err) {
    toast(err.message, "error");
  } finally {
    btnReset(btn);
  }
}

/* ═══════════════════════════════════════════════════════════════
   ACCOUNT / USER PANEL
═══════════════════════════════════════════════════════════════ */
function toggleUserPanel() {
  const backdrop = document.getElementById("account-backdrop");
  if (!backdrop) return;
  backdrop.classList.add("open");
  const emailEl = document.getElementById("acct-email-display");
  if (emailEl) emailEl.textContent = currentEmail || "—";
  loadUserData();
  loadInvoices();
}

async function loadUserData() {
  try {
    const res = await apiFetch(
      `${INVOICE_EMAIL_URL}?email=${encodeURIComponent(currentEmail || "")}`,
    );
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    let data = await res.json();
    dbg("\u2190 User data", data);
    // unwrap envelope: plain array or {data:[...]}
    if (Array.isArray(data)) {
      const first = data[0];
      data =
        first && typeof first === "object" && "json" in first
          ? first.json
          : first;
    } else if (data && !Array.isArray(data) && Array.isArray(data.data)) {
      data = data.data[0];
    }
    if (!data) return;

    const invoiceEmail = stripQuotes(
      data.invoice_mail || data.invoice_email || data.invoiceEmail || "",
    );
    const invInput = document.getElementById("invoice-email-input");
    if (invInput && invoiceEmail) invInput.value = invoiceEmail;

    const code = stripQuotes(
      data.affiliate_code ||
        data.affiliateCode ||
        data.referral_code ||
        data.referralCode ||
        "",
    );
    const codeEl = document.getElementById("acct-affiliate-code");
    const copyBtn = document.getElementById("acct-affiliate-copy-btn");
    if (codeEl) codeEl.textContent = code || "—";
    if (copyBtn) copyBtn.style.display = code ? "inline-flex" : "none";
  } catch (err) {
    dbg("\u2190 User data error", err.message);
  }
}

function copyAffiliateCode() {
  const code = document.getElementById("acct-affiliate-code")?.textContent;
  if (!code || code === "—") return;
  const link = `https://derez.ai?utm_source=${encodeURIComponent(code)}`;
  navigator.clipboard
    .writeText(link)
    .then(() => toast("Affiliate link copied!", "success"));
}

function closeUserPanel() {
  document.getElementById("account-backdrop").classList.remove("open");
  const inp = document.getElementById("acct-pw-input");
  if (inp) inp.value = "";
  const btn = document.getElementById("acct-pw-save-btn");
  if (btn) btn.style.display = "none";
  const invBtn = document.getElementById("invoice-email-save-btn");
  if (invBtn) invBtn.style.display = "none";
  const codeEl = document.getElementById("acct-affiliate-code");
  if (codeEl) codeEl.textContent = "—";
  const copyBtn = document.getElementById("acct-affiliate-copy-btn");
  if (copyBtn) copyBtn.style.display = "none";
}

function toggleAccountPwSave(value) {
  const btn = document.getElementById("acct-pw-save-btn");
  if (btn) btn.style.display = value ? "flex" : "none";
}

async function saveAccountPassword() {
  const newPw = document.getElementById("acct-pw-input").value;
  const btn = document.getElementById("acct-pw-save-btn");

  if (!newPw) {
    toast("Please enter a new password.", "warning");
    return;
  }
  if (newPw.length < 8) {
    toast("Password must be at least 8 characters.", "warning");
    return;
  }

  btn.disabled = true;
  const ok = await confirmDialog(
    "Change Account Password",
    "This will update your account login password immediately. Continue?",
  );
  if (!ok) {
    btn.disabled = false;
    return;
  }

  btnLoad(btn, "");
  try {
    dbg("→ Update Account Password", ACCOUNT_PASSWORD_URL);
    const res = await apiFetch(ACCOUNT_PASSWORD_URL, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ email: currentEmail, password: newPw }),
    });
    if (!res.ok)
      throw new Error(
        `Failed to update account password (HTTP ${res.status}).`,
      );

    toast("Account password updated.", "success");
    closeUserPanel();
  } catch (err) {
    toast(err.message, "error");
  } finally {
    btnReset(btn);
  }
}

function toggleInvoiceEmailSave(value) {
  const btn = document.getElementById("invoice-email-save-btn");
  if (btn) btn.style.display = value ? "flex" : "none";
}

async function saveInvoiceEmail() {
  const input = document.getElementById("invoice-email-input");
  const btn = document.getElementById("invoice-email-save-btn");
  const email = input.value.trim();

  if (!email || !isValidEmail(email)) {
    toast("Please enter a valid email address.", "warning");
    return;
  }

  btnLoad(btn, "");
  try {
    const res = await apiFetch(INVOICE_EMAIL_URL, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ email: currentEmail, invoice_email: email }),
    });
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    localStorage.setItem("al_invoice_email", email);
    toast("Invoice email saved.", "success");
    btn.style.display = "none";
  } catch (err) {
    toast(err.message, "error");
  } finally {
    btnReset(btn);
  }
}

async function loadInvoices() {
  const body = document.getElementById("invoices-body");
  if (!body) return;
  body.innerHTML = '<div class="loading-row"><div class="spinner"></div></div>';
  try {
    const res = await apiFetch(
      `${INVOICES_URL}?email=${encodeURIComponent(currentEmail || "")}`,
    );
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    let data = await res.json();
    dbg("\u2190 Invoices", data);
    // unwrap envelope: {data:[...]} or [{json:{...}}] or plain array
    if (data && !Array.isArray(data) && Array.isArray(data.data)) {
      data = data.data;
    } else if (Array.isArray(data)) {
      data = data.map((item) =>
        item && typeof item === "object" && "json" in item ? item.json : item,
      );
    } else {
      data = [];
    }
    invoicesData = data;
    applyInvoiceFilter();
    const filterInput = document.getElementById("invoice-filter");
    if (filterInput) filterInput.value = "";
  } catch (err) {
    dbg("\u2190 Invoices error", err.message);
    body.innerHTML =
      '<p class="text-muted" style="font-size:13px;padding:4px 0;">Could not load invoices.</p>';
  }
}

function applyInvoiceFilter() {
  const q = (
    document.getElementById("invoice-filter").value || ""
  ).toLowerCase();
  const filtered = q
    ? invoicesData.filter(
        (inv) =>
          (inv.date || "").toLowerCase().includes(q) ||
          (inv.uuid || "").toLowerCase().includes(q) ||
          (inv.product || "").toLowerCase().includes(q) ||
          (inv.price || "").toLowerCase().includes(q),
      )
    : invoicesData;
  renderInvoices(filtered);
}

function renderInvoices(data) {
  const body = document.getElementById("invoices-body");
  if (!data.length) {
    body.innerHTML =
      '<p class="text-muted" style="font-size:13px;padding:4px 0;">No invoices yet.</p>';
    return;
  }
  body.innerHTML = `
    <div class="invoice-list">
      <div class="invoice-row invoice-row--head">
        <span>Date</span>
        <span>Agent</span>
        <span>Product</span>
        <span>Price</span>
        <span></span>
      </div>
      ${data
        .map(
          (inv) => `
        <div class="invoice-row">
          <span class="invoice-date">${escHtml(inv.date || "—")}</span>
          <span class="invoice-uuid">${escHtml(inv.uuid || "—")}</span>
          <span class="invoice-product">${escHtml(inv.product || "—")}</span>
          <span class="invoice-price">&euro;&thinsp;${escHtml(String(inv.price ?? "—"))}</span>
          <span class="invoice-dl">${inv.invoice_link ? `<a href="${escAttr(inv.invoice_link)}" target="_blank" rel="noopener" class="btn btn-ghost btn-sm" style="font-size:11px;padding:3px 8px;">Download</a>` : ""}</span>
        </div>`,
        )
        .join("")}
    </div>`;
}

function exportInvoicesCSV() {
  const q = (
    document.getElementById("invoice-filter").value || ""
  ).toLowerCase();
  const filtered = q
    ? invoicesData.filter(
        (inv) =>
          (inv.date || "").toLowerCase().includes(q) ||
          (inv.uuid || "").toLowerCase().includes(q) ||
          (inv.product || "").toLowerCase().includes(q) ||
          (inv.price || "").toLowerCase().includes(q),
      )
    : invoicesData;
  if (!filtered.length) {
    toast("No invoices to export.", "warning");
    return;
  }
  const rows = ["Date,Agent,Product,Price,Invoice Link"];
  for (const inv of filtered) {
    rows.push(
      [
        inv.date || "",
        inv.uuid || "",
        inv.product || "",
        inv.price || "",
        inv.invoice_link || "",
      ].join(","),
    );
  }
  const blob = new Blob([rows.join("\n")], { type: "text/csv" });
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = "invoices.csv";
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
}