<?php
/**
 * TechShop Perú - Página de Soporte / Tickets de Atención al Cliente
 */
define('SECURE_ACCESS', true);
require_once __DIR__ . '/../includes/config.php';
require_once __DIR__ . '/../includes/database.php';
require_once __DIR__ . '/../includes/functions.php';

require_login();
$db  = db();
$uid = (int)$_SESSION['usuario_id'];
$user_stmt = $db->prepare('SELECT * FROM usuarios WHERE id = ?');
$user_stmt->execute([$uid]);
$user = $user_stmt->fetch();

/* ----- CREAR TICKET ----- */
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['create_ticket'])) {
    if (!csrf_verify()) { set_flash('error', 'Token inválido.'); redirect('pages/soporte.php'); }
    
    $tipo   = $_POST['tipo'] ?? 'consulta';
    $asunto = trim($_POST['asunto'] ?? '');
    $mensaje= trim($_POST['mensaje'] ?? '');
    $pedido = !empty($_POST['pedido_id']) ? (int)$_POST['pedido_id'] : null;

    if (empty($asunto) || empty($mensaje)) {
        set_flash('error', 'Por favor completa todos los campos obligatorios.');
    } else {
        $num = 'TSP-' . strtoupper(substr(uniqid(), -6));
        $stmt = $db->prepare('INSERT INTO tickets_soporte (numero_ticket, usuario_id, pedido_id, tipo, asunto, mensaje) VALUES (?,?,?,?,?,?)');
        $stmt->execute([$num, $uid, $pedido, $tipo, $asunto, $mensaje]);
        set_flash('success', "Tu ticket <strong>$num</strong> fue creado exitosamente. Te responderemos en menos de 24 horas.");
    }
    csrf_regenerate();
    redirect('pages/soporte.php');
}

/* ----- CARGAR TICKETS DEL USUARIO ----- */
$tickets = $db->prepare('SELECT * FROM tickets_soporte WHERE usuario_id=? ORDER BY fecha_creacion DESC');
$tickets->execute([$uid]);
$tickets = $tickets->fetchAll();

/* ----- PEDIDOS DEL USUARIO para relacionar ----- */
$pedidos = $db->prepare('SELECT id, numero_pedido, fecha_pedido FROM pedidos WHERE usuario_id=? ORDER BY fecha_pedido DESC LIMIT 20');
$pedidos->execute([$uid]);
$pedidos = $pedidos->fetchAll();

$page_title = 'Soporte y Atención al Cliente';
require_once __DIR__ . '/../includes/header.php';
?>

