@extends('layouts.app')

@section('titulo', 'Mis pronósticos')

@section('contenido')

@php
    $isoFlags = [
        'MEX' => 'mx', 'RSA' => 'za', 'KOR' => 'kr', 'CZE' => 'cz',
        'CAN' => 'ca', 'BIH' => 'ba', 'USA' => 'us', 'PAR' => 'py',
        'QAT' => 'qa', 'SUI' => 'ch', 'BRA' => 'br', 'MAR' => 'ma',
        'HAI' => 'ht', 'SCO' => 'gb-sct', 'AUS' => 'au', 'TUR' => 'tr',
        'GER' => 'de', 'CUW' => 'cw', 'FRA' => 'fr', 'SEN' => 'sn',
        'ENG' => 'gb-eng', 'CRO' => 'hr', 'ARG' => 'ar', 'ALG' => 'dz',
        'ESP' => 'es', 'JPN' => 'jp', 'ITA' => 'it', 'COL' => 'co',
        'POR' => 'pt', 'NOR' => 'no', 'URU' => 'uy', 'NGA' => 'ng',
        'BEL' => 'be', 'EGY' => 'eg', 'NED' => 'nl', 'PAN' => 'pa',
        'ECU' => 'ec', 'IRN' => 'ir', 'POL' => 'pl', 'GHA' => 'gh',
        'DEN' => 'dk', 'CRC' => 'cr', 'AUT' => 'at', 'TUN' => 'tn',
        'CHI' => 'cl', 'PER' => 'pe', 'NZL' => 'nz', 'KSA' => 'sa',
        'UKR' => 'ua', 'WAL' => 'gb-wls', 'SWE' => 'se', 'CMR' => 'cm',
        'MLI' => 'ml', 'CIV' => 'ci', 'VEN' => 've', 'BOL' => 'bo',
        'ROU' => 'ro', 'HUN' => 'hu', 'SRB' => 'rs', 'SVK' => 'sk',
        'GRE' => 'gr', 'JAM' => 'jm', 'HON' => 'hn', 'SLV' => 'sv',
        'UAE' => 'ae', 'IRQ' => 'iq', 'JOR' => 'jo', 'UZB' => 'uz',
        'CHN' => 'cn', 'CPV' => 'cv', 'IRL' => 'ie'
    ];

    $equiposPorId = isset($equipos) ? $equipos->keyBy('id') : collect();
    $tablasGrupos = $tablasGrupos ?? [];
    $activeFaseId = session('active_fase_id');

    $banderaEquipo = function ($equipo) use ($isoFlags) {
        if (!$equipo) {
            return null;
        }

        if (!empty($equipo->bandera_url)) {
            return $equipo->bandera_url;
        }

        if (!empty($equipo->bandera)) {
            return $equipo->bandera;
        }

        $codigo = strtoupper($equipo->codigo ?? '');
        $iso = $isoFlags[$codigo] ?? null;

        if (!$iso) {
            return null;
        }

        return "https://flagcdn.com/w40/{$iso}.png";
    };

    $esFaseGrupos = function ($fase) {
        return strtolower($fase->codigo ?? '') === 'grupos'
            || strtolower($fase->codigo ?? '') === 'grupo'
            || (int) $fase->orden === 1;
    };

    $esFaseFinal = function ($fase) {
        $codigo = strtolower($fase->codigo ?? '');
        $nombre = strtolower($fase->nombre ?? '');

        return $codigo === 'final'
            || $nombre === 'final';
    };

    $esFaseTercerPuesto = function ($fase) {
        $codigo = strtolower($fase->codigo ?? '');
        $nombre = strtolower($fase->nombre ?? '');

        return str_contains($codigo, 'tercer')
            || str_contains($codigo, 'third')
            || str_contains($nombre, 'tercer')
            || str_contains($nombre, '3');
    };
@endphp

