export default {
  async fetch(request, env) {
    const url = new URL(request.url);
    const path = url.pathname.replace(/^\//, "");

    // HELPER: Ambil Account ID Cloudflare
    const getAccountId = async (email, apiKey) => {
      const res = await fetch("https://api.cloudflare.com/client/v4/memberships", {
        headers: { "X-Auth-Email": email, "X-Auth-Key": apiKey }
      });
      const data = await res.json();
      if (!data.success || !data.result || data.result.length === 0) {
        throw new Error("Email atau API Key CF salah / tidak punya akses!");
      }
      return data.result[0].account.id;
    };

    // =================================================================
    // BACKEND API – hanya untuk Email Routing
    // =================================================================
    if (request.method === "POST") {
      const formData = await request.formData();
      const action = path;

      // --- WORKER: LIST (untuk dropdown catch-all) ---
      if (action === "list-workers") {
        try {
          const accountId = await getAccountId(formData.get("cf_email"), formData.get("cf_api_key"));
          const res = await fetch(`https://api.cloudflare.com/client/v4/accounts/${accountId}/workers/services?per_page=100`, {
            headers: { "X-Auth-Email": formData.get("cf_email"), "X-Auth-Key": formData.get("cf_api_key") }
          });
          const data = await res.json();
          return new Response(JSON.stringify(data.success ? data.result.map(w => w.id) : []), { headers: { "Content-Type": "application/json" } });
        } catch (err) { return new Response(JSON.stringify({ error: err.message }), { status: 500 }); }
      }

      // --- ZONES / DOMAIN UTAMA: LIST ---
      if (action === "list-zones") {
        try {
          const accountId = await getAccountId(formData.get("cf_email"), formData.get("cf_api_key"));
          const res = await fetch(`https://api.cloudflare.com/client/v4/zones?account.id=${accountId}&per_page=50`, {
            headers: { "X-Auth-Email": formData.get("cf_email"), "X-Auth-Key": formData.get("cf_api_key") }
          });
          const data = await res.json();
          return new Response(JSON.stringify(data.success ? data.result.map(z => ({ name: z.name, id: z.id })) : []), { headers: { "Content-Type": "application/json" } });
        } catch (err) { return new Response(JSON.stringify([]), { status: 500 }); }
      }

      // --- EMAIL ROUTING: GET SETTINGS ---
      if (action === "get-email-settings") {
        try {
          const zoneId = formData.get("zone_id");
          const res = await fetch(`https://api.cloudflare.com/client/v4/zones/${zoneId}/email/routing`, {
            headers: { "X-Auth-Email": formData.get("cf_email"), "X-Auth-Key": formData.get("cf_api_key") }
          });
          const data = await res.json();
          return new Response(JSON.stringify({ success: data.success, result: data.result }), { headers: { "Content-Type": "application/json" } });
        } catch (err) { return new Response(JSON.stringify({ success: false, msg: err.message }), { status: 500 }); }
      }

      // --- EMAIL ROUTING: ENABLE AUTO MX/SPF ---
      if (action === "enable-email-routing") {
        try {
          const zoneId = formData.get("zone_id");
          const res = await fetch(`https://api.cloudflare.com/client/v4/zones/${zoneId}/email/routing/enable`, {
            method: "POST",
            headers: { 
              "X-Auth-Email": formData.get("cf_email"), 
              "X-Auth-Key": formData.get("cf_api_key"),
              "Content-Type": "application/json"
            }
          });
          const data = await res.json();
          return new Response(JSON.stringify({ success: data.success, msg: data.success ? "Sukses konfigurasi MX/SPF Cloudflare Email Routing!" : data.errors[0].message }), { headers: { "Content-Type": "application/json" } });
        } catch (err) { return new Response(JSON.stringify({ success: false, msg: err.message }), { status: 500 }); }
      }

      // --- EMAIL ROUTING: GET CATCH-ALL ---
      if (action === "get-email-catchall") {
        try {
          const zoneId = formData.get("zone_id");
          const res = await fetch(`https://api.cloudflare.com/client/v4/zones/${zoneId}/email/routing/rules/catch_all`, {
            headers: { "X-Auth-Email": formData.get("cf_email"), "X-Auth-Key": formData.get("cf_api_key") }
          });
          const data = await res.json();
          return new Response(JSON.stringify({ success: data.success, result: data.result }), { headers: { "Content-Type": "application/json" } });
        } catch (err) { return new Response(JSON.stringify({ success: false, msg: err.message }), { status: 500 }); }
      }

      // --- EMAIL ROUTING: UPDATE CATCH-ALL ---
      if (action === "update-email-catchall") {
        try {
          const zoneId = formData.get("zone_id");
          const enabled = formData.get("catchall_enabled") === "true";
          const actionType = formData.get("catchall_action");
          const targetValue = formData.get("catchall_target");

          let actions = [];
          if (actionType === "worker") {
            actions.push({ type: "worker", value: [targetValue] });
          } else {
            actions.push({ type: "forward", value: [targetValue] });
          }

          const res = await fetch(`https://api.cloudflare.com/client/v4/zones/${zoneId}/email/routing/rules/catch_all`, {
            method: "PUT",
            headers: { 
              "X-Auth-Email": formData.get("cf_email"), 
              "X-Auth-Key": formData.get("cf_api_key"),
              "Content-Type": "application/json"
            },
            body: JSON.stringify({
              enabled: enabled,
              actions: actions,
              matchers: [{ type: "all" }]
            })
          });
          const data = await res.json();
          return new Response(JSON.stringify({ success: data.success, msg: data.success ? "Konfigurasi Catch-All Berhasil Diperbarui!" : data.errors[0].message }), { headers: { "Content-Type": "application/json" } });
        } catch (err) { return new Response(JSON.stringify({ success: false, msg: err.message }), { status: 500 }); }
      }

      // --- EMAIL ROUTING: LIST DESTINATIONS ---
      if (action === "list-email-destinations") {
        try {
          const accountId = await getAccountId(formData.get("cf_email"), formData.get("cf_api_key"));
          const res = await fetch(`https://api.cloudflare.com/client/v4/accounts/${accountId}/email/routing/addresses?per_page=100`, {
            headers: { "X-Auth-Email": formData.get("cf_email"), "X-Auth-Key": formData.get("cf_api_key") }
          });
          const data = await res.json();
          return new Response(JSON.stringify(data.success ? data.result : []), { headers: { "Content-Type": "application/json" } });
        } catch (err) { return new Response(JSON.stringify([]), { status: 500 }); }
      }

      // --- EMAIL ROUTING: ADD DESTINATION ---
      if (action === "add-email-destination") {
        try {
          const accountId = await getAccountId(formData.get("cf_email"), formData.get("cf_api_key"));
          const emailAddress = formData.get("email_address").trim();
          const res = await fetch(`https://api.cloudflare.com/client/v4/accounts/${accountId}/email/routing/addresses`, {
            method: "POST",
            headers: { 
              "X-Auth-Email": formData.get("cf_email"), 
              "X-Auth-Key": formData.get("cf_api_key"),
              "Content-Type": "application/json"
            },
            body: JSON.stringify({ email: emailAddress })
          });
          const data = await res.json();
          return new Response(JSON.stringify({ success: data.success, msg: data.success ? "Email berhasil didaftarkan! Cek inbox/spam buat verifikasi." : data.errors[0].message }), { headers: { "Content-Type": "application/json" } });
        } catch (err) { return new Response(JSON.stringify({ success: false, msg: err.message }), { status: 500 }); }
      }

      // --- EMAIL ROUTING: DELETE DESTINATION ---
      if (action === "delete-email-destination") {
        try {
          const accountId = await getAccountId(formData.get("cf_email"), formData.get("cf_api_key"));
          const addressId = formData.get("address_id");
          const res = await fetch(`https://api.cloudflare.com/client/v4/accounts/${accountId}/email/routing/addresses/${addressId}`, {
            method: "DELETE",
            headers: { "X-Auth-Email": formData.get("cf_email"), "X-Auth-Key": formData.get("cf_api_key") }
          });
          const data = await res.json();
          return new Response(JSON.stringify({ success: data.success }), { headers: { "Content-Type": "application/json" } });
        } catch (err) { return new Response(JSON.stringify({ success: false }), { status: 500 }); }
      }

      // default
      return new Response("Not found", { status: 404 });
    }

    // =================================================================
    // TAMPILAN DASHBOARD EMAIL ROUTING
    // =================================================================
    return new Response(renderDashboard(), { headers: { "Content-Type": "text/html; charset=utf-8" } });
  }
};

// ==================== FRONTEND UI (Email Routing Only) ====================
function renderDashboard() {
  return `
<!DOCTYPE html>
<html>
<head>
  <title>Cloudflare Email Routing Tools</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <style>
    body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #121212; color: #e0e0e0; padding: 10px; margin: 0; box-sizing: border-box; }
    .container { max-width: 700px; margin: 0 auto; background: #1e1e1e; padding: 20px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.5); box-sizing: border-box; }
    h2 { color: #f39c12; text-align: center; border-bottom: 2px dashed #333; padding-bottom: 10px; font-size: 20px; margin-top: 0; }
    .cred-box { background: #1a1a1a; padding: 12px; border-radius: 4px; border: 1px dashed #3498db; margin-bottom: 20px; }
    .flex-inputs { display: flex; gap: 8px; margin-bottom: 8px; }
    .flex-inputs input { flex: 1; padding: 10px; background: #2d2d2d; color: #fff; border: 1px solid #444; border-radius: 4px; font-size: 14px; }
    button { background: #f39c12; color: #fff; border: none; padding: 12px; font-size: 14px; border-radius: 4px; cursor: pointer; font-weight: bold; width: 100%; margin-top: 5px; box-sizing: border-box; }
    button:hover { background: #e67e22; }
    .btn-secondary { background: #3498db; }
    .btn-secondary:hover { background: #2980b9; }
    .btn-success { background: #2ecc71; }
    .btn-success:hover { background: #27ae60; }
    .btn-danger { background: #e74c3c; }
    .btn-danger:hover { background: #c0392b; }
    .btn-mini { padding: 6px 12px; font-size: 12px; border-radius: 3px; border: none; cursor: pointer; color: #fff; font-weight: bold; }
    .form-group { margin-bottom: 15px; text-align: left; }
    label { display: block; margin-bottom: 5px; font-weight: bold; color: #bbb; font-size: 13px; }
    input, select { width: 100%; padding: 10px; background: #2d2d2d; color: #fff; border: 1px solid #444; border-radius: 4px; box-sizing: border-box; font-size: 14px; }
    select option { background: #2d2d2d; }
    .acc-badge-container { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; background: #222; padding: 8px; border-radius: 4px; border: 1px solid #444; }
    .acc-badge { background: #34495e; color: #fff; padding: 8px 12px; border-radius: 4px; font-size: 13px; cursor: pointer; display: flex; align-items: center; gap: 8px; font-weight: bold; }
    .acc-badge.active { background: #2ecc71; border: 1px solid #fff; }
    .acc-badge .del-acc { color: #e74c3c; font-weight: bold; cursor: pointer; margin-left: 5px; font-size: 15px; padding: 0 2px; }
    .list-card-item { background: #2d2d2d; padding: 12px; margin-bottom: 8px; border-radius: 4px; border: 1px solid #444; display: block !important; position: relative !important; width: 100% !important; box-sizing: border-box !important; text-align: left !important; min-height: 60px; }
    .worker-list-container { max-height: 200px; overflow-y: auto; background: #1a1a1a; padding: 8px; border-radius: 4px; border: 1px solid #333; margin-top: 10px; }
    .status-box { padding: 10px; border-radius: 4px; margin-bottom: 12px; font-size: 13px; font-weight: bold; background: #2d2d2d; color: #fff; }
    .status-box.success { background: #21472a; color: #2ecc71; }
    .status-box.warning { background: #4d3319; color: #e67e22; }
    .settings-box { background: #1a1a1a; padding: 15px; border-radius: 5px; border: 1px dashed #f39c12; margin-top: 15px; text-align: left; }
    .hidden { display: none; }
    .mt-15 { margin-top: 15px; }
    .mb-10 { margin-bottom: 10px; }
    .inline-flex { display: flex; gap: 8px; align-items: center; }
    .inline-flex button { width: auto; margin: 0; }
  </style>
  <script>
    let savedAccounts = [];
    let globalZoneList = [];
    let globalWorkerList = [];
    let globalEmailDestinations = [];

    document.addEventListener("DOMContentLoaded", () => {
      loadAccountsFromStorage();
    });

    function loadAccountsFromStorage() {
      const data = localStorage.getItem("cf_saved_accounts");
      savedAccounts = data ? JSON.parse(data) : [];
      renderAccountBadges();
      const activeIndex = localStorage.getItem("cf_active_acc_idx");
      if(activeIndex !== null && savedAccounts[activeIndex]) { pilihAkunEksplisit(activeIndex); }
    }

    function renderAccountBadges() {
      const container = document.getElementById("account-badges-box");
      if(savedAccounts.length === 0) {
        container.innerHTML = "<span style='color:#777; font-size:12px;'>Belum ada akun. Tambahkan akun di bawah.</span>";
        return;
      }
      container.innerHTML = "";
      const activeIndex = localStorage.getItem("cf_active_acc_idx");
      savedAccounts.forEach((acc, idx) => {
        const isActive = idx == activeIndex;
        container.innerHTML += \`
          <div class="acc-badge \${isActive ? 'active' : ''}" onclick="pilihAkunEksplisit(\${idx})">
            👤 \${acc.name || acc.email.split('@')[0]}
            <span class="del-acc" onclick="hapusAkunTersimpan(\${idx}, event)">×</span>
          </div>\`;
      });
    }

    function toggleAddAccountForm() {
      const form = document.getElementById("input-account-form");
      form.style.display = form.style.display === "block" ? "none" : "block";
    }

    function simpanAkunBaru() {
      const em = document.getElementById("main_em").value.trim();
      const ky = document.getElementById("main_ky").value.trim();
      if(!em || !ky) { alert("Isi Email sama API Key dulu!"); return; }
      const alias = prompt("Kasih nama panggilan / alias buat akun ini:", em.split('@')[0]);
      if(alias === null) return;
      const ada = savedAccounts.findIndex(a => a.email === em);
      if(ada !== -1) { savedAccounts[ada] = { name: alias, email: em, key: ky }; } 
      else { savedAccounts.push({ name: alias, email: em, key: ky }); }
      localStorage.setItem("cf_saved_accounts", JSON.stringify(savedAccounts));
      localStorage.setItem("cf_active_acc_idx", savedAccounts.length - 1);
      document.getElementById("main_em").value = ""; document.getElementById("main_ky").value = "";
      document.getElementById("input-account-form").style.display = "none";
      loadAccountsFromStorage(); loadAllData(); alert("Sip! Akun berhasil disimpan & diaktifkan!");
    }

    function pilihAkunEksplisit(idx) {
      localStorage.setItem("cf_active_acc_idx", idx);
      const acc = savedAccounts[idx];
      if(acc) { syncCredentialsToForms(acc.email, acc.key); renderAccountBadges(); loadAllData(); }
    }

    function hapusAkunTersimpan(idx, event) {
      event.stopPropagation(); if(!confirm("Hapus akun ini dari daftar?")) return;
      savedAccounts.splice(idx, 1); localStorage.setItem("cf_saved_accounts", JSON.stringify(savedAccounts));
      const activeIndex = localStorage.getItem("cf_active_acc_idx");
      if(activeIndex == idx) { localStorage.removeItem("cf_active_acc_idx"); syncCredentialsToForms("", ""); } 
      else if(activeIndex > idx) { localStorage.setItem("cf_active_acc_idx", activeIndex - 1); }
      loadAccountsFromStorage();
    }

    function syncCredentialsToForms(em, ky) {
      document.querySelectorAll(".hidden-em").forEach(el => el.value = em);
      document.querySelectorAll(".hidden-ky").forEach(el => el.value = ky);
    }

    function getActiveCredentials() {
      const activeIndex = localStorage.getItem("cf_active_acc_idx");
      if(activeIndex !== null && savedAccounts[activeIndex]) { return { em: savedAccounts[activeIndex].email, ky: savedAccounts[activeIndex].key }; }
      return { em: "", ky: "" };
    }

    function loadAllData() {
      const { em, ky } = getActiveCredentials(); if(!em || !ky) return;
      syncCredentialsToForms(em, ky); loadZoneList(); loadWorkerList(); loadEmailDestinations();
    }

    // --- LOAD ZONES ---
    async function loadZoneList() {
      const { em, ky } = getActiveCredentials(); if(!em || !ky) return;
      const fd = new FormData(); fd.append("cf_email", em); fd.append("cf_api_key", ky);
      const res = await fetch("/list-zones", { method: "POST", body: fd });
      if(res.ok) {
        globalZoneList = await res.json();
        const select = document.getElementById("email_zone_select");
        select.innerHTML = "<option value=''>-- Pilih Domain Target --</option>";
        globalZoneList.forEach(z => { select.innerHTML += \`<option value="\${z.id}">\${z.name}</option>\`; });
      }
    }

    // --- LOAD WORKERS ---
    async function loadWorkerList() {
      const { em, ky } = getActiveCredentials(); if(!em || !ky) return;
      const fd = new FormData(); fd.append("cf_email", em); fd.append("cf_api_key", ky);
      const res = await fetch("/list-workers", { method: "POST", body: fd });
      if(res.ok) {
        globalWorkerList = await res.json();
        const selectWorker = document.getElementById("email_catchall_worker_select");
        selectWorker.innerHTML = "<option value=''>-- Pilih Worker Tujuan --</option>";
        globalWorkerList.forEach(w => { selectWorker.innerHTML += \`<option value="\${w}">\${w}</option>\`; });
      }
    }

    // --- EMAIL DESTINATIONS ---
    async function loadEmailDestinations() {
      const { em, ky } = getActiveCredentials(); if(!em || !ky) return;
      const listContainer = document.getElementById("email-destinations-list-box");
      listContainer.innerHTML = "Loading email list...";
      const fd = new FormData(); fd.append("cf_email", em); fd.append("cf_api_key", ky);
      const res = await fetch("/list-email-destinations", { method: "POST", body: fd });
      if(res.ok) {
        globalEmailDestinations = await res.json();
        listContainer.innerHTML = globalEmailDestinations.length === 0 ? "Belum ada destinasi email terdaftar." : "";
        globalEmailDestinations.forEach(d => {
          const statusBadge = d.verified ? '<span style="color:#2ecc71; font-weight:bold;">[Verified]</span>' : '<span style="color:#e67e22; font-weight:bold;">[Pending Verification]</span>';
          listContainer.innerHTML += \`
            <div class="list-card-item" style="padding-right: 85px;">
              <div style="font-weight:bold; color:#fff;">\${d.email}</div>
              <div style="font-size:12px; margin-top:3px;">Status: \${statusBadge}</div>
              <button onclick="deleteEmailDestination('\${d.id}')" class="btn-mini btn-danger" style="position:absolute; right:10px; top:50%; transform:translateY(-50%); width:auto; margin:0;">Hapus</button>
            </div>\`;
        });
        updateEmailForwardSelect();
      }
    }

    async function addEmailDestination() {
      const { em, ky } = getActiveCredentials(); if(!em || !ky) return;
      syncCredentialsToForms(em, ky);
      const fd = new FormData(document.getElementById("email-destination-register-form"));
      const res = await fetch("/add-email-destination", { method: "POST", body: fd });
      const data = await res.json(); alert(data.msg);
      if(data.success) { document.getElementById("email_address_input").value = ""; loadEmailDestinations(); }
    }

    async function deleteEmailDestination(id) {
      if(!confirm("Hapus destinasi email ini?")) return;
      const { em, ky } = getActiveCredentials();
      const fd = new FormData(); fd.append("cf_email", em); fd.append("cf_api_key", ky); fd.append("address_id", id);
      const res = await fetch("/delete-email-destination", { method: "POST", body: fd });
      if(res.ok) { alert("Destinasi terhapus!"); loadEmailDestinations(); }
    }

    function updateEmailForwardSelect() {
      const select = document.getElementById("email_catchall_forward_select");
      select.innerHTML = "<option value=''>-- Pilih Email Forwarding Terverifikasi --</option>";
      globalEmailDestinations.forEach(d => {
        if(d.verified) { select.innerHTML += \`<option value="\${d.email}">\${d.email}</option>\`; }
      });
    }

    // --- EMAIL ROUTING MAIN CONFIG ---
    async function loadEmailRoutingMainData() {
      const zoneId = document.getElementById("email_zone_select").value;
      const mainContainer = document.getElementById("email-routing-zone-container");
      const statusBox = document.getElementById("email-routing-mx-status-box");
      const settingsBox = document.getElementById("email-catchall-settings-box");
      if(!zoneId) { mainContainer.style.display = "none"; return; }
      
      mainContainer.style.display = "block";
      statusBox.innerHTML = "Mengecek status...";
      statusBox.className = "status-box";
      settingsBox.style.display = "none";

      const { em, ky } = getActiveCredentials();
      const fd = new FormData(); fd.append("cf_email", em); fd.append("cf_api_key", ky); fd.append("zone_id", zoneId);

      // get settings
      const settingsRes = await fetch("/get-email-settings", { method: "POST", body: fd });
      if(settingsRes.ok) {
        const sData = await settingsRes.json();
        if(sData.success && sData.result) {
          const status = sData.result.status;
          if(status === "ready") {
            statusBox.innerHTML = "✅ STATUS DOMAIN PERUTEAN: MX Record Siap & Aktif Sepenuhnya!";
            statusBox.className = "status-box success";
            document.getElementById("email-mx-setup-btn-box").style.display = "none";
          } else {
            statusBox.innerHTML = \`⚠️ STATUS DOMAIN PERUTEAN: Belum Siap (\${status}). MX Records belum dikonfigurasi.\`;
            statusBox.className = "status-box warning";
            document.getElementById("email-mx-setup-btn-box").style.display = "block";
          }
        }
      }

      // get catch-all
      const catchallRes = await fetch("/get-email-catchall", { method: "POST", body: fd });
      if(catchallRes.ok) {
        const cData = await catchallRes.json();
        settingsBox.style.display = "block";
        if(cData.success && cData.result) {
          document.getElementById("email_catchall_enabled").value = cData.result.enabled ? "true" : "false";
          if(cData.result.actions && cData.result.actions.length > 0) {
            const mainAction = cData.result.actions[0];
            document.getElementById("email_catchall_action").value = mainAction.type;
            handleEmailActionChange();
            if(mainAction.type === "worker") {
              document.getElementById("email_catchall_worker_select").value = mainAction.value[0] || "";
            } else {
              document.getElementById("email_catchall_forward_select").value = mainAction.value[0] || "";
            }
          }
        } else {
          document.getElementById("email_catchall_enabled").value = "false";
          document.getElementById("email_catchall_action").value = "forward";
          handleEmailActionChange();
        }
      }
    }

    function handleEmailActionChange() {
      const actionType = document.getElementById("email_catchall_action").value;
      document.getElementById("catchall-worker-box").style.display = actionType === "worker" ? "block" : "none";
      document.getElementById("catchall-forward-box").style.display = actionType === "forward" ? "block" : "none";
    }

    async function setupCloudflareMxRecordsAutomatically() {
      const zoneId = document.getElementById("email_zone_select").value; if(!zoneId) return;
      if(!confirm("Sistem bakal pasang & setting DNS MX/SPF Cloudflare otomatis. Lanjut?")) return;
      const { em, ky } = getActiveCredentials();
      const fd = new FormData(); fd.append("cf_email", em); fd.append("cf_api_key", ky); fd.append("zone_id", zoneId);
      const res = await fetch("/enable-email-routing", { method: "POST", body: fd });
      const data = await res.json(); alert(data.msg); loadEmailRoutingMainData();
    }

    async function saveEmailCatchAllConfig() {
      const zoneId = document.getElementById("email_zone_select").value; if(!zoneId) return;
      const { em, ky } = getActiveCredentials();
      const fd = new FormData();
      fd.append("cf_email", em); fd.append("cf_api_key", ky); fd.append("zone_id", zoneId);
      fd.append("catchall_enabled", document.getElementById("email_catchall_enabled").value);
      const actionType = document.getElementById("email_catchall_action").value;
      fd.append("catchall_action", actionType);
      const target = actionType === "worker" ? document.getElementById("email_catchall_worker_select").value : document.getElementById("email_catchall_forward_select").value;
      if(!target) { alert("Pilih target dulu!"); return; }
      fd.append("catchall_target", target);
      const res = await fetch("/update-email-catchall", { method: "POST", body: fd });
      const data = await res.json(); alert(data.msg);
    }
  </script>
</head>
<body>
<div class="container">
  <h2>✉️ Cloudflare Email Routing Tools</h2>

  <!-- AKUN -->
  <button onclick="toggleAddAccountForm()" class="btn-secondary" style="margin-bottom:10px;">➕ Tambah Akun</button>
  <div id="input-account-form" class="hidden">
    <div class="flex-inputs">
      <input type="email" id="main_em" placeholder="Email Cloudflare">
      <input type="text" id="main_ky" placeholder="Global API Key">
    </div>
    <button onclick="simpanAkunBaru()" class="btn-success" style="padding:8px; font-size:12px;">💾 Simpan & Aktifkan</button>
  </div>

  <div class="cred-box">
    <label style="color:#3498db; margin-bottom:5px;">👥 Akun Aktif:</label>
    <div id="account-badges-box" class="acc-badge-container">Loading akun...</div>
  </div>

  <!-- Pilih Domain -->
  <div class="form-group">
    <label>Pilih Domain Utama Target:</label>
    <select id="email_zone_select" onchange="loadEmailRoutingMainData()">
      <option value="">-- Pilih Domain --</option>
    </select>
  </div>

  <div id="email-routing-zone-container" style="display:none;">
    <div id="email-routing-mx-status-box" class="status-box">Mengecek...</div>
    <div id="email-mx-setup-btn-box" style="margin-bottom:15px; display:none;">
      <button onclick="setupCloudflareMxRecordsAutomatically()" class="btn-secondary" style="background:#e67e22;">⚡ Pasang MX & SPF Records Cloudflare Otomatis</button>
    </div>

    <!-- Daftar Destinasi -->
    <h3 style="color:#3498db; text-align:left;">📬 Daftar Destinasi Email</h3>
    <form id="email-destination-register-form" onsubmit="event.preventDefault(); addEmailDestination();" style="background:#1a1a1a; padding:12px; border-radius:4px; margin-bottom:10px;">
      <input type="hidden" name="cf_email" class="hidden-em">
      <input type="hidden" name="cf_api_key" class="hidden-ky">
      <div class="flex-inputs">
        <input type="email" id="email_address_input" name="email_address" class="lower-input" placeholder="emailpribadigua@gmail.com" required>
        <button type="submit" class="btn-secondary" style="width:auto; padding:0 15px; margin:0;">Daftarkan</button>
      </div>
    </form>
    <div id="email-destinations-list-box" class="worker-list-container" style="max-height:150px; margin-bottom:20px;">Load list destinasi...</div>

    <!-- Catch-All Settings -->
    <div id="email-catchall-settings-box" class="settings-box" style="display:none;">
      <h4 style="color:#f39c12; margin:0 0 15px 0;">⚙️ Konfigurasi Catch-All</h4>
      <div class="form-group">
        <label>Status Catch-All:</label>
        <select id="email_catchall_enabled">
          <option value="true">ON (Aktif)</option>
          <option value="false">OFF (Nonaktif)</option>
        </select>
      </div>
      <div class="form-group">
        <label>Aksi:</label>
        <select id="email_catchall_action" onchange="handleEmailActionChange()">
          <option value="forward">Forward ke alamat tujuan</option>
          <option value="worker">Kirim ke Worker</option>
        </select>
      </div>
      <div class="form-group" id="catchall-worker-box" style="display:none;">
        <label>Pilih Target Worker:</label>
        <select id="email_catchall_worker_select"></select>
      </div>
      <div class="form-group" id="catchall-forward-box">
        <label>Pilih Email Forwarding Terverifikasi:</label>
        <select id="email_catchall_forward_select"></select>
      </div>
      <button onclick="saveEmailCatchAllConfig()" class="btn-success">💾 Simpan Pengaturan Catch-All</button>
    </div>
  </div>

  <p style="font-size:12px; color:#666; text-align:center; margin-top:30px;">Dibuat untuk memudahkan manajemen Email Routing Cloudflare.</p>
</div>
</body>
</html>
  `;
}