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

@section('content')
<style>
/* ── Full-height dashboard sin scroll externo ─── */
html, body { overflow: hidden; }

/* Ocultar footer y evitar scrolls del layout */
#kt_footer { display: none !important; }
.wrapper, #kt_wrapper { overflow: hidden !important; }

/* Hub app ocupa el área disponible con position fixed */
/* left y top se calculan con JS al cargar para ser exactos */
.hub-app {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    overflow: hidden;
    z-index: 1;
    background: #f4f6f9;
}

/* ── Topbar compacta ──────────────────────────── */
.hub-top {
    background: linear-gradient(135deg,#0a0a1a 0%,#111827 55%,#0d1f3c 100%);
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}
.hub-top-brand {
    display: flex; align-items: center; gap: 10px;
}
.hub-top-brand .brand-ico {
    width: 34px; height: 34px; border-radius: 9px;
    background: rgba(54,153,255,.2);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.hub-top-brand .brand-ico i { color: #60a5fa; font-size: 1rem; }
.hub-top-brand h1 {
    font-size: 1.05rem; font-weight: 800; color: #fff; margin: 0;
}
.hub-top-brand .badge-new {
    background: linear-gradient(135deg,#3699FF,#1BC5BD); color: #fff;
    font-size: .65rem; font-weight: 700; padding: 2px 7px;
    border-radius: 20px; vertical-align: middle; margin-left: 6px;
}
.hub-stats {
    display: flex; gap: 10px; margin-left: auto;
}
.hub-stat {
    background: rgba(255,255,255,.07);
    border-radius: 9px; padding: 7px 14px;
    display: flex; align-items: center; gap: 8px; color: #fff;
}
.hub-stat .sv { font-size: 1.1rem; font-weight: 800; line-height: 1; }
.hub-stat .sl { font-size: .72rem; opacity: .5; text-transform: uppercase; letter-spacing: .6px; }

/* ── Cuerpo principal: dos columnas ──────────── */
.hub-body {
    display: flex;
    flex: 1;
    overflow: hidden;
    gap: 0;
}

/* ── Columna izquierda: jugadores ────────────── */
.hub-players {
    width: 400px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-right: 1px solid #eef0f3;
    overflow: hidden;
}
.hub-search-row {
    padding: 12px 16px;
    border-bottom: 1px solid #f0f2f5;
    display: flex; gap: 8px; align-items: center;
    flex-shrink: 0;
    background: #fafbfc;
}
.hub-search-box {
    flex: 1; display: flex; align-items: center; gap: 8px;
    background: #fff; border: 1.5px solid #eee;
    border-radius: 9px; padding: 8px 12px;
    transition: border .15s;
}
.hub-search-box:focus-within { border-color: #3699FF; }
.hub-search-box input {
    border: none; outline: none; font-size: .9rem;
    width: 100%; color: #333; background: transparent;
}
.hub-search-box i { color: #ccc; font-size: .85rem; }
.hub-filter {
    border: 1.5px solid #eee; border-radius: 9px;
    padding: 8px 11px; font-size: .85rem; color: #555;
    background: #fff; outline: none; cursor: pointer;
}

/* Lista de jugadores scrollable */
.hub-player-list {
    flex: 1;
    overflow-y: auto;
}
.hub-player-list::-webkit-scrollbar { width: 4px; }
.hub-player-list::-webkit-scrollbar-thumb { background: #e0e0e0; border-radius: 4px; }

.prow {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 16px;
    border-bottom: 1px solid #f5f5f5;
    cursor: pointer;
    transition: background .1s;
}
.prow:hover { background: #f8faff; }
.prow.active { background: #eff6ff; border-left: 3px solid #3699FF; padding-left: 13px; }
.prow-av {
    width: 36px; height: 36px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: .82rem; font-weight: 700; color: #fff; flex-shrink: 0;
}
.prow-name { font-size: .9rem; font-weight: 700; color: #1a1a2e; line-height: 1.2; }
.prow-meta { font-size: .78rem; color: #bbb; margin-top: 1px; }
.prow-right { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-shrink: 0; }
.ptag {
    font-size: .75rem; font-weight: 700; padding: 2px 8px;
    border-radius: 6px; background: #f4f6f9; color: #666;
    white-space: nowrap;
}
.ptag.g { background: #e6faf9; color: #1BC5BD; }
.psem { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pscore {
    font-size: .78rem; font-weight: 800; color: #1a1a2e;
    background: #f4f6f9; border-radius: 6px; padding: 2px 7px;
}
.pbtn-chat {
    background: #eff6ff; color: #3699FF; border: none;
    border-radius: 7px; padding: 5px 10px; font-size: .78rem;
    font-weight: 600; cursor: pointer; display: inline-flex;
    align-items: center; gap: 4px; transition: background .12s;
}
.pbtn-chat:hover { background: #dbeafe; }
.pbtn-ai {
    background: linear-gradient(135deg,#3699FF,#1BC5BD);
    color: #fff; border: none; border-radius: 7px;
    padding: 5px 10px; font-size: .78rem; font-weight: 600;
    cursor: pointer; display: inline-flex; align-items: center;
    gap: 4px; text-decoration: none; transition: opacity .12s;
}
.pbtn-ai:hover { opacity: .88; color: #fff; text-decoration: none; }

.hub-list-footer {
    padding: 8px 16px; font-size: .78rem; color: #bbb;
    border-top: 1px solid #f0f2f5; background: #fafbfc;
    flex-shrink: 0;
}

/* ── Columna derecha: panel dinámico ─────────── */
.hub-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #f4f6f9;
}

/* Estado vacío */
.hub-empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 40px;
    text-align: center;
}
.hub-empty-state .es-icon {
    width: 72px; height: 72px; border-radius: 20px;
    background: linear-gradient(135deg, rgba(54,153,255,.12), rgba(27,197,189,.12));
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; color: #3699FF; margin-bottom: 20px;
}
.hub-empty-state h3 { font-size: 1.1rem; font-weight: 700; color: #1a1a2e; margin: 0 0 8px; }
.hub-empty-state p  { font-size: .9rem; color: #aaa; max-width: 320px; margin: 0 0 24px; line-height: 1.6; }

/* Cards de stats vacío */
.es-cards { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-bottom: 28px; }
.es-card {
    background: #fff; border-radius: 12px; padding: 16px 20px;
    text-align: center; min-width: 120px;
    box-shadow: 0 1px 10px rgba(0,0,0,.05);
}
.es-card .ecv { font-size: 1.6rem; font-weight: 900; color: #1a1a2e; line-height: 1; }
.es-card .ecl { font-size: .72rem; color: #bbb; text-transform: uppercase; letter-spacing: .6px; margin-top: 4px; }

/* Últimos informes en estado vacío */
.es-reports { width: 100%; max-width: 480px; }
.es-reports .er-title {
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .8px; color: #bbb; margin-bottom: 10px;
}
.er-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; background: #fff; border-radius: 10px;
    margin-bottom: 7px; text-decoration: none;
    box-shadow: 0 1px 6px rgba(0,0,0,.04);
    transition: box-shadow .12s;
}
.er-item:hover { box-shadow: 0 3px 14px rgba(0,0,0,.08); }
.er-av {
    width: 32px; height: 32px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-size: .78rem; font-weight: 700; color: #fff; flex-shrink: 0;
}
.er-name { font-size: .88rem; font-weight: 600; color: #1a1a2e; }
.er-date { font-size: .75rem; color: #bbb; }

/* Chat panel */
.hub-chat-panel {
    display: none;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}
.hub-chat-panel.open { display: flex; }

.hcp-head {
    background: #fff;
    padding: 13px 20px;
    border-bottom: 1px solid #eef0f3;
    display: flex; align-items: center; gap: 10px;
    flex-shrink: 0;
}
.hcp-av {
    width: 38px; height: 38px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    font-size: .88rem; font-weight: 700; color: #fff; flex-shrink: 0;
}
.hcp-name { font-size: .95rem; font-weight: 700; color: #1a1a2e; }
.hcp-meta { font-size: .78rem; color: #bbb; }
.hcp-actions { display: flex; gap: 7px; margin-left: auto; }
.hcp-close {
    background: none; border: none; cursor: pointer;
    color: #ccc; font-size: 1.1rem; padding: 4px 7px;
    border-radius: 7px; transition: color .12s, background .12s;
}
.hcp-close:hover { color: #EF4444; background: #fef2f2; }

.hcp-actions-bar {
    padding: 9px 20px; background: #f8faff;
    border-bottom: 1px solid #eef0f3;
    display: flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0;
}

.hcp-msgs {
    flex: 1;
    overflow-y: auto;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #f8faff;
}
.hcp-msgs::-webkit-scrollbar { width: 4px; }
.hcp-msgs::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }

.hcp-m { display: flex; }
.hcp-m.user      { justify-content: flex-end; }
.hcp-m.assistant { justify-content: flex-start; }
.hcp-b {
    max-width: 80%; padding: 11px 15px; border-radius: 16px;
    font-size: .92rem; line-height: 1.65; word-break: break-word;
}
.hcp-m.user .hcp-b {
    background: #3699FF; color: #fff; border-bottom-right-radius: 4px;
}
.hcp-m.assistant .hcp-b {
    background: #fff; color: #222;
    border-bottom-left-radius: 4px;
    box-shadow: 0 1px 6px rgba(0,0,0,.07);
}

/* Markdown */
.hcp-b p          { margin: 0 0 8px; }
.hcp-b p:last-child { margin-bottom: 0; }
.hcp-b strong     { font-weight: 700; color: #111; }
.hcp-b em         { font-style: italic; }
.hcp-b ul,.hcp-b ol { margin: 6px 0 8px; padding-left: 20px; }
.hcp-b li         { margin-bottom: 4px; line-height: 1.6; }
.hcp-b code       { background: rgba(0,0,0,.07); border-radius: 4px; padding: 1px 5px; font-size: .86rem; font-family: monospace; }
.hcp-b h1,.hcp-b h2,.hcp-b h3 { font-weight: 700; margin: 8px 0 4px; color: #111; font-size: .94rem; }
.hcp-b blockquote { border-left: 3px solid #3699FF; padding: 5px 10px; background: #eff6ff; border-radius: 0 7px 7px 0; margin: 6px 0; color: #1e40af; font-size: .88rem; }
.hcp-b table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: .86rem; }
.hcp-b th { background: #e8f4ff; padding: 6px 9px; text-align: left; font-weight: 700; }
.hcp-b td { padding: 5px 9px; border-bottom: 1px solid #f0f0f0; }
@keyframes hcp-blink { 0%,100%{opacity:1} 50%{opacity:0} }
.hcp-cursor { display:inline-block; animation: hcp-blink .7s step-end infinite; font-weight:300; color:#3699FF; }
.hcp-load-prev { text-align:center; padding: 8px 0 4px; }
.hcp-load-btn { background:none; border:1.5px solid #e0e7ef; color:#3699FF; border-radius:20px; padding:5px 14px; font-size:.8rem; cursor:pointer; transition:background .15s; }
.hcp-load-btn:hover { background:#eff6ff; }
.hcp-load-btn i { margin-right:4px; }

.hcp-typing {
    padding: 6px 20px; font-size: .82rem; color: #aaa;
    display: none; align-items: center; gap: 8px;
    background: #f8faff; flex-shrink: 0;
}
.hcp-typing.show { display: flex; }
.hcp-dots { display: flex; gap: 3px; }
.hcp-dots span {
    width: 5px; height: 5px; border-radius: 50%;
    background: #bbb; animation: hcpBounce .7s ease-in-out infinite;
}
.hcp-dots span:nth-child(2) { animation-delay: .15s; }
.hcp-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes hcpBounce { 0%,80%,100%{transform:translateY(0)} 40%{transform:translateY(-5px)} }

.hcp-input-row {
    padding: 12px 20px 16px;
    border-top: 1px solid #eef0f3;
    background: #fff;
    display: flex; gap: 8px; flex-shrink: 0;
}
.hcp-input-row input {
    flex: 1; border: 1.5px solid #eee; border-radius: 10px;
    padding: 10px 14px; font-size: .92rem; outline: none;
    transition: border .15s;
}
.hcp-input-row input:focus { border-color: #3699FF; }
.hcp-send {
    width: 40px; height: 40px; border: none; border-radius: 10px;
    background: linear-gradient(135deg,#3699FF,#1BC5BD);
    color: #fff; cursor: pointer; font-size: .9rem;
    display: flex; align-items: center; justify-content: center;
    transition: opacity .15s; flex-shrink: 0;
}
.hcp-send:hover { opacity: .88; }
.hcp-send:disabled { opacity: .4; cursor: not-allowed; }

/* Botones reutilizables */
.hbtn-outline {
    background: transparent; color: #3699FF; border: 1.5px solid #3699FF;
    border-radius: 8px; padding: 6px 13px; font-size: .82rem; font-weight: 600;
    display: inline-flex; align-items: center; gap: 5px;
    cursor: pointer; text-decoration: none; transition: background .12s;
}
.hbtn-outline:hover { background: #eff6ff; color: #3699FF; text-decoration: none; }
.hbtn-primary {
    background: linear-gradient(135deg,#3699FF,#1BC5BD); color: #fff;
    border: none; border-radius: 8px; padding: 6px 13px; font-size: .82rem;
    font-weight: 600; display: inline-flex; align-items: center; gap: 5px;
    cursor: pointer; text-decoration: none; transition: opacity .12s;
}
.hbtn-primary:hover { opacity: .88; color: #fff; text-decoration: none; }
</style>

{{-- URLs para JS --}}
@php $rp = $routePrefix ?? 'admin-cognitive'; @endphp
<script src="https://cdn.jsdelivr.net/npm/marked@12.0.0/marked.min.js"></script>
<div id="jsConfig"
     data-chat-base="{{ url($rp.'-chat-direct') }}"
     data-chat-stream-base="{{ url($rp.'-chat-direct-stream') }}"
     data-csrf="{{ csrf_token() }}"
     data-report-base="{{ url($rp.'-report') }}"
     data-analyze-base="{{ url($rp) }}"
     style="display:none">
</div>

{{-- Datos de jugadores para JS --}}
<script>
window.hubPlayers = {
    @foreach($players as $player)
    @php
        $u = $player->user;
        $colors = ['#3699FF','#1BC5BD','#FFA800','#F64E60','#8950FC','#0BB783'];
        $color  = $colors[$player->user_id % count($colors)];
        $initials = strtoupper(substr($u->first_name??'U',0,1).substr($u->last_name??'',0,1));
        $hasReport = $player->ultimo_informe !== null && !empty($player->ultimo_informe->report_data);
        $reportId  = ($player->ultimo_informe !== null) ? $player->ultimo_informe->id : null;
        $rd   = $hasReport ? ($player->ultimo_informe->report_data ?? []) : [];
        $sem  = is_array($rd) ? ($rd['semaforo']['color'] ?? '') : '';
        $score = is_array($rd) ? ($rd['score_cognitivo']['valor'] ?? null) : null;
        $rawHistory = ($player->ultimo_informe !== null) ? ($player->ultimo_informe->chat_history ?? []) : [];
        $rawHistory = array_values(array_filter($rawHistory, fn($m) => !empty(trim($m['content'] ?? ''))));
    @endphp
    {{ $player->user_id }}: {
        name: @json(trim(($u->first_name??'').' '.($u->last_name??''))),
        initials: @json($initials),
        color: @json($color),
        tests: {{ $player->total_tests }},
        hasReport: {{ $hasReport ? 'true' : 'false' }},
        reportId: {{ $reportId ?? 'null' }},
        semaforo: @json($sem),
        score: {{ $score ?? 'null' }},
        assoc: @json($u->association ?? ''),
        position: @json($u->position ?? ''),
        chatHistory: @json($rawHistory),
    },
    @endforeach
};
</script>

<div class="hub-app" id="hubApp">

    {{-- TOPBAR --}}
    <div class="hub-top">
        <div class="hub-top-brand">
            <div class="brand-ico"><i class="fas fa-robot"></i></div>
            <h1>Análisis Cognitivo <span class="badge-new">IA</span></h1>
        </div>
        <div class="hub-stats">
            <div class="hub-stat">
                <i class="fas fa-file-alt" style="color:#60a5fa;font-size:.9rem;"></i>
                <div><div class="sv">{{ $totalReports }}</div><div class="sl">Informes</div></div>
            </div>
            <div class="hub-stat">
                <i class="fas fa-users" style="color:#34d399;font-size:.9rem;"></i>
                <div><div class="sv">{{ $players->count() }}</div><div class="sl">Jugadores</div></div>
            </div>
            <div class="hub-stat">
                <i class="fas fa-check-circle" style="color:#fbbf24;font-size:.9rem;"></i>
                <div><div class="sv">{{ $players->where('total_tests', '>=', 30)->count() }}</div><div class="sl">30+ tests</div></div>
            </div>
        </div>
    </div>

    {{-- CUERPO --}}
    <div class="hub-body">

        {{-- LISTA JUGADORES --}}
        <div class="hub-players">
            <div class="hub-search-row">
                <div class="hub-search-box">
                    <i class="fas fa-search"></i>
                    <input type="text" id="playerSearch" placeholder="Buscar por nombre, club o código..." autocomplete="off">
                </div>
                <select class="hub-filter" id="filterTests">
                    <option value="all">Todos</option>
                    <option value="ready">30+ tests</option>
                    <option value="with_report">Con informe</option>
                </select>
            </div>

            <div class="hub-player-list" id="playerList">
                @forelse($players as $player)
                    @php
                        $u = $player->user;
                        $initials = strtoupper(substr($u->first_name??'U',0,1).substr($u->last_name??'',0,1));
                        $colors = ['#3699FF','#1BC5BD','#FFA800','#F64E60','#8950FC','#0BB783'];
                        $color  = $colors[$player->user_id % count($colors)];
                        $hasReport = $player->ultimo_informe !== null && !empty($player->ultimo_informe->report_data);
                        $rd = $hasReport ? ($player->ultimo_informe->report_data ?? []) : [];
                        $sem = is_array($rd) ? ($rd['semaforo']['color'] ?? '') : '';
                        $semColor = match($sem){'amarillo'=>'#FFC107','rojo'=>'#EF4444',default=>'#10B981'};
                        $score = is_array($rd) ? ($rd['score_cognitivo']['valor'] ?? null) : null;
                        $ready = $player->total_tests >= 30;
                    @endphp
                    <div class="prow"
                         data-name="{{ strtolower(($u->first_name??'').' '.($u->last_name??'')) }}"
                         data-club="{{ strtolower($u->association??'') }}"
                         data-code="{{ strtolower($u->code??'') }}"
                         data-tests="{{ $player->total_tests }}"
                         data-has-report="{{ $hasReport ? '1' : '0' }}"
                         data-user-id="{{ $player->user_id }}"
                         onclick="openChat({{ $player->user_id }})">
                        <div class="prow-av" style="background:{{ $color }}">{{ $initials }}</div>
                        <div style="flex:1;min-width:0;overflow:hidden;">
                            <div class="prow-name">{{ $u->first_name??'Usuario' }} {{ $u->last_name??'' }}</div>
                            <div class="prow-meta">{{ $u->association??'' }}{{ $u->position ? ' · '.$u->position : '' }}</div>
                        </div>
                        <div class="prow-right">
                            <span class="ptag {{ $ready ? 'g' : '' }}">{{ $player->total_tests }}</span>
                            @if($sem)<span class="psem" style="background:{{ $semColor }}" title="{{ $sem }}"></span>@endif
                            @if($score)<span class="pscore">{{ $score }}</span>@endif
                            <button class="pbtn-chat" onclick="event.stopPropagation();openChat({{ $player->user_id }})">
                                <i class="fas fa-comments"></i>
                            </button>
                            <a href="{{ route($rp, ['user_id' => $player->user_id]) }}"
                               class="pbtn-ai" onclick="event.stopPropagation()">
                                <i class="fas fa-robot"></i>
                            </a>
                        </div>
                    </div>
                @empty
                    <div style="padding:40px 20px;text-align:center;color:#ccc;">
                        <i class="fas fa-users" style="font-size:2rem;margin-bottom:10px;display:block;"></i>
                        <p style="margin:0;font-size:.88rem;">No hay jugadores con tests.</p>
                    </div>
                @endforelse
            </div>

            <div class="hub-list-footer">
                <span id="visibleCount">{{ $players->count() }}</span> de {{ $players->count() }} jugadores
            </div>
        </div>

        {{-- PANEL DERECHO --}}
        <div class="hub-right">

            {{-- Estado vacío / resumen --}}
            <div class="hub-empty-state" id="hubEmptyState">
                <div class="es-icon"><i class="fas fa-robot"></i></div>
                <h3>Centro de Análisis Cognitivo</h3>
                <p>Selecciona un jugador de la lista para abrir el chat con IA, o pulsa <i class="fas fa-robot" style="color:#3699FF;"></i> para generar su informe completo.</p>

                <div class="es-cards">
                    <div class="es-card">
                        <div class="ecv">{{ $totalReports }}</div>
                        <div class="ecl">Informes</div>
                    </div>
                    <div class="es-card">
                        <div class="ecv">{{ $players->count() }}</div>
                        <div class="ecl">Jugadores</div>
                    </div>
                    <div class="es-card">
                        <div class="ecv">{{ $players->where('total_tests', '>=', 30)->count() }}</div>
                        <div class="ecl">Listos para análisis</div>
                    </div>
                    <div class="es-card">
                        <div class="ecv">{{ $players->filter(fn($p) => $p->ultimo_informe !== null)->count() }}</div>
                        <div class="ecl">Con informe</div>
                    </div>
                </div>

                @if($recentReports->isNotEmpty())
                <div class="es-reports">
                    <div class="er-title">Últimos informes generados</div>
                    @foreach($recentReports->take(5) as $rep)
                        @php
                            $ru = $rep->user;
                            $ri = strtoupper(substr($ru->first_name??'U',0,1).substr($ru->last_name??'',0,1));
                            $rc = ['#3699FF','#1BC5BD','#FFA800','#F64E60','#8950FC','#0BB783'];
                            $rcol = $rc[$rep->user_id % count($rc)];
                            $rrd = $rep->report_data ?? [];
                            $rsem = is_array($rrd) ? ($rrd['semaforo']['color'] ?? '') : '';
                            $rsemC = match($rsem){'amarillo'=>'#FFC107','rojo'=>'#EF4444',default=>'#10B981'};
                            $rscore = is_array($rrd) ? ($rrd['score_cognitivo']['valor'] ?? null) : null;
                        @endphp
                        <a href="{{ route($rp.'-report', ['report_id' => $rep->id]) }}" class="er-item">
                            <div class="er-av" style="background:{{ $rcol }}">{{ $ri }}</div>
                            <div style="flex:1;min-width:0;">
                                <div class="er-name">{{ $ru->first_name??'Usuario' }} {{ $ru->last_name??'' }}</div>
                                <div class="er-date">{{ $rep->created_at->format('d/m/Y H:i') }}</div>
                            </div>
                            @if($rsem)<span class="psem" style="background:{{ $rsemC }}"></span>@endif
                            @if($rscore)<span class="pscore">{{ $rscore }}</span>@endif
                        </a>
                    @endforeach
                </div>
                @endif
            </div>

            {{-- Chat panel --}}
            <div class="hub-chat-panel" id="hubChatPanel">
                <div class="hcp-head">
                    <div class="hcp-av" id="hcpAv">?</div>
                    <div style="flex:1;min-width:0;">
                        <div class="hcp-name" id="hcpName">—</div>
                        <div class="hcp-meta" id="hcpMeta">—</div>
                    </div>
                    <button class="hcp-close" onclick="closeChat()" title="Cerrar">
                        <i class="fas fa-times"></i>
                    </button>
                </div>

                <div class="hcp-actions-bar" id="hcpActionsBar"></div>

                <div class="hcp-msgs" id="hcpMessages">
                    <div class="hcp-m assistant">
                        <div class="hcp-b">Selecciona un jugador para empezar.</div>
                    </div>
                </div>

                <div class="hcp-typing" id="hcpTyping">
                    <div class="hcp-dots"><span></span><span></span><span></span></div>
                    <span>La IA está pensando...</span>
                </div>

                <div class="hcp-input-row">
                    <input type="text" id="hcpInput"
                           placeholder="Escribe tu pregunta..." autocomplete="off" disabled>
                    <button class="hcp-send" id="hcpSend" disabled>
                        <i class="fas fa-paper-plane"></i>
                    </button>
                </div>
            </div>

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

<script>
// Posicionar el hub exactamente dentro del área disponible del layout
(function positionHub() {
    function applyPosition() {
        var app    = document.getElementById('hubApp');
        var aside  = document.getElementById('kt_aside');
        var header = document.getElementById('kt_header');
        if (!app) return;

        var asideW  = aside  ? aside.getBoundingClientRect().width  : 0;
        var headerH = header ? header.getBoundingClientRect().height : 65;

        app.style.left = asideW  + 'px';
        app.style.top  = headerH + 'px';
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', applyPosition);
    } else {
        applyPosition();
    }
    window.addEventListener('resize', applyPosition);
})();
</script>

<script>
(function () {
    var cfg             = document.getElementById('jsConfig').dataset;
    var chatBase        = cfg.chatBase;
    var chatStreamBase  = cfg.chatStreamBase;
    var csrf            = cfg.csrf;
    var reportBase      = cfg.reportBase;
    var analyzeBase     = cfg.analyzeBase;
    var currentUser  = null;

    if (window.marked) window.marked.setOptions({ breaks: true, gfm: true });

    // ── Filtro ────────────────────────────────────────
    var searchInput  = document.getElementById('playerSearch');
    var filterSelect = document.getElementById('filterTests');
    var playerRows   = document.querySelectorAll('#playerList .prow');
    var visibleCount = document.getElementById('visibleCount');

    function filterPlayers() {
        var q      = (searchInput.value || '').toLowerCase().trim();
        var filter = filterSelect.value;
        var count  = 0;
        playerRows.forEach(function (row) {
            var ok = (!q ||
                (row.dataset.name || '').includes(q) ||
                (row.dataset.club || '').includes(q) ||
                (row.dataset.code || '').includes(q)) &&
                (filter !== 'ready'       || parseInt(row.dataset.tests) >= 30) &&
                (filter !== 'with_report' || row.dataset.hasReport === '1');
            row.style.display = ok ? '' : 'none';
            if (ok) count++;
        });
        if (visibleCount) visibleCount.textContent = count;
    }
    if (searchInput)  searchInput.addEventListener('input',  filterPlayers);
    if (filterSelect) filterSelect.addEventListener('change', filterPlayers);

    // ── Chat helpers ──────────────────────────────────
    var emptyState   = document.getElementById('hubEmptyState');
    var chatPanel    = document.getElementById('hubChatPanel');
    var hcpMessages  = document.getElementById('hcpMessages');
    var hcpInput     = document.getElementById('hcpInput');
    var hcpSend      = document.getElementById('hcpSend');
    var hcpTyping    = document.getElementById('hcpTyping');
    var hcpActionsBar = document.getElementById('hcpActionsBar');

    function scrollBottom() {
        if (hcpMessages) hcpMessages.scrollTop = hcpMessages.scrollHeight;
    }

    function escapeHtml(text) {
        var d = document.createElement('div');
        d.appendChild(document.createTextNode(String(text || '')));
        return d.innerHTML;
    }

    function renderMarkdown(text) {
        var safe = escapeHtml(text);
        if (window.marked) return window.marked.parse(safe, { breaks: true, gfm: true });
        return safe
            .replace(/\*\*(.+?)\*\*/g,'<strong>$1</strong>')
            .replace(/\*(.+?)\*/g,'<em>$1</em>')
            .replace(/`(.+?)`/g,'<code>$1</code>')
            .replace(/^- (.+)$/gm,'<li>$1</li>')
            .replace(/\n/g,'<br>');
    }

    function appendMsg(role, text) {
        var wrap   = document.createElement('div');
        wrap.className = 'hcp-m ' + role;
        var bubble = document.createElement('div');
        bubble.className = 'hcp-b';
        if (role === 'assistant') {
            bubble.innerHTML = renderMarkdown(text);
        } else {
            bubble.textContent = text;
        }
        wrap.appendChild(bubble);
        hcpMessages.appendChild(wrap);
        scrollBottom();
    }

    window.openChat = function (userId) {
        var p = window.hubPlayers[userId];
        if (!p) return;
        currentUser = userId;

        // Resaltar fila
        playerRows.forEach(function (r) {
            r.classList.toggle('active', parseInt(r.dataset.userId) === userId);
        });

        // Cabecera
        var avEl = document.getElementById('hcpAv');
        avEl.textContent = p.initials;
        avEl.style.background = p.color;
        document.getElementById('hcpName').textContent = p.name;
        document.getElementById('hcpMeta').textContent =
            p.tests + ' tests' +
            (p.assoc ? ' · ' + p.assoc : '') +
            (p.position ? ' · ' + p.position : '') +
            (p.hasReport ? ' · ✓ Informe generado' : '');

        // Botones de acción
        hcpActionsBar.innerHTML = '';
        if (p.hasReport && p.reportId) {
            var bv = document.createElement('a');
            bv.href = reportBase + '/' + p.reportId;
            bv.className = 'hbtn-outline';
            bv.innerHTML = '<i class="fas fa-eye"></i> Ver informe';
            hcpActionsBar.appendChild(bv);
        }
        var ba = document.createElement('a');
        ba.href = analyzeBase + '/' + userId;
        ba.className = 'hbtn-primary';
        ba.innerHTML = '<i class="fas fa-robot"></i> ' + (p.hasReport ? 'Nuevo análisis' : 'Generar análisis');
        hcpActionsBar.appendChild(ba);

        // Limpiar mensajes y cargar historial
        hcpMessages.innerHTML = '';
        var safeName    = escapeHtml(p.name);
        var fullHistory = (p.chatHistory || []);
        var totalHist   = fullHistory.length;
        var startIdx    = Math.max(0, totalHist - 20);
        var visible     = fullHistory.slice(startIdx);
        var hidden      = startIdx;

        // Botón de mensajes anteriores si hay más de 20
        if (hidden > 0) {
            var loadDiv = document.createElement('div');
            loadDiv.className = 'hcp-load-prev';
            loadDiv.id = 'hcpLoadPrev_' + userId;
            loadDiv.setAttribute('data-user-id', userId);
            loadDiv.setAttribute('data-offset', String(startIdx));
            var loadBtn = document.createElement('button');
            loadBtn.className = 'hcp-load-btn';
            loadBtn.innerHTML = '<i class="fas fa-chevron-up"></i> Cargar ' + hidden + ' mensajes anteriores';
            loadBtn.addEventListener('click', function () { loadPrevHubMessages(userId); });
            loadDiv.appendChild(loadBtn);
            hcpMessages.appendChild(loadDiv);
        }

        // Mensaje de bienvenida
        var welcome = p.hasReport
            ? '¡Hola! Tengo acceso completo a los ' + p.tests + ' tests de **' + safeName + '** y a su informe. ¿Qué quieres saber?'
            : '¡Hola! Tengo acceso a los ' + p.tests + ' tests de **' + safeName + '**. Todavía no tiene informe generado, pero puedo analizar sus datos. ¿Qué quieres saber?';
        appendMsg('assistant', welcome);

        // Renderizar mensajes visibles
        visible.forEach(function (msg) {
            var wrap   = document.createElement('div');
            wrap.className = 'hcp-m ' + (msg.role || 'user');
            var bubble = document.createElement('div');
            bubble.className = 'hcp-b';
            if (msg.role === 'assistant') {
                bubble.innerHTML = renderMarkdown(msg.content || '');
            } else {
                bubble.textContent = msg.content || '';
            }
            wrap.appendChild(bubble);
            hcpMessages.appendChild(wrap);
        });

        hcpMessages.scrollTop = hcpMessages.scrollHeight;

        hcpInput.disabled  = false;
        hcpSend.disabled   = false;
        hcpInput.placeholder = 'Pregunta sobre ' + p.name + '...';

        emptyState.style.display = 'none';
        chatPanel.classList.add('open');
        hcpInput.focus();
    };

    window.closeChat = function () {
        currentUser = null;
        emptyState.style.display = '';
        chatPanel.classList.remove('open');
        playerRows.forEach(function (r) { r.classList.remove('active'); });
        hcpInput.disabled = true;
        hcpSend.disabled  = true;
    };

    function createStreamBubble() {
        var msgs   = document.getElementById('hcpMessages');
        var wrap   = document.createElement('div');
        wrap.className = 'hcp-m assistant';
        var bubble = document.createElement('div');
        bubble.className = 'hcp-b';
        bubble.innerHTML = '<span class="hcp-cursor">▌</span>';
        wrap.appendChild(bubble);
        msgs.appendChild(wrap);
        msgs.scrollTop = msgs.scrollHeight;
        return bubble;
    }

    function sendMessage() {
        var msg = (hcpInput ? hcpInput.value : '').trim();
        if (!msg || !currentUser) return;
        if (msg.length > 2000) { alert('Máximo 2000 caracteres.'); return; }

        appendMsg('user', msg);
        hcpInput.value    = '';
        hcpSend.disabled  = true;
        hcpInput.disabled = true;
        hcpTyping.classList.add('show');

        var requestUserId = currentUser;
        var bubble        = null;
        var fullText      = '';

        fetch(chatStreamBase + '/' + requestUserId, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrf,
            },
            body: JSON.stringify({ message: msg }),
        })
        .then(function (res) {
            if (!res.ok) return res.text().then(function (t) {
                try { var d = JSON.parse(t); throw new Error(d.error || 'Error ' + res.status); }
                catch (e) { throw new Error('Error ' + res.status); }
            });

            hcpTyping.classList.remove('show');
            if (currentUser !== requestUserId) { return; }

            bubble = createStreamBubble();
            var msgs     = document.getElementById('hcpMessages');
            var reader   = res.body.getReader();
            var decoder  = new TextDecoder();
            var sseBuffer = '';

            function read() {
                reader.read().then(function (result) {
                    if (result.done) {
                        hcpSend.disabled  = false;
                        hcpInput.disabled = false;
                        if (currentUser === requestUserId) hcpInput.focus();
                        setTimeout(function () {
                            if (bubble) {
                                bubble.innerHTML = renderMarkdown(fullText || 'Sin respuesta.');
                                msgs.scrollTop = msgs.scrollHeight;
                            }
                        }, 200);
                        // Actualizar historial local del jugador para la sesión actual
                        if (fullText && window.hubPlayers[requestUserId]) {
                            window.hubPlayers[requestUserId].chatHistory.push(
                                { role: 'user', content: msg },
                                { role: 'assistant', content: fullText }
                            );
                        }
                        return;
                    }

                    if (currentUser !== requestUserId) {
                        reader.cancel();
                        hcpSend.disabled  = false;
                        hcpInput.disabled = false;
                        return;
                    }

                    sseBuffer += decoder.decode(result.value, { stream: true });
                    var lines = sseBuffer.split('\n');
                    sseBuffer = lines.pop();

                    lines.forEach(function (line) {
                        line = line.trim();
                        if (!line || line === ':') return;
                        if (line.indexOf('data: ') !== 0) return;

                        var data = line.slice(6);
                        if (data === '[DONE]') return;

                        try {
                            var parsed = JSON.parse(data);
                            if (parsed.error) {
                                bubble.innerHTML = escapeHtml(parsed.error);
                                return;
                            }
                            if (parsed.token !== undefined) {
                                fullText += parsed.token;
                                bubble.innerHTML = renderMarkdown(fullText) + '<span class="hcp-cursor">▌</span>';
                                msgs.scrollTop = msgs.scrollHeight;
                            }
                            if (parsed.done && parsed.report_id && currentUser &&
                                window.hubPlayers[currentUser] && !window.hubPlayers[currentUser].reportId) {
                                window.hubPlayers[currentUser].reportId  = parsed.report_id;
                                window.hubPlayers[currentUser].hasReport = true;
                            }
                        } catch (e) { /* ignorar lineas mal formateadas */ }
                    });

                    read();
                }).catch(function (err) {
                    hcpSend.disabled  = false;
                    hcpInput.disabled = false;
                    hcpTyping.classList.remove('show');
                    if (bubble && currentUser === requestUserId) {
                        bubble.innerHTML = escapeHtml(err.message || 'Error al conectar.');
                    }
                });
            }

            read();
        })
        .catch(function (err) {
            hcpTyping.classList.remove('show');
            hcpSend.disabled  = false;
            hcpInput.disabled = false;
            if (currentUser === requestUserId) {
                appendMsg('assistant', err.message || 'Error al conectar con la IA.');
            }
        });
    }

    if (hcpSend)  hcpSend.addEventListener('click', sendMessage);
    if (hcpInput) hcpInput.addEventListener('keydown', function (e) {
        if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(); }
    });

    function loadPrevHubMessages(userId) {
        var p       = window.hubPlayers[userId];
        if (!p) return;
        var fullHistory = p.chatHistory || [];
        var loadDiv = document.getElementById('hcpLoadPrev_' + userId);
        if (!loadDiv) return;

        var currentOffset = parseInt(loadDiv.getAttribute('data-offset')) || 0;
        if (currentOffset <= 0) return;

        var batchSize = 20;
        var from      = Math.max(0, currentOffset - batchSize);
        var batch     = fullHistory.slice(from, currentOffset);
        loadDiv.setAttribute('data-offset', String(from));

        var scrollBefore = hcpMessages.scrollHeight - hcpMessages.scrollTop;

        // Insertar después del botón de carga
        var refNode = loadDiv.nextSibling;

        batch.slice().reverse().forEach(function (msg) {
            var wrap   = document.createElement('div');
            wrap.className = 'hcp-m ' + (msg.role || 'user');
            var bubble = document.createElement('div');
            bubble.className = 'hcp-b';
            if (msg.role === 'assistant') {
                bubble.innerHTML = renderMarkdown(msg.content || '');
            } else {
                bubble.textContent = msg.content || '';
            }
            wrap.appendChild(bubble);
            if (refNode) {
                hcpMessages.insertBefore(wrap, refNode);
            } else {
                hcpMessages.appendChild(wrap);
            }
        });

        hcpMessages.scrollTop = hcpMessages.scrollHeight - scrollBefore;

        if (from <= 0) {
            loadDiv.remove();
        } else {
            var btn = loadDiv.querySelector('button');
            if (btn) btn.innerHTML = '<i class="fas fa-chevron-up"></i> Cargar ' + from + ' mensajes anteriores';
        }
    }
})();
</script>
@endsection