/* ── State ───────────────────────────────────────────── */

const state = {
  accounts: [],
  activeAccount: null,
  dashboards: {},
  continuous: {},
  channels: {},
  jobs: {},
  authStates: {},
};

const ACTIVE_ACCOUNT_STORAGE_KEY = "telegramScraper.activeAccount";
const jobStreams = new Map();

/* ── API helper ─────────────────────────────────────── */

async function api(path, options = {}) {
  const response = await fetch(path, {
    headers: { "Content-Type": "application/json" },
    ...options,
  });
  const data = await response.json();
  if (!response.ok) {
    throw new Error(data.error || "Request failed");
  }
  return data;
}

/* ── Format helpers ─────────────────────────────────── */

function formatDate(value) {
  if (!value) return "-";
  return value.replace("T", " ").replace("+00:00", " UTC");
}

function relativeTime(value) {
  if (!value) return "-";
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return "-";
  const seconds = Math.max(0, Math.floor((Date.now() - date.getTime()) / 1000));
  if (seconds < 10) return "now";
  if (seconds < 60) return `${seconds}s ago`;
  const minutes = Math.floor(seconds / 60);
  if (minutes < 60) return `${minutes}m ago`;
  const hours = Math.floor(minutes / 60);
  if (hours < 24) return `${hours}h ago`;
  return `${Math.floor(hours / 24)}d ago`;
}

function displayTime(value) {
  if (!value) return "-";
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return formatDate(value);
  return date.toLocaleString(undefined, {
    year: "numeric",
    month: "2-digit",
    day: "2-digit",
    hour: "2-digit",
    minute: "2-digit",
    second: "2-digit",
  });
}

function setBusy(button, busy) {
  if (!button) return;
  button.disabled = busy;
}

function confirmAction(message) {
  return window.confirm(message);
}

function showToast(message, type = "info") {
  let root = document.getElementById("toast-root");
  if (!root) {
    root = document.createElement("div");
    root.id = "toast-root";
    root.className = "toast-root";
    document.body.appendChild(root);
  }
  const toast = document.createElement("div");
  toast.className = `toast toast-${type}`;
  toast.textContent = message;
  root.appendChild(toast);
  window.setTimeout(() => {
    toast.classList.add("toast-hide");
    window.setTimeout(() => toast.remove(), 250);
  }, 3600);
}

function downloadJson(filename, payload) {
  const blob = new Blob([JSON.stringify(payload, null, 2) + "\n"], {
    type: "application/json",
  });
  const url = URL.createObjectURL(blob);
  const link = document.createElement("a");
  link.href = url;
  link.download = filename;
  document.body.appendChild(link);
  link.click();
  link.remove();
  URL.revokeObjectURL(url);
}

function isAccountAuthorized(auth) {
  const status = auth?.auth_status || auth || {};
  return (
    auth?.phase === "authorized" ||
    auth?.status === "authorized" ||
    status.status === "ready" ||
    status.status === "authorized"
  );
}

function saveActiveAccount(accountId) {
  if (accountId) {
    localStorage.setItem(ACTIVE_ACCOUNT_STORAGE_KEY, accountId);
  }
}

function loadSavedActiveAccount(accounts) {
  let savedId = localStorage.getItem(ACTIVE_ACCOUNT_STORAGE_KEY);
  if (!savedId) {
    savedId = localStorage.getItem("activeAccount");
    if (savedId) {
      localStorage.setItem(ACTIVE_ACCOUNT_STORAGE_KEY, savedId);
      localStorage.removeItem("activeAccount");
    }
  }
  if (savedId && accounts.some((account) => account.id === savedId)) {
    return savedId;
  }
  if (savedId) {
    localStorage.removeItem(ACTIVE_ACCOUNT_STORAGE_KEY);
  }
  if (state.activeAccount && accounts.some((account) => account.id === state.activeAccount)) {
    return state.activeAccount;
  }
  return accounts[0]?.id || null;
}

/* ── Account tab management ─────────────────────────── */

