@extends('layouts.admin')

@section('title', 'Análisis de Usuarios')

@section('content')
<div class="container-fluid">
    <!-- Header -->
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800">
            <i class="fas fa-users text-info"></i>
            Análisis de Usuarios
        </h1>
        <div class="d-flex gap-2">
            <button class="btn btn-success btn-sm" onclick="exportarReporte()">
                <i class="fas fa-download"></i> Exportar Reporte
            </button>
            <button class="btn btn-info btn-sm" data-toggle="modal" data-target="#modalSegmentacion">
                <i class="fas fa-chart-pie"></i> Segmentación
            </button>
            <button class="btn btn-primary btn-sm" onclick="actualizarDatos()">
                <i class="fas fa-sync"></i> Actualizar
            </button>
        </div>
    </div>

    <!-- Filtros de Período -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">
                <i class="fas fa-filter"></i> Filtros de Análisis
            </h6>
        </div>
        <div class="card-body">
            <form id="filtrosAnalisis" class="row g-3">
                <div class="col-md-2">
                    <label for="periodo_tipo" class="form-label">Período</label>
                    <select class="form-select" id="periodo_tipo" name="periodo_tipo" onchange="cambiarTipoPeriodo()">
                        <option value="mes" {{ request('periodo_tipo') == 'mes' ? 'selected' : '' }}>Este Mes</option>
                        <option value="trimestre" {{ request('periodo_tipo') == 'trimestre' ? 'selected' : '' }}>Este Trimestre</option>
                        <option value="año" {{ request('periodo_tipo') == 'año' ? 'selected' : '' }}>Este Año</option>
                        <option value="personalizado" {{ request('periodo_tipo') == 'personalizado' ? 'selected' : '' }}>Personalizado</option>
                    </select>
                </div>
                <div class="col-md-2" id="fecha_desde_container" style="display: none;">
                    <label for="fecha_desde" class="form-label">Fecha Desde</label>
                    <input type="date" class="form-control" id="fecha_desde" name="fecha_desde" value="{{ request('fecha_desde') }}">
                </div>
                <div class="col-md-2" id="fecha_hasta_container" style="display: none;">
                    <label for="fecha_hasta" class="form-label">Fecha Hasta</label>
                    <input type="date" class="form-control" id="fecha_hasta" name="fecha_hasta" value="{{ request('fecha_hasta') }}">
                </div>
                <div class="col-md-2">
                    <label for="tipo_usuario" class="form-label">Tipo de Usuario</label>
                    <select class="form-select" id="tipo_usuario" name="tipo_usuario">
                        <option value="">Todos</option>
                        <option value="nuevos" {{ request('tipo_usuario') == 'nuevos' ? 'selected' : '' }}>Nuevos</option>
                        <option value="activos" {{ request('tipo_usuario') == 'activos' ? 'selected' : '' }}>Activos</option>
                        <option value="inactivos" {{ request('tipo_usuario') == 'inactivos' ? 'selected' : '' }}>Inactivos</option>
                        <option value="premium" {{ request('tipo_usuario') == 'premium' ? 'selected' : '' }}>Premium</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="segmento" class="form-label">Segmento</label>
                    <select class="form-select" id="segmento" name="segmento">
                        <option value="">Todos</option>
                        <option value="alto_valor" {{ request('segmento') == 'alto_valor' ? 'selected' : '' }}>Alto Valor</option>
                        <option value="frecuente" {{ request('segmento') == 'frecuente' ? 'selected' : '' }}>Frecuente</option>
                        <option value="ocasional" {{ request('segmento') == 'ocasional' ? 'selected' : '' }}>Ocasional</option>
                        <option value="riesgo" {{ request('segmento') == 'riesgo' ? 'selected' : '' }}>En Riesgo</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">&nbsp;</label>
                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-search"></i> Aplicar
                        </button>
                        <button type="button" class="btn btn-outline-secondary" onclick="limpiarFiltros()">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Métricas Principales -->
    <div class="row mb-4">
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-primary shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                Total de Usuarios
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ number_format($metricas['total_usuarios'] ?? 0) }}</div>
                            <div class="text-xs {{ ($metricas['crecimiento_usuarios'] ?? 0) >= 0 ? 'text-success' : 'text-danger' }}">
                                <i class="fas fa-{{ ($metricas['crecimiento_usuarios'] ?? 0) >= 0 ? 'arrow-up' : 'arrow-down' }}"></i>
                                {{ abs($metricas['crecimiento_usuarios'] ?? 0) }}% vs período anterior
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-users fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-success shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                Usuarios Activos
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ number_format($metricas['usuarios_activos'] ?? 0) }}</div>
                            <div class="text-xs text-success">
                                <i class="fas fa-percentage"></i> {{ number_format(($metricas['tasa_actividad'] ?? 0), 1) }}% de actividad
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-user-check fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-info shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                Nuevos Usuarios
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ number_format($metricas['nuevos_usuarios'] ?? 0) }}</div>
                            <div class="text-xs text-info">
                                <i class="fas fa-calendar"></i> En el período seleccionado
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-user-plus fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-warning shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                Valor Promedio por Usuario
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ format_currency($metricas['valor_promedio_usuario'] ?? 0, 2) }}</div>
                            <div class="text-xs text-warning">
                                <i class="fas fa-dollar-sign"></i> Lifetime Value
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-coins fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Gráficos de Usuarios -->
    <div class="row mb-4">
        <div class="col-xl-8 col-lg-7">
            <div class="card shadow mb-4">
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <h6 class="m-0 font-weight-bold text-primary">Evolución de Usuarios</h6>
                    <div class="dropdown no-arrow">
                        <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown">
                            <i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
                        </a>
                        <div class="dropdown-menu dropdown-menu-right shadow">
                            <a class="dropdown-item" href="#" onclick="cambiarVistaGrafico('registros')">Nuevos Registros</a>
                            <a class="dropdown-item" href="#" onclick="cambiarVistaGrafico('activos')">Usuarios Activos</a>
                            <a class="dropdown-item" href="#" onclick="cambiarVistaGrafico('retención')">Tasa de Retención</a>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="chart-area">
                        <canvas id="graficoUsuarios"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-4 col-lg-5">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Segmentación de Usuarios</h6>
                </div>
                <div class="card-body">
                    <div class="chart-pie pt-4 pb-2">
                        <canvas id="graficoSegmentacion"></canvas>
                    </div>
                    <div class="mt-4 text-center small">
                        @foreach($segmentacion ?? [] as $segmento => $datos)
                            <span class="mr-2">
                                <i class="fas fa-circle text-{{ $loop->index == 0 ? 'primary' : ($loop->index == 1 ? 'success' : ($loop->index == 2 ? 'info' : 'warning')) }}"></i>
                                {{ ucfirst(str_replace('_', ' ', $segmento)) }}: {{ $datos['cantidad'] }}
                            </span>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Análisis de Comportamiento -->
    <div class="row mb-4">
        <div class="col-lg-6">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-chart-bar"></i> Actividad por Día de la Semana
                    </h6>
                </div>
                <div class="card-body">
                    <div class="chart-bar">
                        <canvas id="graficoActividad"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-6">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-clock"></i> Horarios de Mayor Actividad
                    </h6>
                </div>
                <div class="card-body">
                    <div class="chart-bar">
                        <canvas id="graficoHorarios"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Análisis de Retención y Cohortes -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">
                <i class="fas fa-chart-line"></i> Análisis de Retención de Usuarios
            </h6>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-lg-8">
                    <div class="chart-area">
                        <canvas id="graficoRetencion"></canvas>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="card bg-light">
                        <div class="card-body">
                            <h6 class="font-weight-bold text-primary mb-3">Métricas de Retención</h6>
                            
                            <div class="mb-3">
                                <small class="text-muted">Retención Día 1</small>
                                <div class="h6 text-success">{{ number_format($retencion['dia_1'] ?? 0, 1) }}%</div>
                                <div class="progress progress-sm">
                                    <div class="progress-bar bg-success" style="width: {{ $retencion['dia_1'] ?? 0 }}%"></div>
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <small class="text-muted">Retención Día 7</small>
                                <div class="h6 text-info">{{ number_format($retencion['dia_7'] ?? 0, 1) }}%</div>
                                <div class="progress progress-sm">
                                    <div class="progress-bar bg-info" style="width: {{ $retencion['dia_7'] ?? 0 }}%"></div>
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <small class="text-muted">Retención Día 30</small>
                                <div class="h6 text-warning">{{ number_format($retencion['dia_30'] ?? 0, 1) }}%</div>
                                <div class="progress progress-sm">
                                    <div class="progress-bar bg-warning" style="width: {{ $retencion['dia_30'] ?? 0 }}%"></div>
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <small class="text-muted">Churn Rate</small>
                                <div class="h6 text-danger">{{ number_format($retencion['churn_rate'] ?? 0, 1) }}%</div>
                                <div class="progress progress-sm">
                                    <div class="progress-bar bg-danger" style="width: {{ $retencion['churn_rate'] ?? 0 }}%"></div>
                                </div>
                            </div>
                            
                            <div class="alert alert-info alert-sm">
                                <i class="fas fa-info-circle"></i>
                                <small>La retención se calcula basada en la actividad de reservas y uso de la plataforma.</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Top Usuarios -->
    <div class="row mb-4">
        <div class="col-lg-6">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-star"></i> Usuarios Más Activos
                    </h6>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered" id="tablaUsuariosActivos">
                            <thead>
                                <tr>
                                    <th>Usuario</th>
                                    <th>Reservas</th>
                                    <th>Gasto Total</th>
                                    <th>Última Actividad</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($usuarios_activos ?? [] as $usuario)
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                @if($usuario->avatar)
                                                    <img src="{{ asset('storage/' . $usuario->avatar) }}" 
                                                         class="rounded-circle mr-2" width="30" height="30">
                                                @else
                                                    <div class="bg-primary rounded-circle mr-2 d-flex align-items-center justify-content-center" 
                                                         style="width: 30px; height: 30px;">
                                                        <span class="text-white font-weight-bold text-sm">
                                                            {{ substr($usuario->nombre, 0, 1) }}
                                                        </span>
                                                    </div>
                                                @endif
                                                <div>
                                                    <div class="font-weight-bold">{{ $usuario->nombre }}</div>
                                                    <small class="text-muted">{{ $usuario->email }}</small>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <span class="badge badge-primary">{{ $usuario->total_reservas }}</span>
                                        </td>
                                        <td>
                                            <span class="font-weight-bold text-success">
                                                {{ format_currency($usuario->gasto_total, 2) }}
                                            </span>
                                        </td>
                                        <td>
                                            <small class="text-muted">
                                                {{ $usuario->ultima_actividad ? $usuario->ultima_actividad->diffForHumans() : 'N/A' }}
                                            </small>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-6">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-crown"></i> Usuarios de Mayor Valor
                    </h6>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered" id="tablaUsuariosValor">
                            <thead>
                                <tr>
                                    <th>Usuario</th>
                                    <th>Valor Total</th>
                                    <th>Promedio/Reserva</th>
                                    <th>Segmento</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($usuarios_valor ?? [] as $usuario)
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                @if($usuario->avatar)
                                                    <img src="{{ asset('storage/' . $usuario->avatar) }}" 
                                                         class="rounded-circle mr-2" width="30" height="30">
                                                @else
                                                    <div class="bg-success rounded-circle mr-2 d-flex align-items-center justify-content-center" 
                                                         style="width: 30px; height: 30px;">
                                                        <span class="text-white font-weight-bold text-sm">
                                                            {{ substr($usuario->nombre, 0, 1) }}
                                                        </span>
                                                    </div>
                                                @endif
                                                <div>
                                                    <div class="font-weight-bold">{{ $usuario->nombre }}</div>
                                                    <small class="text-muted">{{ $usuario->email }}</small>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <span class="font-weight-bold text-success">
                                                {{ format_currency($usuario->valor_total, 2) }}
                                            </span>
                                        </td>
                                        <td>
                                            {{ format_currency($usuario->promedio_reserva, 2) }}
                                        </td>
                                        <td>
                                            <span class="badge badge-{{ $usuario->segmento === 'alto_valor' ? 'success' : ($usuario->segmento === 'frecuente' ? 'info' : 'warning') }}">
                                                {{ ucfirst(str_replace('_', ' ', $usuario->segmento)) }}
                                            </span>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Análisis Demográfico -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">
                <i class="fas fa-chart-pie"></i> Análisis Demográfico
            </h6>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-lg-4">
                    <h6 class="text-center mb-3">Distribución por Edad</h6>
                    <div class="chart-pie">
                        <canvas id="graficoEdades"></canvas>
                    </div>
                </div>
                <div class="col-lg-4">
                    <h6 class="text-center mb-3">Distribución por Género</h6>
                    <div class="chart-pie">
                        <canvas id="graficoGenero"></canvas>
                    </div>
                </div>
                <div class="col-lg-4">
                    <h6 class="text-center mb-3">Distribución por Ubicación</h6>
                    <div class="chart-pie">
                        <canvas id="graficoUbicacion"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Segmentación Avanzada -->