<main class="py-5" style="background:#f8fafc;min-height:80vh;">
<div class="container">

  <div class="row mb-4 align-items-center">
    <div class="col">
      <h1 class="h3 fw-bold mb-1"><i class="bi bi-headset me-2 text-primary"></i>Centro de Soporte</h1>
      <p class="text-muted mb-0">¿Tienes alguna duda o problema? Estamos aquí para ayudarte.</p>
    </div>
    <div class="col-auto">
      <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalTicket">
        <i class="bi bi-plus-lg me-1"></i>Nuevo Ticket
      </button>
    </div>
  </div>

  <!-- Canales de contacto rápido -->
  <div class="row g-3 mb-5">
    <div class="col-md-4">
      <div class="card border-0 shadow-sm text-center p-4 h-100" style="border-radius:16px;">
        <div style="width:60px;height:60px;background:linear-gradient(135deg,#25d366,#128c7e);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;">
          <i class="bi bi-whatsapp text-white fs-4"></i>
        </div>
        <h6 class="fw-bold">WhatsApp</h6>
        <p class="text-muted small mb-3">Respuesta en minutos. Lun-Sab 9am-8pm</p>
        <a href="https://wa.me/51999999999?text=Hola%2C%20necesito%20ayuda%20con%20mi%20pedido" target="_blank" class="btn btn-success btn-sm">Chatear Ahora</a>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card border-0 shadow-sm text-center p-4 h-100" style="border-radius:16px;">
        <div style="width:60px;height:60px;background:linear-gradient(135deg,#2563eb,#0284c7);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;">
          <i class="bi bi-envelope-fill text-white fs-4"></i>
        </div>
        <h6 class="fw-bold">Correo Electrónico</h6>
        <p class="text-muted small mb-3">soporte@techshop.pe<br>Respuesta en 24h</p>
        <a href="mailto:soporte@techshop.pe" class="btn btn-primary btn-sm">Enviar Email</a>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card border-0 shadow-sm text-center p-4 h-100" style="border-radius:16px;">
        <div style="width:60px;height:60px;background:linear-gradient(135deg,#7c3aed,#4f46e5);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;">
          <i class="bi bi-ticket-perforated-fill text-white fs-4"></i>
        </div>
        <h6 class="fw-bold">Ticket de Soporte</h6>
        <p class="text-muted small mb-3">Para casos detallados y seguimiento</p>
        <button class="btn btn-violet btn-sm" data-bs-toggle="modal" data-bs-target="#modalTicket" style="background:#7c3aed;color:#fff;">Crear Ticket</button>
      </div>
    </div>
  </div>

  <!-- Mis Tickets -->
  <div class="card border-0 shadow-sm" style="border-radius:16px;">
    <div class="card-header bg-white border-0 p-4 pb-2">
      <h5 class="fw-bold mb-0"><i class="bi bi-list-check me-2 text-primary"></i>Mis Tickets de Soporte</h5>
    </div>
    <div class="card-body p-0">
      <?php if (empty($tickets)): ?>
        <div class="text-center py-5 text-muted">
          <i class="bi bi-inbox fs-1 d-block mb-3 text-muted opacity-50"></i>
          <p>No tienes ningún ticket todavía.</p>
          <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalTicket">Crear mi primer ticket</button>
        </div>
      <?php else: ?>
        <div class="table-responsive">
          <table class="table table-hover mb-0">
            <thead class="table-light"><tr><th>Nº Ticket</th><th>Tipo</th><th>Asunto</th><th>Estado</th><th>Fecha</th><th></th></tr></thead>
            <tbody>
              <?php foreach ($tickets as $t): 
                $estado_colors = ['abierto'=>'primary','en_revision'=>'warning','resuelto'=>'success','cerrado'=>'secondary'];
                $tipo_labels = ['consulta'=>'Consulta','garantia'=>'Garantía','devolucion'=>'Devolución','cambio'=>'Cambio','otro'=>'Otro'];
              ?>
              <tr>
                <td><code class="text-primary"><?= e($t['numero_ticket']) ?></code></td>
                <td><span class="badge bg-light text-dark border"><?= $tipo_labels[$t['tipo']] ?? $t['tipo'] ?></span></td>
                <td class="fw-medium"><?= e($t['asunto']) ?></td>
                <td><span class="badge bg-<?= $estado_colors[$t['estado']] ?? 'secondary' ?>"><?= ucfirst(str_replace('_',' ',$t['estado'])) ?></span></td>
                <td><small class="text-muted"><?= date('d/m/Y', strtotime($t['fecha_creacion'])) ?></small></td>
                <td>
                  <button class="btn btn-sm btn-outline-primary" onclick="verTicket(<?= htmlspecialchars(json_encode($t), ENT_QUOTES) ?>)">Ver</button>
                </td>
              </tr>
              <?php endforeach; ?>
            </tbody>
          </table>
        </div>
      <?php endif; ?>
    </div>
  </div>

  <!-- Preguntas Frecuentes -->
  <div class="mt-5">
    <h5 class="fw-bold mb-3"><i class="bi bi-question-circle me-2 text-primary"></i>Preguntas Frecuentes</h5>
    <div class="accordion" id="faqSoporte">
      <?php $faqs = [
        ['¿Cómo hago seguimiento de mi pedido?','Ingresa a Mi Cuenta > Mis Pedidos y verás el estado en tiempo real con nuestra barra de progreso de seguimiento.'],
        ['¿Cuál es el plazo de entrega?','Lima Metropolitana: 24-48 horas. Provincias: 3-7 días hábiles dependiendo de la ubicación.'],
        ['¿Cómo aplico mi cupón de descuento?','En el paso de Pago (Checkout), encontrarás un campo para ingresar tu código de cupón antes de confirmar.'],
        ['¿Cuál es su política de devoluciones?','Aceptamos devoluciones dentro de los 7 días de recibido el producto, siempre que esté en su embalaje original y sin uso.'],
        ['¿Los productos tienen garantía?','Sí, todos nuestros productos tienen garantía del fabricante. Los detalles se especifican en cada ficha de producto.'],
      ]; foreach ($faqs as $i => $faq): ?>
      <div class="accordion-item border-0 shadow-sm mb-2" style="border-radius:12px!important;overflow:hidden;">
        <h2 class="accordion-header">
          <button class="accordion-button collapsed fw-medium" type="button" data-bs-toggle="collapse" data-bs-target="#faq<?= $i ?>">
            <?= $faq[0] ?>
          </button>
        </h2>
        <div id="faq<?= $i ?>" class="accordion-collapse collapse" data-bs-parent="#faqSoporte">
          <div class="accordion-body text-muted"><?= $faq[1] ?></div>
        </div>
      </div>
      <?php endforeach; ?>
    </div>
  </div>