<style>
    .page-title {
        font-weight: 800;
        color: #092c24;
    }

    .info-pronostico {
        border: 1px solid #b8edf3;
        background: #dff8fb;
        border-radius: 14px;
        padding: 12px 16px;
        color: #03424d;
        font-size: .9rem;
    }

    .top-actions {
        background: #ffffff;
        border-radius: 18px;
        padding: 12px;
        margin-bottom: 14px;
        box-shadow: 0 8px 22px rgba(0,0,0,.06);
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: space-between;
        align-items: center;
        position: sticky;
        top: 0;
        z-index: 40;
    }

    .fase-tabs {
        background: #fff;
        border-radius: 18px;
        padding: 10px;
        box-shadow: 0 8px 22px rgba(0,0,0,.06);
        position: sticky;
        top: 76px;
        z-index: 30;
    }

    .fase-tabs .nav-link {
        border: 0;
        border-radius: 12px;
        color: #073b2d;
        font-weight: 700;
        font-size: .85rem;
        padding: 8px 12px;
    }

    .fase-tabs .nav-link.active {
        background: #073b2d;
        color: #fff;
    }

    .fase-header {
        background: linear-gradient(135deg, #073b2d, #0e8f69);
        color: white;
        border-radius: 18px;
        padding: 14px 18px;
        margin-bottom: 16px;
    }

    .fase-header h4 {
        margin: 0;
        font-weight: 800;
    }

    .match-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 12px;
    }

    .match-card {
        background: #fff;
        border-radius: 18px;
        padding: 12px;
        box-shadow: 0 8px 20px rgba(0,0,0,.06);
        border: 1px solid #eef2f4;
    }

    .match-card.bloqueado {
        opacity: .65;
    }

    .match-card.pendiente {
        border-style: dashed;
        background: #fbfcfd;
    }

    .match-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
    }

    .match-number {
        background: #073b2d;
        color: #fff;
        font-weight: 800;
        border-radius: 999px;
        padding: 3px 9px;
        font-size: .78rem;
    }

    .points-badge {
        background: #111827;
        color: #fff;
        border-radius: 999px;
        padding: 3px 9px;
        font-size: .78rem;
        font-weight: 800;
    }

    .team-line {
        display: grid;
        grid-template-columns: 1fr 58px;
        gap: 8px;
        align-items: center;
        margin-bottom: 7px;
    }

    .team-box {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 34px;
        background: #f7fafc;
        border-radius: 12px;
        padding: 6px 8px;
        font-weight: 800;
        font-size: .88rem;
    }

    .team-box.pending {
        color: #7b8794;
        font-weight: 700;
        background: #f1f3f5;
    }

    .team-box .flag {
        width: 28px;
        height: 20px;
        object-fit: cover;
        border-radius: 3px;
        box-shadow: 0 1px 3px rgba(0,0,0,.2);
        flex-shrink: 0;
    }

    .score-input {
        width: 58px;
        height: 34px;
        text-align: center;
        font-weight: 800;
        border-radius: 10px;
        padding: 4px;
    }

    .winner-select {
        font-size: .82rem;
        border-radius: 10px;
    }

    .small-help {
        font-size: .72rem;
        color: #687684;
        margin-top: 4px;
    }

    .fase-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 14px;
    }

    .tabla-grupos-wrap {
        margin-top: 22px;
    }

    .tabla-grupo-card {
        border-radius: 16px;
        background: #ffffff;
        border: 1px solid #e9eef3;
        box-shadow: 0 6px 18px rgba(0,0,0,.05);
        padding: 10px;
        height: 100%;
    }

    .tabla-grupo-title {
        font-weight: 800;
        color: #073b2d;
        margin-bottom: 8px;
    }

    .tabla-grupo table {
        font-size: .78rem;
        margin-bottom: 0;
    }

    .tabla-grupo th {
        background: #073b2d;
        color: white;
        font-weight: 700;
        text-align: center;
    }

    .tabla-grupo td {
        vertical-align: middle;
        text-align: center;
    }

    .tabla-equipo {
        display: flex;
        align-items: center;
        gap: 5px;
        text-align: left;
        font-weight: 700;
    }

    .tabla-equipo img {
        width: 22px;
        height: 15px;
        object-fit: cover;
        border-radius: 2px;
    }

    .clasifica-directo {
        background: #e8fff2;
    }

    .posible-tercero {
        background: #fff8dd;
    }

    @media (max-width: 576px) {
        .match-grid {
            grid-template-columns: 1fr;
        }

        .top-actions,
        .fase-tabs {
            position: static;
        }
    }