function renderAccountTabs(accounts) {
  const container = document.getElementById("account-tabs");
  const template = document.getElementById("account-tab-template");
  container.innerHTML = "";

  accounts.forEach((acc) => {
    const node = template.content.firstElementChild.cloneNode(true);
    node.dataset.accountId = acc.id;
    node.querySelector(".account-tab-name").textContent = acc.label || acc.id;
    const statusEl = node.querySelector(".account-tab-status");
    if (acc.auth) {
      const authOk = isAccountAuthorized(acc.auth);
      statusEl.textContent = authOk ? "●" : "○";
      statusEl.className = "account-tab-status " + (authOk ? "ok" : "");
    }
    if (acc.id === state.activeAccount) {
      node.classList.add("active");
    }
    node.addEventListener("click", () => switchAccount(acc.id));
    container.appendChild(node);
  });
}

function renderAccountPanel(accountId) {
  const container = document.getElementById("account-panels");
  const template = document.getElementById("account-panel-template");

  // Don't duplicate
  if (document.getElementById(`panel-${accountId}`)) return;

  const node = template.content.firstElementChild.cloneNode(true);
  node.id = `panel-${accountId}`;
  node.dataset.accountId = accountId;

  // Add/remove channel form
  const addForm = node.querySelector(".add-channel-form");
  addForm.addEventListener("submit", async (event) => {
    event.preventDefault();
    const channelId = addForm.querySelector(".add-channel-id").value.trim();
    const name = addForm.querySelector(".add-channel-name").value.trim();
    if (!channelId) return;
    await api(`/api/accounts/${accountId}/channels/add`, {
      method: "POST",
      body: JSON.stringify({ channel_id: channelId, name }),
    });
    addForm.reset();
    await refreshAccount(accountId);
  });

  // Continuous form
  const contForm = node.querySelector(".continuous-form");
  contForm.addEventListener("submit", async (event) => {
    event.preventDefault();
    const enabled = contForm.querySelector(".continuous-enabled").checked;
    const intervalMinutes = contForm.querySelector(".continuous-interval").value;
    const runAllTracked = contForm.querySelector(".continuous-all").checked;
    const channels = Array.from(contForm.querySelectorAll(".continuous-channel-checkbox:checked")).map(
      (item) => item.value
    );
    if (!runAllTracked && channels.length === 0 && enabled) {
      if (!confirmAction("Continuous scraping enabled with no selected channels. Save anyway?")) return;
    }
    await api(`/api/accounts/${accountId}/continuous`, {
      method: "POST",
      body: JSON.stringify({ enabled, interval_minutes: intervalMinutes, run_all_tracked: runAllTracked, channels }),
    });
    await refreshAccount(accountId);
  });

  // "All tracked" checkbox toggles individual checkboxes
  const contAll = contForm.querySelector(".continuous-all");
  contAll.addEventListener("change", () => {
    const checkboxes = contForm.querySelectorAll(".continuous-channel-checkbox");
    checkboxes.forEach((cb) => { cb.disabled = contAll.checked; });
  });

  // Content tabs within account panel
  const contentTabs = node.querySelectorAll(".content-tab");
  contentTabs.forEach((tab) => {
    tab.addEventListener("click", () => {
      const targetId = tab.dataset.tabTarget;
      contentTabs.forEach((t) => t.classList.toggle("active", t === tab));
      node.querySelectorAll(".tab-panel").forEach((p) => {
        p.classList.toggle("active", p.dataset.panel === targetId);
      });
    });
  });

  // Refresh jobs
  node.querySelector(".refresh-jobs-btn").addEventListener("click", () => refreshAccount(accountId));

  container.appendChild(node);
}

function closeAllJobStreams() {
  for (const [jobId, stream] of jobStreams) {
    stream.close();
  }
  jobStreams.clear();
}

