@php
    $opponent = $battle->club_id === $club->id ? $battle->opponentClub : $battle->club;
    $ourScore = $battle->scoreFor($club);
    $theirScore = $battle->club_id === $club->id ? $battle->opponent_score : $battle->club_score;
@endphp

<x-layouts.app :title="__('clubs.battle_vs', ['club' => $club->name, 'opponent' => $opponent->name])" :description="__('clubs.battles_meta_description')">
    <div
        class="mx-auto max-w-xl space-y-6"
        x-data="{
            battleId: {{ $battle->id }},
            clubId: {{ $battle->club_id }},
            opponentClubId: {{ $battle->opponent_club_id }},
            myClubId: {{ $club->id }},
            ourScore: {{ $ourScore }},
            theirScore: {{ $theirScore }},
            status: @js($battle->status),
            init() {
                // The server-rendered values above are the authoritative state as of
                // page load — reconciling on reconnect just means re-loading this page,
                // or, while connected, trusting fresh pushes over anything stale.
                if (! window.Echo) return;

                window.Echo.private('club-battle.' + this.battleId)
                    .listen('.score.updated', (e) => {
                        this.status = e.status;
                        this.ourScore = this.myClubId === e.clubId ? e.clubScore : e.opponentScore;
                        this.theirScore = this.myClubId === e.clubId ? e.opponentScore : e.clubScore;
                    });
            },
        }"
    >
        <div>
            <a href="{{ route('clubs.battles.index', $club) }}" class="text-sm text-slate-500 hover:underline">&larr; {{ __('clubs.battles_title') }}</a>
        </div>

        <div class="rounded-lg border border-slate-200 p-6 text-center dark:border-slate-800">
            <p class="text-xs uppercase tracking-wide text-slate-500">{{ $battle->category->name() }}</p>
            <div class="mt-4 flex items-center justify-center gap-6">
                <div>
                    <p class="text-sm font-medium">{{ $club->name }}</p>
                    <p class="text-3xl font-semibold" x-text="ourScore"></p>
                </div>
                <span class="text-slate-400">vs</span>
                <div>
                    <p class="text-sm font-medium">{{ $opponent->name }}</p>
                    <p class="text-3xl font-semibold" x-text="theirScore"></p>
                </div>
            </div>

            <p class="mt-4 text-xs">
                <span
                    class="rounded-full px-2 py-0.5"
                    :class="status === 'live' ? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950 dark:text-emerald-300' : 'bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-400'"
                    x-text="status"
                ></span>
            </p>

            @if ($battle->status === \App\Models\ClubBattle::STATUS_COMPLETED)
                <p class="mt-2 text-sm">
                    @if ($battle->winner_club_id)
                        {{ __('clubs.battle_winner', ['club' => $battle->winnerClub->name]) }}
                    @else
                        {{ __('clubs.battle_tied') }}
                    @endif
                </p>
            @endif

            <p class="mt-4 text-xs text-slate-400">{{ __('clubs.battle_window', ['start' => $battle->starts_at->toFormattedDateString(), 'end' => $battle->ends_at->toFormattedDateString()]) }}</p>
        </div>
    </div>

    @vite('resources/js/echo.js')
</x-layouts.app>