
<!-- ===== EMAIL MARKETING ===== -->
<div class="page" id="page-email">
  <div class="ph">
    <div><div class="pt">Email Marketing</div><div class="ps">Mailchimp · Campañas · Audiencias · AVI</div></div>
    <button onclick="loadEmailData()" style="padding:5px 12px;border-radius:6px;font-size:12px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);cursor:pointer;font-family:var(--fb)">↻ Actualizar</button>
  </div>

  <!-- Estado sin cliente / sin creds -->
  <div id="em-no-client" style="display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center;gap:12px">
    <div style="font-size:44px">📧</div>
    <div style="font-family:var(--fh);font-size:18px;font-weight:700">Email Marketing</div>
    <div style="font-size:13px;color:var(--m);max-width:380px;line-height:1.7">Selecciona un cliente para ver sus métricas de Mailchimp: campañas enviadas, tasas de apertura, clics y audiencias.</div>
  </div>

  <div id="em-no-creds" style="display:none;flex-direction:column;align-items:center;justify-content:center;padding:50px 20px;text-align:center;gap:10px">
    <div style="font-size:40px">🔑</div>
    <div style="font-family:var(--fh);font-size:16px;font-weight:700">API key de Mailchimp no configurada</div>
    <div style="font-size:13px;color:var(--m);max-width:380px;line-height:1.7">Agrega la API key de Mailchimp en <strong>⚙ APIs</strong> para conectar las campañas de este cliente.</div>
    <button onclick="showPage('config')" style="padding:8px 20px;border-radius:7px;background:var(--p);border:none;color:#fff;font-size:13px;font-weight:600;cursor:pointer;font-family:var(--fb);margin-top:4px">⚙ Ir a APIs</button>
  </div>

  <!-- Contenido principal (oculto hasta cargar) -->
  <div id="em-main" style="display:none">

    <!-- TABS -->
    <div style="display:flex;gap:0;border-bottom:1px solid var(--br);margin-bottom:4px;overflow-x:auto">
      <button class="em-tab active" onclick="switchEMTab('dashboard',this)" style="padding:9px 16px;font-size:12px;color:var(--t);background:none;border:none;border-bottom:2px solid var(--p);cursor:pointer;font-family:var(--fb);white-space:nowrap">Dashboard</button>
      <button class="em-tab" onclick="switchEMTab('campanas',this)" style="padding:9px 16px;font-size:12px;color:var(--m);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;font-family:var(--fb);white-space:nowrap">Campañas</button>
      <button class="em-tab" onclick="switchEMTab('audiencias',this)" style="padding:9px 16px;font-size:12px;color:var(--m);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;font-family:var(--fb);white-space:nowrap">Audiencias</button>
      <button class="em-tab" onclick="switchEMTab('copys',this)" style="padding:9px 16px;font-size:12px;color:var(--m);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;font-family:var(--fb);white-space:nowrap">✦ Copys IA</button>
      <button class="em-tab" onclick="switchEMTab('estrategia',this)" style="padding:9px 16px;font-size:12px;color:var(--m);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;font-family:var(--fb);white-space:nowrap">✦ Estrategia AVI</button>
    </div>

    <!-- ═══ TAB: DASHBOARD ═══ -->
    <div class="em-panel" id="empanel-dashboard">

      <!-- Métricas resumen -->
      <div class="metrics" id="em-metrics" style="grid-template-columns:repeat(4,minmax(0,1fr))">
        <div class="metric">
          <div class="ml" data-tip="Total de suscriptores activos en la lista principal de Mailchimp"><div class="md" style="background:var(--p)"></div>Suscriptores</div>
          <div class="mv" id="em-members">—</div>
          <div class="mdelta" id="em-members-d" style="color:var(--m)"></div>
        </div>
        <div class="metric">
          <div class="ml" data-tip="Tasa de apertura promedio: porcentaje de destinatarios que abrieron el email"><div class="md" style="background:var(--b)"></div>Tasa de apertura</div>
          <div class="mv" id="em-open-rate">—</div>
          <div class="mdelta" id="em-open-rate-d" style="color:var(--m)"></div>
        </div>
        <div class="metric">
          <div class="ml" data-tip="Tasa de clics promedio: porcentaje de destinatarios que hicieron clic en algún enlace"><div class="md" style="background:var(--g)"></div>Tasa de clics</div>
          <div class="mv" id="em-click-rate">—</div>
          <div class="mdelta" id="em-click-rate-d" style="color:var(--m)"></div>
        </div>
        <div class="metric">
          <div class="ml" data-tip="Tasa de baja promedio: porcentaje de personas que se dieron de baja — referencia: <0.5% es saludable"><div class="md" style="background:var(--red)"></div>Tasa de baja</div>
          <div class="mv" id="em-unsub-rate">—</div>
          <div class="mdelta" id="em-unsub-rate-d" style="color:var(--m)"></div>
        </div>
      </div>

      <!-- Últimas 5 campañas (resumen) -->
      <div class="card">
        <div class="chd">
          <div class="ctit">📊 Últimas campañas</div>
          <button onclick="switchEMTab('campanas',document.querySelector('.em-tab:nth-child(2)'))" style="padding:4px 12px;border-radius:6px;font-size:11px;background:var(--bg3);border:1px solid var(--br2);color:var(--m);cursor:pointer;font-family:var(--fb)">Ver todas →</button>
        </div>
        <div style="overflow-x:auto">
          <table class="tbl" id="em-dash-camps" style="min-width:560px">
            <thead><tr><th>Campaña</th><th>Enviados</th><th>Apertura</th><th>Clics</th><th>Fecha</th></tr></thead>
            <tbody><tr><td colspan="5" style="text-align:center;color:var(--m);padding:18px">Cargando...</td></tr></tbody>
          </table>
        </div>
      </div>

      <!-- AVI resumen -->
      <div class="avi" id="em-avi-dash">
        <div class="avi-hd">
          <div class="avi-orb">✦</div>
          <div><div class="avi-name">AVI · Email Marketing</div><div class="avi-sub" id="em-avi-dash-sub">Análisis de rendimiento de campañas</div></div>
          <button onclick="emAVIquick('Analiza el rendimiento general de las campañas de email marketing de este cliente. Identifica tendencias en apertura y clics, y dame 3 recomendaciones concretas para mejorar los resultados')" style="margin-left:auto;padding:5px 12px;border-radius:7px;font-size:11px;background:rgba(155,127,244,.12);border:1px solid rgba(155,127,244,.25);color:var(--p);cursor:pointer;font-family:var(--fb)">✦ Analizar con AVI</button>
        </div>
        <div class="avi-row">
          <input class="avi-in" id="em-avi-q" placeholder="Pregunta sobre el rendimiento de tus emails..." onkeydown="if(event.key==='Enter')askEMAVI()">
          <button class="avi-send" onclick="askEMAVI()">Preguntar</button>
        </div>
        <div class="avi-resp" id="em-avi-resp-dash"></div>
      </div>
    </div>

    <!-- ═══ TAB: CAMPAÑAS ═══ -->
    <div class="em-panel" id="empanel-campanas" style="display:none">
      <div class="card">
        <div class="chd">
          <div class="ctit">Campañas enviadas <span id="em-camps-count" style="font-size:11px;color:var(--m);font-weight:400"></span></div>
          <button onclick="loadEmailCampaigns()" style="padding:4px 12px;border-radius:6px;font-size:11px;background:var(--bg3);border:1px solid var(--br2);color:var(--m);cursor:pointer;font-family:var(--fb)">↺ Actualizar</button>
        </div>
        <div style="overflow-x:auto">
          <table class="tbl" id="em-camps-table" style="min-width:700px">
            <thead><tr>
              <th>Campaña / Asunto</th>
              <th>Enviados</th>
              <th>Apertura %</th>
              <th>Clics %</th>
              <th>Aperturas</th>
              <th>Clics</th>
              <th>Fecha envío</th>
            </tr></thead>
            <tbody id="em-camps-body">
              <tr><td colspan="7" style="text-align:center;color:var(--m);padding:20px">Cargando campañas...</td></tr>
            </tbody>
          </table>
        </div>
        <div style="margin-top:12px">
          <button onclick="emAVIquick('Analiza la tabla de campañas enviadas. Identifica cuáles tienen mejor rendimiento en apertura y clics, y explica por qué crees que funcionaron mejor. Dame acciones concretas para replicar ese éxito')" class="btn-avi-analyze">✦ Analizar campañas con AVI</button>
          <div class="avi-resp" id="em-avi-resp-camps" style="display:none;margin-top:10px"></div>
        </div>
      </div>
    </div>

    <!-- ═══ TAB: AUDIENCIAS ═══ -->
    <div class="em-panel" id="empanel-audiencias" style="display:none">
      <div id="em-lists-wrap" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px">
        <div style="text-align:center;color:var(--m);font-size:13px;padding:30px;grid-column:1/-1">Cargando audiencias...</div>
      </div>
      <div style="margin-top:14px">
        <button onclick="emAVIquick('Analiza las audiencias/listas de Mailchimp de este cliente. Evalúa la salud de cada lista, identifica problemas (alta tasa de bajas, bajo engagement) y recomienda acciones para mejorar la calidad y el tamaño de la base de suscriptores')" class="btn-avi-analyze">✦ Analizar audiencias con AVI</button>
        <div class="avi-resp" id="em-avi-resp-aud" style="display:none;margin-top:10px"></div>
      </div>
    </div>

    <!-- ═══ TAB: COPYS IA ═══ -->
    <div class="em-panel" id="empanel-copys" style="display:none">
      <div class="avi">
        <div class="avi-hd">
          <div class="avi-orb">✦</div>
          <div><div class="avi-name">AVI · Generador de Copys</div><div class="avi-sub">Asuntos, cuerpos de email y secuencias automatizadas</div></div>
        </div>

        <!-- Accesos rápidos -->
        <div style="display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px">
          <button onclick="emAVIquick('Escribe 5 asuntos de email de alto impacto para el negocio de este cliente. Cada asunto debe: tener menos de 50 caracteres, generar curiosidad o urgencia, y ser natural (no clickbait). Incluye una variante con emoji y otra sin él')" style="padding:5px 10px;border-radius:7px;font-size:11px;background:rgba(155,127,244,.1);border:1px solid rgba(155,127,244,.2);color:var(--p);cursor:pointer;font-family:var(--fb)">📬 Asuntos impactantes</button>
          <button onclick="emAVIquick('Redacta un email de bienvenida completo para nuevos suscriptores de este cliente. Incluye: asunto atractivo, saludo personalizado, propuesta de valor clara, qué recibirán en futuros emails, y CTA. Tono profesional pero cercano')" style="padding:5px 10px;border-radius:7px;font-size:11px;background:rgba(155,127,244,.1);border:1px solid rgba(155,127,244,.2);color:var(--p);cursor:pointer;font-family:var(--fb)">👋 Email de bienvenida</button>
          <button onclick="emAVIquick('Crea una secuencia de 3 emails de nurturing para este cliente: Email 1 (día 1): Educativo / valor puro. Email 2 (día 4): Caso de éxito o testimonio. Email 3 (día 7): Oferta o CTA directo. Para cada email incluye asunto, preheader y cuerpo completo')" style="padding:5px 10px;border-radius:7px;font-size:11px;background:rgba(155,127,244,.1);border:1px solid rgba(155,127,244,.2);color:var(--p);cursor:pointer;font-family:var(--fb)">🔄 Secuencia nurturing</button>
          <button onclick="emAVIquick('Escribe un email promocional persuasivo para este cliente. Incluye: asunto urgente, preheader, hook de apertura, oferta irresistible con beneficios claros, prueba social, garantía (si aplica), y CTA repetido al menos 2 veces. Límite: 300 palabras')" style="padding:5px 10px;border-radius:7px;font-size:11px;background:rgba(155,127,244,.1);border:1px solid rgba(155,127,244,.2);color:var(--p);cursor:pointer;font-family:var(--fb)">🎯 Email promocional</button>
          <button onclick="emAVIquick('Diseña una estrategia de re-engagement para recuperar suscriptores inactivos de este cliente (sin aperturas en 90+ días). Propón: asunto de curiosidad, oferta especial para reactivar, y email de despedida con segunda oportunidad si no responden')" style="padding:5px 10px;border-radius:7px;font-size:11px;background:rgba(155,127,244,.1);border:1px solid rgba(155,127,244,.2);color:var(--p);cursor:pointer;font-family:var(--fb)">💤 Re-engagement</button>
          <button onclick="emAVIquick('Genera 3 variantes de preheader text (máx 100 caracteres cada uno) para complementar el asunto del email de este cliente. El preheader debe ampliar el asunto, crear curiosidad adicional y motivar la apertura')" style="padding:5px 10px;border-radius:7px;font-size:11px;background:rgba(155,127,244,.1);border:1px solid rgba(155,127,244,.2);color:var(--p);cursor:pointer;font-family:var(--fb)">👁 Preheaders</button>
        </div>

        <div class="avi-row">
          <input class="avi-in" id="em-copys-q" placeholder="Describe qué copy necesitas: asunto, bienvenida, secuencia, promo..." onkeydown="if(event.key==='Enter')askEMCopys()">
          <button class="avi-send" onclick="askEMCopys()">Generar</button>
        </div>
        <div class="avi-resp" id="em-copys-resp"></div>
      </div>
    </div>

    <!-- ═══ TAB: ESTRATEGIA AVI ═══ -->
    <div class="em-panel" id="empanel-estrategia" style="display:none">
      <div class="avi">
        <div class="avi-hd">
          <div class="avi-orb">✦</div>
          <div><div class="avi-name">AVI · Estrategia de Email Marketing</div><div class="avi-sub">Calendario, automatizaciones, segmentación y crecimiento de lista</div></div>
        </div>

        <div style="display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px">
          <button onclick="emAVIquick('Diseña una estrategia completa de email marketing para este cliente. Incluye: frecuencia de envíos recomendada, tipos de emails del mix (newsletters, promos, nurturing), segmentación de lista por comportamiento, 3 automatizaciones clave a implementar, y KPIs a medir mensualmente')" style="padding:5px 10px;border-radius:7px;font-size:11px;background:rgba(155,127,244,.1);border:1px solid rgba(155,127,244,.2);color:var(--p);cursor:pointer;font-family:var(--fb)">🗺️ Estrategia completa</button>
          <button onclick="emAVIquick('Crea un calendario editorial de email marketing para este cliente para el próximo mes. Define: semana 1-4, tipo de email cada semana, tema o campaña, objetivo y segmento de audiencia. Ajusta la frecuencia al historial de campañas enviadas')" style="padding:5px 10px;border-radius:7px;font-size:11px;background:rgba(155,127,244,.1);border:1px solid rgba(155,127,244,.2);color:var(--p);cursor:pointer;font-family:var(--fb)">📅 Calendario mensual</button>
          <button onclick="emAVIquick('Propón 5 ideas de segmentación avanzada para las listas de Mailchimp de este cliente. Para cada segmento: nombre, criterios de filtro en Mailchimp, tipo de email a enviar y beneficio esperado')" style="padding:5px 10px;border-radius:7px;font-size:11px;background:rgba(155,127,244,.1);border:1px solid rgba(155,127,244,.2);color:var(--p);cursor:pointer;font-family:var(--fb)">🎯 Segmentación avanzada</button>
          <button onclick="emAVIquick('Diseña 3 automatizaciones de Mailchimp para este cliente. Para cada automatización: nombre, trigger (evento que la activa), secuencia de emails con tiempos, objetivo y métricas de éxito. Prioriza las de mayor impacto en conversión')" style="padding:5px 10px;border-radius:7px;font-size:11px;background:rgba(155,127,244,.1);border:1px solid rgba(155,127,244,.2);color:var(--p);cursor:pointer;font-family:var(--fb)">⚡ Automatizaciones</button>
          <button onclick="emAVIquick('Crea un plan de crecimiento de lista para este cliente. Propón: 5 lead magnets adaptados al negocio, estrategias de captación (popup, landing, redes, etc.), técnicas de limpieza y mantenimiento de lista, y meta de suscriptores en 90 días')" style="padding:5px 10px;border-radius:7px;font-size:11px;background:rgba(155,127,244,.1);border:1px solid rgba(155,127,244,.2);color:var(--p);cursor:pointer;font-family:var(--fb)">📈 Crecimiento de lista</button>
          <button onclick="emAVIquick('Haz un diagnóstico completo del email marketing de este cliente basado en sus métricas actuales (tasa de apertura, clics, bajas). Compara con benchmarks del sector, identifica los 3 problemas principales y define el plan de acción con prioridad Alta/Media/Baja')" style="padding:5px 10px;border-radius:7px;font-size:11px;background:rgba(155,127,244,.1);border:1px solid rgba(155,127,244,.2);color:var(--p);cursor:pointer;font-family:var(--fb)">🔍 Diagnóstico y benchmarks</button>
        </div>

        <div class="avi-row">
          <input class="avi-in" id="em-strat-q" placeholder="Pregunta sobre estrategia de email marketing..." onkeydown="if(event.key==='Enter')askEMStrat()">
          <button class="avi-send" onclick="askEMStrat()">Preguntar</button>
        </div>
        <div class="avi-resp" id="em-strat-resp"></div>
      </div>
    </div>

  </div><!-- /em-main -->