<div class="modal fade" id="modalSegmentacion" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Segmentación Avanzada de Usuarios</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="formSegmentacion">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="criterio_valor" class="form-label">Valor Mínimo de Gasto</label>
                                <div class="input-group">
                                    <span class="input-group-text">{{ currency_symbol() }}</span>
                                    <input type="number" class="form-control" id="criterio_valor" name="criterio_valor" 
                                           step="0.01" min="0" placeholder="0.00">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="criterio_reservas" class="form-label">Número Mínimo de Reservas</label>
                                <input type="number" class="form-control" id="criterio_reservas" name="criterio_reservas" 
                                       min="0" placeholder="0">
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="dias_inactividad" class="form-label">Días de Inactividad</label>
                                <select class="form-select" id="dias_inactividad" name="dias_inactividad">
                                    <option value="">Cualquier tiempo</option>
                                    <option value="7">Más de 7 días</option>
                                    <option value="30">Más de 30 días</option>
                                    <option value="60">Más de 60 días</option>
                                    <option value="90">Más de 90 días</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="rango_edad" class="form-label">Rango de Edad</label>
                                <select class="form-select" id="rango_edad" name="rango_edad">
                                    <option value="">Todas las edades</option>
                                    <option value="18-25">18-25 años</option>
                                    <option value="26-35">26-35 años</option>
                                    <option value="36-45">36-45 años</option>
                                    <option value="46-55">46-55 años</option>
                                    <option value="56+">56+ años</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="genero_filtro" class="form-label">Género</label>
                                <select class="form-select" id="genero_filtro" name="genero">
                                    <option value="">Todos</option>
                                    <option value="masculino">Masculino</option>
                                    <option value="femenino">Femenino</option>
                                    <option value="otro">Otro</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="tipo_cancha_preferida" class="form-label">Tipo de Cancha Preferida</label>
                                <select class="form-select" id="tipo_cancha_preferida" name="tipo_cancha">
                                    <option value="">Todas</option>
                                    <option value="futbol">Fútbol</option>
                                    <option value="tenis">Tenis</option>
                                    <option value="basquet">Básquet</option>
                                    <option value="padel">Pádel</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </form>
                
                <div id="resultadosSegmentacion" style="display: none;">
                    <hr>
                    <h6 class="text-primary mb-3">Resultados de la Segmentación</h6>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="card bg-light">
                                <div class="card-body text-center">
                                    <h6 class="text-primary">Usuarios Encontrados</h6>
                                    <div class="h4 text-success" id="usuariosEncontrados">0</div>
                                    <small class="text-muted" id="porcentajeTotal">0% del total</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card bg-light">
                                <div class="card-body text-center">
                                    <h6 class="text-info">Valor Promedio</h6>
                                    <div class="h4 text-success" id="valorPromedio">{{ currency_symbol() }}0.00</div>
                                    <small class="text-muted">Por usuario</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card bg-light">
                                <div class="card-body text-center">
                                    <h6 class="text-warning">Actividad Promedio</h6>
                                    <div class="h4 text-info" id="actividadPromedio">0</div>
                                    <small class="text-muted">Reservas por usuario</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-primary" onclick="aplicarSegmentacion()">
                    <i class="fas fa-search"></i> Aplicar Segmentación
                </button>
                <button type="button" class="btn btn-success" onclick="exportarSegmento()" style="display: none;" id="btnExportarSegmento">
                    <i class="fas fa-download"></i> Exportar Segmento
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
let graficoUsuarios, graficoSegmentacion, graficoActividad, graficoHorarios, graficoRetencion;
let graficoEdades, graficoGenero, graficoUbicacion;