function switchAccount(accountId) {
  closeAllJobStreams();
  state.activeAccount = accountId;
  saveActiveAccount(accountId);

  // Update tabs
  document.querySelectorAll(".account-tab").forEach((tab) => {
    tab.classList.toggle("active", tab.dataset.accountId === accountId);
  });

  // Show/hide panels
  document.querySelectorAll(".account-panel").forEach((panel) => {
    panel.classList.toggle("hidden", panel.dataset.accountId !== accountId);
  });

  // Ensure panel exists
  if (!document.getElementById(`panel-${accountId}`)) {
    renderAccountPanel(accountId);
  }

  // Update sidebar
  updateSidebarAccount();

  // Refresh data
  refreshAccount(accountId);

  // Update settings auth section
  updateAuthSection(accountId);
}

function updateSidebarAccount() {
  const acc = state.accounts.find((a) => a.id === state.activeAccount);
  const nameEl = document.getElementById("active-account-name");
  const statusEl = document.getElementById("active-account-status");
  if (acc) {
    nameEl.textContent = acc.label || acc.id;
    const authOk = isAccountAuthorized(acc.auth);
    statusEl.textContent = authOk ? "Authorized session" : "Needs login";
    statusEl.style.color = authOk ? "var(--ok)" : "var(--danger)";
  } else {
    nameEl.textContent = "None";
    statusEl.textContent = "Add an account in Settings";
    statusEl.style.color = "var(--dim)";
  }
}

/* ── Dashboard rendering ────────────────────────────── */

function renderChannels(accountId, channels) {
  const panel = document.getElementById(`panel-${accountId}`);
  if (!panel) return;
  const tbody = panel.querySelector(".channels-table");
  const template = document.getElementById("channel-row-template");
  tbody.innerHTML = "";

  if (!channels.length) {
    const row = document.createElement("tr");
    row.innerHTML = '<td colspan="5"><div class="empty-state">No tracked channels yet. Add an ID or @username to start scraping this account.</div></td>';
    tbody.appendChild(row);
  }

  channels.forEach((channel) => {
    const node = template.content.firstElementChild.cloneNode(true);
    node.querySelector(".channel-name").textContent = channel.name;
    node.querySelector(".channel-id").textContent = channel.channel_id;
    node.querySelector(".message-count").textContent = String(channel.message_count);
    node.querySelector(".media-count").textContent = String(channel.media_count);
    node.querySelector(".last-date").textContent = channel.last_date || "-";

    node.querySelector(".scrape-btn").addEventListener("click", async () => {
      await api(`/api/accounts/${accountId}/jobs/scrape`, {
        method: "POST",
        body: JSON.stringify({ channel_id: channel.channel_id }),
      });
      await refreshAccount(accountId);
    });

    node.querySelector(".export-btn").addEventListener("click", async () => {
      await api(`/api/accounts/${accountId}/jobs/export-channel`, {
        method: "POST",
        body: JSON.stringify({ channel_id: channel.channel_id }),
      });
      await refreshAccount(accountId);
    });

    node.querySelector(".export-view-btn").addEventListener("click", () => {
      window.location.href = `/viewer?channel=${encodeURIComponent(channel.channel_id)}&account=${encodeURIComponent(accountId)}`;
    });

    node.querySelector(".media-btn").addEventListener("click", async () => {
      await api(`/api/accounts/${accountId}/jobs/rescrape-media`, {
        method: "POST",
        body: JSON.stringify({ channel_id: channel.channel_id }),
      });
      await refreshAccount(accountId);
    });

    node.querySelector(".remove-btn").addEventListener("click", async () => {
      if (!confirmAction(`Remove ${channel.name} from tracked channels?`)) return;
      await api(`/api/accounts/${accountId}/channels/remove`, {
        method: "POST",
        body: JSON.stringify({ channel_id: channel.channel_id }),
      });
      await refreshAccount(accountId);
    });

    tbody.appendChild(node);
  });

  // Update channel count stat
  panel.querySelector(".channel-count").textContent = String(channels.length);
}