</style>

<h2 class="page-title mb-3">
    Mis pronósticos Mundial 2026
</h2>

<div class="info-pronostico mb-3">
    <strong>Importante:</strong>
    cada fase se guarda de forma independiente. Usa <strong>Guardar esta fase</strong> antes de cambiar de pestaña.
    En semifinales, los ganadores pasan a la final y los perdedores al tercer puesto.
</div>

<div class="top-actions">
    <div class="d-flex gap-2 flex-wrap">
        <form method="POST" action="{{ route('pronosticos.guardar') }}">
            @csrf
            <button type="submit" class="btn btn-success">
                Guardar todo
            </button>
        </form>

        @if(\Illuminate\Support\Facades\Route::has('pronosticos.imprimir'))
            <a href="{{ route('pronosticos.imprimir') }}" class="btn btn-outline-dark">
                Imprimir
            </a>
        @endif

        @if(\Illuminate\Support\Facades\Route::has('pronosticos.enviar_final'))
            <form method="POST" action="{{ route('pronosticos.enviar_final') }}">
                @csrf
                <button type="submit" class="btn btn-primary">
                    Enviar pronóstico final
                </button>
            </form>
        @endif
    </div>

    @if(\Illuminate\Support\Facades\Route::has('ranking.publico'))
        <a href="{{ route('ranking.publico') }}" class="btn btn-outline-secondary">
            Ver ranking
        </a>
    @endif
</div>

<div class="fase-tabs mb-4">
    <ul class="nav nav-pills gap-2" id="faseTabs" role="tablist">
        @foreach($fases as $fase)
            @php
                $activo = $activeFaseId
                    ? ((int) $activeFaseId === (int) $fase->id)
                    : $loop->first;
            @endphp

            <li class="nav-item" role="presentation">
                <button class="nav-link {{ $activo ? 'active' : '' }}"
                        id="tab-{{ $fase->id }}"
                        data-bs-toggle="pill"
                        data-bs-target="#fase-{{ $fase->id }}"
                        type="button"
                        role="tab">
                    {{ $fase->nombre }}
                </button>
            </li>
        @endforeach
    </ul>
</div>

