@extends($baseLayout ?? 'layouts.app-admin')

@section('content')
<style>
/* ── Loader overlay ─────────────────────────────────── */
#analyzeOverlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 20, 0.82);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(3px);
}
#analyzeOverlay.show { display: flex; }

.loader-card {
    background: #fff;
    border-radius: 20px;
    padding: 40px 48px;
    max-width: 520px;
    width: 90%;
    box-shadow: 0 24px 80px rgba(0,0,0,.35);
    text-align: center;
}
.loader-card h3 {
    font-size: 1.25rem;
    font-weight: 800;
    color: #1a1a2e;
    margin: 0 0 6px;
}
.loader-card p.subtitle {
    font-size: .85rem;
    color: #aaa;
    margin: 0 0 28px;
}

/* Brain animation */
.brain-wrap {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3699FF, #1BC5BD);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 20px;
    animation: brainPulse 1.6s ease-in-out infinite;
}
.brain-wrap i { color: #fff; font-size: 1.8rem; }
@keyframes brainPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(54,153,255,.4); }
    50%       { transform: scale(1.06); box-shadow: 0 0 0 14px rgba(54,153,255,0); }
}

/* Steps list */
.steps-list { text-align: left; margin: 0 0 24px; }
.step-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid #f5f5f5;
    font-size: .85rem;
    color: #bbb;
    transition: color .3s;
}
.step-item:last-child { border-bottom: none; }
.step-item.done    { color: #1a1a2e; }
.step-item.active  { color: #3699FF; font-weight: 600; }
.step-item.error   { color: #F64E60; }

.step-icon {
    width: 28px; height: 28px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem;
    flex-shrink: 0;
    transition: background .3s;
    background: #f4f6f9;
    color: #ccc;
}
.step-item.done .step-icon  { background: #e6faf9; color: #1BC5BD; }
.step-item.active .step-icon { background: #e8f4ff; color: #3699FF; animation: spin .8s linear infinite; }
.step-item.error .step-icon  { background: #fef0f0; color: #F64E60; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Progress bar */
.progress-wrap {
    background: #f0f2f5;
    border-radius: 20px;
    height: 6px;
    overflow: hidden;
    margin-bottom: 8px;
}
.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #3699FF, #1BC5BD);
    border-radius: 20px;
    width: 0%;
    transition: width .6s ease;
}
.progress-label {
    font-size: .75rem;
    color: #aaa;
    text-align: right;
}
</style>

{{-- OVERLAY LOADER --}}
<div id="analyzeOverlay">
    <div class="loader-card">
        <div class="brain-wrap">
            <i class="fas fa-brain"></i>
        </div>
        <h3>Generando análisis con IA</h3>
        <p class="subtitle">La inteligencia artificial está procesando los datos del jugador</p>

        <div class="steps-list" id="stepsList">
            <div class="step-item" data-step="1">
                <div class="step-icon"><i class="fas fa-database"></i></div>
                <span>Cargando historial de tests del jugador</span>
            </div>
            <div class="step-item" data-step="2">
                <div class="step-icon"><i class="fas fa-calculator"></i></div>
                <span>Calculando estadísticas y métricas</span>
            </div>
            <div class="step-item" data-step="3">
                <div class="step-icon"><i class="fas fa-eye"></i></div>
                <span>Procesando datos de visión y movimiento facial</span>
            </div>
            <div class="step-item" data-step="4">
                <div class="step-icon"><i class="fas fa-file-code"></i></div>
                <span>Preparando el contexto para la IA</span>
            </div>
            <div class="step-item" data-step="5">
                <div class="step-icon"><i class="fas fa-paper-plane"></i></div>
                <span>Enviando datos a GPT-5.4-mini</span>
            </div>
            <div class="step-item" data-step="6">
                <div class="step-icon"><i class="fas fa-robot"></i></div>
                <span>La IA analiza patrones de rendimiento cognitivo</span>
            </div>
            <div class="step-item" data-step="7">
                <div class="step-icon"><i class="fas fa-chart-line"></i></div>
                <span>Construyendo el modelo predictivo de fatiga</span>
            </div>
            <div class="step-item" data-step="8">
                <div class="step-icon"><i class="fas fa-traffic-light"></i></div>
                <span>Calculando score cognitivo y semáforos</span>
            </div>
            <div class="step-item" data-step="9">
                <div class="step-icon"><i class="fas fa-save"></i></div>
                <span>Guardando el informe generado</span>
            </div>
        </div>

        <div class="progress-wrap">
            <div class="progress-fill" id="progressFill"></div>
        </div>
        <div class="progress-label" id="progressLabel">0%</div>
        <div style="margin-top:20px;">
            <button id="btnCancelGenerate" style="background:transparent;border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.5);border-radius:8px;padding:6px 18px;font-size:.8rem;cursor:pointer;transition:all .15s;">
                Cancelar
            </button>
        </div>
    </div>
</div>

{{-- CONTENIDO PRINCIPAL --}}
<div class="content d-flex flex-column flex-column-fluid pt-0" id="kt_content">
    <div class="d-flex flex-column-fluid">
        <div class="container">
            <div class="card shadow mb-4">
                <div class="card-header p-2">
                    <div class="container-fluid d-flex align-items-center justify-content-between flex-wrap flex-sm-nowrap">
                        <div class="col-6 d-flex align-items-center flex-wrap mr-2">
                            <h5 class="text-dark font-weight-bold mt-2 mb-2 mr-5">
                                Análisis Cognitivo con IA
                                <br>
                                <span class="text-muted font-weight-bold font-size-sm">
                                    <b>Jugador:</b> {{ $user->first_name }} {{ $user->last_name }}
                                </span>
                            </h5>
                        </div>
                        <div class="col-6 d-flex justify-content-end">
                            <a href="{{ url()->previous() }}" class="btn btn-primary btn-rounded mt-3">
                                <i class="fas fa-arrow-circle-left fa-sm text-white-50"></i>
                                Volver
                            </a>
                        </div>
                    </div>
                </div>
                <div class="card-body">

                    @if(session('error'))
                        <div class="alert alert-danger">{{ session('error') }}</div>
                    @endif

                    <div class="row mb-4">
                        <div class="col-md-6">
                            <div class="card border-0 bg-light-primary p-4">
                                <div class="d-flex align-items-center">
                                    <span class="svg-icon svg-icon-3x svg-icon-primary mr-4">
                                        <i class="fas fa-brain fa-2x text-primary"></i>
                                    </span>
                                    <div>
                                        <div class="font-size-h5 font-weight-bolder text-dark">
                                            {{ $totalTests }} tests realizados
                                        </div>
                                        <div class="text-muted font-size-sm">
                                            @if($totalTests < 30)
                                                <span class="text-warning"><i class="fas fa-exclamation-triangle"></i> Se recomiendan 30+ tests para un análisis fiable</span>
                                            @else
                                                <span class="text-success"><i class="fas fa-check-circle"></i> Tests suficientes para análisis fiable</span>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 d-flex align-items-center justify-content-end">
                            @if($totalTests >= 5)
                                <button type="button" class="btn btn-success btn-lg btn-rounded" id="btnGenerate">
                                    <i class="fas fa-robot mr-2"></i>
                                    Generar Análisis con IA
                                </button>
                                {{-- Form oculto para enviar AJAX --}}
                                <form id="generateForm" method="POST"
                                      action="{{ route(($routePrefix ?? 'admin-cognitive').'-generate', ['user_id' => $user->id]) }}"
                                      style="display:none">
                                    @csrf
                                </form>
                            @else
                                <button class="btn btn-secondary btn-lg btn-rounded" disabled>
                                    <i class="fas fa-robot mr-2"></i>
                                    Generar Análisis (mínimo 5 tests)
                                </button>
                            @endif
                        </div>
                    </div>

                    @if($reports->count() > 0)
                        <h6 class="font-weight-bold text-dark mb-3">Informes generados</h6>
                        <div class="table-responsive">
                            <table class="table table-bordered table-custom" width="100%" cellspacing="0">
                                <thead class="thead-custom">
                                    <tr class="tr-custom" align="center">
                                        <th class="th-custom">Fecha generación</th>
                                        <th class="th-custom">Score cognitivo</th>
                                        <th class="th-custom">Semáforo</th>
                                        <th class="th-custom">Compartido</th>
                                        <th class="th-custom">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody class="tbody-custom">
                                    @foreach($reports as $report)
                                        @php
                                            $data = $report->report_data ?? [];
                                            $score = $data['score_cognitivo']['valor'] ?? 'N/A';
                                            $semaforo = $data['semaforo']['color'] ?? '';
                                            $semaforoClass = match($semaforo) {
                                                'verde'    => 'success',
                                                'amarillo' => 'warning',
                                                'rojo'     => 'danger',
                                                default    => 'secondary',
                                            };
                                        @endphp
                                        <tr class="tr-custom">
                                            <td class="td-custom text-center">
                                                <span class="text-dark-75 font-weight-bolder d-block font-size-lg">
                                                    {{ $report->created_at->format('d/m/Y H:i') }}
                                                </span>
                                            </td>
                                            <td class="td-custom text-center">
                                                <span class="font-weight-bolder font-size-lg">{{ $score }}/100</span>
                                            </td>
                                            <td class="td-custom text-center">
                                                @if($semaforo)
                                                    <span class="badge badge-{{ $semaforoClass }} font-size-sm px-3 py-2">
                                                        ● {{ ucfirst($semaforo) }}
                                                    </span>
                                                @endif
                                            </td>
                                            <td class="td-custom text-center">
                                                @if($report->share_token)
                                                    <span class="badge badge-info">Sí</span>
                                                @else
                                                    <span class="text-muted">No</span>
                                                @endif
                                            </td>
                                            <td class="td-custom text-center">
                                                <a href="{{ route(($routePrefix ?? 'admin-cognitive').'-report', ['report_id' => $report->id]) }}"
                                                   class="btn btn-sm btn-primary btn-rounded">
                                                    <i class="fas fa-eye"></i> Ver informe
                                                </a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="text-center py-5 text-muted">
                            <i class="fas fa-robot fa-3x mb-3 d-block"></i>
                            <p>No hay informes generados aún. Pulsa "Generar Análisis con IA" para crear el primero.</p>
                        </div>
                    @endif

                </div>
            </div>
        </div>
    </div>
</div>

<script>
(function () {
    var btn     = document.getElementById('btnGenerate');
    var form    = document.getElementById('generateForm');
    var overlay = document.getElementById('analyzeOverlay');
    var fill    = document.getElementById('progressFill');
    var label   = document.getElementById('progressLabel');

    if (!btn || !form) return;

    var cancelBtn = document.getElementById('btnCancelGenerate');
    var abortCtrl = null;

    if (cancelBtn) {
        cancelBtn.addEventListener('click', function () {
            if (abortCtrl) abortCtrl.abort();
            showError('Análisis cancelado. Puedes intentarlo de nuevo cuando quieras.');
        });
        cancelBtn.addEventListener('mouseover', function () {
            this.style.color = '#fff'; this.style.borderColor = 'rgba(255,255,255,.5)';
        });
        cancelBtn.addEventListener('mouseout', function () {
            this.style.color = 'rgba(255,255,255,.5)'; this.style.borderColor = 'rgba(255,255,255,.2)';
        });
    }

    // Pasos y sus tiempos aproximados (en ms desde el inicio)
    var steps = [
        { step: 1, at: 500,   pct: 8  },
        { step: 2, at: 1500,  pct: 18 },
        { step: 3, at: 2800,  pct: 28 },
        { step: 4, at: 4200,  pct: 38 },
        { step: 5, at: 6000,  pct: 48 },
        { step: 6, at: 10000, pct: 60 },
        { step: 7, at: 22000, pct: 72 },
        { step: 8, at: 38000, pct: 85 },
        { step: 9, at: 52000, pct: 95 },
    ];

    var timers = [];

    function activateStep(num) {
        var items = document.querySelectorAll('.step-item');
        items.forEach(function (el) {
            var s = parseInt(el.dataset.step);
            if (s < num)  { el.className = 'step-item done';  el.querySelector('.step-icon i').className = 'fas fa-check'; }
            if (s === num){ el.className = 'step-item active'; }
            if (s > num)  { el.className = 'step-item'; }
        });
    }

    function setProgress(pct) {
        fill.style.width  = pct + '%';
        label.textContent = pct + '%';
    }

    function startProgress() {
        overlay.classList.add('show');
        activateStep(1);
        setProgress(5);

        steps.forEach(function (s) {
            var t = setTimeout(function () {
                activateStep(s.step);
                setProgress(s.pct);
            }, s.at);
            timers.push(t);
        });
    }

    function finishProgress(redirectUrl) {
        // Marcar todos como done
        timers.forEach(clearTimeout);
        document.querySelectorAll('.step-item').forEach(function (el) {
            el.className = 'step-item done';
            el.querySelector('.step-icon i').className = 'fas fa-check';
        });
        setProgress(100);
        label.textContent = '100% — ¡Listo!';

        setTimeout(function () {
            window.location.href = redirectUrl;
        }, 600);
    }

    function showError(msg) {
        timers.forEach(clearTimeout);
        overlay.classList.remove('show');
        btn.disabled = false;
        btn.innerHTML = '<i class="fas fa-robot mr-2"></i> Generar Análisis con IA';
        // Mostrar alerta encima del contenido
        var alert = document.createElement('div');
        alert.className = 'alert alert-danger mt-3';
        alert.innerHTML = '<i class="fas fa-exclamation-circle mr-2"></i>' + msg;
        var cardBody = document.querySelector('.card-body');
        if (cardBody) cardBody.insertBefore(alert, cardBody.firstChild);
    }

    btn.addEventListener('click', function () {
        btn.disabled = true;
        startProgress();

        abortCtrl = new AbortController();

        // Timeout de 150 segundos: si la IA no responde, mostrar error
        var timeoutId = setTimeout(function () {
            if (abortCtrl) abortCtrl.abort();
            showError('La generación tardó demasiado. Inténtalo de nuevo (puede ser un momento de alta carga de la IA).');
        }, 150000);

        var formData = new FormData(form);

        fetch(form.action, {
            method: 'POST',
            body: formData,
            headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' },
            signal: abortCtrl.signal,
        })
        .then(function (res) {
            clearTimeout(timeoutId);
            if (res.ok || res.redirected) {
                finishProgress(res.url);
            } else {
                return res.text().then(function (t) {
                    try {
                        var json = JSON.parse(t);
                        showError(json.message || json.error || 'Error al generar el análisis.');
                    } catch(e) {
                        showError('Error al generar el análisis. Inténtalo de nuevo.');
                    }
                });
            }
        })
        .catch(function (err) {
            clearTimeout(timeoutId);
            if (err.name === 'AbortError') return; // ya se maneja en el timeout o cancelar
            showError('Error de conexión. Inténtalo de nuevo.');
        });
    });
})();
</script>
@endsection