</div>

<script>
// ── Estado ────────────────────────────────────────────────────────────────
let emCampaigns = [];
let emLists     = [];

function _emCsrf() {
  return document.querySelector('meta[name="dm-csrf"]')?.content || '';
}

async function _emPost(endpoint, payload) {
  const r = await fetch(endpoint, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': _emCsrf() },
    body: JSON.stringify(payload),
  });
  return r.json();
}

// ── Tab switching ─────────────────────────────────────────────────────────
function switchEMTab(tab, btn) {
  document.querySelectorAll('.em-tab').forEach(t => {
    t.style.color        = 'var(--m)';
    t.style.borderBottom = '2px solid transparent';
  });
  document.querySelectorAll('.em-panel').forEach(p => p.style.display = 'none');
  if (btn) {
    btn.style.color        = 'var(--t)';
    btn.style.borderBottom = '2px solid var(--p)';
  }
  document.getElementById('empanel-' + tab).style.display = 'block';
  if (tab === 'campanas'   && emCampaigns.length === 0) loadEmailCampaigns();
  if (tab === 'audiencias' && emLists.length === 0)     loadEmailAudiences();
}

// ── Carga principal ───────────────────────────────────────────────────────
async function loadEmailData() {
  if (!currentClient || currentClient === 'all') return;
  const nc = document.getElementById('em-no-client');
  const nd = document.getElementById('em-no-creds');
  const em = document.getElementById('em-main');
  if (nc) nc.style.display = 'none';
  if (nd) nd.style.display = 'none';
  if (em) em.style.display = 'none';

  try {
    const [camps, aud] = await Promise.all([
      _emPost('api/email-data.php', { action: 'campaigns', client_id: currentClient }),
      _emPost('api/email-data.php', { action: 'audience',  client_id: currentClient }),
    ]);

    if (!camps.ok && camps.error === 'no_creds') {
      if (nd) nd.style.display = 'flex';
      return;
    }
    if (em) em.style.display = 'block';
    if (camps.ok) {
      emCampaigns = camps.campaigns || [];
      renderEMDashCamps(emCampaigns.slice(0, 5));
      renderEMMetrics(emCampaigns);
    }
    if (aud.ok) {
      emLists = aud.lists || [];
      renderEMListMetrics(emLists);
    }
  } catch(e) {
    if (em) em.style.display = 'block';
  }
}

