
<!-- ===== CONFIG ===== -->
<div class="page" id="page-config">
  <div class="ph"><div><div class="pt">Configurar APIs</div><div class="ps">Conecta tus cuentas para datos en tiempo real</div></div></div>
  <?php if(!$isAdmin): ?>
  <div class="cfg-card" style="border-color:rgba(13,207,207,.25);background:rgba(13,207,207,.04)">
    <div class="chd"><div class="ctit" style="color:var(--teal)">💡 Conexiones por módulo</div></div>
    <p style="font-size:13px;color:var(--m)">Conecta tus cuentas directamente en cada módulo (Meta Ads, Google Ads, SEO, etc.). Abre el módulo y verás el panel de conexión con instrucciones paso a paso.</p>
  </div>
  <?php endif ?>
  <?php if($isAdmin): ?><div class="cfg-card"><div class="chd"><div class="ctit">🤖 AVI — Claude API</div></div>
    <div class="mf"><label>API Key</label><input type="password" id="claude-key" placeholder="sk-ant-..."></div>
    <button class="pr-btn" data-click="saveCfg|claude">Guardar</button>
    <div style="font-size:12px;margin-top:8px" id="s-claude"></div>
  </div>
  <div class="cfg-card"><div class="chd"><div class="ctit">📘 Meta Ads API</div></div>
    <div class="mf"><label>App ID</label><input type="text" id="meta-app" placeholder="Meta App ID"></div>
    <div class="mf"><label>Access Token</label><input type="password" id="meta-tok" placeholder="System User Token"></div>
    <button class="pr-btn" data-click="saveCfg|meta">Guardar</button>
    <div style="font-size:12px;margin-top:8px" id="s-meta"></div>
  </div>
  <div class="cfg-card"><div class="chd"><div class="ctit">📧 Mailchimp API</div></div>
    <div style="font-size:12px;color:var(--m);margin-bottom:14px">Conecta Mailchimp <strong>por cliente</strong> para ver campañas, tasas de apertura, clics y audiencias. Cada cliente usa su propia cuenta de Mailchimp.</div>
    <div style="font-size:11px;color:var(--y);background:rgba(245,197,67,.1);border:1px solid rgba(245,197,67,.25);border-radius:7px;padding:8px 12px;margin-bottom:12px">Selecciona el cliente en la barra superior antes de guardar su API key.</div>
    <div class="mf"><label>API Key (cliente seleccionado)</label><input type="password" id="mailchimp-key" placeholder="xxxxxxxxxxxx-us1"></div>
    <div style="font-size:11px;color:var(--m);margin-bottom:10px">Mailchimp → Account → Extras → API keys. El sufijo (-us1, -us6, etc.) se detecta automáticamente.</div>
    <button class="pr-btn" data-click="saveMailchimpCreds">Guardar</button>
    <div style="font-size:12px;margin-top:8px" id="s-mailchimp"></div>
  </div>
  <div class="cfg-card">
    <div class="chd">
      <div class="ctit">🌐 WordPress API</div>
      <span id="wp-status-badge" style="font-size:11px;padding:3px 10px;border-radius:10px;background:rgba(34,201,122,.1);color:var(--g);display:none">Conectado ✓</span>
    </div>
    <div style="font-size:12px;color:var(--m);margin-bottom:10px">Conecta WordPress <strong>por cliente</strong> para publicar artículos SEO, montar propuestas aprobadas y ver métricas del sitio.</div>
    <div style="font-size:11px;color:var(--y);background:rgba(245,197,67,.1);border:1px solid rgba(245,197,67,.25);border-radius:7px;padding:8px 12px;margin-bottom:14px">Selecciona el cliente en la barra superior antes de guardar.</div>

    <!-- Guía paso a paso (colapsable) -->
    <div style="margin-bottom:16px">
      <button id="wp-guide-btn" data-click="wpToggleGuide" style="display:flex;align-items:center;gap:6px;padding:7px 12px;border-radius:7px;background:var(--bg3);border:1px solid var(--br2);color:var(--t);font-size:12px;cursor:pointer;font-family:var(--fb);font-weight:600;width:100%;text-align:left">
        <span id="wp-guide-arrow">▶</span> ¿Cómo obtener el Application Password?
      </button>
      <div id="wp-guide-body" style="display:none;margin-top:10px;background:var(--bg3);border:1px solid var(--br2);border-radius:9px;padding:16px;font-size:12px;line-height:1.7">

        <div style="display:flex;flex-direction:column;gap:14px">

          <div style="display:flex;gap:12px;align-items:flex-start">
            <div style="min-width:24px;height:24px;border-radius:50%;background:var(--red);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:1px">1</div>
            <div>
              <div style="font-weight:600;color:var(--t);margin-bottom:2px">Accede al panel de WordPress</div>
              <div style="color:var(--m)">Ve a <code style="background:var(--bg2);padding:1px 5px;border-radius:4px;font-size:11px">https://tusitio.com/wp-admin</code> e inicia sesión con tu usuario administrador.</div>
            </div>
          </div>

          <div style="display:flex;gap:12px;align-items:flex-start">
            <div style="min-width:24px;height:24px;border-radius:50%;background:var(--red);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:1px">2</div>
            <div>
              <div style="font-weight:600;color:var(--t);margin-bottom:2px">Ve a Usuarios → Tu perfil</div>
              <div style="color:var(--m)">En el menú lateral busca <strong>Usuarios → Tu perfil</strong> (o edita el usuario admin que usarás para conectar).</div>
            </div>
          </div>

          <div style="display:flex;gap:12px;align-items:flex-start">
            <div style="min-width:24px;height:24px;border-radius:50%;background:var(--red);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:1px">3</div>
            <div>
              <div style="font-weight:600;color:var(--t);margin-bottom:2px">Baja hasta "Contraseñas de aplicación"</div>
              <div style="color:var(--m)">Al final de la página de perfil encontrarás la sección <strong>Application Passwords</strong> / <strong>Contraseñas de aplicación</strong>.</div>
              <div style="margin-top:6px;padding:6px 10px;background:rgba(245,197,67,.08);border:1px solid rgba(245,197,67,.2);border-radius:6px;color:#c9962a;font-size:11px">⚠ Si no ves esta sección: tu sitio debe usar HTTPS y tener WordPress 5.6 o superior.</div>
            </div>
          </div>

          <div style="display:flex;gap:12px;align-items:flex-start">
            <div style="min-width:24px;height:24px;border-radius:50%;background:var(--red);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:1px">4</div>
            <div>
              <div style="font-weight:600;color:var(--t);margin-bottom:2px">Crea la contraseña</div>
              <div style="color:var(--m)">En el campo de nombre escribe <code style="background:var(--bg2);padding:1px 5px;border-radius:4px;font-size:11px">SuperCerebro</code> y haz clic en <strong>"Añadir nueva contraseña de aplicación"</strong>.</div>
            </div>
          </div>

          <div style="display:flex;gap:12px;align-items:flex-start">
            <div style="min-width:24px;height:24px;border-radius:50%;background:var(--red);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:1px">5</div>
            <div>
              <div style="font-weight:600;color:var(--t);margin-bottom:2px">Copia la contraseña generada</div>
              <div style="color:var(--m)">WordPress muestra la contraseña <strong>una sola vez</strong> en formato:<br><code style="background:var(--bg2);padding:2px 8px;border-radius:4px;font-size:11px;letter-spacing:1px">xxxx xxxx xxxx xxxx xxxx xxxx</code><br>Cópiala inmediatamente — no podrás verla de nuevo.</div>
            </div>
          </div>

          <div style="display:flex;gap:12px;align-items:flex-start">
            <div style="min-width:24px;height:24px;border-radius:50%;background:var(--g);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:1px">6</div>
            <div>
              <div style="font-weight:600;color:var(--g);margin-bottom:2px">Pega aquí abajo ↓</div>
              <div style="color:var(--m)">Ingresa tu URL del sitio, tu nombre de usuario de WordPress y la contraseña copiada en los campos de abajo. Luego guarda y prueba la conexión.</div>
            </div>
          </div>

        </div>
      </div>
    </div>

    <!-- Formulario -->
    <div class="mf"><label>URL del sitio WordPress</label><input type="text" id="wp-url" placeholder="https://cliente.com"></div>
    <div class="mf"><label>Usuario WordPress</label><input type="text" id="wp-user" placeholder="admin"></div>
    <div class="mf">
      <label>Application Password <span style="font-weight:400;color:var(--m)">(con o sin espacios)</span></label>
      <input type="password" id="wp-app-pass" placeholder="xxxx xxxx xxxx xxxx xxxx xxxx">
    </div>
    <div style="display:flex;gap:8px;flex-wrap:wrap;margin-top:4px">
      <button class="pr-btn" data-click="saveWPCreds">Guardar</button>
      <button data-click="testWPConnection" style="padding:7px 14px;border-radius:6px;font-size:12px;background:rgba(34,201,122,.15);border:1px solid rgba(34,201,122,.3);color:var(--g);cursor:pointer;font-family:var(--fb);font-weight:600">▶ Probar conexión</button>
    </div>
    <div style="font-size:12px;margin-top:8px" id="s-wordpress"></div>
  </div>
  <div class="cfg-card" id="cfg-google-card">
    <div class="chd">
      <div class="ctit">🔴 Google Ads API</div>
      <span id="g-connect-status" style="font-size:11px;padding:3px 10px;border-radius:10px;background:rgba(232,39,42,.1);color:var(--red)">No conectado</span>
    </div>
    <div style="font-size:12px;color:var(--m);margin-bottom:14px">Configura primero las credenciales OAuth y luego conecta la cuenta MCC.</div>
    <div class="mf"><label>OAuth Client ID</label><input type="text" id="g-oauth-cid" placeholder="xxxxxxx.apps.googleusercontent.com"></div>
    <div class="mf"><label>OAuth Client Secret</label><input type="password" id="g-oauth-cs" placeholder="GOCSPX-..."></div>
    <div class="mf"><label>Developer Token (MCC)</label><input type="password" id="g-tok" placeholder="Tu developer token de Google Ads"></div>
    <div class="mf"><label>MCC Customer ID</label><input type="text" id="g-mcc-id" placeholder="123-456-7890 (tu cuenta Manager)"></div>
    <div style="display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:4px">
      <button class="pr-btn" data-click="saveCfg|google">Guardar configuración</button>
      <button id="btn-google-oauth" data-click="connectGoogleOAuth" style="padding:7px 16px;border-radius:6px;font-size:12px;background:rgba(248,113,113,.15);border:1px solid rgba(248,113,113,.3);color:#f87171;cursor:pointer;font-family:var(--fb);font-weight:600">🔗 Conectar cuenta Google</button>
    </div>
    <div style="font-size:12px;margin-top:8px" id="s-google"></div>
  </div>
  <!-- WhatsApp Bot -->
  <div class="cfg-card">
    <div class="chd">
      <div class="ctit">💬 AVI por WhatsApp</div>
      <span id="wa-status-badge" style="font-size:11px;padding:3px 10px;border-radius:10px;background:rgba(34,201,122,.1);color:var(--g);display:none">Configurado ✓</span>
    </div>
    <div style="font-size:12px;color:var(--m);margin-bottom:14px">Permite que el equipo consulte métricas y ejecute acciones desde WhatsApp sin abrir el dashboard. Requiere Meta Cloud API (WhatsApp Business).</div>

    <?php if($isAdmin): ?>
    <div style="font-size:11px;font-weight:700;color:var(--m);letter-spacing:.4px;margin-bottom:10px">CONFIGURACIÓN GLOBAL (Admin)</div>
    <div class="mf">
      <label>Phone Number ID <span style="font-weight:400;color:var(--m)">(Meta Cloud API → Phone Numbers)</span></label>
      <input type="text" id="wa-phone-id" placeholder="123456789012345">
    </div>
    <div class="mf">
      <label>Access Token permanente</label>
      <input type="password" id="wa-access-token" placeholder="Dejar vacío para no cambiar">
    </div>
    <div class="mf">
      <label>App Secret <span style="font-weight:400;color:var(--m)">(para verificar firma HMAC)</span></label>
      <input type="password" id="wa-app-secret" placeholder="Dejar vacío para no cambiar">
    </div>
    <div class="mf">
      <label>Verify Token <span style="font-weight:400;color:var(--m)">(puedes personalizar)</span></label>
      <input type="text" id="wa-verify-token" placeholder="supercerebro_wa_2026">
    </div>
    <div style="background:var(--bg3);border:1px solid var(--br2);border-radius:8px;padding:10px 14px;margin-bottom:14px">
      <div style="font-size:11px;font-weight:600;color:var(--m);margin-bottom:4px">URL del Webhook (registrar en Meta)</div>
      <div id="wa-webhook-url" style="font-size:12px;color:var(--t);font-family:monospace;word-break:break-all">Cargando…</div>
    </div>
    <div style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px">
      <button class="pr-btn" data-click="saveWhatsAppConfig">Guardar configuración</button>
      <button data-click="testWhatsAppSend" style="padding:7px 14px;border-radius:6px;font-size:12px;background:rgba(34,201,122,.15);border:1px solid rgba(34,201,122,.3);color:var(--g);cursor:pointer;font-family:var(--fb);font-weight:600">▶ Probar envío</button>
    </div>
    <div id="s-whatsapp-admin" style="font-size:12px;margin-bottom:14px"></div>
    <hr style="border:none;border-top:1px solid var(--br2);margin:14px 0">
    <?php endif; ?>

    <div style="font-size:11px;font-weight:700;color:var(--m);letter-spacing:.4px;margin-bottom:10px">MI TELÉFONO WHATSAPP</div>
    <div style="font-size:12px;color:var(--m);margin-bottom:10px">Vincula tu número para recibir y enviar mensajes a AVI desde WhatsApp. Incluye código de país sin + (ej: 573001234567).</div>
    <div class="mf">
      <label>Mi número WhatsApp</label>
      <input type="text" id="wa-my-phone" placeholder="573001234567">
    </div>
    <button class="pr-btn" data-click="saveMyWhatsAppPhone">Vincular mi número</button>
    <div id="s-whatsapp-phone" style="font-size:12px;margin-top:8px"></div>
  </div>
<?php endif ?>
</div>