function renderJobs(accountId, jobs) {
  const panel = document.getElementById(`panel-${accountId}`);
  if (!panel) return;
  const root = panel.querySelector(".jobs-list");
  const template = document.getElementById("job-template");
  root.innerHTML = "";

  if (!jobs.length) {
    root.innerHTML = '<div class="empty-state">No jobs yet. Start a scrape or export to see progress here.</div>';
    return;
  }

  jobs.forEach((job) => {
    const node = template.content.firstElementChild.cloneNode(true);
    node.dataset.jobId = job.job_id;
    node.querySelector(".job-title").textContent = job.title;
    node.querySelector(".job-status").textContent = job.status;
    node.querySelector(".job-time").textContent = [displayTime(job.started_at), displayTime(job.finished_at)]
      .filter((item) => item !== "-")
      .join(" -> ");
    node.querySelector(".job-logs").textContent = job.logs || job.error || "No logs.";
    root.appendChild(node);
    subscribeJobStream(accountId, job.job_id, job.status);
  });
}

function updateRenderedJob(accountId, job) {
  const panel = document.getElementById(`panel-${accountId}`);
  const node = panel?.querySelector(`[data-job-id="${job.job_id}"]`);
  if (!node) return;
  node.querySelector(".job-status").textContent = job.status;
  node.querySelector(".job-time").textContent = [displayTime(job.started_at), displayTime(job.finished_at)]
    .filter((item) => item !== "-")
    .join(" -> ");
  node.querySelector(".job-logs").textContent = job.logs || job.error || "No logs.";
}

function subscribeJobStream(accountId, jobId, status) {
  if (!["queued", "running"].includes(status) || jobStreams.has(jobId) || !window.EventSource) {
    return;
  }
  const stream = new EventSource(`/api/jobs/${encodeURIComponent(jobId)}/events`);
  jobStreams.set(jobId, stream);
  stream.onmessage = (event) => {
    const job = JSON.parse(event.data);
    updateRenderedJob(accountId, job);
    if (["completed", "failed"].includes(job.status)) {
      stream.close();
      jobStreams.delete(jobId);
      refreshAccount(accountId);
    }
  };
  stream.onerror = () => {
    stream.close();
    jobStreams.delete(jobId);
  };
}

function renderContinuous(accountId, data) {
  const panel = document.getElementById(`panel-${accountId}`);
  if (!panel) return;
  const config = data.config || {};
  const status = data.status || {};

  const contForm = panel.querySelector(".continuous-form");
  contForm.querySelector(".continuous-enabled").checked = Boolean(config.enabled);
  contForm.querySelector(".continuous-interval").value = config.interval_minutes || 1;
  contForm.querySelector(".continuous-all").checked = Boolean(config.run_all_tracked);

  // Channel picker
  const chList = panel.querySelector(".continuous-channel-list");
  const channels = state.channels[accountId] || [];
  const runAll = Boolean(config.run_all_tracked);
  const selected = new Set(config.channels || []);
  chList.innerHTML = "";

  channels.forEach((ch) => {
    const label = document.createElement("label");
    label.className = "checkbox-row";
    label.classList.toggle("disabled", runAll);

    const checkbox = document.createElement("input");
    checkbox.type = "checkbox";
    checkbox.className = "continuous-channel-checkbox";
    checkbox.value = ch.channel_id;
    checkbox.checked = runAll || selected.has(ch.channel_id);
    checkbox.disabled = runAll;

    const text = document.createElement("span");
    text.textContent = `${ch.name} (${ch.channel_id})`;

    label.append(checkbox, text);
    chList.appendChild(label);
  });

  // Meta
  panel.querySelector(".continuous-status").textContent = status.running ? "running" : "stopped";
  panel.querySelector(".continuous-last-iteration").textContent = status.last_iteration_at
    ? `${relativeTime(status.last_iteration_at)} (${displayTime(status.last_iteration_at)})`
    : "-";
  panel.querySelector(".continuous-last-error").textContent = status.last_error || "-";

  // Logs
  const logsRoot = panel.querySelector(".continuous-logs");
  const entries = (status.log_entries || status.logs || []).map(normalizeLogEntry);
  logsRoot.innerHTML = "";

  if (!entries.length) {
    logsRoot.innerHTML = '<div class="log-line"><span class="log-time">-</span><span class="log-level">INFO</span><span class="log-message">No logs yet.</span></div>';
    return;
  }

  entries.slice().reverse().forEach((entry) => {
    const row = document.createElement("div");
    row.className = `log-line ${entry.level}`;
    const time = entry.timestamp ? displayTime(entry.timestamp).split(", ").pop() : entry.legacyTime || "-";
    const absolute = entry.timestamp ? displayTime(entry.timestamp) : entry.legacyTime || "-";
    row.title = absolute;

    const timeNode = document.createElement("span");
    timeNode.className = "log-time";
    timeNode.textContent = time;

    const ageNode = document.createElement("span");
    ageNode.className = "log-age";
    ageNode.textContent = entry.timestamp ? relativeTime(entry.timestamp) : "-";

    const levelNode = document.createElement("span");
    levelNode.className = "log-level";
    levelNode.textContent = entry.level.toUpperCase();

    const messageNode = document.createElement("span");
    messageNode.className = "log-message";
    messageNode.textContent = entry.message;

    row.append(timeNode, ageNode, levelNode, messageNode);
    logsRoot.appendChild(row);
  });
}

