<div id="enrich-loader">
  <div id="enrich-loader-text">Cargando…</div>
  <div class="spinner"></div>
  <button id="enrich-complete-ok" style="
    display: none;
    margin-top: 1em;
    padding: 0.5em 1em;
    background: #FFA500;
    color: #fff;
    border: 1px solid #CC8400;
    border-radius: 4px;
    cursor: pointer;
  ">
    Aceptar
  </button>
</div>

<div class="wrap wscraper-enrich-container">
  <h1>🤖 Enriquecedor de Fichas</h1>

  <div id="wscraper-user-info" class="wscraper-user-info" style="display: none;">
    <div class="user-card">
      <div class="user-card-header">
        <h2>👤 Mi cuenta - ALERTA PRECIO -</h2>
      </div>
      <div class="user-card-body">
        <div class="user-field">
          <span class="field-label">Email:</span>
          <span id="user-email" class="field-value"></span>
        </div>
        <div class="user-field tokens">
          <span class="field-label">Tokens disponibles:</span>
          <span id="user-alerts" class="field-value"></span>
        </div>
        <div class="user-actions">
          <button id="wscraper-logout" class="logout-btn">Cerrar sesión</button>
          <a href="#" class="plan-btn wscraper-plan-link wscraper-plan-button">Ver planes disponibles</a>
        </div>
      </div>
    </div>
  </div>
                <div id="btnWarning">   <p class="warning">Antes de ejecutar el enriquecedor, ten en cuenta que sobrescribirá campos clave de tus productos (título, descripción, metadatos, etc.).
                   Te recomendamos crear una copia o respaldo previo para evitar pérdidas de información.
                </p></div><br>

  <table class="widefat fixed striped">
    <thead>
      <tr>
        <th><input id="check-all-enrich" type="checkbox"></th>
        <th>ID</th>
        <th>Título</th>
        <th>Descripción</th>
        <th>Calidad Ficha</th>
        <th>Calidad SEO</th>
        <th>URL Externa</th>
      </tr>
    </thead>
    <tbody id="wscraper-enrich-rows">
    </tbody>
  </table>

    <div id="wscraper-enrich-pagination" style="text-align:center; margin:1em 0;"></div>


  <div class="wscraper-enrich-actions">
    <p>
      <strong>Seleccionados:</strong> <span id="wscraper-selected-count">0</span> productos<br>
      <strong>Coste tokens:</strong> <span id="wscraper-selected-cost">0</span>
    </p>
    <div>
      <button id="wscraper-enrich-premium" class="wscraper-enrich-buttons" data-cost="10" disabled>
        Premium
      </button>
      <button id="wscraper-enrich-basic" class="wscraper-enrich-buttons" data-cost="5" disabled>
        Básico
      </button>
    </div>
  </div>

  <a target="_blank" href="https://play.google.com/store/apps/details?id=com.xperro.AlertaPrecio" style="margin-top:6%;display:block">
    <div class="wscraper-banner" style="width:50%;margin:auto">
      <img class="banner" style="width:100%" src="<?php echo plugins_url('../assets/banner.png', __FILE__); ?>" alt="Banner Alerta Precio">
    </div>
  </a>

  <div id="wscraper-modal" class="wscraper-modal" style="display: none;">
    <div class="wscraper-modal-content">
      <img src="<?php echo plugins_url('../assets/modal.png', __FILE__); ?>" alt="Planes disponibles">
      <span class="wscraper-modal-close">&times;</span>
      <button class="wscraper-modal-button">Cerrar</button>
    </div>
  </div>

  <div class="wscraper-signature" style="margin-top:1%;text-align:center">
    <a 
      href="https://api.alertaprecio.online/privacy" 
      target="_blank" 
      rel="noopener noreferrer"
      style="color: inherit; text-decoration: none;"
    >
      Alerta Precio &mdash; &copy; <?php echo date_i18n('Y'); ?> &ndash; Todos los derechos reservados.<br>
      Términos &amp; Condiciones.
    </a>
  </div>

</div> <!-- .wrap wscraper-enrich-container -->


</body>
</html>