// ── Métricas resumen ──────────────────────────────────────────────────────
function renderEMMetrics(camps) {
  if (!camps.length) return;
  const avgOpen  = camps.reduce((s, c) => s + c.open_rate,  0) / camps.length;
  const avgClick = camps.reduce((s, c) => s + c.click_rate, 0) / camps.length;
  const el = id => document.getElementById(id);

  el('em-open-rate').textContent  = avgOpen.toFixed(1)  + '%';
  el('em-click-rate').textContent = avgClick.toFixed(1) + '%';

  const openOk  = avgOpen  >= 20;
  const clickOk = avgClick >= 2;
  el('em-open-rate-d').textContent  = openOk  ? '✓ Sobre benchmark (20%)' : '↓ Bajo benchmark (20%)';
  el('em-open-rate-d').style.color  = openOk  ? 'var(--g)' : 'var(--red)';
  el('em-click-rate-d').textContent = clickOk ? '✓ Sobre benchmark (2%)' : '↓ Bajo benchmark (2%)';
  el('em-click-rate-d').style.color = clickOk ? 'var(--g)' : 'var(--red)';
}

function renderEMListMetrics(lists) {
  if (!lists.length) return;
  const l   = lists[0];
  const el  = id => document.getElementById(id);
  el('em-members').textContent    = l.member_count.toLocaleString();
  el('em-members-d').textContent  = l.name;
  el('em-members-d').style.color  = 'var(--m)';
  el('em-unsub-rate').textContent = l.unsub_rate.toFixed(2) + '%';
  const unsubOk = l.unsub_rate < 0.5;
  el('em-unsub-rate-d').textContent = unsubOk ? '✓ Saludable (<0.5%)' : '↑ Alta tasa de baja';
  el('em-unsub-rate-d').style.color  = unsubOk ? 'var(--g)' : 'var(--red)';
}

