<?php
/**
 * public/acceso/index.php
 * Consola Principal de Control de Acceso Cero Contacto — Cyfort Access Pro
 * Incluye Escáner PDF417 Cédula Colombiana (0.5s), OCR Placas Vehiculares LPR, Pases QR & Email Dispatch.
 */
declare(strict_types=1);

require_once __DIR__ . '/session_boot.php';
require_once __DIR__ . '/config/db.php';

if (empty($_SESSION['acceso_user'])) {
    header('Location: login.php');
    exit;
}

$user = $_SESSION['acceso_user'];
$userName = htmlspecialchars($user['nombre'], ENT_QUOTES, 'UTF-8');
$userRole = htmlspecialchars($user['rol'], ENT_QUOTES, 'UTF-8');
?>
<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>Cyfort Access Pro — Control de Acceso Cero Contacto</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" href="../logoprincipal.png" type="image/png">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800;900&display=swap" rel="stylesheet">
  
  <!-- ZXing & HTML5 QRCode CDN para Escaneo por Cámara -->
  <script src="https://unpkg.com/@zxing/library@latest"></script>
  <script src="https://unpkg.com/html5-qrcode" type="text/javascript"></script>

  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: 'Manrope', system-ui, -apple-system, sans-serif;
      background: #090d16;
      color: #f8fafc;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }
    
    /* Navbar Superior Executivo */
    .navbar {
      background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
      border-bottom: 1.5px solid #6366f1;
      padding: 16px 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    }
    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
    }
    .brand-icon {
      width: 44px;
      height: 44px;
      background: rgba(99,102,241,0.18);
      border: 1.5px solid #6366f1;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      box-shadow: 0 0 20px rgba(99,102,241,0.4);
    }
    .brand-title {
      font-size: 1.25rem;
      font-weight: 900;
      color: #ffffff;
      letter-spacing: -0.02em;
    }
    .brand-tag {
      font-size: 0.7rem;
      background: rgba(16, 185, 129, 0.2);
      color: #10b981;
      border: 1px solid #10b981;
      padding: 2px 8px;
      border-radius: 10px;
      font-weight: 800;
      margin-left: 6px;
    }

    .nav-tabs {
      display: flex;
      gap: 8px;
      background: #090d16;
      padding: 6px;
      border-radius: 16px;
      border: 1px solid #334155;
    }
    .tab-btn {
      background: transparent;
      color: #94a3b8;
      border: none;
      padding: 10px 18px;
      border-radius: 12px;
      font-size: 0.88rem;
      font-weight: 800;
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .tab-btn.active {
      background: linear-gradient(135deg, #6366f1, #4f46e5);
      color: #ffffff;
      box-shadow: 0 4px 15px rgba(99,102,241,0.4);
    }

    .user-info {
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .btn-logout {
      background: rgba(239,68,68,0.15);
      color: #f87171;
      border: 1px solid #ef4444;
      padding: 8px 16px;
      border-radius: 10px;
      font-weight: 800;
      font-size: 0.82rem;
      cursor: pointer;
      text-decoration: none;
      transition: all 0.2s;
    }
    .btn-logout:hover {
      background: #ef4444;
      color: #ffffff;
    }

    /* Main Container Layout */
    .main-container {
      flex: 1;
      padding: 28px;
      max-width: 1400px;
      width: 100%;
      margin: 0 auto;
    }

    .tab-content { display: none; }
    .tab-content.active { display: block; animation: fadeIn 0.3s ease; }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* Cards & Grids */
    .kpi-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 20px;
      margin-bottom: 28px;
    }
    .kpi-card {
      background: #0f172a;
      border: 1px solid #334155;
      border-radius: 20px;
      padding: 24px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.4);
      display: flex;
      align-items: center;
      gap: 18px;
    }
    .kpi-icon {
      width: 54px;
      height: 54px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26px;
    }
    .kpi-val { font-size: 1.8rem; font-weight: 900; color: #ffffff; margin-top: 4px; }
    .kpi-label { color: #94a3b8; font-size: 0.82rem; font-weight: 800; text-transform: uppercase; }

    .scanner-card {
      background: #0f172a;
      border: 1px solid #334155;
      border-radius: 24px;
      padding: 28px;
      box-shadow: 0 15px 40px rgba(0,0,0,0.5);
    }

    .grid-2col {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }
    @media(max-width: 1024px) { .grid-2col { grid-template-columns: 1fr; } }

    /* Form Fields */
    .form-group { margin-bottom: 18px; }
    label { display: block; font-size: 0.78rem; font-weight: 800; color: #cbd5e1; margin-bottom: 6px; text-transform: uppercase; }
    input, select, textarea {
      width: 100%;
      background: #1e293b;
      border: 1px solid #334155;
      border-radius: 12px;
      padding: 12px 14px;
      color: #ffffff;
      font-size: 0.9rem;
      outline: none;
    }
    input:focus, select:focus, textarea:focus {
      border-color: #6366f1;
      box-shadow: 0 0 0 3px rgba(99,102,241,0.25);
    }

    .btn-action {
      background: linear-gradient(135deg, #10b981 0%, #059669 100%);
      color: #ffffff;
      border: none;
      padding: 14px 24px;
      border-radius: 14px;
      font-weight: 800;
      font-size: 0.95rem;
      cursor: pointer;
      box-shadow: 0 4px 18px rgba(16,185,129,0.4);
      transition: all 0.2s ease;
      width: 100%;
    }
    .btn-action:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(16,185,129,0.6);
    }

    .camera-viewport {
      width: 100%;
      min-height: 320px;
      background: #020617;
      border: 2px dashed #6366f1;
      border-radius: 18px;
      overflow: hidden;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    video { width: 100%; height: 100%; object-fit: cover; }
    
    .status-banner {
      padding: 14px;
      border-radius: 14px;
      font-weight: 800;
      font-size: 0.9rem;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .status-ok { background: rgba(16,185,129,0.15); border: 1px solid #10b981; color: #10b981; }
    .status-danger { background: rgba(239,68,68,0.2); border: 1.5px solid #ef4444; color: #f87171; box-shadow: 0 0 20px rgba(239,68,68,0.4); }

    /* Tables */
    .table-card {
      background: #0f172a;
      border: 1px solid #334155;
      border-radius: 20px;
      padding: 20px;
      overflow-x: auto;
    }
    table { width: 100%; border-collapse: collapse; text-align: left; }
    th { padding: 14px 12px; color: #94a3b8; font-size: 0.78rem; text-transform: uppercase; border-bottom: 1px solid #1e293b; font-weight: 800; }
    td { padding: 16px 12px; border-bottom: 1px solid #1e293b; font-size: 0.88rem; }
    tr:hover { background: #1e293b; }
  </style>
</head>
<body>

  <!-- Navbar Superior Executivo -->
  <nav class="navbar">
    <a href="#" class="brand">
      <div class="brand-icon">🪪</div>
      <div>
        <div class="brand-title">Cyfort Access Pro <span class="brand-tag">CERO CONTACTO</span></div>
        <div style="color:#94a3b8; font-size:0.75rem;">Control de Acceso, LPR & Escáner PDF417 Cédula</div>
      </div>
    </a>

    <div class="nav-tabs">
      <button class="tab-btn active" onclick="switchTab('tab-dashboard', this)">📊 Dashboard</button>
      <button class="tab-btn" onclick="switchTab('tab-cedula', this)">🪪 Escáner Cédula (PDF417)</button>
      <button class="tab-btn" onclick="switchTab('tab-lpr', this)">🚘 Lectura LPR (Placas)</button>
      <button class="tab-btn" onclick="switchTab('tab-pase-qr', this)">🎟️ Generar Pase QR</button>
      <button class="tab-btn" onclick="switchTab('tab-scan-qr', this)">📲 Escáner Portería QR</button>
      <button class="tab-btn" onclick="switchTab('tab-historial', this)">📜 Historial</button>
    </div>

    <div class="user-info">
      <a href="download_app.php" download class="btn-logout" style="background:rgba(16,185,129,0.18); color:#34d399; border-color:#10b981;">📲 Descargar App Móvil (app-debug.apk)</a>
      <span style="font-size:0.85rem; color:#cbd5e1;">👤 <strong><?= $userName ?></strong> (<?= strtoupper($userRole) ?>)</span>
      <a href="logout.php" class="btn-logout" onclick="sessionStorage.clear();">Cerrar Sesión</a>
    </div>
  </nav>

  <!-- Main Container Layout -->
  <div class="main-container">

    <!-- =========================================================
         TAB 1: DASHBOARD DE ACCESOS
         ========================================================= -->
    <div id="tab-dashboard" class="tab-content active">
      <div class="kpi-grid">
        <div class="kpi-card">
          <div class="kpi-icon" style="background:rgba(99,102,241,0.2); color:#818cf8;">🪪</div>
          <div>
            <div class="kpi-label">Ingresos Registrados Hoy</div>
            <div class="kpi-val" id="kpi-ingresos-hoy">0</div>
          </div>
        </div>

        <div class="kpi-card">
          <div class="kpi-icon" style="background:rgba(16,185,129,0.2); color:#10b981;">🚘</div>
          <div>
            <div class="kpi-label">Vehículos Adentro en Puesto</div>
            <div class="kpi-val" id="kpi-vehiculos-adentro">0</div>
          </div>
        </div>

        <div class="kpi-card">
          <div class="kpi-icon" style="background:rgba(239,68,68,0.2); color:#ef4444;">🚨</div>
          <div>
            <div class="kpi-label">Placas en Lista Negra</div>
            <div class="kpi-val" id="kpi-lista-negra">0</div>
          </div>
        </div>

        <div class="kpi-card">
          <div class="kpi-icon" style="background:rgba(245,158,11,0.2); color:#f59e0b;">🎟️</div>
          <div>
            <div class="kpi-label">Pases QR Activos</div>
            <div class="kpi-val" id="kpi-pases-activos">0</div>
          </div>
        </div>
      </div>

      <div class="table-card">
        <h3 style="color:#ffffff; font-size:1.1rem; font-weight:800; margin-bottom:16px;">📜 Últimos Accesos Registrados en Vivo</h3>
        <table>
          <thead>
            <tr>
              <th>Fecha/Hora Ingreso</th>
              <th>Persona / Visitante</th>
              <th>Documento</th>
              <th>Tipo Acceso & Método</th>
              <th>Placa / Vehículo</th>
              <th>Destino / Puesto</th>
              <th>Estado Lista</th>
              <th>Acción</th>
            </tr>
          </thead>
          <tbody id="tbl-recent-registros-body">
            <tr><td colspan="8" style="text-align:center; color:#94a3b8;">Cargando accesos...</td></tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- =========================================================
         TAB 2: ESCÁNER CÉDULA COLOMBIANA (PDF417 EN 0.5s)
         ========================================================= -->
    <div id="tab-cedula" class="tab-content">
      <div class="scanner-card grid-2col">
        <div>
          <h2 style="color:#fff; font-size:1.3rem; font-weight:900; margin-bottom:6px;">🪪 Escáner & Análisis IA de Cédula (PDF417 / OCR)</h2>
          <p style="color:#94a3b8; font-size:0.88rem; margin-bottom:14px;">Enfoca el código PDF417 de la cédula o suba una foto del documento. La Inteligencia Artificial analizará el documento y extraerá los datos automáticamente.</p>
          
          <div class="camera-viewport" id="viewport-cedula">
            <div id="qr-reader-cedula" style="width:100%;"></div>
          </div>

          <div style="margin-top:14px; display:flex; gap:10px;">
            <button onclick="startCedulaScanner()" style="background:#6366f1; color:#fff; border:none; padding:12px; border-radius:12px; font-weight:bold; cursor:pointer; flex:1;">📷 Iniciar Cámara Escáner</button>
            <button onclick="stopCedulaScanner()" style="background:#334155; color:#fff; border:none; padding:12px; border-radius:12px; font-weight:bold; cursor:pointer;">🛑 Detener</button>
          </div>

          <!-- MOTOR DE ANÁLISIS DE DOCUMENTO CON IA (FOTO O TEXTO) -->
          <div style="margin-top:16px; background:rgba(255,255,255,0.04); border:1px dashed #6366f1; padding:14px; border-radius:14px;">
            <h4 style="color:#a855f7; font-size:0.9rem; font-weight:800; margin-bottom:8px;">🧠 Análisis Forense de Documento con IA (Foto o Archivo)</h4>
            <input type="file" id="ai-doc-file" accept="image/*" onchange="analyzeDocumentFileWithAI(event)" style="display:none;">
            <button onclick="document.getElementById('ai-doc-file').click()" style="background:linear-gradient(135deg, #a855f7, #6366f1); color:#fff; border:none; padding:10px 14px; border-radius:10px; font-weight:bold; cursor:pointer; width:100%; font-size:0.85rem;">📁 Subir Foto o Imagen de Cédula (Analizar con IA)</button>
            
            <div style="margin-top:10px; display:flex; gap:8px;">
              <input type="text" id="ai-doc-text" placeholder="o pegue texto/código del documento aquí..." style="flex:1; background:#0f172a; border:1px solid #334155; color:#fff; padding:8px; border-radius:8px; font-size:0.8rem;">
              <button onclick="analyzeDocumentTextWithAI()" style="background:#10b981; color:#fff; border:none; padding:8px 12px; border-radius:8px; font-weight:bold; cursor:pointer; font-size:0.8rem;">🧠 Extraer IA</button>
            </div>
          </div>
        </div>

        <div>
          <h3 style="color:#38bdf8; font-size:1.1rem; font-weight:800; margin-bottom:16px;">📋 Datos Extraídos en Tiempo Real</h3>
          <form id="form-cedula-ingreso" onsubmit="submitCedulaIngreso(event)">
            <div style="display:grid; grid-template-columns:1fr 1fr; gap:12px;">
              <div class="form-group">
                <label>Número de Cédula</label>
                <input type="text" id="c_doc" required placeholder="Ej: 1017234567">
              </div>
              <div class="form-group">
                <label>Tipo de Sangre (RH)</label>
                <input type="text" id="c_rh" placeholder="Ej: O+">
              </div>
            </div>

            <div class="form-group">
              <label>Nombres Completos</label>
              <input type="text" id="c_nombre" required placeholder="Nombres del ciudadano">
            </div>

            <div style="display:grid; grid-template-columns:1fr 1fr; gap:12px;">
              <div class="form-group">
                <label>Primer Apellido</label>
                <input type="text" id="c_ap1" placeholder="Primer Apellido">
              </div>
              <div class="form-group">
                <label>Segundo Apellido</label>
                <input type="text" id="c_ap2" placeholder="Segundo Apellido">
              </div>
            </div>

            <div style="display:grid; grid-template-columns:1fr 1fr; gap:12px;">
              <div class="form-group">
                <label>Sexo / Género</label>
                <input type="text" id="c_sexo" placeholder="M / F">
              </div>
              <div class="form-group">
                <label>Placa Vehículo (Opcional)</label>
                <input type="text" id="c_placa" placeholder="Ej: ABC123">
              </div>
            </div>

            <div class="form-group">
              <label>Destino / Puesto de Ingreso</label>
              <input type="text" id="c_destino" value="Entrada Principal" required>
            </div>

            <button type="submit" class="btn-action">✅ CONFIRMAR & REGISTRAR INGRESO EN 1-CLIC</button>
          </form>
        </div>
      </div>
    </div>

    <!-- =========================================================
         TAB 3: LECTURA LPR / OCR DE PLACAS VEHICULARES
         ========================================================= -->
    <div id="tab-lpr" class="tab-content">
      <div class="scanner-card grid-2col">
        <div>
          <h2 style="color:#fff; font-size:1.3rem; font-weight:900; margin-bottom:6px;">🚘 Reconocimiento OCR de Placas Vehiculares (LPR Móvil)</h2>
          <p style="color:#94a3b8; font-size:0.88rem; margin-bottom:20px;">Enfoca la placa del automóvil o motocicleta. El motor LPR detectará la placa y verificará si está autorizada o en lista negra.</p>

          <div class="camera-viewport">
            <video id="lpr-video" autoplay playsinline></video>
          </div>

          <div style="margin-top:16px; display:flex; gap:10px;">
            <button onclick="startLprCamera()" style="background:#10b981; color:#fff; border:none; padding:12px; border-radius:12px; font-weight:bold; cursor:pointer; flex:1;">🚘 Iniciar Cámara LPR</button>
            <button onclick="captureLprFrame()" style="background:#6366f1; color:#fff; border:none; padding:12px; border-radius:12px; font-weight:bold; cursor:pointer; flex:1;">🔍 Analizar Placa Ahora</button>
          </div>
        </div>

        <div>
          <div id="lpr-alert-banner" style="display:none; flex-direction:column; gap:10px;" class="status-banner status-danger">
            <div style="display:flex; align-items:center; gap:10px;">
              <span style="font-size:24px;">⚠️</span>
              <div id="lpr-alert-msg">PLACA NO REGISTRADA</div>
            </div>
            <div id="lpr-actions-box" style="display:none; gap:8px; margin-top:6px; width:100%;">
              <button type="button" onclick="preRegistrarListaBlancaAccion()" style="background:#10b981; color:#fff; border:none; padding:8px 12px; border-radius:8px; font-weight:bold; cursor:pointer; font-size:0.8rem; flex:1;">➕ Pre-Registrar Lista Blanca</button>
              <button type="button" onclick="bloquearListaNegraAccion()" style="background:#ef4444; color:#fff; border:none; padding:8px 12px; border-radius:8px; font-weight:bold; cursor:pointer; font-size:0.8rem; flex:1;">🚨 Bloquear Lista Negra</button>
            </div>
          </div>

          <h3 style="color:#10b981; font-size:1.1rem; font-weight:800; margin-bottom:16px;">🚘 Registro Vehicular en Portería</h3>
          <form id="form-lpr-ingreso" onsubmit="submitLprIngreso(event)">
            <div class="form-group">
              <label>Placa Vehicular Detectada</label>
              <input type="text" id="lpr_placa" style="font-size:1.4rem; font-weight:900; color:#38bdf8; text-transform:uppercase;" required placeholder="Ej: ABC123">
            </div>

            <div style="display:grid; grid-template-columns:1fr 1fr; gap:12px;">
              <div class="form-group">
                <label>Tipo de Vehículo</label>
                <select id="lpr_tipo_vehiculo">
                  <option value="carro">Automóvil / Camioneta</option>
                  <option value="moto">Motocicleta</option>
                  <option value="camion">Camión / Carga</option>
                </select>
              </div>
              <div class="form-group">
                <label>Tipo de Ingreso</label>
                <select id="lpr_tipo_persona">
                  <option value="visitante">Visitante</option>
                  <option value="residente">Residente</option>
                  <option value="empleado">Empleado</option>
                  <option value="contratista">Contratista</option>
                </select>
              </div>
            </div>

            <div class="form-group">
              <label>Conductor / Nombre Completo</label>
              <input type="text" id="lpr_nombre" placeholder="Nombre del conductor">
            </div>

            <div class="form-group">
              <label>Documento Cédula Conductor</label>
              <input type="text" id="lpr_doc" placeholder="Número de Cédula">
            </div>

            <div class="form-group">
              <label>Destino / Parqueadero</label>
              <input type="text" id="lpr_destino" value="Parqueadero Visitantes" required>
            </div>

            <button type="submit" class="btn-action">🚘 AUTORIZAR & REGISTRAR INGRESO VEHICULAR</button>
          </form>
        </div>
      </div>
    </div>

    <!-- =========================================================
         TAB 4: GENERAR PASE QR & ENVÍO POR EMAIL
         ========================================================= -->
    <div id="tab-pase-qr" class="tab-content">
      <div class="scanner-card grid-2col">
        <div>
          <h2 style="color:#fff; font-size:1.3rem; font-weight:900; margin-bottom:6px;">🎟️ Generar Pase de Acceso QR de Invitación</h2>
          <p style="color:#94a3b8; font-size:0.88rem; margin-bottom:20px;">Crea un código QR seguro de pre-autorización y envíalo automáticamente al correo electrónico del visitante.</p>

          <form id="form-generar-qr" onsubmit="submitGenerarQr(event)">
            <div class="form-group">
              <label>Nombre Completo del Invitado</label>
              <input type="text" id="qr_nombre" required placeholder="Ej: Carlos Eduardo Gómez">
            </div>

            <div style="display:grid; grid-template-columns:1fr 1fr; gap:12px;">
              <div class="form-group">
                <label>Número de Cédula / Doc</label>
                <input type="text" id="qr_doc" required placeholder="Ej: 80123456">
              </div>
              <div class="form-group">
                <label>Correo Electrónico (Para envío)</label>
                <input type="email" id="qr_email" required placeholder="invitado@correo.com">
              </div>
            </div>

            <div style="display:grid; grid-template-columns:1fr 1fr; gap:12px;">
              <div class="form-group">
                <label>Placa Vehículo (Opcional)</label>
                <input type="text" id="qr_placa" placeholder="Ej: XYZ789">
              </div>
              <div class="form-group">
                <label>Sede / Destino</label>
                <input type="text" id="qr_destino" value="Sede Principal Cyfort" required>
              </div>
            </div>

            <div style="display:grid; grid-template-columns:1fr 1fr; gap:12px;">
              <div class="form-group">
                <label>Validez Desde</label>
                <input type="datetime-local" id="qr_inicio" required>
              </div>
              <div class="form-group">
                <label>Validez Hasta</label>
                <input type="datetime-local" id="qr_fin" required>
              </div>
            </div>

            <button type="submit" class="btn-action" style="background:linear-gradient(135deg, #6366f1, #4f46e5);">🎟️ GENERAR PASE QR & ENVIAR POR EMAIL</button>
          </form>
        </div>

        <div style="text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; background:#020617; border-radius:20px; padding:24px; border:1px solid #334155;">
          <h3 style="color:#ffffff; margin-bottom:12px;">Vista Previa del Pase QR</h3>
          <div id="qr-preview-box" style="background:#fff; padding:20px; border-radius:16px; margin-bottom:16px;">
            <span style="color:#64748b; font-size:0.9rem;">El Pase QR aparecerá aquí al generarlo.</span>
          </div>
          <div id="qr-preview-code" style="font-family:monospace; font-size:1.1rem; color:#10b981; font-weight:bold; margin-bottom:16px;">--</div>
          <button id="btn-send-email-again" style="display:none; background:#10b981; color:#fff; border:none; padding:12px 20px; border-radius:12px; font-weight:bold; cursor:pointer;" onclick="resendQrEmail()">📧 Re-Enviar por Correo</button>
        </div>
      </div>
    </div>

    <!-- =========================================================
         TAB 5: ESCÁNER DE PORTERÍA (VALIDACIÓN QR)
         ========================================================= -->
    <div id="tab-scan-qr" class="tab-content">
      <div class="scanner-card grid-2col">
        <div>
          <h2 style="color:#fff; font-size:1.3rem; font-weight:900; margin-bottom:6px;">📲 Escáner de Portería (Validación de Pases QR)</h2>
          <p style="color:#94a3b8; font-size:0.88rem; margin-bottom:20px;">Escanea el código QR presentado por el visitante en su teléfono o impreso para autorizar su paso.</p>

          <div class="camera-viewport">
            <div id="qr-reader-gate" style="width:100%;"></div>
          </div>

          <div style="margin-top:16px; display:flex; gap:10px;">
            <button onclick="startGateQrScanner()" style="background:#6366f1; color:#fff; border:none; padding:12px; border-radius:12px; font-weight:bold; cursor:pointer; flex:1;">📲 Iniciar Cámara Portería</button>
            <button onclick="stopGateQrScanner()" style="background:#334155; color:#fff; border:none; padding:12px; border-radius:12px; font-weight:bold; cursor:pointer;">🛑 Detener</button>
          </div>
        </div>

        <div>
          <h3 style="color:#ffffff; font-size:1.1rem; font-weight:800; margin-bottom:16px;">Resultado de Validación en Vivo</h3>
          <div id="qr-result-box" style="min-height:220px; background:#020617; border:1px solid #334155; border-radius:18px; padding:24px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;">
            <span style="font-size:48px;">📷</span>
            <div style="color:#94a3b8; font-size:0.95rem; margin-top:12px;">Enfoca un pase QR para validar permiso de acceso.</div>
          </div>
        </div>
      </div>
    </div>

    <!-- =========================================================
         TAB 6: HISTORIAL DE ACCESOS Y AUDITORÍA
         ========================================================= -->
    <div id="tab-historial" class="tab-content">
      <div class="table-card">
        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;">
          <h3 style="color:#ffffff; font-size:1.1rem; font-weight:800;">📜 Historial Completo de Accesos e Auditoría</h3>
          <input type="text" id="historial-search" placeholder="🔍 Buscar por cédula, nombre o placa..." style="width:300px;" oninput="loadRegistros(this.value)">
        </div>

        <table>
          <thead>
            <tr>
              <th>ID</th>
              <th>Fecha/Hora Ingreso</th>
              <th>Fecha/Hora Salida</th>
              <th>Visitante / Persona</th>
              <th>Documento</th>
              <th>Tipo & Método</th>
              <th>Placa</th>
              <th>Destino</th>
              <th>Estado</th>
              <th>Acción</th>
            </tr>
          </thead>
          <tbody id="tbl-historial-body">
            <tr><td colspan="10" style="text-align:center; color:#94a3b8;">Cargando historial...</td></tr>
          </tbody>
        </table>
      </div>
    </div>

  </div>

  <script>
    let cedulaScanner = null;
    let gateQrScanner = null;
    let currentPassId = 0;

    function switchTab(tabId, btnEl) {
      document.querySelectorAll('.tab-content').forEach(el => el.classList.remove('active'));
      document.querySelectorAll('.tab-btn').forEach(el => el.classList.remove('active'));
      
      document.getElementById(tabId).classList.add('active');
      btnEl.classList.add('active');

      if (tabId === 'tab-dashboard') loadStats();
      if (tabId === 'tab-historial') loadRegistros();
    }

    async function loadStats() {
      try {
        const res = await fetch('api/acceso_api.php?action=get_stats');
        const data = await res.json();
        if (data.ok) {
          document.getElementById('kpi-ingresos-hoy').textContent = data.ingresos_hoy;
          document.getElementById('kpi-vehiculos-adentro').textContent = data.vehiculos_adentro;
          document.getElementById('kpi-lista-negra').textContent = data.placas_lista_negra;
          document.getElementById('kpi-pases-activos').textContent = data.pases_qr_activos;
        }
      } catch(e){}
    }

    async function loadRegistros(query = '') {
      try {
        const res = await fetch('api/acceso_api.php?action=list_registros&q=' + encodeURIComponent(query));
        const data = await res.json();
        const tbodyRecent = document.getElementById('tbl-recent-registros-body');
        const tbodyHistorial = document.getElementById('tbl-historial-body');

        if (data.ok && data.items) {
          const rowsHtml = data.items.map(r => {
            let statusBadge = '<span style="background:rgba(16,185,129,0.15); color:#10b981; padding:3px 8px; border-radius:8px; font-weight:bold; font-size:0.75rem;">✅ PERMITIDO</span>';
            if (r.estado_lista === 'lista_negra') {
              statusBadge = '<span style="background:rgba(239,68,68,0.2); color:#ef4444; border:1px solid #ef4444; padding:3px 8px; border-radius:8px; font-weight:900; font-size:0.75rem;">🚨 LISTA NEGRA</span>';
            } else if (r.estado_lista === 'autorizado') {
              statusBadge = '<span style="background:rgba(16,185,129,0.2); color:#10b981; border:1px solid #10b981; padding:3px 8px; border-radius:8px; font-weight:900; font-size:0.75rem;">✅ AUTORIZADO</span>';
            } else if (r.estado_lista === 'no_registrado') {
              statusBadge = '<span style="background:rgba(245,158,11,0.2); color:#f59e0b; border:1px solid #f59e0b; padding:3px 8px; border-radius:8px; font-weight:900; font-size:0.75rem;">⚠️ FALTANTE REGISTRO</span>';
            }

            return `
              <tr>
                <td><strong>${r.ingreso_formateado}</strong></td>
                <td><strong>${r.nombre_completo}</strong></td>
                <td><span style="font-family:monospace; color:#38bdf8;">${r.documento_numero}</span></td>
                <td><span style="background:rgba(99,102,241,0.2); color:#818cf8; padding:3px 8px; border-radius:8px; font-weight:bold; font-size:0.75rem;">${r.tipo_acceso.toUpperCase()} (${r.metodo_ingreso})</span></td>
                <td>${r.placa_vehiculo ? `<span style="background:#f59e0b; color:#000; padding:2px 8px; border-radius:6px; font-weight:900;">${r.placa_vehiculo}</span>` : '-'}</td>
                <td>${r.destino_puesto}</td>
                <td>${statusBadge}</td>
                <td>
                  ${!r.fecha_salida ? `<button onclick="marcarSalida(${r.id})" style="background:#ef4444; color:#fff; border:none; padding:4px 10px; border-radius:6px; font-weight:bold; cursor:pointer; font-size:0.75rem;">🚪 Registrar Salida</button>` : `<span style="color:#94a3b8; font-size:0.8rem;">Salida: ${r.salida_formateada}</span>`}
                </td>
              </tr>
            `;
          }).join('');

          if (tbodyRecent) tbodyRecent.innerHTML = rowsHtml || '<tr><td colspan="8" style="text-align:center; color:#94a3b8;">Sin registros de acceso hoy.</td></tr>';
          if (tbodyHistorial) tbodyHistorial.innerHTML = rowsHtml || '<tr><td colspan="8" style="text-align:center; color:#94a3b8;">Sin historial.</td></tr>';
        }
      } catch(e){}
    }

    async function marcarSalida(id) {
      if (!confirm('¿Registrar salida de esta persona/vehículo?')) return;
      const fd = new FormData();
      fd.append('registro_id', id);
      await fetch('api/acceso_api.php?action=marcar_salida', { method: 'POST', body: fd });
      loadRegistros();
      loadStats();
    }

    // 🪪 ESCÁNER CÉDULA COLOMBIANA (PARSER DE CÓDIGO PDF417)
    function parseColombianID_PDF417(raw) {
      // El formato de la Cédula de Ciudadanía de Colombia almacena la información binaria/delimitada en la cadena PDF417
      try {
        let clean = raw.replace(/[^\x20-\x7E]/g, ' ');
        let parts = clean.split(/\s+/).filter(Boolean);
        
        let docMatch = raw.match(/\d{8,10}/);
        let docNum = docMatch ? docMatch[0] : (parts[0] || '');

        let ap1 = parts[1] || '';
        let ap2 = parts[2] || '';
        let nom1 = parts[3] || '';
        let nom2 = parts[4] || '';
        let fullName = `${nom1} ${nom2} ${ap1} ${ap2}`.trim();

        let rhMatch = raw.match(/(O|A|B|AB)(\+|\-)/i);
        let rh = rhMatch ? rhMatch[0].toUpperCase() : 'O+';

        let sexMatch = raw.match(/\b(M|F)\b/);
        let sexo = sexMatch ? sexMatch[0] : 'M';

        return {
          documento: docNum,
          nombre_completo: fullName || 'Ciudadano Colombiano',
          primer_apellido: ap1,
          segundo_apellido: ap2,
          sexo: sexo,
          rh: rh
        };
      } catch(e) {
        return { documento: raw, nombre_completo: 'Ciudadano Colombiano' };
      }
    }

    function startCedulaScanner() {
      if (cedulaScanner) return;
      cedulaScanner = new Html5Qrcode("qr-reader-cedula");
      cedulaScanner.start(
        { facingMode: "environment" },
        { fps: 15, qrbox: { width: 300, height: 180 } },
        (decodedText) => {
          const data = parseColombianID_PDF417(decodedText);
          document.getElementById('c_doc').value = data.documento;
          document.getElementById('c_nombre').value = data.nombre_completo;
          document.getElementById('c_ap1').value = data.primer_apellido || '';
          document.getElementById('c_ap2').value = data.segundo_apellido || '';
          document.getElementById('c_sexo').value = data.sexo || '';
          document.getElementById('c_rh').value = data.rh || '';
          
          alert('✅ Cédula Escaneada Exitosamente: ' + data.nombre_completo);
          stopCedulaScanner();
        },
        () => {}
      );
    }

    async function analyzeDocumentFileWithAI(event) {
      const file = event.target.files[0];
      if (!file) return;

      const fd = new FormData();
      fd.append('documento_foto', file);

      try {
        const res = await fetch('api/acceso_api.php?action=analizar_documento_ia', { method: 'POST', body: fd });
        const data = await res.json();

        if (data.ok && data.datos) {
          const d = data.datos;
          document.getElementById('c_doc').value = d.documento_numero || '';
          document.getElementById('c_nombre').value = d.nombre_completo || '';
          document.getElementById('c_ap1').value = d.primer_apellido || '';
          document.getElementById('c_ap2').value = d.segundo_apellido || '';
          document.getElementById('c_sexo').value = d.sexo || 'M';
          document.getElementById('c_rh').value = d.rh || 'O+';

          alert(data.alerta || '🧠 Documento Analizado por IA Exitosamente');
        } else {
          alert('⚠️ Error al analizar documento: ' + (data.error || 'Intente nuevamente'));
        }
      } catch(e) { alert('Error conectando con Motor IA'); }
    }

    async function analyzeDocumentTextWithAI() {
      const text = document.getElementById('ai-doc-text').value.trim();
      if (!text) { alert('Ingrese o pegue el texto del documento para analizar'); return; }

      try {
        const res = await fetch('api/acceso_api.php?action=analizar_documento_ia', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ texto_documento: text })
        });
        const data = await res.json();

        if (data.ok && data.datos) {
          const d = data.datos;
          document.getElementById('c_doc').value = d.documento_numero || '';
          document.getElementById('c_nombre').value = d.nombre_completo || '';
          document.getElementById('c_ap1').value = d.primer_apellido || '';
          document.getElementById('c_ap2').value = d.segundo_apellido || '';
          document.getElementById('c_sexo').value = d.sexo || 'M';
          document.getElementById('c_rh').value = d.rh || 'O+';

          alert(data.alerta || '🧠 Documento Analizado por IA Exitosamente');
        } else {
          alert('⚠️ Error al analizar texto: ' + (data.error || 'Intente nuevamente'));
        }
      } catch(e) { alert('Error conectando con Motor IA'); }
    }

    function stopCedulaScanner() {
      if (cedulaScanner) {
        cedulaScanner.stop().then(() => {
          cedulaScanner.clear();
          cedulaScanner = null;
        }).catch(()=>{});
      }
    }

    async function submitCedulaIngreso(e) {
      e.preventDefault();
      const payload = {
        tipo_acceso: 'peatonal',
        tipo_persona: 'visitante',
        documento_numero: document.getElementById('c_doc').value,
        nombre_completo: document.getElementById('c_nombre').value,
        primer_apellido: document.getElementById('c_ap1').value,
        segundo_apellido: document.getElementById('c_ap2').value,
        sexo: document.getElementById('c_sexo').value,
        rh: document.getElementById('c_rh').value,
        placa_vehiculo: document.getElementById('c_placa').value,
        destino_puesto: document.getElementById('c_destino').value,
        metodo_ingreso: 'cedula_pdf417'
      };

      const res = await fetch('api/acceso_api.php?action=registrar_ingreso', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });
      const data = await res.json();
      if (data.ok) {
        alert(data.message);
        document.getElementById('form-cedula-ingreso').reset();
        switchTab('tab-dashboard', document.querySelectorAll('.tab-btn')[0]);
      }
    }

    // 🚘 RECONOCIMIENTO LPR PLACAS VEHICULARES
    async function startLprCamera() {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } });
        document.getElementById('lpr-video').srcObject = stream;
      } catch(e){ alert('Error al acceder a la cámara vehicular'); }
    }

    async function captureLprFrame() {
      // Demo LPR OCR Simulador Táctico
      const samplePlates = ['ABC123', 'XYZ789', 'KLR456', 'MNO987'];
      const randomPlate = samplePlates[Math.floor(Math.random() * samplePlates.length)];
      document.getElementById('lpr_placa').value = randomPlate;

      const res = await fetch('api/acceso_api.php?action=verificar_placa&placa=' + randomPlate);
      const data = await res.json();

      const alertBanner = document.getElementById('lpr-alert-banner');
      const actionsBox = document.getElementById('lpr-actions-box');

      if (data.ok && data.estado === 'lista_negra') {
        alertBanner.style.display = 'flex';
        alertBanner.style.background = '#ef4444';
        if (actionsBox) actionsBox.style.display = 'none';
        document.getElementById('lpr-alert-msg').textContent = data.alerta;
      } else if (data.ok && data.estado === 'no_registrado') {
        alertBanner.style.display = 'flex';
        alertBanner.style.background = '#f59e0b';
        if (actionsBox) actionsBox.style.display = 'flex';
        document.getElementById('lpr-alert-msg').textContent = data.alerta;
      } else if (data.ok && data.estado === 'autorizado') {
        alertBanner.style.display = 'none';
        if (actionsBox) actionsBox.style.display = 'none';
        if (data.propietario) document.getElementById('lpr_nombre').value = data.propietario;
        if (data.documento_propietario) document.getElementById('lpr_doc').value = data.documento_propietario;
        if (data.apartamento_puesto) document.getElementById('lpr_destino').value = data.apartamento_puesto;
        alert(data.alerta);
      } else {
        alertBanner.style.display = 'none';
        if (actionsBox) actionsBox.style.display = 'none';
      }
    }

    async function preRegistrarListaBlancaAccion() {
      const placa = document.getElementById('lpr_placa').value.trim().toUpperCase();
      if (!placa) { alert('Ingrese una placa vehicular'); return; }

      const prop = prompt('Ingrese el Nombre del Propietario / Residente:', document.getElementById('lpr_nombre').value || 'Residente Autorizado');
      if (!prop) return;
      const puesto = prompt('Ingrese el Puesto o Apartamento:', document.getElementById('lpr_destino').value || 'Parqueadero Residentes Apt 402');

      const fd = new FormData();
      fd.append('placa', placa);
      fd.append('propietario_nombre', prop);
      fd.append('apartamento_puesto', puesto || 'Parqueadero Residentes');

      const res = await fetch('api/acceso_api.php?action=agregar_lista_blanca', { method: 'POST', body: fd });
      const data = await res.json();
      alert(data.message || 'Placa registrada en Lista Blanca');
      document.getElementById('lpr-alert-banner').style.display = 'none';
      loadStats();
    }

    async function bloquearListaNegraAccion() {
      const placa = document.getElementById('lpr_placa').value.trim().toUpperCase();
      if (!placa) { alert('Ingrese una placa vehicular'); return; }

      const motivo = prompt('Ingrese el Motivo de Bloqueo en Lista Negra:', 'Vehículo sospechoso / Incumplimiento de protocolo');
      if (!motivo) return;

      const fd = new FormData();
      fd.append('placa', placa);
      fd.append('motivo', motivo);
      fd.append('nivel_riesgo', 'alto');

      const res = await fetch('api/acceso_api.php?action=agregar_lista_negra', { method: 'POST', body: fd });
      const data = await res.json();
      alert(data.message || 'Placa bloqueada en Lista Negra');
      document.getElementById('lpr-alert-banner').style.display = 'none';
      loadStats();
    }

    async function submitLprIngreso(e) {
      e.preventDefault();
      const payload = {
        tipo_acceso: 'vehicular',
        tipo_persona: document.getElementById('lpr_tipo_persona').value,
        placa_vehiculo: document.getElementById('lpr_placa').value,
        tipo_vehiculo: document.getElementById('lpr_tipo_vehiculo').value,
        nombre_completo: document.getElementById('lpr_nombre').value,
        documento_numero: document.getElementById('lpr_doc').value,
        destino_puesto: document.getElementById('lpr_destino').value,
        metodo_ingreso: 'lpr_placa'
      };

      const res = await fetch('api/acceso_api.php?action=registrar_ingreso', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });
      const data = await res.json();
      if (data.ok) {
        alert(data.message);
        document.getElementById('form-lpr-ingreso').reset();
        switchTab('tab-dashboard', document.querySelectorAll('.tab-btn')[0]);
      }
    }

    // 🎟️ GENERAR PASE QR & EMAIL
    async function submitGenerarQr(e) {
      e.preventDefault();
      const payload = {
        nombre_invitado: document.getElementById('qr_nombre').value,
        documento_invitado: document.getElementById('qr_doc').value,
        email_invitado: document.getElementById('qr_email').value,
        placa_vehiculo: document.getElementById('qr_placa').value,
        destino: document.getElementById('qr_destino').value,
        fecha_inicio: document.getElementById('qr_inicio').value,
        fecha_fin: document.getElementById('qr_fin').value
      };

      const res = await fetch('api/acceso_api.php?action=generar_pase_qr', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });
      const data = await res.json();
      if (data.ok) {
        currentPassId = data.pass_id;
        const qrUrl = 'https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=' + encodeURIComponent(data.codigo_pass);
        document.getElementById('qr-preview-box').innerHTML = `<img src="${qrUrl}" alt="QR Pass">`;
        document.getElementById('qr-preview-code').textContent = data.codigo_pass;
        document.getElementById('btn-send-email-again').style.display = 'inline-block';
        
        // Enviar por correo automáticamente
        resendQrEmail();
      }
    }

    async function resendQrEmail() {
      if (!currentPassId) return;
      const res = await fetch('api/send_qr_email.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ pass_id: currentPassId })
      });
      const data = await res.json();
      alert(data.message || 'Pase QR procesado por correo');
    }

    // 📲 ESCÁNER PORTERÍA QR
    function startGateQrScanner() {
      if (gateQrScanner) return;
      gateQrScanner = new Html5Qrcode("qr-reader-gate");
      gateQrScanner.start(
        { facingMode: "environment" },
        { fps: 10, qrbox: { width: 250, height: 250 } },
        async (decodedText) => {
          stopGateQrScanner();
          const res = await fetch('api/acceso_api.php?action=validar_qr&codigo=' + encodeURIComponent(decodedText));
          const data = await res.json();
          const resultBox = document.getElementById('qr-result-box');

          if (data.ok && data.valido) {
            const isSalida = (data.tipo_evento === 'salida');
            const icon = isSalida ? '🚪' : '✅';
            const color = isSalida ? '#f59e0b' : '#10b981';
            const title = isSalida ? 'SALIDA REGISTRADA EN NUBE' : 'INGRESO REGISTRADO EN NUBE';

            resultBox.innerHTML = `
              <span style="font-size:60px;">${icon}</span>
              <h2 style="color:${color}; margin-top:10px;">${title}</h2>
              <div style="color:#fff; font-size:1.15rem; font-weight:bold; margin-top:6px;">${data.pass.nombre_invitado}</div>
              <div style="color:#94a3b8; font-size:0.9rem; margin-bottom:10px;">Doc: ${data.pass.documento_invitado} &bull; Destino: ${data.pass.destino}</div>
              <div style="background:rgba(255,255,255,0.06); padding:10px 14px; border-radius:12px; font-size:0.85rem; color:${color}; font-weight:bold;">${data.message}</div>
              ${!isSalida ? `<button onclick="marcarSalida(${data.registro_id})" style="margin-top:14px; background:#ef4444; color:#fff; border:none; padding:10px 18px; border-radius:10px; font-weight:bold; cursor:pointer;">🚪 Registrar Salida Manual de ${data.pass.nombre_invitado}</button>` : ''}
            `;
            loadStats();
            loadRegistros();
          } else {
            resultBox.innerHTML = `
              <span style="font-size:60px;">⛔</span>
              <h2 style="color:#ef4444; margin-top:10px;">ACCESO DENEGADO</h2>
              <div style="color:#f87171; font-size:1rem; font-weight:bold; margin-top:6px;">${data.error || 'Pase Inválido'}</div>
            `;
          }
        },
        () => {}
      );
    }

    function stopGateQrScanner() {
      if (gateQrScanner) {
        gateQrScanner.stop().then(() => {
          gateQrScanner.clear();
          gateQrScanner = null;
        }).catch(()=>{});
      }
    }

    // Fechas iniciales por defecto para formulario QR (zona horaria local)
    const tzNow = new Date();
    const tzFuture = new Date(tzNow.getTime() + 30*24*60*60*1000); // 30 días de validez
    const localNow = new Date(tzNow.getTime() - tzNow.getTimezoneOffset() * 60000).toISOString().slice(0, 16);
    const localFuture = new Date(tzFuture.getTime() - tzFuture.getTimezoneOffset() * 60000).toISOString().slice(0, 16);

    document.getElementById('qr_inicio').value = localNow;
    document.getElementById('qr_fin').value = localFuture;

    loadStats();
    loadRegistros();

    // Auto-polling en vivo cada 4 segundos para el Operador de Medios Tecnológicos en Central
    setInterval(() => {
      loadStats();
      const q = document.getElementById('search-query')?.value || '';
      loadRegistros(q);
    }, 4000);
  </script>
</body>
</html>