<div class="tab-content" id="faseTabsContent">

    @foreach($fases as $fase)
        @php
            $activo = $activeFaseId
                ? ((int) $activeFaseId === (int) $fase->id)
                : $loop->first;
        @endphp

        <div class="tab-pane fade {{ $activo ? 'show active' : '' }}"
             id="fase-{{ $fase->id }}"
             role="tabpanel">

            <form method="POST" action="{{ route('pronosticos.guardar_fase', $fase) }}">
                @csrf

                <div class="fase-header">
                    <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
                        <h4>{{ $fase->nombre }}</h4>

                        <div class="d-flex gap-2 flex-wrap">
                            @if($fase->pronostico_abierto)
                                <span class="badge bg-success">Fase abierta</span>
                            @else
                                <span class="badge bg-secondary">Fase cerrada</span>
                            @endif

                            @if($esFaseGrupos($fase))
                                <span class="badge bg-primary">Equipos FIFA definidos</span>
                            @else
                                <span class="badge bg-warning text-dark">
                                    Equipos calculados por usuario
                                </span>
                            @endif
                        </div>
                    </div>
                </div>

                <div class="match-grid">

                    @foreach($fase->partidos as $partido)

                        @php
                            $pronostico = $pronosticos[$partido->id] ?? null;

                            $partidoAbierto = $partido->pronostico_abierto ?? $partido->abierto ?? true;

                            $bloqueado = !$fase->pronostico_abierto
                                || !$partidoAbierto
                                || ($pronostico?->bloqueado ?? false);

                            if ($esFaseGrupos($fase)) {
                                $localObj = $partido->local;
                                $visitanteObj = $partido->visitante;

                                $localId = $partido->equipo_local_id;
                                $visitanteId = $partido->equipo_visitante_id;

                                $localNombre = $partido->local?->nombre ?? $partido->origen_local ?? 'Por definir';
                                $visitanteNombre = $partido->visitante?->nombre ?? $partido->origen_visitante ?? 'Por definir';
                            } else {
                                $faseCalculadaParaUsuario = (bool) ($pronostico?->generado_automaticamente ?? false);

                                if ($faseCalculadaParaUsuario) {
                                    $localObj = $pronostico?->local;
                                    $visitanteObj = $pronostico?->visitante;

                                    $localId = $pronostico?->equipo_local_id;
                                    $visitanteId = $pronostico?->equipo_visitante_id;

                                    $localNombre = $pronostico?->local?->nombre ?? 'Pendiente';
                                    $visitanteNombre = $pronostico?->visitante?->nombre ?? 'Pendiente';
                                } else {
                                    $localObj = null;
                                    $visitanteObj = null;

                                    $localId = null;
                                    $visitanteId = null;

                                    $localNombre = 'Pendiente';
                                    $visitanteNombre = 'Pendiente';
                                }
                            }

                            $localFlag = $banderaEquipo($localObj);
                            $visitanteFlag = $banderaEquipo($visitanteObj);

                            $partidoListo = $localId && $visitanteId;
                        @endphp

                        <div class="match-card {{ $bloqueado ? 'bloqueado' : '' }} {{ !$partidoListo ? 'pendiente' : '' }}">
                            <div class="match-top">
                                <span class="match-number">
                                    M{{ $partido->numero }}
                                </span>

                                <span class="points-badge">
                                    {{ $pronostico?->puntaje_obtenido ?? 0 }} pts
                                </span>
                            </div>

                            <input type="hidden"
                                   name="pronosticos[{{ $partido->id }}][partido_id]"
                                   value="{{ $partido->id }}">

                            <div class="team-line">
                                <div class="team-box {{ !$localId ? 'pending' : '' }}">
                                    @if($localFlag)
                                        <img src="{{ $localFlag }}" class="flag" alt="{{ $localNombre }}">
                                    @endif

                                    <span>{{ $localNombre }}</span>
                                </div>

                                <input class="form-control form-control-sm score-input"
                                       type="number"
                                       min="0"
                                       max="30"
                                       name="pronosticos[{{ $partido->id }}][goles_local]"
                                       value="{{ $partidoListo ? $pronostico?->goles_local : null }}"
                                       placeholder="0"
                                       @disabled($bloqueado || !$partidoListo)>
                            </div>

                            <div class="team-line">
                                <div class="team-box {{ !$visitanteId ? 'pending' : '' }}">
                                    @if($visitanteFlag)
                                        <img src="{{ $visitanteFlag }}" class="flag" alt="{{ $visitanteNombre }}">
                                    @endif

                                    <span>{{ $visitanteNombre }}</span>
                                </div>

                                <input class="form-control form-control-sm score-input"
                                       type="number"
                                       min="0"
                                       max="30"
                                       name="pronosticos[{{ $partido->id }}][goles_visitante]"
                                       value="{{ $partidoListo ? $pronostico?->goles_visitante : null }}"
                                       placeholder="0"
                                       @disabled($bloqueado || !$partidoListo)>
                            </div>

                            @if($esFaseGrupos($fase))
                                <div class="small-help">
                                    Ganador automático según marcador. El empate es válido.
                                </div>

                                <input type="hidden"
                                       name="pronosticos[{{ $partido->id }}][ganador_pronosticado_id]"
                                       value="">
                            @else
                                @if($partidoListo)
                                    <select class="form-select form-select-sm winner-select"
                                            name="pronosticos[{{ $partido->id }}][ganador_pronosticado_id]"
                                            @disabled($bloqueado)>
                                        <option value="">Ganador si hay empate</option>

                                        <option value="{{ $localId }}"
                                                @selected((int) ($pronostico?->ganador_pronosticado_id ?? 0) === (int) $localId)>
                                            {{ $localNombre }}
                                        </option>

                                        <option value="{{ $visitanteId }}"
                                                @selected((int) ($pronostico?->ganador_pronosticado_id ?? 0) === (int) $visitanteId)>
                                            {{ $visitanteNombre }}
                                        </option>
                                    </select>

                                    <div class="small-help">
                                        Si colocas empate, selecciona quién pasa.
                                    </div>
                                @else
                                    <div class="small-help text-danger">
                                        Primero calcula la fase anterior para cargar estos equipos.
                                    </div>
                                @endif
                            @endif
                        </div>

                    @endforeach

                </div>

                @if($esFaseGrupos($fase) && !empty($tablasGrupos))
                    <div class="tabla-grupos-wrap">
                        <h5 class="fw-bold text-success mb-3">
                            Tabla de posiciones por grupo según tu pronóstico
                        </h5>

                        <div class="row">
                            @foreach($tablasGrupos as $grupo => $tabla)
                                <div class="col-md-4 col-lg-3 mb-3">
                                    <div class="tabla-grupo-card">
                                        <h6 class="tabla-grupo-title">
                                            Grupo {{ $grupo }}
                                        </h6>

                                        <div class="table-responsive tabla-grupo">
                                            <table class="table table-sm table-bordered">
                                                <thead>
                                                    <tr>
                                                        <th>#</th>
                                                        <th>Equipo</th>
                                                        <th>Pts</th>
                                                        <th>DG</th>
                                                        <th>GF</th>
                                                    </tr>
                                                </thead>

                                                <tbody>
                                                    @foreach($tabla as $i => $fila)
                                                        @php
                                                            $equipoTabla = $equiposPorId[$fila['equipo_id']] ?? null;
                                                            $flagTabla = $banderaEquipo($equipoTabla);
                                                        @endphp

                                                        <tr class="{{ $i < 2 ? 'clasifica-directo' : ($i === 2 ? 'posible-tercero' : '') }}">
                                                            <td>{{ $i + 1 }}</td>

                                                            <td>
                                                                <div class="tabla-equipo">
                                                                    @if($flagTabla)
                                                                        <img src="{{ $flagTabla }}" alt="{{ $equipoTabla?->nombre }}">
                                                                    @endif

                                                                    <span>{{ $equipoTabla?->nombre ?? 'Equipo' }}</span>
                                                                </div>
                                                            </td>

                                                            <td>{{ $fila['pts'] ?? 0 }}</td>
                                                            <td>{{ $fila['dg'] ?? 0 }}</td>
                                                            <td>{{ $fila['gf'] ?? 0 }}</td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>

                                        <small class="text-muted">
                                            Verde: 1.º y 2.º. Amarillo: posible mejor tercero.
                                        </small>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif

                @if($fase->pronostico_abierto)
                    <div class="fase-actions">
                        <button type="submit"
                                formaction="{{ route('pronosticos.guardar_fase', $fase) }}"
                                formmethod="POST"
                                class="btn btn-success btn-sm">
                            Guardar esta fase
                        </button>

                        @if(
                            !$esFaseFinal($fase) &&
                            !$esFaseTercerPuesto($fase) &&
                            \Illuminate\Support\Facades\Route::has('pronosticos.calcular_fase')
                        )
                            <button type="submit"
                                    formaction="{{ route('pronosticos.calcular_fase', $fase) }}"
                                    formmethod="POST"
                                    class="btn btn-outline-primary btn-sm">
                                Calcular siguiente fase
                            </button>
                        @endif

                        @if(\Illuminate\Support\Facades\Route::has('pronosticos.borrar_fase'))
                            <button type="submit"
                                    formaction="{{ route('pronosticos.borrar_fase', $fase) }}"
                                    formmethod="POST"
                                    class="btn btn-outline-danger btn-sm"
                                    onclick="return confirm('¿Seguro que deseas borrar esta fase? También se borrarán las fases posteriores para recalcular correctamente.')">
                                Borrar esta fase
                            </button>
                        @endif
                    </div>
                @endif

            </form>
        </div>
    @endforeach

</div>

@endsection