<?php
if ( ! defined( 'ABSPATH' ) ) exit;
?>

<!-- OVERLAY PARA BÚSQUEDA Y ENRIQUECIMIENTO -->
<div id="enrich-loader">
  <div id="enrich-loader-text">
    <?php echo esc_html__( 'Cargando…', 'alertaprecio' ); ?>
  </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;
  ">
    <?php echo esc_html__( 'Aceptar', 'alertaprecio' ); ?>
  </button>
</div>

<div class="wscraper-container">
  <div id="wscraper-user-info" class="wscraper-user-info" style="display: none;">
    <div class="user-card">
      <div class="user-card-header">
        <h2><?php echo esc_html__( '👤 Mi cuenta - ALERTA PRECIO -', 'alertaprecio' ); ?></h2>
      </div>
      <div class="user-card-body">
        <div class="user-field">
          <span class="field-label"><?php echo esc_html__( 'Email:', 'alertaprecio' ); ?></span>
          <span id="user-email" class="field-value"></span>
        </div>
        <div class="user-field tokens">
          <span class="field-label"><?php echo esc_html__( 'Tokens disponibles:', 'alertaprecio' ); ?></span>
          <span id="user-alerts" class="field-value"></span>
        </div>
        <div class="user-actions">
          <button id="wscraper-logout" class="logout-btn">
            <?php echo esc_html__( 'Cerrar sesión', 'alertaprecio' ); ?>
          </button>
          <a href="#" class="plan-btn wscraper-plan-link wscraper-plan-button">
            <?php echo esc_html__( 'Ver planes disponibles', 'alertaprecio' ); ?>
          </a>
        </div>
      </div>
    </div>
  </div>

  <div id="btnWarning">
    <p class="warning">
      <?php
        echo wp_kses_post(
          esc_html__( '¡Hola! Cada día actualizamos automáticamente todos los productos que tienes en monitoreo.', 'alertaprecio' )
          . '<br>'
          . esc_html__( 'Si tienes activada la opción “Actualizar precio”, aplicaremos tu margen y refrescaremos el precio final.', 'alertaprecio' )
          . '<br>'
          . esc_html__( 'Si no, solo renovaremos el precio de origen para que siempre veas el valor más reciente.', 'alertaprecio' )
        );
      ?>
      <br>
      <span style="font-weight:bold;color:red;">
        <?php echo esc_html__( 'Este proceso consume 1 token por producto.', 'alertaprecio' ); ?>
      </span>
    </p>
  </div>

  <h1><?php echo esc_html__( 'Alerta Precio – Agregar producto', 'alertaprecio' ); ?></h1>

  <div class="wscraper-input">
    <input
      type="text"
      id="wscraper-url"
      placeholder="<?php echo esc_attr__( 'Pega la URL del producto', 'alertaprecio' ); ?>"
    >
    <button id="wscraper-fetch">
      <?php echo esc_html__( 'Buscar', 'alertaprecio' ); ?>
    </button>
  </div>

  <div id="wscraper-products" class="wscraper-grid"></div>
  <div class="wscraper-pagination" id="wscraper-pagination"></div>

  <div class="sync-container" style="
    text-align: center;
    margin: 20px auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 12px;
    max-width: 600px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  ">
    <p style="
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 16px;
      line-height: 1.6;
      color: #333;
    ">
      🔄 <strong><?php echo esc_html__( 'Sincronizar precios', 'alertaprecio' ); ?></strong><br>
      <?php echo esc_html__( 'Este botón actualiza todos tus productos monitoreados (precios) consumiendo tus tokens disponibles.', 'alertaprecio' ); ?><br>
      <span style="font-size:15px;text-align:center;">
        <?php echo esc_html__( 'Cada producto consume 1 token', 'alertaprecio' ); ?>
      </span>
    </p>

    <button
      id="wscraper-run-cron"
      class="wscraper-plan-button plan"
      style="
        background-color: #0073aa;
        color: white;
        font-size: 18px;
        padding: 14px 28px;
        border-radius: 8px;
        cursor: pointer;
        display: inline;
        border: none;
        transition: background-color 0.3s;
      "
      onmouseover="this.style.backgroundColor='#005f8d'"
      onmouseout="this.style.backgroundColor='#0073aa'"
    >
      🔄 <?php echo esc_html__( 'Ejecutar sincronización precios', 'alertaprecio' ); ?>
    </button>
  </div>

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

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

    <div class="wscraper-signature">
      <a
        href="<?php echo esc_url( 'https://api.alertaprecio.online/privacy' ); ?>"
        target="_blank"
        rel="noopener noreferrer"
        style="color: inherit; text-decoration: none;"
      >
        <?php
          echo wp_kses_post( sprintf(
            '%1$s &mdash; &copy; %2$s &ndash; %3$s<br>%4$s',
            esc_html__( 'Alerta Precio', 'alertaprecio' ),
            esc_html( date_i18n( 'Y' ) ),
            esc_html__( 'Todos los derechos reservados.', 'alertaprecio' ),
            esc_html__( 'Términos & Condiciones.', 'alertaprecio' )
          ) );
        ?>
      </a>
    </div>
  </div>
</div>