// ── Tabla resumen dashboard ────────────────────────────────────────────────
function renderEMDashCamps(camps) {
  const tbody = document.querySelector('#em-dash-camps tbody');
  if (!tbody) return;
  if (!camps.length) {
    tbody.innerHTML = '<tr><td colspan="5" style="text-align:center;color:var(--m);padding:18px">Sin campañas enviadas</td></tr>';
    return;
  }
  tbody.innerHTML = camps.map(c => {
    const openC  = c.open_rate  >= 20 ? 'var(--g)' : c.open_rate  >= 10 ? 'var(--y)' : 'var(--red)';
    const clickC = c.click_rate >= 2  ? 'var(--g)' : c.click_rate >= 1  ? 'var(--y)' : 'var(--red)';
    return `<tr>
      <td><div style="font-weight:600;font-size:12px">${escapeHtml(c.title)}</div><div style="font-size:11px;color:var(--m)">${escapeHtml(c.subject)}</div></td>
      <td>${c.emails_sent.toLocaleString()}</td>
      <td style="color:${openC};font-weight:600">${c.open_rate}%</td>
      <td style="color:${clickC};font-weight:600">${c.click_rate}%</td>
      <td style="color:var(--m)">${emFmtDate(c.send_time)}</td>
    </tr>`;
  }).join('');
}

