<?php
session_start();
if (!isset($_SESSION['usuario'])) {
    header('Location: login.php');
    exit;
}

require 'conexion.php';

$usuarioLogin = $_SESSION['usuario'];

// Obtener datos del perfil
$stm = $conn->prepare("
    SELECT u.Id, u.nombres, u.apellidos, u.telefono, u.usuario, 
           u.acceso_id, a.tipo_acceso, u.habilitado, u.fecha_registro
    FROM Usuarios u
    JOIN Accesos a ON u.acceso_id = a.cod_acceso
    WHERE u.usuario = ?
    LIMIT 1
");

$stm->bind_param('s', $usuarioLogin);
$stm->execute();
$perfil = $stm->get_result()->fetch_assoc();

if (!$perfil) {
    echo 'Perfil no encontrado';
    exit;
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Perfil de usuario</title>
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  <style>
    body {
      font-family: system-ui, sans-serif;
      background: #f7f9fc;
      margin: 0;
      display: flex;
      justify-content: center;
    }

    .card {
      background: #fff;
      max-width: 500px;
      margin: 60px 16px;
      border-radius: 12px;
      box-shadow: 0 4px 24px rgba(0, 0, 0, .06);
      padding: 32px 40px;
    }

    h2 {
      margin-top: 0;
      color: #174ea6;
    }

    .field { margin: 8px 0; }
    .label {
      font-weight: 600;
      color: #555;
      display: inline-block;
      width: 120px;
    }
    .value { color: #222; }

    .estado-act { color: green; font-weight: 700; }
    .estado-inact { color: #c00; font-weight: 700; }

    #cambiarBtn, #resetBtn {
      margin-top: 16px;
      width: 100%;
      padding: 12px;
      border: none;
      border-radius: 8px;
      font-size: 16px;
      color: #fff;
      cursor: pointer;
      transition: background .2s;
    }
    #cambiarBtn { background: #3085d6; }
    #cambiarBtn:hover { background: #2563eb; }
    #resetBtn { background: #c62828; }
    #resetBtn:hover { background: #b71c1c; }

    .voz-section {
      margin-top: 32px;
      border-top: 1px solid #ddd;
      padding-top: 6px;
    }
    label[for="selectorVoz"] {
      font-weight: 600;
      display: block;
      margin-bottom: 8px;
      color: #333;
    }
    select#selectorVoz {
      padding: 10px;
      font-size: 1rem;
      width: 100%;
      border-radius: 6px;
      border: 1px solid #ccc;
    }
    .demo {
      margin-top: 16px;
      padding: 12px;
      background-color: #e1f5fe;
      border-left: 4px solid #0288d1;
      font-style: italic;
      color: #333;
    }

    .configuracion-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 8px;
        margin-bottom: 10px;
        margin-top: 15px;
        background: #f9f9f9;
    }

    .config-info h3 {
        margin: 0 0 5px 0;
        color: #333;
    }

    .config-info p {
        margin: 0 0 5px 0;
        color: #666;
        font-size: 14px;
    }

    .config-info small {
        color: #888;
        font-size: 12px;
    }

    .config-control {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .switch {
      position: relative;
      display: inline-block;
      width: 50px;
      height: 24px;
    }

    .switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      transition: .4s;
      border-radius: 24px;
    }

    .slider:before {
      position: absolute;
      content: "";
      height: 18px;
      width: 18px;
      left: 3px;
      bottom: 3px;
      background-color: white;
      transition: .4s;
      border-radius: 50%;
    }

    input:checked + .slider {
      background-color: #2196F3;
    }

    input:checked + .slider:before {
      transform: translateX(26px);
    }

    .estado-texto {
      font-weight: bold;
      min-width: 80px;
    }

    .estado-texto.habilitado {
      color: #2196F3;
    }

    .estado-texto.deshabilitado {
      color: #f44336;
    }

    /* Responsive */
    @media (max-width: 768px) {
      body {
        font-size: 0.8rem;
      }
      
      .card {
        margin: 30px 15px;
        padding: 20px 20px;
      }

      .configuracion-item {
        flex-direction: column;
        text-align: center;
      }
      
      .config-control {
        margin-top: 10px;
      }
    }
  </style>
</head>
<body>

<div class="card">
  <h2>Perfil de usuario</h2>

  <div class="field"><span class="label">Nombres:</span><span class="value"><?= htmlspecialchars($perfil['nombres']) ?></span></div>
  <div class="field"><span class="label">Apellidos:</span><span class="value"><?= htmlspecialchars($perfil['apellidos']) ?></span></div>
  <div class="field"><span class="label">Teléfono:</span><span class="value"><?= htmlspecialchars($perfil['telefono']) ?></span></div>
  <div class="field"><span class="label">Correo:</span><span class="value"><?= htmlspecialchars($perfil['usuario']) ?></span></div>
  <div class="field"><span class="label">Codigo acceso:</span><span class="value"><?= htmlspecialchars($perfil['acceso_id']) ?></span></div>
  <div class="field"><span class="label">Tipo acceso:</span><span class="value"><?=htmlspecialchars($perfil['tipo_acceso'])?></span></div>
  <div class="field"><span class="label">F. Registro:</span><span class="value"><?= htmlspecialchars($perfil['fecha_registro']) ?></span></div>
  <div class="field">
    <span class="label">Estado:</span>
    <span class="value <?= $perfil['habilitado'] ? 'estado-act' : 'estado-inact' ?>">
      <?= $perfil['habilitado'] ? 'Habilitado' : 'Deshabilitado' ?>
    </span>
  </div>
  <button id="cambiarBtn">Cambiar Contraseña</button>
  <button id="resetBtn">Reset incorrectas</button>

  <div class="configuracion-item">
    <div class="config-info">
      <h3>🔊 Lectura en Segundo Plano</h3>
      <p>Permite que la lectura de voz continúe funcionando aunque el usuario este en otra página o aplicación.</p>
      <small><em>Nota: Funciona en Materiales de Estudio con Chrome y Edge .</em></small>
    </div>
    <div class="config-control">
      <label class="switch">
        <input type="checkbox" id="togglePantallaApagada">
        <span class="slider"></span>
      </label>
      <span id="estadoPantallaApagada" class="estado-texto">Deshabilitado</span>
    </div>
  </div>

  <div class="voz-section">
    <h3>Selector de voces en español</h3>
    
    <select id="selectorVoz"></select>

    <div class="demo">
      Debes escuchar el siguiente texto:<br>
      "Esta es una de las voces que te ofrece nuestro Simulador"
    </div>
  </div>
</div>

<!-- ✅ Script para cambiar contraseña y reset -->
<script>
document.getElementById('resetBtn').addEventListener('click', () => {
  Swal.fire({
    title: '¿Estás seguro?',
    text: "Se borrarán todas tus preguntas contestadas incorrectamente",
    icon: 'warning',
    showCancelButton: true,
    confirmButtonColor: '#3085d6',
    cancelButtonColor: '#d33',
    confirmButtonText: 'Sí, resetear',
    cancelButtonText: 'Cancelar',
    width: '400px'
  }).then((result) => {
    if (result.isConfirmed) {
      fetch('reset_incorrectas.php', {
        method: 'POST',
        headers: {'Content-Type':'application/json'},
        body: JSON.stringify({accion:'reset'})
      })
      .then(r => r.json())
      .then(resp => {
        Swal.fire({
          icon: resp.success ? 'success' : 'error',
          title: resp.success ? '¡Éxito!' : 'Error',
          text: resp.message,
          width: '400px'
        }).then(() => {
          if (resp.success) window.location.reload();
        });
      })
      .catch(() => {
        Swal.fire({
          icon: 'error',
          title: 'Error',
          text: 'No se pudo conectar con el servidor.',
          width: '400px'
        });
      });
    }
  });
});
</script>

<!-- ✅ Script para selector de voces -->
<script>
let voces = [];

function cargarVoces() {
  voces = speechSynthesis.getVoices().filter(v => v.lang.startsWith('es'));

  const selector = document.getElementById('selectorVoz');
  selector.innerHTML = '';

  voces.forEach((voz) => {
    const opcion = document.createElement('option');
    opcion.value = voz.name;
    opcion.textContent = `${voz.name} (${voz.lang})`;
    selector.appendChild(opcion);
  });

  const vozGuardada = localStorage.getItem('vozPreferida');
  if (vozGuardada) {
    selector.value = vozGuardada;
  }
}

function leerTexto(texto) {
  const utterance = new SpeechSynthesisUtterance(texto);
  const vozPreferida = localStorage.getItem('vozPreferida');
  const vozSeleccionada = voces.find(v => v.name === vozPreferida) || voces[0];
  utterance.voice = vozSeleccionada;

  window.speechSynthesis.cancel();
  window.speechSynthesis.speak(utterance);
}

document.getElementById('selectorVoz').addEventListener('change', function () {
  const vozElegida = this.value;
  localStorage.setItem('vozPreferida', vozElegida);
  leerTexto("Esta es una de las voces que te ofrece nuestro Simulador");

  Swal.fire({
    icon: 'info',
    title: 'Voz seleccionada',
    text: `Has elegido la voz: ${vozElegida}`,
    timer: 4500,
    showConfirmButton: false,
    width: '400px'
  });
});

window.speechSynthesis.onvoiceschanged = cargarVoces;
cargarVoces();
</script>

<!-- ✅ Cargar funciones auxiliares para el toggle -->
<script src="profiles-helpers.js"></script>

<!-- ✅ Script para toggle de pantalla apagada -->
<script>
document.addEventListener('DOMContentLoaded', function() {
  const togglePantallaApagada = document.getElementById('togglePantallaApagada');
  const estadoPantallaApagada = document.getElementById('estadoPantallaApagada');
  
  // 🔹 Cargar estado actual
  function cargarEstado() {
    const estado = obtenerEstadoLecturaConPantallaApagada();
    togglePantallaApagada.checked = estado;
    actualizarTextoEstado(estado);
  }
  
  // 🔹 Actualizar texto del estado
  function actualizarTextoEstado(habilitado) {
    if (habilitado) {
      estadoPantallaApagada.textContent = 'Habilitado';
      estadoPantallaApagada.className = 'estado-texto habilitado';
    } else {
      estadoPantallaApagada.textContent = 'Deshabilitado';
      estadoPantallaApagada.className = 'estado-texto deshabilitado';
    }
  }
  
  // 🔹 Manejar cambio del toggle
  togglePantallaApagada.addEventListener('change', function() {
    const habilitado = this.checked;
    
    // Guardar en localStorage usando función de profiles-helpers.js
    toggleLecturaConPantallaApagada(habilitado);
    
    // Actualizar texto
    actualizarTextoEstado(habilitado);
    
    // Mostrar mensaje de confirmación
    if (habilitado) {
      Swal.fire({
        icon: 'success',
        title: 'Audio en Segundo Plano Habilitado',
        text: 'La lectura continuará aunque la pantalla se apague o minimices la aplicación.',
        timer: 3000,
        showConfirmButton: false,
        width: '400px'
      });
    } else {
      Swal.fire({
        icon: 'info',
        title: 'Audio en Segundo Plano Deshabilitado',
        text: 'La lectura se pausará si la pantalla se apaga.',
        timer: 2500,
        showConfirmButton: false,
        width: '400px'
      });
    }
  });
  
  // 🔹 Verificar compatibilidad del navegador
  function verificarCompatibilidad() {
    if (!('speechSynthesis' in window)) {
      togglePantallaApagada.disabled = true;
      estadoPantallaApagada.textContent = 'No soportado';
      estadoPantallaApagada.className = 'estado-texto';
      
      const infoElement = document.querySelector('.config-info p');
      infoElement.innerHTML = '<strong style="color: #f44336;">⚠️ Tu navegador no soporta síntesis de voz.</strong> Actualiza tu navegador.';
    } else {
      const userAgent = navigator.userAgent.toLowerCase();
      if (userAgent.includes('firefox')) {
        const infoElement = document.querySelector('.config-info small');
        infoElement.innerHTML = '<em style="color: #ff9800;">⚠️ En Firefox esta función puede tener limitaciones. Se recomienda usar Chrome o Edge para mejor experiencia.</em>';
      }
    }
  }
  
  // Inicializar
  cargarEstado();
  verificarCompatibilidad();
});
</script>

<script src="bloquear_inspeccion.js"></script>
</body>
</html>