@extends('layouts.app')

@section('title', 'Pronostics')

@section('content')
<div class="space-y-6">

    <h1 class="text-2xl font-bold text-slate-800 flex items-center gap-2">
        <i data-lucide="eye" class="w-6 h-6 text-teal-600"></i>
        Pronostics
    </h1>

    @if(isset($message))
        <p class="text-gray-400 italic text-sm">{{ $message }}</p>
    @else

    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4">
        <form method="GET" action="{{ route('pronostics') }}" class="flex items-center gap-3">
            <label for="jou_id" class="text-sm font-medium text-slate-700">Journée :</label>
            <select name="jou_id" id="jou_id" onchange="this.form.submit()"
                class="border border-gray-300 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500">
                @foreach($listeJournee as $j)
                    <option value="{{ $j->jou_id }}" @selected($j->jou_id == $journee->jou_id)>
                        J{{ $j->jou_numero }}
                        @if($j->jou_retour) (retour) @endif
                    </option>
                @endforeach
            </select>
        </form>
    </div>

    @php $peutSaisir = $isAdmin && !$journee->jou_diffuser_resultats; @endphp

    @if($journee->jou_diffuser_pronostics || $isAdmin)

    @if($peutSaisir)
    <div id="alerte-pronos-absents" class="hidden bg-red-50 border border-red-300 rounded-xl p-4 items-start gap-3">
        <i data-lucide="alert-triangle" class="w-5 h-5 text-red-500 shrink-0 mt-0.5"></i>
        <div>
            <p class="text-sm font-semibold text-red-700">Validation impossible</p>
            <p class="text-sm text-red-600" id="alerte-pronos-absents-texte"></p>
        </div>
    </div>

    <form method="POST" action="{{ route('pronostics.valider') }}">
        @csrf
        <input type="hidden" name="jou_id" value="{{ $journee->jou_id }}">
        <div class="flex items-center gap-3">
            <button type="button" id="btn-shuffle"
                    class="inline-flex items-center gap-2 bg-violet-500 hover:bg-violet-600 text-white text-sm font-semibold px-5 py-2.5 rounded-lg transition cursor-pointer">
                <i data-lucide="shuffle" class="w-4 h-4"></i>
                Aléatoire
            </button>
            <button type="submit" formaction="{{ route('pronostics.valider') }}"
                    class="inline-flex items-center gap-2 bg-teal-600 hover:bg-teal-700 text-white text-sm font-semibold px-5 py-2.5 rounded-lg transition">
                <i data-lucide="save" class="w-4 h-4"></i>
                Valider
            </button>
            @if(!$journee->jou_diffuser_pronostics)
            <button type="submit" formaction="{{ route('pronostics.diffuser') }}"
                    class="inline-flex items-center gap-2 bg-amber-500 hover:bg-amber-600 text-white text-sm font-semibold px-5 py-2.5 rounded-lg transition">
                <i data-lucide="send" class="w-4 h-4"></i>
                Diffuser les pronostics
            </button>
            <button type="submit" formaction="{{ route('rappel') }}"
                    class="inline-flex items-center gap-2 bg-slate-500 hover:bg-slate-600 text-white text-sm font-semibold px-5 py-2.5 rounded-lg transition">
                <i data-lucide="bell" class="w-4 h-4"></i>
                Rappel
            </button>
            @endif
        </div>
    @endif

    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-sm table-pronostics">
                <thead class="bg-teal-700 text-white">
                    <tr>
                        <th class="px-3 py-2 text-left font-medium">Joueur</th>
                        @if($peutSaisir)
                        <th class="px-3 py-2 text-center font-medium">Aveugle</th>
                        @endif
                        @foreach($listeMatch as $match)
                        <th class="px-3 py-2 text-center font-medium leading-tight">
                            <div class="flex items-center justify-center gap-1">
                                @if($match->equ_logo)<img src="{{ asset('images/equipes/'.$match->equ_logo) }}" class="w-4 h-4 object-contain" alt="">@endif
                                <span>{{ $match->equ_nom }}</span>
                            </div>
                            <div class="flex items-center justify-center gap-1 opacity-75">
                                @if($match->equ_logo_v)<img src="{{ asset('images/equipes/'.$match->equ_logo_v) }}" class="w-4 h-4 object-contain" alt="">@endif
                                <span>{{ $match->equ_nom_v }}</span>
                            </div>
                        </th>
                        @endforeach
                        <th class="px-3 py-2 text-left font-medium">Fil rouge</th>
                        @if($peutSaisir)<th class="px-3 py-2"></th>@endif
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @php $aRisques = []; @endphp
                    @foreach($resultat as $ligne)
                    @php
                        $u        = $ligne['utilisateur'];
                        $pseudo   = $u->uti_pseudo ?: $u->uti_nom.' '.$u->uti_prenom;
                        $bAveugle = $ligne['aveugle'];
                        $rowClass = ($bAveugle ? ' Aveugle' : '') . ($ligne['etat_fil_rouge'] == 1 ? ' FilRouge' : '');
                    @endphp
                    <tr class="hover:bg-teal-50 transition-colors {{ $rowClass }}" data-uti="{{ $u->uti_id }}">
                        <td class="px-3 py-2 font-medium text-slate-800 whitespace-nowrap">
                            <div class="flex items-center gap-2">
                                <img src="{{ App\Models\User::avatarUrlForId($u->uti_id) }}" alt="" width="24" height="24" class="rounded-full shrink-0 object-cover">
                                {{ $pseudo }}
                            </div>
                        </td>
                        @if($peutSaisir)
                        <td class="px-3 py-2 text-center">
                            <input type="checkbox" name="cbAveugle_{{ $u->uti_id }}"
                                   class="aveugle-cb rounded border-gray-300 text-teal-600"
                                   data-uti="{{ $u->uti_id }}"
                                   @checked($bAveugle)>
                        </td>
                        @endif
                        @foreach($listeMatch as $match)
                        @php
                            $p        = $ligne['pronos'][$match->ren_id] ?? null;
                            $iRisque  = $p ? (int)($p->pro_risques ?? 0) : 0;
                            $pe       = $p ? $p->pro_prono   : null;
                            $pv       = $p ? $p->pro_prono_v : null;

                            if ($iRisque == 0) {
                                $sClassRisque = $bAveugle ? 'risqueAveugle' : 'normal';
                            } else {
                                if ((int)$pe > (int)$pv)      $sType = 'V';
                                elseif ((int)$pe == (int)$pv) $sType = 'N';
                                else                           $sType = 'D';

                                $key = $match->ren_id;
                                if (isset($aRisques[$key][$iRisque])) {
                                    $sClassRisque = ($aRisques[$key][$iRisque] == $sType)
                                        ? 'risque'.$iRisque.'1'
                                        : 'risque'.$iRisque.'2';
                                } else {
                                    $sClassRisque = 'risque'.$iRisque.'1';
                                    $aRisques[$key][$iRisque] = $sType;
                                }
                            }

                            $inputVal = ($pe !== null && $pv !== null) ? $pe.' - '.$pv : '';
                            $affiche  = $inputVal;
                            if ($bAveugle && $iRisque == 0) $affiche = '';
                        @endphp
                        <td class="cellProno {{ $sClassRisque }} px-3 py-2 text-center">
                            @if($peutSaisir)
                                <input type="text"
                                       name="tbProno_{{ $u->uti_id }}_{{ $match->ren_id }}"
                                       value="{{ $inputVal }}"
                                       placeholder="X-X"
                                       maxlength="5"
                                       class="input-score w-14 text-center border border-gray-200 rounded px-1 py-0.5 text-xs focus:outline-none focus:ring-1 focus:ring-teal-400 bg-white">
                            @else
                                {{ $affiche }}
                            @endif
                        </td>
                        @endforeach
                        <td class="px-3 py-2">
                            @if($peutSaisir)
                                <input type="checkbox" name="cbFilRouge_{{ $u->uti_id }}"
                                       class="rounded border-gray-300 text-red-500"
                                       @checked($ligne['juti'] && $ligne['juti']->juti_fil_rouge)>
                            @else
                                @if($ligne['etat_fil_rouge'] == 1)
                                    <span class="text-red-600 font-bold">OUI</span>
                                @elseif($ligne['etat_fil_rouge'] == -1)
                                    <span class="text-purple-600 font-medium">Joué</span>
                                @else
                                    &mdash;
                                @endif
                            @endif
                        </td>
                        @if($peutSaisir)
                        <td class="px-3 py-2 text-right">
                            <button type="button"
                                class="save-row-btn inline-flex items-center justify-center w-8 h-8 rounded-lg bg-teal-50 hover:bg-teal-100 text-teal-600 transition cursor-pointer"
                                data-uti="{{ $u->uti_id }}"
                                data-jou="{{ $journee->jou_id }}">
                                <i data-lucide="save" class="w-4 h-4"></i>
                            </button>
                        </td>
                        @endif
                    </tr>
                    @endforeach
                </tbody>
                {{-- Lignes statistiques V/N/D --}}
                <tfoot>
                    @foreach(['victoire' => 'Victoire', 'nul' => 'Nul', 'defaite' => 'Défaite'] as $type => $label)
                    <tr class="stats-{{ $type }}">
                        <td class="px-3 py-2 font-semibold text-slate-700">{{ $label }}</td>
                        @if($peutSaisir)<td class="px-3 py-2"></td>@endif
                        @foreach($listeMatch as $match)
                        @php
                            $s   = $matchStats[$match->ren_id][$type] ?? ['nombre' => 0, 'risque' => 0];
                            $nb  = $s['nombre'];
                            $rq  = $s['risque'];
                            $cls = ($nb == 0) ? 'normal' : ($rq > 0 ? 'risque'.$rq.'1 '.$type : $type);
                        @endphp
                        <td class="{{ $cls }} px-3 py-2 text-center">{{ $nb > 0 ? $nb : '' }}</td>
                        @endforeach
                        <td class="px-3 py-2"></td>
                        @if($peutSaisir)<td class="px-3 py-2"></td>@endif
                    </tr>
                    @endforeach
                </tfoot>
            </table>
        </div>
    </div>

    @if($peutSaisir)
    </form>
    @endif

    @else
        <p class="text-gray-400 italic text-sm">Les pronostics ne sont pas encore diffusés.</p>
    @endif

    @endif