function classifyLog(message, level) {
  if (level) return level;
  const normalized = message.toLowerCase();
  if (normalized.includes("failed") || normalized.includes("error") || normalized.includes("traceback")) return "error";
  if (normalized.includes("sleep") || normalized.includes("no channels")) return "warn";
  if (normalized.includes("finished") || normalized.includes("completed")) return "success";
  if (normalized.includes("starting") || normalized.includes("started")) return "info";
  return "debug";
}

function normalizeLogEntry(entry) {
  if (typeof entry === "object" && entry !== null) {
    return {
      timestamp: entry.timestamp || null,
      level: classifyLog(entry.message || "", entry.level),
      message: entry.message || "",
    };
  }
  const line = String(entry || "");
  const match = line.match(/^\[(\d{2}:\d{2}:\d{2})\]\s?(.*)$/);
  return {
    timestamp: null,
    legacyTime: match?.[1] || "",
    level: classifyLog(match?.[2] || line),
    message: match?.[2] || line,
  };
}

function renderSummary(accountId, data) {
  const panel = document.getElementById(`panel-${accountId}`);
  if (!panel) return;
  const d = data.dashboard || data.state || {};
  const health = data.health || {};
  panel.querySelector(".forwarding-count").textContent = String((d.forwarding_rules || []).length);
  const toggle = panel.querySelector(".scrape-media-label");
  toggle.textContent = d.scrape_media ? "ON" : "OFF";
  const healthOk = health.api_credentials && health.session_ready && health.data_dir_exists;
  panel.querySelector(".account-health-label").textContent = healthOk ? "Ready" : "Check";
  panel.querySelector(".account-health-label").style.color = healthOk ? "var(--ok)" : "var(--warn)";
  panel.querySelector(".account-health-detail").textContent = [
    `${health.message_count || 0} messages`,
    `${health.media_count || 0} media`,
    health.active_job ? `active: ${health.active_job.status}` : "idle",
  ].join(" | ");
}

/* ── Account data loading ───────────────────────────── */

async function refreshAccount(accountId) {
  try {
    const [dashboard, authData, continuousData] = await Promise.all([
      api(`/api/accounts/${accountId}`),
      api(`/api/accounts/${accountId}/auth`).catch(() => ({})),
      api(`/api/accounts/${accountId}/continuous`).catch(() => ({})),
    ]);

    state.dashboards[accountId] = dashboard;
    state.continuous[accountId] = continuousData;
    state.authStates[accountId] = authData;
    state.channels[accountId] = dashboard.channels || [];

    renderSummary(accountId, dashboard);
    renderChannels(accountId, dashboard.channels || []);
    renderJobs(accountId, dashboard.jobs || []);
    renderContinuous(accountId, continuousData);

    // Update tab status indicator
    const tab = document.querySelector(`.account-tab[data-account-id="${accountId}"]`);
    if (tab) {
      const statusEl = tab.querySelector(".account-tab-status");
      const authOk = isAccountAuthorized(authData);
      statusEl.textContent = authOk ? "●" : "○";
      statusEl.className = "account-tab-status " + (authOk ? "ok" : "");
    }
  } catch (err) {
    console.error(`Failed to refresh account ${accountId}:`, err);
  }
}

