<!DOCTYPE html>
<html lang="es" class="dark">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cloudflare DNS &amp; DDNS Manager</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          colors: {
            brand: '#f38020',
            brandDark: '#d96c14',
            haDark: '#1c1d21',
            haCard: '#24272d',
            haBorder: '#363a45'
          }
        }
      }
    }
  </script>
  <style>
    body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
    .custom-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
    .custom-scroll::-webkit-scrollbar-thumb { background: #4a4f5c; border-radius: 4px; }
  </style>
</head>
<body class="bg-haDark text-gray-100 min-h-screen p-3 md:p-6 custom-scroll">
  <div class="max-w-6xl mx-auto space-y-4">

    <!-- Header & Action Bar -->
    <header class="bg-haCard border border-haBorder rounded-xl p-4 shadow-lg flex flex-col md:flex-row items-center justify-between gap-4">
      <div class="flex items-center gap-3.5">
        <div class="w-11 h-11 rounded-xl bg-orange-500/10 border border-orange-500/30 flex items-center justify-center text-brand text-2xl">
          <i class="fa-brands fa-cloudflare"></i>
        </div>
        <div>
          <h1 class="text-lg md:text-xl font-bold flex items-center gap-2">
            Cloudflare DNS &amp; DDNS Manager
            <span class="text-xs bg-emerald-500/20 text-emerald-400 px-2 py-0.5 rounded-full border border-emerald-500/30 font-semibold">Multi-Zona</span>
          </h1>
          <p class="text-xs text-gray-400 mt-0.5">Gesti&oacute;n integral de registros DNS y auto-actualizaci&oacute;n de IP de fibra</p>
        </div>
      </div>

      <div class="flex flex-wrap items-center gap-2.5 w-full md:w-auto justify-end">
        <div class="bg-haDark/80 border border-haBorder px-3.5 py-1.5 rounded-lg flex items-center gap-2">
          <span class="text-xs text-gray-400 font-medium">IP Fibra:</span>
          <span id="public-ip" class="text-xs font-mono font-bold text-amber-400 flex items-center gap-1.5">
            <i class="fa-solid fa-spinner fa-spin text-xs"></i>
          </span>
        </div>
        <button onclick="openCreateModal()" class="bg-emerald-600 hover:bg-emerald-500 text-white text-xs font-semibold px-3 py-1.5 rounded-lg flex items-center gap-1.5 shadow transition-all active:scale-95">
          <i class="fa-solid fa-plus"></i>
          <span>Nuevo Registro</span>
        </button>
        <button id="btn-update-now" onclick="forceUpdateNow()" class="bg-gradient-to-r from-brand to-brandDark hover:from-orange-500 hover:to-orange-600 text-white text-xs font-semibold px-3 py-1.5 rounded-lg flex items-center gap-1.5 shadow transition-all active:scale-95">
          <i class="fa-solid fa-rotate"></i>
          <span>Forzar Actualizaci&oacute;n</span>
        </button>
      </div>
    </header>

    <!-- Zone Tabs -->
    <div class="bg-haCard border border-haBorder rounded-xl p-3 shadow-md">
      <div class="flex items-center justify-between pb-2 border-b border-haBorder/60 px-1">
        <span class="text-xs font-bold text-gray-400 uppercase tracking-wider flex items-center gap-1.5">
          <i class="fa-solid fa-layer-group text-brand"></i> Selecciona Zona Cloudflare
        </span>
        <span id="total-monitored-badge" class="text-xs bg-blue-500/20 text-blue-300 px-2.5 py-0.5 rounded-full border border-blue-500/30 font-medium">
          0 registros en DDNS
        </span>
      </div>
      <div id="zone-tabs" class="flex flex-wrap gap-2 pt-2.5">
        <!-- Injected via JS -->
      </div>
    </div>

    <!-- Active Zone Table Card -->
    <div class="bg-haCard border border-haBorder rounded-xl shadow-lg overflow-hidden">
      <div class="p-3.5 border-b border-haBorder flex flex-col sm:flex-row items-center justify-between gap-3">
        <div class="flex items-center gap-2">
          <i class="fa-solid fa-globe text-brand"></i>
          <h2 id="active-zone-title" class="font-bold text-sm text-gray-100">Cargando registros...</h2>
        </div>
        <div class="flex items-center gap-2 w-full sm:w-auto">
          <select id="type-filter" onchange="filterRecords()" class="bg-haDark border border-haBorder rounded-lg px-2.5 py-1.5 text-xs text-gray-200 focus:outline-none focus:border-brand">
            <option value="ALL">Todos los Tipos</option>
            <option value="A">Solo A</option>
            <option value="CNAME">Solo CNAME</option>
            <option value="TXT">Solo TXT</option>
            <option value="MX">Solo MX</option>
          </select>
          <div class="relative w-full sm:w-56">
            <i class="fa-solid fa-magnifying-glass absolute left-3 top-2 text-gray-400 text-xs"></i>
            <input type="text" id="search-input" oninput="filterRecords()" placeholder="Buscar subdominio..." class="w-full bg-haDark border border-haBorder rounded-lg pl-8 pr-3 py-1.5 text-xs text-gray-200 placeholder-gray-500 focus:outline-none focus:border-brand">
          </div>
        </div>
      </div>

      <div class="overflow-x-auto">
        <table class="w-full text-left text-xs border-collapse table-fixed">
          <thead>
            <tr class="bg-haDark/60 text-gray-400 uppercase text-[11px] border-b border-haBorder">
              <th class="py-2.5 px-3 w-[27%]">Subdominio / Registro</th>
              <th class="py-2.5 px-3 w-[10%]">Tipo</th>
              <th class="py-2.5 px-3 w-[33%]">Destino / Contenido</th>
              <th class="py-2.5 px-3 w-[12%] text-center">Proxy</th>
              <th class="py-2.5 px-3 w-[10%] text-center">DDNS Auto-IP</th>
              <th class="py-2.5 px-3 w-[8%] text-right">Acciones</th>
            </tr>
          </thead>
          <tbody id="records-table-body" class="divide-y divide-haBorder/40 text-gray-300">
            <tr>
              <td colspan="6" class="py-8 text-center text-gray-400">
                <i class="fa-solid fa-circle-notch fa-spin text-lg text-brand mb-2"></i>
                <p>Cargando registros desde Cloudflare API...</p>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

  </div>

  <!-- Create Record Modal -->
  <div id="modal-create" class="fixed inset-0 bg-black/70 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
    <div class="bg-haCard border border-haBorder rounded-2xl max-w-lg w-full p-5 shadow-2xl space-y-4">
      <div class="flex items-center justify-between border-b border-haBorder pb-2.5">
        <h3 class="text-sm font-bold text-gray-100 flex items-center gap-2">
          <i class="fa-solid fa-plus-circle text-emerald-400"></i> A&ntilde;adir Nuevo Registro DNS
        </h3>
        <button onclick="closeModal('modal-create')" class="text-gray-400 hover:text-gray-200"><i class="fa-solid fa-xmark text-lg"></i></button>
      </div>
      <div class="space-y-3 text-xs">
        <div>
          <label class="block text-gray-400 font-medium mb-1">Zona Cloudflare</label>
          <input type="text" id="create-zone-name" readonly class="w-full bg-haDark border border-haBorder rounded-lg px-3 py-1.5 text-gray-300 font-mono">
        </div>
        <div class="grid grid-cols-3 gap-3">
          <div>
            <label class="block text-gray-400 font-medium mb-1">Tipo</label>
            <select id="create-type" onchange="onTypeChange('create')" class="w-full bg-haDark border border-haBorder rounded-lg px-3 py-1.5 text-gray-200 focus:border-brand">
              <option value="A">A</option>
              <option value="CNAME">CNAME</option>
              <option value="TXT">TXT</option>
              <option value="MX">MX</option>
            </select>
          </div>
          <div class="col-span-2">
            <label class="block text-gray-400 font-medium mb-1">Nombre (ej: vpn o @ para ra&iacute;z)</label>
            <input type="text" id="create-name" placeholder="subdominio" class="w-full bg-haDark border border-haBorder rounded-lg px-3 py-1.5 text-gray-200 focus:border-brand font-mono">
          </div>
        </div>
        <div>
          <div class="flex items-center justify-between mb-1">
            <label class="text-gray-400 font-medium">Contenido / IP Destino</label>
            <button type="button" onclick="fillMyIp('create-content')" class="text-[11px] text-amber-400 hover:underline">
              <i class="fa-solid fa-wand-magic-sparkles"></i> Usar mi IP Fibra
            </button>
          </div>
          <input type="text" id="create-content" placeholder="ej: 79.116.6.156 o destino.com" class="w-full bg-haDark border border-haBorder rounded-lg px-3 py-1.5 text-gray-200 focus:border-brand font-mono">
        </div>
        <div id="create-proxied-box" class="flex items-center justify-between bg-haDark/60 p-2.5 rounded-lg border border-haBorder">
          <div>
            <div class="font-semibold text-gray-200">Proxy Cloudflare (Nube Naranja)</div>
            <div class="text-[11px] text-gray-400">Protecci&oacute;n DDoS y CDN de Cloudflare</div>
          </div>
          <input type="checkbox" id="create-proxied" checked class="w-4 h-4 accent-brand cursor-pointer">
        </div>
        <div id="create-ddns-box" class="flex items-center justify-between bg-haDark/60 p-2.5 rounded-lg border border-haBorder">
          <div>
            <div class="font-semibold text-emerald-400">Auto-Actualizar DDNS</div>
            <div class="text-[11px] text-gray-400">Actualizar este registro si cambia la IP de tu fibra</div>
          </div>
          <input type="checkbox" id="create-ddns" class="w-4 h-4 accent-emerald-500 cursor-pointer">
        </div>
      </div>
      <div class="flex justify-end gap-2 pt-2 border-t border-haBorder">
        <button onclick="closeModal('modal-create')" class="px-3.5 py-1.5 bg-haDark border border-haBorder rounded-lg text-gray-300 hover:bg-gray-800 text-xs font-semibold">Cancelar</button>
        <button onclick="submitCreateRecord()" class="px-3.5 py-1.5 bg-emerald-600 hover:bg-emerald-500 text-white rounded-lg text-xs font-semibold shadow">Guardar Registro</button>
      </div>
    </div>
  </div>

  <!-- Edit Record Modal -->
  <div id="modal-edit" class="fixed inset-0 bg-black/70 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
    <div class="bg-haCard border border-haBorder rounded-2xl max-w-lg w-full p-5 shadow-2xl space-y-4">
      <div class="flex items-center justify-between border-b border-haBorder pb-2.5">
        <h3 class="text-sm font-bold text-gray-100 flex items-center gap-2">
          <i class="fa-solid fa-pen-to-square text-brand"></i> Editar Registro DNS
        </h3>
        <button onclick="closeModal('modal-edit')" class="text-gray-400 hover:text-gray-200"><i class="fa-solid fa-xmark text-lg"></i></button>
      </div>
      <input type="hidden" id="edit-record-id">
      <div class="space-y-3 text-xs">
        <div class="grid grid-cols-3 gap-3">
          <div>
            <label class="block text-gray-400 font-medium mb-1">Tipo</label>
            <input type="text" id="edit-type" readonly class="w-full bg-haDark border border-haBorder rounded-lg px-3 py-1.5 text-gray-300 font-mono">
          </div>
          <div class="col-span-2">
            <label class="block text-gray-400 font-medium mb-1">Nombre Completo</label>
            <input type="text" id="edit-name" class="w-full bg-haDark border border-haBorder rounded-lg px-3 py-1.5 text-gray-200 focus:border-brand font-mono">
          </div>
        </div>
        <div>
          <div class="flex items-center justify-between mb-1">
            <label class="text-gray-400 font-medium">Contenido / IP Destino</label>
            <button type="button" onclick="fillMyIp('edit-content')" class="text-[11px] text-amber-400 hover:underline">
              <i class="fa-solid fa-wand-magic-sparkles"></i> Usar mi IP Fibra
            </button>
          </div>
          <input type="text" id="edit-content" class="w-full bg-haDark border border-haBorder rounded-lg px-3 py-1.5 text-gray-200 focus:border-brand font-mono">
        </div>
        <div id="edit-proxied-box" class="flex items-center justify-between bg-haDark/60 p-2.5 rounded-lg border border-haBorder">
          <div>
            <div class="font-semibold text-gray-200">Proxy Cloudflare (Nube Naranja)</div>
            <div class="text-[11px] text-gray-400">Protecci&oacute;n DDoS y CDN de Cloudflare</div>
          </div>
          <input type="checkbox" id="edit-proxied" class="w-4 h-4 accent-brand cursor-pointer">
        </div>
      </div>
      <div class="flex justify-end gap-2 pt-2 border-t border-haBorder">
        <button onclick="closeModal('modal-edit')" class="px-3.5 py-1.5 bg-haDark border border-haBorder rounded-lg text-gray-300 hover:bg-gray-800 text-xs font-semibold">Cancelar</button>
        <button onclick="submitEditRecord()" class="px-3.5 py-1.5 bg-brand hover:bg-orange-500 text-white rounded-lg text-xs font-semibold shadow">Actualizar</button>
      </div>
    </div>
  </div>

  <!-- Toast Notification -->
  <div id="toast" class="fixed bottom-5 right-5 z-50 transform translate-y-20 opacity-0 transition-all duration-300 bg-gray-900 border border-brand text-white px-4 py-3 rounded-xl shadow-2xl flex items-center gap-3 text-xs">
    <i id="toast-icon" class="fa-solid fa-circle-check text-emerald-400 text-base"></i>
    <span id="toast-msg">Notificaci&oacute;n</span>
  </div>

  <script>
    const API_URL = 'http://192.168.1.120:8124/api';
    let fullState = null;
    let currentZoneIndex = 0;

    async function loadData() {
      try {
        const res = await fetch(`${API_URL}/status`);
        fullState = await res.json();
        renderUI();
      } catch (err) {
        showToast('Error conectando con el servicio Cloudflare Manager', true);
        console.error(err);
      }
    }

    function renderUI() {
      if (!fullState) return;

      document.getElementById('public-ip').innerHTML = `<i class="fa-solid fa-network-wired text-xs"></i> ${fullState.public_ip}`;

      let totalMonitored = 0;
      fullState.zones.forEach(z => totalMonitored += z.monitored_count);
      document.getElementById('total-monitored-badge').innerText = `${totalMonitored} registros en DDNS`;

      // Render Zone Tabs
      const tabsContainer = document.getElementById('zone-tabs');
      tabsContainer.innerHTML = '';

      fullState.zones.forEach((zone, idx) => {
        const isActive = idx === currentZoneIndex;
        const btn = document.createElement('button');
        btn.className = `px-3 py-1 rounded-lg text-xs font-semibold flex items-center gap-1.5 border transition-all ${
          isActive
            ? 'bg-brand/20 border-brand text-orange-300 shadow'
            : 'bg-haDark/70 border-haBorder text-gray-400 hover:text-gray-200 hover:border-gray-600'
        }`;
        btn.innerHTML = `
          <span>${zone.name}</span>
          ${zone.monitored_count > 0 ? `<span class="bg-brand text-white text-[10px] px-1.5 py-0.2 rounded-full font-bold">${zone.monitored_count}</span>` : ''}
        `;
        btn.onclick = () => {
          currentZoneIndex = idx;
          renderUI();
        };
        tabsContainer.appendChild(btn);
      });

      renderActiveZoneRecords();
    }

    function renderActiveZoneRecords() {
      const zone = fullState.zones[currentZoneIndex];
      if (!zone) return;

      document.getElementById('active-zone-title').innerText = `Zona: ${zone.name} (${zone.records.length} registros)`;

      const tbody = document.getElementById('records-table-body');
      tbody.innerHTML = '';

      if (zone.records.length === 0) {
        tbody.innerHTML = `<tr><td colspan="6" class="py-6 text-center text-gray-400">No hay registros en esta zona.</td></tr>`;
        return;
      }

      zone.records.forEach(r => {
        const tr = document.createElement('tr');
        tr.className = 'hover:bg-haDark/40 transition-colors record-row';
        tr.dataset.name = r.name.toLowerCase();
        tr.dataset.type = r.type;

        const isOci = r.is_oci;
        const isCname = r.type === 'CNAME';
        const isA = r.type === 'A';
        const ociBadge = isOci ? `<span class="ml-1.5 text-[10px] bg-purple-500/20 text-purple-300 border border-purple-500/30 px-1.5 py-0.5 rounded font-mono font-semibold">⚡ OCI</span>` : '';
        
        const proxyBadge = r.proxied 
          ? `<span class="inline-flex items-center gap-1 bg-orange-500/10 text-orange-400 border border-orange-500/30 px-2 py-0.5 rounded-full font-semibold"><i class="fa-solid fa-cloud text-[10px]"></i> Proxied</span>`
          : `<span class="inline-flex items-center gap-1 bg-gray-500/10 text-gray-400 border border-gray-500/30 px-2 py-0.5 rounded-full font-semibold"><i class="fa-solid fa-cloud text-[10px]"></i> DNS Only</span>`;

        let ddnsCell = '';
        if (isCname) {
          ddnsCell = `
            <span class="inline-flex items-center gap-1 bg-blue-500/10 text-blue-300 border border-blue-500/20 px-2 py-0.5 rounded text-[11px] font-medium" title="Este CNAME apunta a ${r.content}. Hereda la IP automáticamente.">
              <i class="fa-solid fa-link text-[10px]"></i> Hereda IP
            </span>
          `;
        } else if (isA) {
          ddnsCell = `
            <button id="btn-toggle-${r.id}" onclick="toggleDDNS('${zone.name}', '${r.name}', ${!r.is_ddns}, ${isOci}, 'btn-toggle-${r.id}')" class="px-2.5 py-0.5 rounded-lg text-xs font-semibold transition-all border ${
              r.is_ddns
                ? 'bg-emerald-500/20 border-emerald-500/50 text-emerald-300 hover:bg-emerald-500/30'
                : 'bg-haDark border-haBorder text-gray-400 hover:text-gray-200 hover:border-gray-500'
            }">
              ${r.is_ddns ? '<i class="fa-solid fa-check mr-1"></i> ACTIVO' : '<i class="fa-solid fa-power-off mr-1"></i> OFF'}
            </button>
          `;
        } else {
          ddnsCell = `<span class="text-gray-500 text-[11px]">N/A</span>`;
        }

        tr.innerHTML = `
          <td class="py-2.5 px-3 font-mono font-medium text-gray-100 truncate" title="${r.name}">${r.name}</td>
          <td class="py-2.5 px-3"><span class="bg-gray-800 border border-gray-700 ${isCname ? 'text-cyan-300 border-cyan-500/30' : isA ? 'text-amber-300 border-amber-500/30' : 'text-gray-300'} px-1.5 py-0.5 rounded text-[11px] font-mono font-bold">${r.type}</span></td>
          <td class="py-2.5 px-3 font-mono text-gray-300 truncate" title="${r.content}">${r.content} ${ociBadge}</td>
          <td class="py-2.5 px-3 text-center">${proxyBadge}</td>
          <td class="py-2.5 px-3 text-center">${ddnsCell}</td>
          <td class="py-2.5 px-3 text-right space-x-1 whitespace-nowrap">
            <button onclick='openEditModal(${JSON.stringify(r)})' class="px-2 py-1 bg-haDark border border-haBorder text-gray-300 hover:text-white hover:border-gray-500 rounded text-xs" title="Editar"><i class="fa-solid fa-pen"></i></button>
            <button onclick="deleteRecord('${zone.id}', '${zone.name}', '${r.id}', '${r.name}')" class="px-2 py-1 bg-haDark border border-haBorder text-rose-400 hover:text-rose-300 hover:border-rose-500 rounded text-xs" title="Eliminar"><i class="fa-solid fa-trash"></i></button>
          </td>
        `;
        tbody.appendChild(tr);
      });
    }

    function filterRecords() {
      const query = document.getElementById('search-input').value.toLowerCase();
      const typeFilter = document.getElementById('type-filter').value;

      document.querySelectorAll('.record-row').forEach(row => {
        const matchesName = row.dataset.name.includes(query);
        const matchesType = typeFilter === 'ALL' || row.dataset.type === typeFilter;
        row.style.display = matchesName && matchesType ? '' : 'none';
      });
    }

    function fillMyIp(inputId) {
      if (fullState && fullState.public_ip) {
        document.getElementById(inputId).value = fullState.public_ip;
      }
    }

    function onTypeChange(prefix) {
      const type = document.getElementById(`${prefix}-type`).value;
      const isProxyable = ['A', 'CNAME'].includes(type);
      const isDdnsable = type === 'A';

      const proxiedBox = document.getElementById(`${prefix}-proxied-box`);
      if (proxiedBox) proxiedBox.style.display = isProxyable ? 'flex' : 'none';

      const ddnsBox = document.getElementById(`${prefix}-ddns-box`);
      if (ddnsBox) ddnsBox.style.display = isDdnsable ? 'flex' : 'none';
    }

    function openCreateModal() {
      const zone = fullState.zones[currentZoneIndex];
      document.getElementById('create-zone-name').value = zone.name;
      document.getElementById('create-name').value = '';
      document.getElementById('create-content').value = '';
      document.getElementById('create-type').value = 'A';
      document.getElementById('create-proxied').checked = true;
      document.getElementById('create-ddns').checked = false;
      onTypeChange('create');
      document.getElementById('modal-create').classList.remove('hidden');
    }

    function openEditModal(record) {
      document.getElementById('edit-record-id').value = record.id;
      document.getElementById('edit-type').value = record.type;
      document.getElementById('edit-name').value = record.name;
      document.getElementById('edit-content').value = record.content;
      document.getElementById('edit-proxied').checked = record.proxied;
      onTypeChange('edit');
      document.getElementById('modal-edit').classList.remove('hidden');
    }

    function closeModal(modalId) {
      document.getElementById(modalId).classList.add('hidden');
    }

    async function submitCreateRecord() {
      const zone = fullState.zones[currentZoneIndex];
      const type = document.getElementById('create-type').value;
      let name = document.getElementById('create-name').value.trim();
      const content = document.getElementById('create-content').value.trim();
      const proxied = document.getElementById('create-proxied').checked;
      const enable_ddns = document.getElementById('create-ddns').checked;

      if (!name || !content) {
        showToast('El nombre y el contenido son obligatorios', true);
        return;
      }

      if (name !== '@' && !name.endsWith(zone.name)) {
        name = `${name}.${zone.name}`;
      } else if (name === '@') {
        name = zone.name;
      }

      try {
        const res = await fetch(`${API_URL}/create_record`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ zone_id: zone.id, zone_name: zone.name, type, name, content, proxied, enable_ddns })
        });
        const data = await res.json();
        if (data.success) {
          showToast(`Registro ${name} creado con éxito`);
          closeModal('modal-create');
          loadData();
        } else {
          showToast(`Error: ${data.errors ? data.errors[0].message : 'Fallo al crear'}`, true);
        }
      } catch (err) {
        showToast('Error en la llamada API', true);
      }
    }

    async function submitEditRecord() {
      const zone = fullState.zones[currentZoneIndex];
      const record_id = document.getElementById('edit-record-id').value;
      const type = document.getElementById('edit-type').value;
      const name = document.getElementById('edit-name').value.trim();
      const content = document.getElementById('edit-content').value.trim();
      const proxied = document.getElementById('edit-proxied').checked;

      try {
        const res = await fetch(`${API_URL}/update_record`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ zone_id: zone.id, record_id, type, name, content, proxied })
        });
        const data = await res.json();
        if (data.success) {
          showToast(`Registro ${name} actualizado`);
          closeModal('modal-edit');
          loadData();
        } else {
          showToast(`Error: ${data.errors ? data.errors[0].message : 'Fallo al editar'}`, true);
        }
      } catch (err) {
        showToast('Error en la llamada API', true);
      }
    }

    async function deleteRecord(zone_id, zone_name, record_id, name) {
      if (!confirm(`¿Estás seguro de que deseas eliminar permanentemente el registro "${name}" de Cloudflare?`)) {
        return;
      }

      try {
        const res = await fetch(`${API_URL}/delete_record`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ zone_id, zone_name, record_id, name })
        });
        const data = await res.json();
        if (data.success) {
          showToast(`Registro ${name} eliminado`);
          loadData();
        } else {
          showToast('Error al eliminar registro', true);
        }
      } catch (err) {
        showToast('Error en la llamada API', true);
      }
    }

    async function toggleDDNS(zone_name, domain, newState, isOci, btnId) {
      if (newState && isOci) {
        if (!confirm(`⚠️ ¡Atención!\n\n"${domain}" apunta actualmente a tu servidor OCI en la nube (158.179.x.x).\n\nSi activas el auto-actualizador DDNS, apuntará a tu IP de fibra doméstica.\n\n¿Estás seguro de que deseas activarlo?`)) {
          return;
        }
      }

      const btn = document.getElementById(btnId);
      if (btn) {
        btn.innerHTML = `<i class="fa-solid fa-spinner fa-spin"></i>`;
        btn.disabled = true;
      }

      try {
        const res = await fetch(`${API_URL}/toggle_ddns`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ zone_name, domain, enabled: newState })
        });
        const data = await res.json();
        showToast(`Dominio ${domain} ${newState ? 'activado' : 'desactivado'} en DDNS`);
        loadData();
      } catch (err) {
        showToast('Error al modificar el dominio', true);
        if (btn) btn.disabled = false;
      }
    }

    async function forceUpdateNow() {
      const btn = document.getElementById('btn-update-now');
      btn.disabled = true;
      btn.innerHTML = `<i class="fa-solid fa-spinner fa-spin"></i> Actualizando...`;

      try {
        const res = await fetch(`${API_URL}/update_ip_now`, { method: 'POST' });
        const data = await res.json();
        showToast(`IP de fibra actualizada con éxito (${data.public_ip})`);
        loadData();
      } catch (err) {
        showToast('Error al forzar actualización', true);
      } finally {
        btn.disabled = false;
        btn.innerHTML = `<i class="fa-solid fa-rotate"></i> Forzar Actualización`;
      }
    }

    function showToast(msg, isError = false) {
      const toast = document.getElementById('toast');
      const icon = document.getElementById('toast-icon');
      const text = document.getElementById('toast-msg');

      text.innerText = msg;
      icon.className = isError ? 'fa-solid fa-circle-exclamation text-rose-400 text-base' : 'fa-solid fa-circle-check text-emerald-400 text-base';
      toast.className = 'fixed bottom-5 right-5 z-50 transform translate-y-0 opacity-100 transition-all duration-300 bg-gray-900 border border-brand text-white px-4 py-3 rounded-xl shadow-2xl flex items-center gap-3 text-xs';

      setTimeout(() => {
        toast.className = 'fixed bottom-5 right-5 z-50 transform translate-y-20 opacity-0 transition-all duration-300 bg-gray-900 border border-brand text-white px-4 py-3 rounded-xl shadow-2xl flex items-center gap-3 text-xs';
      }, 4000);
    }

    // Initial Load
    loadData();
    setInterval(loadData, 30000);
  </script>
</body>
</html>