window.pageBoot = async (me) => {
  const state = { accounts: [] };

  const fmtDT = window.fmtDT || (s => s || "—");

  function statusBadge(a){
    if (a.cooldown_until && new Date(a.cooldown_until) > new Date())
      return `<span class="badge b-amber">cooldown</span>`;
    if (a.authorized) return `<span class="badge b-green">authorized</span>`;
    const m = {expired:"b-amber", revoked:"b-red", pending:"b-gray", error:"b-red"};
    return `<span class="badge ${m[a.status]||"b-gray"}">${esc(a.status)}</span>`;
  }

  function render(){
    const q = $("#accSearch").value.trim().toLowerCase();
    const rows = state.accounts.filter(a => !q || a.email.toLowerCase().includes(q));
    $("#accCount").textContent = String(state.accounts.length);
    $("#accEmpty").style.display = state.accounts.length ? "none" : "";
    $("#accTbl").style.display = state.accounts.length ? "" : "none";
    $("#accBody").innerHTML = rows.map(a => `
      <tr>
        <td>
          <div><b>${esc(a.email)}</b></div>
          <div class="mut" style="font-size:.8rem">
            refresh token: ${a.has_refresh_token ? "stored" : "none"}
            ${a.token_expires_at ? " · expires " + esc(fmtDT(a.token_expires_at)) : ""}
          </div>
        </td>
        <td>${statusBadge(a)}</td>
        <td><span class="badge b-blue">${esc((a.sending_method||"api").toUpperCase())}</span></td>
        <td class="mono">${a.daily_limit} / ${a.campaign_limit}</td>
        <td>${a.sends_today ?? 0} sent</td>
        <td class="mut" style="font-size:.82rem">${a.last_success_at ? esc(fmtDT(a.last_success_at)) : "—"}</td>
        <td>${a.error_count ? `<span class="badge b-red">${a.error_count}</span>
             <div class="mut" style="font-size:.78rem;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="${esc(a.last_error||"")}">${esc(a.last_error||"")}</div>` : "0"}</td>
        <td>
          <div class="btns" style="gap:6px">
            <button class="btn xs" data-test="${a.id}">Test</button>
            <button class="btn xs secondary" data-edit="${a.id}">Limits</button>
            <button class="btn xs secondary" data-reauth="${a.id}">Reauthorize</button>
            <button class="btn xs danger-o" data-disc="${a.id}">Disconnect</button>
          </div>
        </td>
      </tr>`).join("");
  }

  async function load(){
    const d = await GET("/gmail/accounts");
    state.accounts = d.accounts || [];
    render();
  }

  $("#accSearch").addEventListener("input", render);

  // ---- Connect flow (real Google OAuth start) ----
  $("#btnConnect").addEventListener("click", async () => {
    const btn = $("#btnConnect"); btn.disabled = true; btn.textContent = "Starting…";
    try {
      const d = await POST("/gmail/accounts/connect");
      const url = d.authorization_url || d.url || d.auth_url;
      if (!url) throw new Error("No authorization URL returned");
      openModal("Google Authorization", el("div", {},
        el("p", {style:"margin:0 0 10px"}, "A new tab will open to Google's consent screen. Grant access to the requested Gmail scopes, then return here — the account will appear automatically after the redirect completes."),
        el("p", {class:"mut", style:"font-size:.82rem;margin-bottom:12px"}, "Redirect URI: " + esc(url.split("redirect_uri=")[1] ? decodeURIComponent(url.split("redirect_uri=")[1].split("&")[0]) : "")),
        el("div", {class:"btns"},
          el("button", {class:"btn", onclick:() => { window.open(url, "_blank"); }}, "Open Google Consent"),
          el("button", {class:"btn secondary", onclick:async () => { await load(); toast("Account list refreshed"); }}, "I'm back — Refresh list"))));
      window.open(url, "_blank");
    } catch (e) {
      toast("Connect failed: " + e.message, "err");
    } finally { btn.disabled = false; btn.textContent = "Connect Gmail Account"; }
  });

  // ---- Import OAuth client config ----
  $("#btnImportCfg").addEventListener("click", () => {
    $("#cfgCard").style.display = $("#cfgCard").style.display === "none" ? "" : "none";
  });
  $("#cfgForm").addEventListener("submit", async (e) => {
    e.preventDefault();
    const f = $("#cfgFile").files[0];
    if (!f) return;
    const fd = new FormData(); fd.append("file", f);
    try {
      const d = await api("/gmail/accounts/import-config", { method: "POST", body: fd });
      $("#cfgRedirect").textContent = d.redirect_uri;
      toast(`Configuration imported (project: ${d.project_id}). You can now connect accounts.`, "ok");
      $("#cfgForm").reset();
    } catch (err) { toast("Import failed: " + err.message, "err"); }
  });

  // ---- Clear all ----
  $("#btnClearAll").addEventListener("click", () => {
    confirmedAction("Clear ALL Gmail accounts? This revokes tokens at Google and deletes all stored credentials for every connected account. Audit logs are preserved.", async () => {
      const d = await POST("/gmail/accounts/clear-all");
      toast(`Cleared ${d.removed} account(s); revoked at Google: ${d.revoked_at_google}`, "ok");
      await load();
    });
  });

  // ---- Row actions ----
  $("#accBody").addEventListener("click", async (e) => {
    const b = e.target.closest("button"); if (!b) return;
    const id = b.dataset.test || b.dataset.edit || b.dataset.reauth || b.dataset.disc;
    if (b.dataset.test) {
      b.disabled = true; b.textContent = "Testing…";
      try {
        const d = await POST(`/gmail/accounts/${id}/test`);
        if (d.ok) toast("Connection verified: " + (d.detail || "Gmail profile OK"), "ok");
        else toast("Test failed: " + (d.detail || d.error || "unknown"), "err");
        await load();
      } finally { b.disabled = false; b.textContent = "Test"; }
    }
    if (b.dataset.reauth) {
      try {
        const d = await POST(`/gmail/accounts/${id}/reauthorize`);
        if (d.authorization_url) {
          openModal("Reauthorize Account", el("div", {},
            el("p", {style:"margin:0 0 12px"}, "Open Google's consent screen to re-grant access. The token will be refreshed on completion."),
            el("div", {class:"btns"},
              el("button", {class:"btn", onclick:()=>window.open(d.authorization_url,"_blank")}, "Open Google Consent"),
              el("button", {class:"btn secondary", onclick:async()=>{await load(); toast("Refreshed");}}, "Refresh list"))));
          window.open(d.authorization_url, "_blank");
        }
      } catch (err) { toast("Reauthorize failed: " + err.message, "err"); }
    }
    if (b.dataset.edit) {
      const a = state.accounts.find(x => x.id == id);
      const dm = el("select", {class:"inp"}, ...[["api","Gmail API (recommended)"],["smtp","SMTP XOAUTH2"]].map(([v,l]) =>
        el("option", {value:v, selected:(a.sending_method||"api")===v}, l)));
      const dl = el("input", {class:"inp", type:"number", value:a.daily_limit, min:1, max:2000});
      const cl = el("input", {class:"inp", type:"number", value:a.campaign_limit, min:1, max:2000});
      openModal("Account Limits — " + a.email, el("div", {class:"form"},
        el("label", {}, "Sending method"), dm,
        el("label", {}, "Daily send limit (conservative recommended)"), dl,
        el("label", {}, "Per-campaign limit"), cl), {
        buttons: [{label:"Save", kind:"btn", onClick: async (close) => {
          const payload = { sending_method: dm.value, daily_limit: +dl.value, campaign_limit: +cl.value };
          await api(`/gmail/accounts/${id}`, { method: "PATCH", body: payload });
          toast("Limits updated", "ok"); close(); await load();
        }}]
      });
    }
    if (b.dataset.disc) {
      confirmedAction(`Disconnect this account? The stored OAuth token will be revoked at Google and deleted locally.`, async () => {
        const d = await api(`/gmail/accounts/${id}`, { method: "DELETE" });
        toast(`Disconnected (revoked at Google: ${d.revoked_at_google})`, "ok");
        await load();
      });
    }
  });

  await load();
};