</div>
</main>

<!-- MODAL: Crear Ticket -->
<div class="modal fade" id="modalTicket" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <form method="POST">
      <?= csrf_field() ?>
      <input type="hidden" name="create_ticket" value="1">
      <div class="modal-content" style="border-radius:16px;overflow:hidden;">
        <div class="modal-header" style="background:linear-gradient(135deg,#1e293b,#0f172a);">
          <h5 class="modal-title text-white"><i class="bi bi-ticket-perforated me-2"></i>Nuevo Ticket de Soporte</h5>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body p-4">
          <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label fw-medium">Tipo de Solicitud <span class="text-danger">*</span></label>
              <select class="form-select" name="tipo" required>
                <option value="consulta">📋 Consulta General</option>
                <option value="garantia">🛡️ Garantía</option>
                <option value="devolucion">↩️ Devolución</option>
                <option value="cambio">🔄 Cambio de Producto</option>
                <option value="otro">📌 Otro</option>
              </select>
            </div>
            <div class="col-md-6">
              <label class="form-label fw-medium">Pedido Relacionado (opcional)</label>
              <select class="form-select" name="pedido_id">
                <option value="">Sin pedido específico</option>
                <?php foreach ($pedidos as $ped): ?>
                  <option value="<?= $ped['id'] ?>"><?= e($ped['numero_pedido']) ?> — <?= date('d/m/Y', strtotime($ped['fecha_pedido'])) ?></option>
                <?php endforeach; ?>
              </select>
            </div>
            <div class="col-12">
              <label class="form-label fw-medium">Asunto <span class="text-danger">*</span></label>
              <input type="text" class="form-control" name="asunto" placeholder="Describe brevemente tu problema..." required maxlength="255">
            </div>
            <div class="col-12">
              <label class="form-label fw-medium">Mensaje Detallado <span class="text-danger">*</span></label>
              <textarea class="form-control" name="mensaje" rows="5" placeholder="Explica detalladamente tu consulta o problema. Incluye números de serie, modelos, etc." required></textarea>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
          <button type="submit" class="btn btn-primary"><i class="bi bi-send me-1"></i>Enviar Ticket</button>
        </div>
      </div>
    </form>
  </div>
</div>

<!-- MODAL: Ver Ticket -->
<div class="modal fade" id="modalVerTicket" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content" style="border-radius:16px;overflow:hidden;">
      <div class="modal-header bg-primary text-white">
        <h5 class="modal-title" id="ticketModalTitle">Detalle del Ticket</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body p-4" id="ticketModalBody"></div>
    </div>
  </div>
</div>

<script>
function verTicket(t) {
  const estados = {abierto:'primary',en_revision:'warning',resuelto:'success',cerrado:'secondary'};
  document.getElementById('ticketModalTitle').innerHTML = '🎫 ' + t.numero_ticket;
  document.getElementById('ticketModalBody').innerHTML = `
    <p><strong>Asunto:</strong> ${t.asunto}</p>
    <p><strong>Tipo:</strong> ${t.tipo} | <strong>Estado:</strong> <span class="badge bg-${estados[t.estado]||'secondary'}">${t.estado}</span></p>
    <hr>
    <p class="fw-medium">Tu mensaje:</p>
    <div class="bg-light p-3 rounded mb-3">${t.mensaje}</div>
    ${t.respuesta ? `<p class="fw-medium text-success">Respuesta de soporte:</p><div class="bg-success bg-opacity-10 border border-success p-3 rounded">${t.respuesta}</div>` : '<p class="text-muted small"><i class="bi bi-clock me-1"></i>Aún sin respuesta. Te contactaremos pronto.</p>'}
    <hr>
    <small class="text-muted">Creado: ${t.fecha_creacion} | Últ. actualización: ${t.fecha_actualizacion}</small>
  `;
  new bootstrap.Modal(document.getElementById('modalVerTicket')).show();
}
</script>

<?php require_once __DIR__ . '/../includes/footer.php'; ?>
