<?php
// Usuario y contraseña permitidos
$usuarioPermitido = 'ADMIN';
$contrasenaPermitida = 'MONTEROAMP';

error_reporting(E_ALL);
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);

// Validar autenticación HTTP básica
if (!isset($_SERVER['PHP_AUTH_USER']) || !isset($_SERVER['PHP_AUTH_PW']) ||
    $_SERVER['PHP_AUTH_USER'] !== $usuarioPermitido || $_SERVER['PHP_AUTH_PW'] !== $contrasenaPermitida) {
    
    header('WWW-Authenticate: Basic realm="Área Restringida"');
    header('HTTP/1.0 401 Unauthorized');
    echo "Acceso denegado. Se requiere autenticación.";
    exit;
}

// Conexion con PDO
include 'conexion/conexion.php';

// Configuración de paginación
$registrosPorPagina = 25;
$paginaActual = isset($_GET['pagina']) ? (int)$_GET['pagina'] : 1;
if ($paginaActual < 1) $paginaActual = 1;
$offset = ($paginaActual - 1) * $registrosPorPagina;

// Búsqueda
$telefonoBuscado = $_GET['telefono'] ?? '';
$busquedaGeneral = $_GET['q'] ?? '';

// Construir consulta SQL
$sqlCount = "SELECT COUNT(*) FROM registros";
$sqlData = "SELECT * FROM registros";
$condiciones = [];
$parametros = [];

// Búsqueda por teléfono (mantenemos compatibilidad)
if ($telefonoBuscado !== '') {
    $condiciones[] = "telefono LIKE :telefono";
    $parametros[':telefono'] = "%$telefonoBuscado%";
}

// Búsqueda general (busca en varios campos)
if ($busquedaGeneral !== '') {
    $condiciones[] = "(nombre LIKE :busqueda OR apellido LIKE :busqueda OR telefono LIKE :busqueda OR correo LIKE :busqueda OR ip_usuario LIKE :busqueda)";
    $parametros[':busqueda'] = "%$busquedaGeneral%";
}

// Aplicar condiciones si existen
if (!empty($condiciones)) {
    $sqlCount .= " WHERE " . implode(" AND ", $condiciones);
    $sqlData .= " WHERE " . implode(" AND ", $condiciones);
}

// Ordenar y paginar
$sqlData .= " ORDER BY fecha_hora DESC LIMIT :offset, :limit";

// Obtener total de registros para paginación
$stmtCount = $pdo->prepare($sqlCount);
foreach ($parametros as $key => $value) {
    $stmtCount->bindValue($key, $value);
}
$stmtCount->execute();
$totalRegistros = $stmtCount->fetchColumn();
$totalPaginas = ceil($totalRegistros / $registrosPorPagina);