// ── Tabla campañas completa ────────────────────────────────────────────────
async function loadEmailCampaigns() {
  if (emCampaigns.length) { renderEMCampsTable(emCampaigns); return; }
  try {
    const d = await _emPost('api/email-data.php', { action: 'campaigns', client_id: currentClient });
    if (d.ok) { emCampaigns = d.campaigns || []; renderEMCampsTable(emCampaigns); }
  } catch(e) {}
}

function renderEMCampsTable(camps) {
  const count = document.getElementById('em-camps-count');
  if (count) count.textContent = '(' + camps.length + ')';
  const tbody = document.getElementById('em-camps-body');
  if (!tbody) return;
  if (!camps.length) {
    tbody.innerHTML = '<tr><td colspan="7" style="text-align:center;color:var(--m);padding:20px">Sin campañas enviadas</td></tr>';
    return;
  }
  tbody.innerHTML = camps.map(c => {
    const openC  = c.open_rate  >= 20 ? 'var(--g)' : c.open_rate  >= 10 ? 'var(--y)' : 'var(--red)';
    const clickC = c.click_rate >= 2  ? 'var(--g)' : c.click_rate >= 1  ? 'var(--y)' : 'var(--red)';
    return `<tr>
      <td><div style="font-weight:600;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${escapeHtml(c.title)}</div>
          <div style="font-size:11px;color:var(--m);max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${escapeHtml(c.subject)}</div></td>
      <td>${c.emails_sent.toLocaleString()}</td>
      <td style="color:${openC};font-weight:600">${c.open_rate}%</td>
      <td style="color:${clickC};font-weight:600">${c.click_rate}%</td>
      <td>${c.opens.toLocaleString()}</td>
      <td>${c.clicks.toLocaleString()}</td>
      <td style="color:var(--m);font-size:11px">${emFmtDate(c.send_time)}</td>
    </tr>`;
  }).join('');
}