async function loadAccounts() {
  let accounts = [];
  try {
    const resp = await api("/api/accounts");
    accounts = resp.accounts || [];
  } catch {
    // Legacy fallback — check /api/auth
    try {
      const legacy = await api("/api/auth");
      if (legacy.saved_credentials?.api_id) {
        accounts = [{ id: "default", label: "Default", auth: legacy.auth_status || legacy }];
      }
    } catch {
      // No accounts at all
    }
  }

  state.accounts = accounts;

  if (accounts.length === 0) {
    document.getElementById("no-accounts-msg").classList.remove("hidden");
    return;
  }

  document.getElementById("no-accounts-msg").classList.add("hidden");

  // Render tabs
  renderAccountTabs(accounts);

  // Render panels for each account
  accounts.forEach((acc) => renderAccountPanel(acc.id));

  // Determine active account (persisted across reloads)
  const activeId = loadSavedActiveAccount(accounts);
  if (activeId) {
    switchAccount(activeId);
  }

  // Update settings
  renderSettingsAccounts();
}

/* ── Settings: Accounts list ────────────────────────── */

function renderSettingsAccounts() {
  const container = document.getElementById("accounts-list");
  const template = document.getElementById("account-list-item-template");
  container.innerHTML = "";

  state.accounts.forEach((acc) => {
    const node = template.content.firstElementChild.cloneNode(true);
    node.querySelector(".account-list-label").textContent = acc.label || acc.id;
    node.querySelector(".account-list-id").textContent = acc.id;

    const authStatus = node.querySelector(".account-list-auth-status");
    const authOk = isAccountAuthorized(acc.auth);
    authStatus.textContent = authOk ? "Authorized" : "Needs auth";
    authStatus.style.color = authOk ? "var(--ok)" : "var(--danger)";
    authStatus.style.fontSize = "0.78rem";

    node.querySelector(".account-select-btn").addEventListener("click", () => {
      switchAccount(acc.id);
      document.getElementById("settings-dialog").close();
    });

    node.querySelector(".account-export-btn").addEventListener("click", async () => {
      try {
        const payload = await api(`/api/accounts/${acc.id}/export`);
        downloadJson(`telegram-scraper-account-${acc.id}.json`, payload);
        showToast(`Exported ${acc.label || acc.id}.`, "success");
      } catch (err) {
        showToast(`Failed to export account: ${err.message}`, "error");
      }
    });

    node.querySelector(".account-remove-btn").addEventListener("click", async () => {
      if (!confirmAction(`Remove account "${acc.label || acc.id}"? All its data will be deleted.`)) return;
      try {
        const removingActive = state.activeAccount === acc.id;
        await api(`/api/accounts/${acc.id}`, { method: "DELETE" });
        if (removingActive) {
          state.activeAccount = null;
          localStorage.removeItem(ACTIVE_ACCOUNT_STORAGE_KEY);
        }
        await loadAccounts();
      } catch (err) {
        showToast(`Failed to remove account: ${err.message}`, "error");
      }
    });

    container.appendChild(node);
  });
}

/* ── Auth (operates on active account) ───────────────── */

function updateAuthSection(accountId) {
  const label = document.getElementById("auth-account-label");
  const acc = state.accounts.find((a) => a.id === accountId);
  label.textContent = acc ? (acc.label || acc.id) : "-";
}