// Obtener registros de la página actual
$stmtData = $pdo->prepare($sqlData);
foreach ($parametros as $key => $value) {
    $stmtData->bindValue($key, $value);
}
$stmtData->bindValue(':offset', $offset, PDO::PARAM_INT);
$stmtData->bindValue(':limit', $registrosPorPagina, PDO::PARAM_INT);
$stmtData->execute();
$registros = $stmtData->fetchAll(PDO::FETCH_ASSOC);
?>

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>CRM - Consentimientos Clientes</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
  <style>
    :root {
      --primary-color: #4361ee;
      --success-color: #06d6a0;
      --warning-color: #ffb703;
      --danger-color: #ef476f;
      --dark-bg: #212529;
    }
    
    body {
      background: #f8fafc;
      font-family: 'Inter', 'Segoe UI', sans-serif;
      padding: 20px;
    }
    
    .crm-container {
      max-width: 1600px;
      margin: 0 auto;
      background: white;
      border-radius: 20px;
      box-shadow: 0 20px 40px rgba(0,0,0,0.08);
      padding: 25px;
    }
    
    .crm-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 25px;
      flex-wrap: wrap;
      gap: 15px;
    }
    
    .crm-title {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .crm-title h2 {
      font-weight: 600;
      color: #1e293b;
      margin: 0;
      font-size: 1.8rem;
    }
    
    .crm-title span {
      background: #e9ecef;
      padding: 5px 12px;
      border-radius: 50px;
      font-size: 0.9rem;
      color: #495057;
    }
    
    .search-box {
      position: relative;
      min-width: 300px;
    }
    
    .search-box i {
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      color: #94a3b8;
    }
    
    .search-box input {
      padding-left: 45px;
      border-radius: 50px;
      border: 2px solid #e2e8f0;
      height: 45px;
      font-size: 0.95rem;
    }
    
    .search-box input:focus {
      border-color: var(--primary-color);
      box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
    }
    
    .table {
      margin-top: 20px;
      font-size: 0.9rem;
    }
    
    .table thead th {
      background: #f1f5f9;
      color: #334155;
      font-weight: 600;
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      border-bottom: 2px solid #cbd5e1;
      white-space: nowrap;
      padding: 12px 8px;
    }
    
    .table tbody tr {
      transition: all 0.2s;
    }
    
    .table tbody tr:hover {
      background-color: #f8fafc;
    }
    
    .table td {
      padding: 12px 8px;
      vertical-align: middle;
      border-bottom: 1px solid #e9ecef;
    }
    
    .badge-vpn {
      background: #fee2e2;
      color: #991b1b;
      padding: 4px 8px;
      border-radius: 50px;
      font-size: 0.75rem;
      font-weight: 600;
    }
    
    .badge-vpn.off {
      background: #dcfce7;
      color: #166534;
    }
    
    .badge-consent {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
    }
    
    .badge-consent.yes {
      background: #dcfce7;
      color: #166534;
    }
    
    .badge-consent.no {
      background: #fee2e2;
      color: #991b1b;
    }
    
    .action-buttons {
      display: flex;
      gap: 5px;
      flex-wrap: wrap;
    }
    
    .btn-link-icon {
      background: none;
      border: none;
      color: #64748b;
      padding: 6px 10px;
      border-radius: 8px;
      transition: all 0.2s;
      font-size: 0.85rem;
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }
    
    .btn-link-icon:hover {
      background: #e9ecef;
      color: #1e293b;
    }
    
    .btn-link-icon.copied {
      background: #06d6a0;
      color: white;
    }
    
    .pagination {
      margin-top: 25px;
      justify-content: center;
    }
    
    .page-link {
      border: none;
      margin: 0 3px;
      border-radius: 10px;
      color: #64748b;
      font-weight: 500;
    }
    
    .page-item.active .page-link {
      background: var(--primary-color);
      color: white;
    }
    
    .stats-card {
      background: #f8fafc;
      border-radius: 12px;
      padding: 15px;
      margin-bottom: 20px;
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
      border: 1px solid #e9ecef;
    }
    
    .stat-item {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .stat-value {
      font-size: 1.5rem;
      font-weight: 600;
      color: #1e293b;
    }
    
    .stat-label {
      color: #64748b;
      font-size: 0.9rem;
    }
    
    .toast-copy {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background: #1e293b;
      color: white;
      padding: 12px 24px;
      border-radius: 50px;
      font-size: 0.9rem;
      box-shadow: 0 10px 20px rgba(0,0,0,0.2);
      transform: translateY(100px);
      opacity: 0;
      transition: all 0.3s;
      z-index: 9999;
    }
    
    .toast-copy.show {
      transform: translateY(0);
      opacity: 1;
    }
  </style>
</head>
<body>

<div class="crm-container">
  
  <!-- Header -->
  <div class="crm-header">
    <div class="crm-title">
      <i class="bi bi-people-fill" style="font-size: 2rem; color: var(--primary-color);"></i>
      <h2>Consentimientos Clientes</h2>
      <span><?= number_format($totalRegistros) ?> registros</span>
    </div>
    
    <div class="search-box">
      <i class="bi bi-search"></i>
      <input type="text" class="form-control" id="busquedaGeneral" placeholder="Buscar en todos los campos..." value="<?= htmlspecialchars($busquedaGeneral) ?>">
    </div>
  </div>
  
  <!-- Stats rápidas -->
  <div class="stats-card">
    <div class="stat-item">
      <i class="bi bi-check-circle-fill" style="color: #06d6a0; font-size: 1.5rem;"></i>
      <div>
        <div class="stat-value"><?= array_sum(array_column($registros, 'acepta_datos')) ?></div>
        <div class="stat-label">Consentimientos OK</div>
      </div>
    </div>
    <div class="stat-item">
      <i class="bi bi-shield-shaded" style="color: #ef476f; font-size: 1.5rem;"></i>
      <div>
        <div class="stat-value"><?= array_sum(array_column($registros, 'vpn_detectado')) ?></div>
        <div class="stat-label">VPN Detectados</div>
      </div>
    </div>
    <div class="stat-item">
      <i class="bi bi-envelope-fill" style="color: #4361ee; font-size: 1.5rem;"></i>
      <div>
        <div class="stat-value"><?= count(array_filter(array_column($registros, 'correo')))?></div>
        <div class="stat-label">Con Email</div>
      </div>
    </div>
  </div>

  <!-- Tabla -->
  <div class="table-responsive">
    <table class="table">
      <thead>
        <tr>
          <th>Cliente</th>
          <th>Contacto</th>
          <th>Ubicación</th>
          <th>IP / ISP</th>
          <th>VPN</th>
          <th>Consent.</th>
          <th>Comerc.</th>
          <th>Fecha</th>
          <th>Acciones</th>
        </tr>
      </thead>
      <tbody>
        <?php if (count($registros) > 0): ?>
          <?php foreach ($registros as $row): ?>
            <?php 
              $baseUrl = "https://csm.monteroampsoluciones.com/";
              $enlaceVista = $baseUrl . "vista.php?telefono=" . urlencode($row['telefono']);
              $enlaceFirma = $baseUrl . "firma.php?telefono=" . urlencode($row['telefono']);
            ?>
            <tr>
              <td>
                <strong><?= htmlspecialchars($row['nombre'] . ' ' . $row['apellido']) ?></strong>
              </td>
              <td>
                <div><i class="bi bi-telephone-fill" style="color: #64748b; font-size: 0.8rem;"></i> <?= htmlspecialchars($row['telefono']) ?></div>
                <?php if (!empty($row['correo'])): ?>
                  <div><i class="bi bi-envelope-fill" style="color: #64748b; font-size: 0.8rem;"></i> <?= htmlspecialchars($row['correo']) ?></div>
                <?php endif; ?>
              </td>
              <td>
                <?php if (!empty($row['pais']) && $row['pais'] !== 'Desconocido'): ?>
                  <div><?= htmlspecialchars($row['pais']) ?></div>
                  <small class="text-muted"><?= htmlspecialchars($row['provincia']) ?></small>
                <?php else: ?>
                  <span class="text-muted">-</span>
                <?php endif; ?>
              </td>
              <td>
                <?php if (!empty($row['ip_usuario'])): ?>
                  <div><small><?= htmlspecialchars($row['ip_usuario']) ?></small></div>
                  <small class="text-muted"><?= htmlspecialchars(substr($row['proveedor'], 0, 30)) ?></small>
                <?php else: ?>
                  <span class="text-muted">Pendiente</span>
                <?php endif; ?>
              </td>
              <td>
                <span class="badge-vpn <?= $row['vpn_detectado'] ? '' : 'off' ?>">
                  <?= $row['vpn_detectado'] ? 'VPN' : 'No VPN' ?>
                </span>
              </td>
              <td>
                <span class="badge-consent <?= $row['acepta_datos'] ? 'yes' : 'no' ?>">
                  <i class="bi bi-<?= $row['acepta_datos'] ? 'check' : 'x' ?>"></i>
                </span>
              </td>
              <td>
                <span class="badge-consent <?= $row['acepta_comerciales'] ? 'yes' : 'no' ?>">
                  <i class="bi bi-<?= $row['acepta_comerciales'] ? 'check' : 'x' ?>"></i>
                </span>
              </td>
              <td>
                <div><?= date('d/m/Y', strtotime($row['fecha_hora'])) ?></div>
                <small class="text-muted"><?= date('H:i', strtotime($row['fecha_hora'])) ?></small>
              </td>
              <td>
                  <div class="action-buttons">
                    <!-- Vista: abre en nueva pestaña -->
                    <a href="<?= $enlaceVista ?>" target="_blank" class="btn-link-icon" title="Abrir vista">
                      <i class="bi bi-eye-fill"></i> Vista
                    </a>
                    
                    <!-- Firma: copia al portapapeles -->
                    <button class="btn-link-icon" onclick="copiarEnlace('<?= $enlaceFirma ?>', this)" title="Copiar enlace de firma">
                      <i class="bi bi-pencil-fill"></i> Firma
                    </button>
                  </div>
              </td>
            </tr>
          <?php endforeach; ?>
        <?php else: ?>
          <tr>
            <td colspan="9" class="text-center py-5 text-muted">
              <i class="bi bi-inbox" style="font-size: 2rem; display: block; margin-bottom: 10px;"></i>
              No se encontraron registros
            </td>
          </tr>
        <?php endif; ?>
      </tbody>
    </table>
  </div>
  
  <!-- Paginación -->
  <?php if ($totalPaginas > 1): ?>
    <nav>
      <ul class="pagination">
        <li class="page-item <?= $paginaActual <= 1 ? 'disabled' : '' ?>">
          <a class="page-link" href="?<?= http_build_query(array_merge($_GET, ['pagina' => $paginaActual - 1])) ?>">
            <i class="bi bi-chevron-left"></i>
          </a>
        </li>
        
        <?php
        $rango = 2;
        $inicio = max(1, $paginaActual - $rango);
        $fin = min($totalPaginas, $paginaActual + $rango);
        
        if ($inicio > 1): ?>
          <li class="page-item"><a class="page-link" href="?<?= http_build_query(array_merge($_GET, ['pagina' => 1])) ?>">1</a></li>
          <?php if ($inicio > 2): ?>
            <li class="page-item disabled"><span class="page-link">...</span></li>
          <?php endif; ?>
        <?php endif; ?>
        
        <?php for ($i = $inicio; $i <= $fin; $i++): ?>
          <li class="page-item <?= $i == $paginaActual ? 'active' : '' ?>">
            <a class="page-link" href="?<?= http_build_query(array_merge($_GET, ['pagina' => $i])) ?>"><?= $i ?></a>
          </li>
        <?php endfor; ?>
        
        <?php if ($fin < $totalPaginas): ?>
          <?php if ($fin < $totalPaginas - 1): ?>
            <li class="page-item disabled"><span class="page-link">...</span></li>
          <?php endif; ?>
          <li class="page-item"><a class="page-link" href="?<?= http_build_query(array_merge($_GET, ['pagina' => $totalPaginas])) ?>"><?= $totalPaginas ?></a></li>
        <?php endif; ?>
        
        <li class="page-item <?= $paginaActual >= $totalPaginas ? 'disabled' : '' ?>">
          <a class="page-link" href="?<?= http_build_query(array_merge($_GET, ['pagina' => $paginaActual + 1])) ?>">
            <i class="bi bi-chevron-right"></i>
          </a>
        </li>
      </ul>
    </nav>
  <?php endif; ?>
</div>

<!-- Toast para feedback de copia -->
<div id="toastCopy" class="toast-copy">
  <i class="bi bi-check-circle-fill me-2"></i> Enlace copiado al portapapeles
</div>

<script>
  // Búsqueda en tiempo real
  const inputBusqueda = document.getElementById("busquedaGeneral");
  let timeoutId;
  
  inputBusqueda.addEventListener("input", () => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      const query = inputBusqueda.value.trim();
      const url = new URL(window.location.href);
      
      if (query.length > 0) {
        url.searchParams.set("q", query);
        url.searchParams.delete("telefono"); // Limpiar búsqueda antigua
      } else {
        url.searchParams.delete("q");
      }
      
      url.searchParams.set("pagina", "1"); // Volver a primera página
      window.location.href = url.toString();
    }, 500); // Esperar 500ms después de dejar de escribir
  });
  
  // Función para copiar enlaces
  function copiarEnlace(enlace, boton) {
    navigator.clipboard.writeText(enlace).then(() => {
      // Feedback visual
      const textoOriginal = boton.innerHTML;
      boton.innerHTML = '<i class="bi bi-check-lg"></i> Copiado';
      boton.classList.add('copied');
      
      // Mostrar toast
      const toast = document.getElementById('toastCopy');
      toast.classList.add('show');
      
      setTimeout(() => {
        boton.innerHTML = textoOriginal;
        boton.classList.remove('copied');
      }, 2000);
      
      setTimeout(() => {
        toast.classList.remove('show');
      }, 3000);
      
    }).catch(err => {
      alert('Error al copiar el enlace');
    });
  }
  
  // Mantener compatibilidad con búsqueda por teléfono (si existe en URL)
  <?php if ($telefonoBuscado !== ''): ?>
  document.addEventListener('DOMContentLoaded', () => {
    // Si hay búsqueda por teléfono en la URL, mostrarla en el campo de búsqueda general también
    inputBusqueda.value = '<?= htmlspecialchars($telefonoBuscado) ?>';
  });
  <?php endif; ?>
</script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>