// ── Audiencias ─────────────────────────────────────────────────────────────
async function loadEmailAudiences() {
  if (emLists.length) { renderEMLists(emLists); return; }
  try {
    const d = await _emPost('api/email-data.php', { action: 'audience', client_id: currentClient });
    if (d.ok) { emLists = d.lists || []; renderEMLists(emLists); }
  } catch(e) {}
}

function renderEMLists(lists) {
  const wrap = document.getElementById('em-lists-wrap');
  if (!wrap) return;
  if (!lists.length) {
    wrap.innerHTML = '<div style="text-align:center;color:var(--m);font-size:13px;padding:30px;grid-column:1/-1">Sin audiencias en esta cuenta</div>';
    return;
  }
  wrap.innerHTML = lists.map(l => {
    const openOk  = l.open_rate  >= 20;
    const clickOk = l.click_rate >= 2;
    const unsubOk = l.unsub_rate < 0.5;
    return `<div class="card" style="padding:16px 18px">
      <div style="font-family:var(--fh);font-size:14px;font-weight:700;margin-bottom:12px">${escapeHtml(l.name)}</div>
      <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px">
        <div style="background:var(--bg3);border-radius:8px;padding:10px 12px">
          <div style="font-size:10px;color:var(--m);text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px">Suscriptores</div>
          <div style="font-size:20px;font-weight:700;font-family:var(--fh)">${l.member_count.toLocaleString()}</div>
        </div>
        <div style="background:var(--bg3);border-radius:8px;padding:10px 12px">
          <div style="font-size:10px;color:var(--m);text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px">Apertura</div>
          <div style="font-size:20px;font-weight:700;font-family:var(--fh);color:${openOk?'var(--g)':'var(--red)'}">${l.open_rate}%</div>
        </div>
        <div style="background:var(--bg3);border-radius:8px;padding:10px 12px">
          <div style="font-size:10px;color:var(--m);text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px">Clics</div>
          <div style="font-size:20px;font-weight:700;font-family:var(--fh);color:${clickOk?'var(--g)':'var(--y)'}">${l.click_rate}%</div>
        </div>
        <div style="background:var(--bg3);border-radius:8px;padding:10px 12px">
          <div style="font-size:10px;color:var(--m);text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px">Tasa baja</div>
          <div style="font-size:20px;font-weight:700;font-family:var(--fh);color:${unsubOk?'var(--g)':'var(--red)'}">${l.unsub_rate}%</div>
        </div>
      </div>
      <div style="margin-top:10px;display:flex;gap:6px;flex-wrap:wrap">
        <span style="font-size:10px;padding:3px 8px;border-radius:4px;background:${openOk?'rgba(34,201,122,.12)':'rgba(232,39,42,.1)'};color:${openOk?'var(--g)':'var(--red)'}">${openOk?'✓ Apertura OK':'↓ Apertura baja'}</span>
        <span style="font-size:10px;padding:3px 8px;border-radius:4px;background:${unsubOk?'rgba(34,201,122,.12)':'rgba(232,39,42,.1)'};color:${unsubOk?'var(--g)':'var(--red)'}">${unsubOk?'✓ Baja saludable':'↑ Bajas elevadas'}</span>
      </div>
    </div>`;
  }).join('');
}