async function saveCredentials(accountId) {
  const apiId = document.getElementById("api-id-input").value.trim();
  const apiHash = document.getElementById("api-hash-input").value.trim();
  if (!apiId || !apiHash) return;
  await api(`/api/accounts/${accountId}/auth/credentials`, {
    method: "POST",
    body: JSON.stringify({ api_id: apiId, api_hash: apiHash }),
  });
  await loadAccounts();
}

async function startQrLogin(accountId) {
  const data = await api(`/api/accounts/${accountId}/auth/qr/start`, {
    method: "POST",
    body: JSON.stringify({}),
  });
  if (data.qr_image) {
    document.getElementById("qr-image").src = data.qr_image;
    document.getElementById("qr-wrap").classList.remove("hidden");
  }
  await loadAccounts();
}

async function requestPhoneCode(accountId) {
  const phone = document.getElementById("phone-input").value.trim();
  if (!phone) return;
  await api(`/api/accounts/${accountId}/auth/phone/request`, {
    method: "POST",
    body: JSON.stringify({ phone }),
  });
  await loadAccounts();
}

async function submitPhoneCode(accountId) {
  const code = document.getElementById("code-input").value.trim();
  if (!code) return;
  await api(`/api/accounts/${accountId}/auth/phone/submit`, {
    method: "POST",
    body: JSON.stringify({ code }),
  });
  document.getElementById("code-input").value = "";
  await loadAccounts();
}

async function submitPassword(accountId) {
  const password = document.getElementById("password-input").value.trim();
  if (!password) return;
  await api(`/api/accounts/${accountId}/auth/password`, {
    method: "POST",
    body: JSON.stringify({ password }),
  });
  document.getElementById("password-input").value = "";
  await loadAccounts();
}

/* ── Scrape / Export all (for active account) ───────── */

async function scrapeAll() {
  if (!state.activeAccount) return;
  if (!confirmAction("Queue scraping for all tracked channels?")) return;
  await api(`/api/accounts/${state.activeAccount}/jobs/scrape`, {
    method: "POST",
    body: JSON.stringify({}),
  });
  await refreshAccount(state.activeAccount);
}

async function exportAll() {
  if (!state.activeAccount) return;
  if (!confirmAction("Queue export for all tracked channels?")) return;
  await api(`/api/accounts/${state.activeAccount}/jobs/export`, {
    method: "POST",
    body: JSON.stringify({}),
  });
  await refreshAccount(state.activeAccount);
}

async function refreshDialogs() {
  if (!state.activeAccount) return;
  await api(`/api/accounts/${state.activeAccount}/jobs/refresh-dialogs`, {
    method: "POST",
    body: JSON.stringify({}),
  });
  await refreshAccount(state.activeAccount);
}

async function toggleMedia(value) {
  if (!state.activeAccount) return;
  await api(`/api/accounts/${state.activeAccount}/settings/media`, {
    method: "POST",
    body: JSON.stringify({ value }),
  });
  await refreshAccount(state.activeAccount);
}

/* ── Main ───────────────────────────────────────────── */

