<div class="page" id="page-automatizaciones">
  <div class="ph">
    <div>
      <div class="pt">⚙ Automatizaciones</div>
      <div class="ps">Reglas automáticas · Se evalúan cada hora</div>
    </div>
    <div style="display:flex;gap:8px;align-items:center">
      <span id="auto-ks-badge" style="font-size:11px;padding:4px 10px;border-radius:6px;background:rgba(34,201,122,.12);color:var(--g);border:1px solid rgba(34,201,122,.25)">▶ Motor activo</span>
      <button data-click="autoNewRule" style="padding:7px 16px;border-radius:7px;background:var(--red);border:none;color:#fff;font-size:12px;font-weight:700;cursor:pointer;font-family:var(--fb)">+ Nueva regla</button>
    </div>
  </div>

  <!-- Sin cliente seleccionado -->
  <div id="auto-no-client" style="text-align:center;padding:60px 20px;color:var(--m)">
    <div style="font-size:40px;margin-bottom:12px">⚙</div>
    <div style="font-size:15px;font-weight:600;margin-bottom:6px">Selecciona un cliente</div>
    <div style="font-size:13px">Las automatizaciones se configuran por cliente</div>
  </div>

  <!-- Panel principal -->
  <div id="auto-main" style="display:none;flex-direction:column;gap:16px">

    <!-- Tarjetas de condiciones disponibles (referencia rápida) -->
    <div class="card" style="padding:14px 18px">
      <div style="font-size:11px;font-weight:700;color:var(--m);letter-spacing:.5px;margin-bottom:10px">CONDICIONES DISPONIBLES</div>
      <div style="display:flex;gap:8px;flex-wrap:wrap">
        <span style="padding:3px 9px;border-radius:5px;background:rgba(74,158,248,.1);color:var(--b);font-size:11px;font-weight:600">📊 Meta sin inversión N días</span>
        <span style="padding:3px 9px;border-radius:5px;background:rgba(74,158,248,.1);color:var(--b);font-size:11px;font-weight:600">📊 Meta campañas pausadas</span>
        <span style="padding:3px 9px;border-radius:5px;background:rgba(74,158,248,.1);color:var(--b);font-size:11px;font-weight:600">📊 Meta frecuencia alta</span>
        <span style="padding:3px 9px;border-radius:5px;background:rgba(74,158,248,.1);color:var(--b);font-size:11px;font-weight:600">📊 Meta CPA alto</span>
        <span style="padding:3px 9px;border-radius:5px;background:rgba(232,39,42,.1);color:var(--red);font-size:11px;font-weight:600">📈 Google IS% bajo umbral</span>
        <span style="padding:3px 9px;border-radius:5px;background:rgba(232,39,42,.1);color:var(--red);font-size:11px;font-weight:600">📈 Google sin inversión N días</span>
        <span style="padding:3px 9px;border-radius:5px;background:rgba(232,39,42,.1);color:var(--red);font-size:11px;font-weight:600">📈 Google CPA alto</span>
        <span style="padding:3px 9px;border-radius:5px;background:rgba(232,39,42,.1);color:var(--red);font-size:11px;font-weight:600">📈 Google sin conversiones</span>
        <span style="padding:3px 9px;border-radius:5px;background:rgba(34,201,122,.1);color:var(--g);font-size:11px;font-weight:600">🌿 SEO caída clics ≥ %</span>
        <span style="padding:3px 9px;border-radius:5px;background:rgba(245,197,67,.12);color:#c9962a;font-size:11px;font-weight:600">🔴 Semáforo en rojo</span>
        <span style="padding:3px 9px;border-radius:5px;background:rgba(74,158,248,.1);color:var(--b);font-size:11px;font-weight:600">📊 Meta conversiones caen ≥ %</span>
        <span style="padding:3px 9px;border-radius:5px;background:rgba(232,39,42,.1);color:var(--red);font-size:11px;font-weight:600">📈 Google conversiones caen ≥ %</span>
        <span style="padding:3px 9px;border-radius:5px;background:rgba(156,100,246,.12);color:#9c64f6;font-size:11px;font-weight:600">📧 Email open rate bajo umbral</span>
      </div>
    </div>

    <!-- Silenciar alertas -->
    <div class="card" style="padding:14px 18px">
      <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px">
        <div>
          <div style="font-size:11px;font-weight:700;color:var(--m);letter-spacing:.5px;margin-bottom:4px">SILENCIAR ALERTAS</div>
          <div id="auto-pause-status" style="font-size:12px;color:var(--t)">Estado: <span style="color:var(--g);font-weight:600">Activo — alertas habilitadas</span></div>
        </div>
        <div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap">
          <select id="auto-pause-hours" style="padding:6px 10px;border-radius:6px;border:1px solid var(--br2);background:var(--bg3);color:var(--t);font-size:12px;font-family:var(--fb)">
            <option value="1">1 hora</option>
            <option value="3">3 horas</option>
            <option value="6">6 horas</option>
            <option value="12">12 horas</option>
            <option value="24" selected>24 horas</option>
            <option value="48">48 horas</option>
            <option value="168">7 días</option>
          </select>
          <button id="auto-pause-btn" data-click="autoPauseAlerts" style="padding:6px 14px;border-radius:6px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);font-size:12px;cursor:pointer;font-family:var(--fb);font-weight:600">🔕 Silenciar</button>
          <button id="auto-resume-btn" data-click="autoResumeAlerts" style="display:none;padding:6px 14px;border-radius:6px;background:var(--g);border:none;color:#fff;font-size:12px;cursor:pointer;font-family:var(--fb);font-weight:600">🔔 Reactivar</button>
        </div>
      </div>
    </div>

    <!-- Lista de reglas activas -->
    <div class="card">
      <div class="chd">
        <div class="ctit">⚡ Reglas configuradas</div>
        <button data-click="loadAutomations" style="padding:4px 10px;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 id="auto-list">
        <div style="text-align:center;padding:30px;color:var(--m);font-size:13px">Cargando reglas…</div>
      </div>
    </div>

    <!-- Historial de disparos -->
    <div class="card">
      <div class="chd">
        <div class="ctit">📋 Historial de disparos</div>
        <button data-click="loadAutoLog" style="padding:4px 10px;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 id="auto-log">
        <div style="text-align:center;padding:20px;color:var(--m);font-size:13px">Sin historial aún</div>
      </div>
    </div>

    <!-- Horario de notificaciones -->
    <div class="card">
      <div class="chd">
        <div>
          <div class="ctit">🕐 Horario de notificaciones</div>
          <div style="font-size:12px;color:var(--m);margin-top:2px">Define cuándo el motor puede enviar emails por cada tipo de frecuencia</div>
        </div>
        <button data-click="saveAutoSettings" style="padding:5px 14px;border-radius:6px;font-size:12px;background:var(--red);border:none;color:#fff;cursor:pointer;font-family:var(--fb);font-weight:700">Guardar</button>
      </div>
      <div id="auto-settings-wrap" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-top:4px">

        <!-- Reglas por hora -->
        <div style="background:var(--bg3);border-radius:9px;padding:16px;border:1px solid var(--br2)">
          <div style="font-size:11px;font-weight:700;color:var(--m);letter-spacing:.4px;margin-bottom:10px">REGLAS POR HORA</div>
          <div style="font-size:12px;color:var(--t);margin-bottom:6px">Solo enviar dentro de la ventana:</div>
          <div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap">
            <div>
              <label style="font-size:11px;color:var(--m);display:block;margin-bottom:3px">Desde</label>
              <select id="notif_window_start" style="padding:6px 10px;border-radius:6px;border:1px solid var(--br2);background:var(--bg2);color:var(--t);font-size:12px;font-family:var(--fb)">
                <?php for($h=0;$h<=23;$h++): ?><option value="<?=$h?>"><?=str_pad($h,2,'0',STR_PAD_LEFT).':00'?></option><?php endfor; ?>
              </select>
            </div>
            <div style="font-size:12px;color:var(--m);margin-top:14px">→</div>
            <div>
              <label style="font-size:11px;color:var(--m);display:block;margin-bottom:3px">Hasta</label>
              <select id="notif_window_end" style="padding:6px 10px;border-radius:6px;border:1px solid var(--br2);background:var(--bg2);color:var(--t);font-size:12px;font-family:var(--fb)">
                <?php for($h=0;$h<=23;$h++): ?><option value="<?=$h?>"><?=str_pad($h,2,'0',STR_PAD_LEFT).':00'?></option><?php endfor; ?>
              </select>
            </div>
          </div>
          <div style="font-size:11px;color:var(--m);margin-top:8px">Fuera de esta ventana el motor no envía emails (sí registra en el log)</div>
        </div>

        <!-- Reglas diarias -->
        <div style="background:var(--bg3);border-radius:9px;padding:16px;border:1px solid var(--br2)">
          <div style="font-size:11px;font-weight:700;color:var(--m);letter-spacing:.4px;margin-bottom:10px">REGLAS DIARIAS</div>
          <div style="font-size:12px;color:var(--t);margin-bottom:6px">Enviar notificación a las:</div>
          <select id="notif_daily_hour" style="padding:6px 10px;border-radius:6px;border:1px solid var(--br2);background:var(--bg2);color:var(--t);font-size:12px;font-family:var(--fb);width:100%">
            <?php for($h=0;$h<=23;$h++): ?><option value="<?=$h?>"><?=str_pad($h,2,'0',STR_PAD_LEFT).':00'?></option><?php endfor; ?>
          </select>
          <div style="font-size:11px;color:var(--m);margin-top:8px">El motor corre cada hora. Solo enviará emails en esta hora específica (si la condición se cumple)</div>
        </div>

        <!-- Reglas semanales -->
        <div style="background:var(--bg3);border-radius:9px;padding:16px;border:1px solid var(--br2)">
          <div style="font-size:11px;font-weight:700;color:var(--m);letter-spacing:.4px;margin-bottom:10px">REGLAS SEMANALES</div>
          <div style="font-size:12px;color:var(--t);margin-bottom:6px">Día de la semana:</div>
          <select id="notif_weekly_day" style="padding:6px 10px;border-radius:6px;border:1px solid var(--br2);background:var(--bg2);color:var(--t);font-size:12px;font-family:var(--fb);width:100%;margin-bottom:8px">
            <option value="1">Lunes</option>
            <option value="2">Martes</option>
            <option value="3">Miércoles</option>
            <option value="4">Jueves</option>
            <option value="5">Viernes</option>
            <option value="6">Sábado</option>
            <option value="7">Domingo</option>
          </select>
          <div style="font-size:12px;color:var(--t);margin-bottom:6px">Hora:</div>
          <select id="notif_weekly_hour" style="padding:6px 10px;border-radius:6px;border:1px solid var(--br2);background:var(--bg2);color:var(--t);font-size:12px;font-family:var(--fb);width:100%">
            <?php for($h=0;$h<=23;$h++): ?><option value="<?=$h?>"><?=str_pad($h,2,'0',STR_PAD_LEFT).':00'?></option><?php endfor; ?>
          </select>
        </div>

      </div>
      <!-- Modo digest -->
      <div style="background:var(--bg3);border-radius:9px;padding:16px;border:1px solid var(--br2);margin-top:16px">
        <div style="font-size:11px;font-weight:700;color:var(--m);letter-spacing:.4px;margin-bottom:10px">MODO DIGEST</div>
        <label style="display:flex;align-items:center;gap:10px;cursor:pointer">
          <input type="checkbox" id="notif_digest_mode" style="width:15px;height:15px;accent-color:var(--red)">
          <div>
            <div style="font-size:13px;font-weight:600">Agrupar alertas en un solo email diario</div>
            <div style="font-size:11px;color:var(--m);margin-top:2px">En vez de un email por regla, recibirás un resumen con todas las alertas del día</div>
          </div>
        </label>
      </div>

      <div id="auto-settings-status" style="margin-top:10px;font-size:12px;color:var(--m);text-align:right"></div>
    </div>

  </div>

  <!-- Modal: Nueva/Editar regla -->
  <div id="auto-modal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1200;align-items:center;justify-content:center">
    <div style="background:var(--bg2);border:1px solid var(--br2);border-radius:14px;padding:28px;width:100%;max-width:540px;box-shadow:0 24px 60px rgba(0,0,0,.4);max-height:90vh;overflow-y:auto">
      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:22px">
        <div style="font-family:var(--fh);font-size:17px;font-weight:700">Nueva automatización</div>
        <button data-click="autoCloseModal" style="background:none;border:none;color:var(--m);font-size:20px;cursor:pointer;line-height:1">✕</button>
      </div>

      <!-- Nombre -->
      <div style="margin-bottom:16px">
        <label style="font-size:12px;font-weight:600;color:var(--m);display:block;margin-bottom:5px">Nombre de la regla</label>
        <input id="auto-name" type="text" placeholder="Ej: Alerta Meta sin inversión" style="width:100%;padding:9px 12px;border-radius:7px;border:1px solid var(--br2);background:var(--bg3);color:var(--t);font-size:13px;font-family:var(--fb);box-sizing:border-box">
      </div>

      <!-- Condición -->
      <div style="margin-bottom:16px">
        <label style="font-size:12px;font-weight:600;color:var(--m);display:block;margin-bottom:5px">Condición</label>
        <select id="auto-condition" data-change="autoConditionChange" style="width:100%;padding:9px 12px;border-radius:7px;border:1px solid var(--br2);background:var(--bg3);color:var(--t);font-size:13px;font-family:var(--fb);box-sizing:border-box">
          <option value="">— Selecciona una condición —</option>
          <option value="meta_spend_zero">📊 Meta — Sin inversión N días</option>
          <option value="meta_campaigns_paused">📊 Meta — Todas las campañas pausadas</option>
          <option value="meta_frequency_high">📊 Meta — Frecuencia alta (&gt; umbral)</option>
          <option value="meta_cpa_above">📊 Meta — CPA por encima de umbral $</option>
          <option value="google_is_below">📈 Google — IS% bajo umbral</option>
          <option value="google_spend_zero">📈 Google — Sin inversión N días</option>
          <option value="google_cpa_above">📈 Google — CPA por encima de umbral $</option>
          <option value="google_conversions_zero">📈 Google — Sin conversiones N días</option>
          <option value="seo_clicks_drop">🌿 SEO — Caída de clics ≥ %</option>
          <option value="semaforo_red">🔴 Semáforo — Cualquier canal en rojo</option>
          <option value="meta_conversions_drop">📊 Meta — Conversiones caen ≥ %</option>
          <option value="google_conversions_drop">📈 Google — Conversiones caen ≥ %</option>
          <option value="email_open_rate_low">📧 Email — Open rate bajo umbral (%)</option>
          <option value="tiktok_spend_zero">🎵 TikTok — Sin inversión N días</option>
          <option value="tiktok_cpa_above">🎵 TikTok — CPA por encima de umbral $</option>
        </select>
      </div>

      <!-- Parámetros de condición -->
      <div id="auto-cparams" style="margin-bottom:16px;display:none">
        <div id="auto-cparams-inner"></div>
      </div>

      <!-- Acción -->
      <div style="margin-bottom:16px">
        <label style="font-size:12px;font-weight:600;color:var(--m);display:block;margin-bottom:5px">Acción a ejecutar</label>
        <select id="auto-action" data-change="autoActionChange" style="width:100%;padding:9px 12px;border-radius:7px;border:1px solid var(--br2);background:var(--bg3);color:var(--t);font-size:13px;font-family:var(--fb);box-sizing:border-box">
          <option value="send_email">📧 Enviar email de alerta al admin</option>
          <option value="log_only">📝 Solo registrar (sin notificación)</option>
          <option value="pause_campaign_meta">🛑 Meta — Pausar todas las campañas activas</option>
          <option value="pause_campaign_google">🛑 Google — Pausar todas las campañas activas</option>
          <option value="activate_campaigns_meta">▶ Meta — Activar todas las campañas pausadas</option>
          <option value="change_budget_meta">📉 Meta — Reducir presupuesto diario X%</option>
          <option value="increase_budget_meta">📈 Meta — Aumentar presupuesto diario X%</option>
          <option value="change_budget_google">📉 Google — Reducir presupuesto X%</option>
          <option value="increase_budget_google">📈 Google — Aumentar presupuesto X%</option>
          <option value="activate_campaigns_google">▶ Google — Activar todas las campañas pausadas</option>
        </select>
      </div>

      <!-- Parámetros de acción (visible solo si la acción lo requiere) -->
      <div id="auto-aparams" style="margin-bottom:16px;display:none">
        <div id="auto-aparams-inner"></div>
      </div>

      <!-- Frecuencia -->
      <div style="margin-bottom:22px">
        <label style="font-size:12px;font-weight:600;color:var(--m);display:block;margin-bottom:5px">Frecuencia mínima entre disparos</label>
        <select id="auto-frequency" style="width:100%;padding:9px 12px;border-radius:7px;border:1px solid var(--br2);background:var(--bg3);color:var(--t);font-size:13px;font-family:var(--fb);box-sizing:border-box">
          <option value="hourly">Cada hora (máx. una alerta por hora)</option>
          <option value="daily" selected>Diaria (máx. una alerta por día)</option>
          <option value="weekly">Semanal (máx. una alerta por semana)</option>
        </select>
      </div>

      <div style="display:flex;gap:8px">
        <button data-click="autoCloseModal" style="flex:1;padding:10px;border-radius:7px;background:var(--bg3);border:1px solid var(--br2);color:var(--m);cursor:pointer;font-family:var(--fb);font-size:13px">Cancelar</button>
        <button data-click="autoSaveRule" style="flex:2;padding:10px;border-radius:7px;background:var(--red);border:none;color:#fff;cursor:pointer;font-family:var(--fb);font-size:13px;font-weight:700">Guardar regla</button>
      </div>
      <div id="auto-modal-status" style="margin-top:10px;font-size:12px;color:var(--m);text-align:center"></div>
    </div>
  </div>

</div>