// ── AVI helpers ────────────────────────────────────────────────────────────
function emAVIquick(q) {
  const active = document.querySelector('.em-panel:not([style*="display: none"]):not([style*="display:none"])');
  const tabId  = active ? active.id.replace('empanel-', '') : 'dashboard';
  if (tabId === 'copys')      { document.getElementById('em-copys-q').value = q; askEMCopys();  return; }
  if (tabId === 'estrategia') { document.getElementById('em-strat-q').value = q; askEMStrat(); return; }
  if (tabId === 'campanas')   { document.getElementById('em-avi-q').value   = q; }
  if (tabId === 'audiencias') { document.getElementById('em-avi-q').value   = q; }
  document.getElementById('em-avi-q').value = q;
  askEMAVI();
}

function _emCtx() {
  const c = (typeof CLIENTS !== 'undefined' ? CLIENTS : []).find(x => x.id == currentClient) || {};
  const campsInfo = emCampaigns.slice(0, 10).map(c =>
    `- "${c.title}" | enviados:${c.emails_sent} | apertura:${c.open_rate}% | clics:${c.click_rate}% | ${(c.send_time||'').slice(0,10)}`
  ).join('\n');
  const listInfo = emLists.map(l =>
    `- ${l.name}: ${l.member_count} suscriptores | apertura:${l.open_rate}% | clics:${l.click_rate}% | baja:${l.unsub_rate}%`
  ).join('\n');
  return `Cliente: ${c.name||'ID '+currentClient} | Industria: ${c.industry||'—'} | Web: ${c.url||'—'}\n\nEmail Marketing — últimas campañas:\n${campsInfo||'Sin datos'}\n\nAudiencias:\n${listInfo||'Sin datos'}`;
}