async function main() {
  // ── Sidebar action buttons ──
  document.getElementById("scrape-all-btn").addEventListener("click", async () => {
    try { await scrapeAll(); showToast("Scrape job queued.", "success"); } catch (err) { showToast("Scrape error: " + err.message, "error"); }
  });
  document.getElementById("export-all-btn").addEventListener("click", async () => {
    try { await exportAll(); showToast("Export job queued.", "success"); } catch (err) { showToast("Export error: " + err.message, "error"); }
  });
  document.getElementById("refresh-dialogs-btn").addEventListener("click", async () => {
    try { await refreshDialogs(); showToast("Dialog refresh queued.", "success"); } catch (err) { showToast("Dialog refresh error: " + err.message, "error"); }
  });

  // ── Settings dialog ──
  const settingsDialog = document.getElementById("settings-dialog");
  document.getElementById("open-settings-btn").addEventListener("click", () => {
    // Update auth section for active account
    if (state.activeAccount) {
      updateAuthSection(state.activeAccount);
    }
    renderSettingsAccounts();
    settingsDialog.showModal();
  });
  document.getElementById("close-settings-btn").addEventListener("click", () => {
    settingsDialog.close();
  });

  // ── Add account form ──
  document.getElementById("add-account-form").addEventListener("submit", async (event) => {
    event.preventDefault();
    const accountId = document.getElementById("add-account-id").value.trim();
    const label = document.getElementById("add-account-label").value.trim();
    const apiId = document.getElementById("add-account-api-id").value.trim();
    const apiHash = document.getElementById("add-account-api-hash").value.trim();
    if (!accountId) return;

    try {
      await api("/api/accounts", {
        method: "POST",
        body: JSON.stringify({
          account_id: accountId,
          label: label || accountId,
          api_id: apiId ? parseInt(apiId) : undefined,
          api_hash: apiHash || undefined,
        }),
      });
      event.target.reset();
      await loadAccounts();
      if (!state.activeAccount) {
        switchAccount(accountId);
      }
    } catch (err) {
      showToast("Failed to add account: " + err.message, "error");
    }
  });

  document.getElementById("import-account-file").addEventListener("change", async (event) => {
    const file = event.currentTarget.files?.[0];
    if (!file) return;
    try {
      const payload = JSON.parse(await file.text());
      const accountId = payload.account_id || payload.id;
      if (!accountId) throw new Error("account_id is missing in import file");
      await api("/api/accounts/import", {
        method: "POST",
        body: JSON.stringify(payload),
      });
      event.currentTarget.value = "";
      await loadAccounts();
      switchAccount(accountId);
      showToast(`Imported ${accountId}.`, "success");
    } catch (err) {
      showToast(`Failed to import account: ${err.message}`, "error");
    }
  });

  // ── Credentials form ──
  document.getElementById("credentials-form").addEventListener("submit", async (event) => {
    event.preventDefault();
    if (!state.activeAccount) return;
    try {
      await saveCredentials(state.activeAccount);
    } catch (err) {
      showToast("Failed to save credentials: " + err.message, "error");
    }
  });

  // ── QR login ──
  document.getElementById("start-qr-btn").addEventListener("click", async (event) => {
    setBusy(event.currentTarget, true);
    try {
      if (!state.activeAccount) return;
      await startQrLogin(state.activeAccount);
    } catch (err) {
      showToast("QR login error: " + err.message, "error");
    } finally {
      setBusy(event.currentTarget, false);
    }
  });

  // ── Phone ──
  document.getElementById("phone-form").addEventListener("submit", async (event) => {
    event.preventDefault();
    if (!state.activeAccount) return;
    try {
      await requestPhoneCode(state.activeAccount);
    } catch (err) {
      showToast("Phone code request error: " + err.message, "error");
    }
  });

  // ── Code ──
  document.getElementById("code-form").addEventListener("submit", async (event) => {
    event.preventDefault();
    if (!state.activeAccount) return;
    try {
      await submitPhoneCode(state.activeAccount);
    } catch (err) {
      showToast("Code submit error: " + err.message, "error");
    }
  });

  // ── Password ──
  document.getElementById("password-form").addEventListener("submit", async (event) => {
    event.preventDefault();
    if (!state.activeAccount) return;
    try {
      await submitPassword(state.activeAccount);
    } catch (err) {
      showToast("Password error: " + err.message, "error");
    }
  });

  // ── Media toggle ──
  document.getElementById("scrape-media-toggle").addEventListener("change", async (event) => {
    const checked = event.currentTarget.checked;
    try { await toggleMedia(checked); showToast("Media setting updated.", "success"); } catch (err) { showToast("Media toggle error: " + err.message, "error"); }
  });

  // ── Load accounts ──
  await loadAccounts();

  // ── Periodic refresh ──
  window.setInterval(() => {
    if (state.activeAccount) {
      refreshAccount(state.activeAccount);
    }
  }, 5000);
}

main().catch((error) => {
  console.error(error);
  showToast(error.message, "error");
});