</div>
@endsection

@push('scripts')
@if($journee && isset($peutSaisir) && $peutSaisir)
<script>
(function () {
    const btnValider = document.querySelector('button[formaction="{{ route('pronostics.valider') }}"]');

    if (btnValider) {
        btnValider.addEventListener('click', function (e) {
            // Réinitialiser
            document.querySelectorAll('tbody tr[data-uti]').forEach(tr => {
                tr.classList.remove(
                    'bg-red-50', 'outline', 'outline-2', 'outline-red-300',
                    'bg-amber-50', 'outline-amber-300'
                );
                tr.querySelectorAll('input.input-score').forEach(i => {
                    i.classList.remove('border-red-400', 'bg-red-50');
                });
            });
            const alerte = document.getElementById('alerte-pronos-absents');
            alerte.classList.add('hidden');
            alerte.classList.remove('flex');

            const absents    = [];
            const incomplets = [];

            document.querySelectorAll('tbody tr[data-uti]').forEach(tr => {
                const utiId  = tr.dataset.uti;
                const aveugle = tr.querySelector(`input[name="cbAveugle_${utiId}"]`);
                if (aveugle && aveugle.checked) return;

                const inputs    = Array.from(tr.querySelectorAll(`input[name^="tbProno_${utiId}_"]`));
                const nbEmpty   = inputs.filter(i => i.value.trim() === '').length;
                const nbFilled  = inputs.length - nbEmpty;

                if (nbEmpty === inputs.length) {
                    absents.push(tr);
                } else if (nbEmpty > 0) {
                    incomplets.push(tr);
                }
            });

            if (absents.length > 0 || incomplets.length > 0) {
                e.preventDefault();
                absents.forEach(tr => tr.classList.add('bg-red-50', 'outline', 'outline-2', 'outline-red-300'));
                incomplets.forEach(tr => {
                    tr.classList.add('bg-amber-50', 'outline', 'outline-2', 'outline-amber-300');
                    tr.querySelectorAll('input.input-score').forEach(i => {
                        if (i.value.trim() === '')
                            i.classList.add('border-red-400', 'bg-red-50');
                    });
                });

                const lignes = [];
                if (absents.length)
                    lignes.push(absents.length + ' joueur' + (absents.length > 1 ? 's' : '') + ' sans aucun pronostic ni grille aveugle');
                if (incomplets.length)
                    lignes.push(incomplets.length + ' joueur' + (incomplets.length > 1 ? 's' : '') + ' avec des pronostics incomplets');

                document.getElementById('alerte-pronos-absents-texte').textContent =
                    lignes.join(' · ') + '. Corrigez avant de valider.';
                alerte.classList.remove('hidden');
                alerte.classList.add('flex');
                alerte.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
            }
        });
    }

    // Format "32" → "3 - 2" sur les inputs de prono admin
    document.querySelectorAll('input[name^="tbProno_"]').forEach(function (input) {
        input.addEventListener('blur', function () {
            const v = this.value.replace(/[\s\-]/g, '');
            if (/^\d{2}$/.test(v)) {
                this.value = v[0] + ' - ' + v[1];
            } else if (/^(\d+)-(\d+)$/.test(this.value.replace(/\s/g, ''))) {
                const m = this.value.replace(/\s/g, '').match(/^(\d+)-(\d+)$/);
                this.value = m[1] + ' - ' + m[2];
            }
        });
    });

    // Shuffle : remplissage aléatoire de tous les scores
    const btnShuffle = document.getElementById('btn-shuffle');
    if (btnShuffle) {
        btnShuffle.addEventListener('click', function () {
            const pool = [0, 0, 1, 1, 1, 2, 2, 2, 3, 3, 4];
            document.querySelectorAll('input.input-score').forEach(function (inp) {
                const a = pool[Math.floor(Math.random() * pool.length)];
                const b = pool[Math.floor(Math.random() * pool.length)];
                inp.value = a + ' - ' + b;
            });
        });
    }

    // Sauvegarde ligne par ligne
    const saveUrl   = '{{ route('pronostics.sauvegarder-ligne') }}';
    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;

    document.querySelectorAll('.save-row-btn').forEach(function (btn) {
        btn.addEventListener('click', function () {
            const utiId = this.dataset.uti;
            const jouId = this.dataset.jou;
            const tr    = this.closest('tr');

            // Normaliser les scores avant collecte
            tr.querySelectorAll('input.input-score').forEach(function (inp) {
                inp.dispatchEvent(new Event('blur'));
            });

            const scores = {};
            tr.querySelectorAll('input.input-score').forEach(function (inp) {
                const m = inp.name.match(/_(\d+)$/);
                if (m) scores[m[1]] = inp.value;
            });

            const aveugle  = tr.querySelector('input[name^="cbAveugle_"]')?.checked  ?? false;
            const filRouge = tr.querySelector('input[name^="cbFilRouge_"]')?.checked ?? false;

            const iconEl  = this.querySelector('i[data-lucide]');
            const iconOrig = iconEl ? iconEl.getAttribute('data-lucide') : 'save';

            this.disabled = true;
            if (iconEl) { iconEl.setAttribute('data-lucide', 'loader-2'); lucide.createIcons(); }

            const self = this;
            fetch(saveUrl, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken,
                    'Accept': 'application/json',
                },
                body: JSON.stringify({
                    jou_id: parseInt(jouId),
                    uti_id: parseInt(utiId),
                    scores: scores,
                    fil_rouge: filRouge,
                    aveugle: aveugle,
                }),
            })
            .then(function (r) { return r.json(); })
            .then(function (data) {
                if (iconEl) { iconEl.setAttribute('data-lucide', data.ok ? 'check' : 'x'); lucide.createIcons(); }
                if (data.ok) {
                    tr.style.transition = 'background-color 0.3s';
                    tr.style.backgroundColor = '#d1fae5';
                    setTimeout(function () { tr.style.backgroundColor = ''; }, 2000);
                }
                setTimeout(function () {
                    if (iconEl) { iconEl.setAttribute('data-lucide', iconOrig); lucide.createIcons(); }
                    self.disabled = false;
                }, 2000);
            })
            .catch(function () {
                if (iconEl) { iconEl.setAttribute('data-lucide', 'x'); lucide.createIcons(); }
                setTimeout(function () {
                    if (iconEl) { iconEl.setAttribute('data-lucide', iconOrig); lucide.createIcons(); }
                    self.disabled = false;
                }, 2000);
            });
        });
    });

    const grilleUrl = '{{ route('pronostics.grille-aveugle') }}';
    const renIds    = {!! json_encode(array_map(fn($m) => $m->ren_id, $listeMatch)) !!};

    document.querySelectorAll('.aveugle-cb').forEach(cb => {
        cb.addEventListener('change', function () {
            if (!this.checked) return;
            const utiId = this.dataset.uti;
            fetch(grilleUrl + '?uti_id=' + utiId)
                .then(r => r.json())
                .then(grille => {
                    grille.forEach((g, i) => {
                        if (i >= renIds.length) return;
                        const input = document.querySelector(`input[name="tbProno_${utiId}_${renIds[i]}"]`);
                        if (input && g.gri_prono !== null && g.gri_prono_v !== null) {
                            input.value = g.gri_prono + ' - ' + g.gri_prono_v;
                        }
                    });
                });
        });
    });
})();
</script>
@endif
@endpush