async function askEMAVI() {
  const q    = document.getElementById('em-avi-q').value.trim();
  const resp = document.getElementById('em-avi-resp-dash');
  if (!q || !resp) return;
  resp.innerHTML = '<span style="color:var(--m);font-size:12px">AVI analizando...</span>';
  try {
    const d = await _emPost('api/avi.php', { question: q, context: _emCtx(), section: 'email', client_id: currentClient });
    resp.innerHTML = typeof renderMD === 'function'
      ? renderMD(d.response || d.answer || 'Sin respuesta')
      : (d.response || d.answer || 'Sin respuesta').replace(/\n/g, '<br>');
  } catch(e) { resp.innerHTML = '<span style="color:#f87171">Error al contactar AVI.</span>'; }
  document.getElementById('em-avi-q').value = '';
}

async function askEMCopys() {
  const q    = document.getElementById('em-copys-q').value.trim();
  const resp = document.getElementById('em-copys-resp');
  if (!q || !resp) return;
  resp.innerHTML = '<span style="color:var(--m);font-size:12px">AVI generando copys...</span>';
  try {
    const d = await _emPost('api/avi.php', { question: q, context: _emCtx() + '\n\nTarea: generación de copys y contenido para email marketing.', section: 'email', client_id: currentClient });
    resp.innerHTML = typeof renderMD === 'function'
      ? renderMD(d.response || d.answer || 'Sin respuesta')
      : (d.response || d.answer || 'Sin respuesta').replace(/\n/g, '<br>');
  } catch(e) { resp.innerHTML = '<span style="color:#f87171">Error al contactar AVI.</span>'; }
  document.getElementById('em-copys-q').value = '';
}

async function askEMStrat() {
  const q    = document.getElementById('em-strat-q').value.trim();
  const resp = document.getElementById('em-strat-resp');
  if (!q || !resp) return;
  resp.innerHTML = '<span style="color:var(--m);font-size:12px">AVI elaborando estrategia...</span>';
  try {
    const d = await _emPost('api/avi.php', { question: q, context: _emCtx() + '\n\nTarea: estrategia de email marketing.', section: 'email', client_id: currentClient });
    resp.innerHTML = typeof renderMD === 'function'
      ? renderMD(d.response || d.answer || 'Sin respuesta')
      : (d.response || d.answer || 'Sin respuesta').replace(/\n/g, '<br>');
  } catch(e) { resp.innerHTML = '<span style="color:#f87171">Error al contactar AVI.</span>'; }
  document.getElementById('em-strat-q').value = '';
}

function emFmtDate(iso) {
  if (!iso) return '—';
  try { return new Date(iso).toLocaleDateString('es-MX', { day: '2-digit', month: 'short', year: 'numeric' }); }
  catch(e) { return (iso || '').slice(0, 10); }
}

// ── Hook: cargar al cambiar de página ─────────────────────────────────────
document.addEventListener('DOMContentLoaded', function() {
  const _origShow = window.showPage;
  if (typeof _origShow === 'function') {
    window.showPage = function(page) {
      _origShow(page);
      if (page === 'email' && currentClient && currentClient !== 'all' && !emCampaigns.length) {
        loadEmailData();
      }
    };
  }
});
</script>