$(document).ready(function() {
    // Inicializar DataTables
    $('#tablaUsuariosActivos').DataTable({
        responsive: true,
        language: {
            url: '//cdn.datatables.net/plug-ins/1.10.24/i18n/Spanish.json'
        },
        order: [[2, 'desc']],
        pageLength: 10
    });
    
    $('#tablaUsuariosValor').DataTable({
        responsive: true,
        language: {
            url: '//cdn.datatables.net/plug-ins/1.10.24/i18n/Spanish.json'
        },
        order: [[1, 'desc']],
        pageLength: 10
    });
    
    // Inicializar gráficos
    inicializarGraficos();
    
    // Manejar formulario de filtros
    $('#filtrosAnalisis').on('submit', function(e) {
        e.preventDefault();
        aplicarFiltros();
    });
    
    // Configurar tipo de período
    cambiarTipoPeriodo();
});

function inicializarGraficos() {
    // Gráfico de evolución de usuarios
    const ctxUsuarios = document.getElementById('graficoUsuarios').getContext('2d');
    graficoUsuarios = new Chart(ctxUsuarios, {
        type: 'line',
        data: {
            labels: {!! json_encode($datos_evolucion['fechas'] ?? []) !!},
            datasets: [
                {
                    label: 'Nuevos Usuarios',
                    data: {!! json_encode($datos_evolucion['nuevos'] ?? []) !!},
                    borderColor: 'rgb(78, 115, 223)',
                    backgroundColor: 'rgba(78, 115, 223, 0.1)',
                    tension: 0.1
                },
                {
                    label: 'Usuarios Activos',
                    data: {!! json_encode($datos_evolucion['activos'] ?? []) !!},
                    borderColor: 'rgb(28, 200, 138)',
                    backgroundColor: 'rgba(28, 200, 138, 0.1)',
                    tension: 0.1
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
    
    // Gráfico de segmentación
    const ctxSegmentacion = document.getElementById('graficoSegmentacion').getContext('2d');
    graficoSegmentacion = new Chart(ctxSegmentacion, {
        type: 'doughnut',
        data: {
            labels: {!! json_encode(array_keys($segmentacion ?? [])) !!},
            datasets: [{
                data: {!! json_encode(array_values(array_column($segmentacion ?? [], 'cantidad'))) !!},
                backgroundColor: [
                    '#4e73df',
                    '#1cc88a',
                    '#36b9cc',
                    '#f6c23e',
                    '#e74a3b'
                ]
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom'
                }
            }
        }
    });
    
    // Gráfico de actividad por día
    const ctxActividad = document.getElementById('graficoActividad').getContext('2d');
    graficoActividad = new Chart(ctxActividad, {
        type: 'bar',
        data: {
            labels: {!! json_encode($datos_actividad['dias'] ?? []) !!},
            datasets: [{
                label: 'Usuarios Activos',
                data: {!! json_encode($datos_actividad['usuarios'] ?? []) !!},
                backgroundColor: 'rgba(78, 115, 223, 0.8)',
                borderColor: 'rgba(78, 115, 223, 1)',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
    
    // Gráfico de horarios
    const ctxHorarios = document.getElementById('graficoHorarios').getContext('2d');
    graficoHorarios = new Chart(ctxHorarios, {
        type: 'bar',
        data: {
            labels: {!! json_encode($datos_horarios['horas'] ?? []) !!},
            datasets: [{
                label: 'Actividad por Hora',
                data: {!! json_encode($datos_horarios['actividad'] ?? []) !!},
                backgroundColor: 'rgba(54, 185, 204, 0.8)',
                borderColor: 'rgba(54, 185, 204, 1)',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
    
    // Gráfico de retención
    const ctxRetencion = document.getElementById('graficoRetencion').getContext('2d');
    graficoRetencion = new Chart(ctxRetencion, {
        type: 'line',
        data: {
            labels: ['Día 0', 'Día 1', 'Día 7', 'Día 14', 'Día 30'],
            datasets: [{
                label: 'Tasa de Retención (%)',
                data: {!! json_encode($datos_retencion ?? []) !!},
                borderColor: 'rgb(255, 99, 132)',
                backgroundColor: 'rgba(255, 99, 132, 0.1)',
                tension: 0.1,
                fill: true
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    max: 100,
                    ticks: {
                        callback: function(value) {
                            return value + '%';
                        }
                    }
                }
            }
        }
    });
    
    // Gráficos demográficos
    inicializarGraficosDemograficos();
}

function inicializarGraficosDemograficos() {
    // Gráfico de edades
    const ctxEdades = document.getElementById('graficoEdades').getContext('2d');
    graficoEdades = new Chart(ctxEdades, {
        type: 'pie',
        data: {
            labels: {!! json_encode(array_keys($demografia['edades'] ?? [])) !!},
            datasets: [{
                data: {!! json_encode(array_values($demografia['edades'] ?? [])) !!},
                backgroundColor: ['#4e73df', '#1cc88a', '#36b9cc', '#f6c23e', '#e74a3b']
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom'
                }
            }
        }
    });
    
    // Gráfico de género
    const ctxGenero = document.getElementById('graficoGenero').getContext('2d');
    graficoGenero = new Chart(ctxGenero, {
        type: 'pie',
        data: {
            labels: {!! json_encode(array_keys($demografia['genero'] ?? [])) !!},
            datasets: [{
                data: {!! json_encode(array_values($demografia['genero'] ?? [])) !!},
                backgroundColor: ['#4e73df', '#e74a3b', '#f6c23e']
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom'
                }
            }
        }
    });
    
    // Gráfico de ubicación
    const ctxUbicacion = document.getElementById('graficoUbicacion').getContext('2d');
    graficoUbicacion = new Chart(ctxUbicacion, {
        type: 'pie',
        data: {
            labels: {!! json_encode(array_keys($demografia['ubicacion'] ?? [])) !!},
            datasets: [{
                data: {!! json_encode(array_values($demografia['ubicacion'] ?? [])) !!},
                backgroundColor: ['#4e73df', '#1cc88a', '#36b9cc', '#f6c23e', '#e74a3b']
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom'
                }
            }
        }
    });
}

function cambiarTipoPeriodo() {
    const tipo = document.getElementById('periodo_tipo').value;
    const fechaDesde = document.getElementById('fecha_desde_container');
    const fechaHasta = document.getElementById('fecha_hasta_container');
    
    if (tipo === 'personalizado') {
        fechaDesde.style.display = 'block';
        fechaHasta.style.display = 'block';
    } else {
        fechaDesde.style.display = 'none';
        fechaHasta.style.display = 'none';
    }
}

function limpiarFiltros() {
    $('#filtrosAnalisis')[0].reset();
    window.location.href = '{{ route("admin.analytics.usuarios") }}';
}

function aplicarFiltros() {
    const formData = new FormData($('#filtrosAnalisis')[0]);
    const params = new URLSearchParams(formData);
    window.location.href = '{{ route("admin.analytics.usuarios") }}?' + params.toString();
}

function cambiarVistaGrafico(vista) {
    $.ajax({
        url: '{{ route("admin.analytics.usuarios.datos") }}',
        method: 'GET',
        data: {
            vista: vista,
            ...Object.fromEntries(new URLSearchParams(window.location.search))
        },
        success: function(response) {
            graficoUsuarios.data.labels = response.fechas;
            graficoUsuarios.data.datasets[0].data = response.datos;
            graficoUsuarios.data.datasets[0].label = response.label;
            graficoUsuarios.update();
        },
        error: function() {
            Swal.fire('Error', 'No se pudieron cargar los datos del gráfico', 'error');
        }
    });
}

function aplicarSegmentacion() {
    const formData = new FormData($('#formSegmentacion')[0]);
    
    $.ajax({
        url: '{{ route("admin.analytics.usuarios.segmentar") }}',
        method: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function(response) {
            mostrarResultadosSegmentacion(response);
        },
        error: function(xhr) {
            const message = xhr.responseJSON?.message || 'No se pudo realizar la segmentación';
            Swal.fire('Error', message, 'error');
        }
    });
}

function mostrarResultadosSegmentacion(datos) {
    $('#usuariosEncontrados').text(datos.total_usuarios.toLocaleString());
    $('#porcentajeTotal').text(datos.porcentaje_total.toFixed(1) + '% del total');
    $('#valorPromedio').text('{{ currency_symbol() }}' + datos.valor_promedio.toLocaleString());
    $('#actividadPromedio').text(datos.actividad_promedio.toFixed(1));
    
    $('#resultadosSegmentacion').show();
    $('#btnExportarSegmento').show();
}

function exportarSegmento() {
    const formData = new FormData($('#formSegmentacion')[0]);
    const params = new URLSearchParams(formData);
    window.open(`{{ route('admin.analytics.usuarios.export-segmento') }}?${params.toString()}`, '_blank');
}

function exportarReporte() {
    const params = new URLSearchParams(window.location.search);
    window.open(`{{ route('admin.analytics.usuarios.export') }}?${params.toString()}`, '_blank');
}

function actualizarDatos() {
    location.reload();
}
</script>
@endpush