@php
    $confettiColors = ['#f59e0b', '#10b981', '#38bdf8', '#f43f5e', '#eab308', '#a855f7'];
    $confetti = collect(range(1, 30))->map(fn () => [
        'left' => mt_rand(0, 100),
        'delay' => mt_rand(0, 1000),
        'duration' => mt_rand(1800, 3200),
        'drift' => mt_rand(-90, 90),
        'color' => $confettiColors[array_rand($confettiColors)],
    ])->all();
@endphp

<div
    x-data="dadkaResultOverlay()"
    x-on:dadka-alert.window="show($event)"
    x-cloak
    aria-live="assertive"
    class="pointer-events-none fixed inset-0 z-[120]"
>
    <template x-if="visible">
        <div
            class="dadka-overlay absolute inset-0 flex items-center justify-center"
            :class="type === 'correct' ? 'bg-emerald-950/85' : 'bg-red-950/85'"
        >
            <template x-if="type === 'correct'">
                <div class="absolute inset-0 overflow-hidden">
                    @foreach ($confetti as $piece)
                        <span
                            class="dadka-confetti-piece"
                            style="left: {{ $piece['left'] }}%; background-color: {{ $piece['color'] }}; animation-delay: {{ $piece['delay'] }}ms; animation-duration: {{ $piece['duration'] }}ms; --drift: {{ $piece['drift'] }}px;"
                        ></span>
                    @endforeach
                </div>
            </template>

            <div class="relative flex flex-col items-center gap-5 px-6 text-center">
                <span
                    class="dadka-badge flex h-32 w-32 items-center justify-center rounded-full shadow-2xl sm:h-40 sm:w-40"
                    :class="type === 'correct' ? 'bg-emerald-500 ring-8 ring-emerald-400/30' : 'bg-red-500 ring-8 ring-red-400/30'"
                >
                    <template x-if="type === 'correct'">
                        <svg class="h-20 w-20 text-white sm:h-24 sm:w-24" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                            <path fill-rule="evenodd" d="M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0L4.3 10.7a1 1 0 1 1 1.4-1.4l2.8 2.8 6.8-6.8a1 1 0 0 1 1.4 0Z" clip-rule="evenodd"/>
                        </svg>
                    </template>
                    <template x-if="type === 'incorrect'">
                        <svg class="h-20 w-20 text-white sm:h-24 sm:w-24" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                            <path fill-rule="evenodd" d="M6.3 5a1 1 0 0 0-.7 1.7L8.6 10l-3 3.3A1 1 0 1 0 7 14.7L10 11.4l3.3 3a1 1 0 0 0 1.4-1.4L11.4 10l3-3.3A1 1 0 1 0 13 5l-3 3.3L6.3 5Z" clip-rule="evenodd"/>
                        </svg>
                    </template>
                </span>

                <p x-show="type === 'correct'" class="text-3xl font-black tracking-tight text-white drop-shadow-lg sm:text-5xl">
                    {{ __('JAWAABTA WAA SAX!') }}
                </p>
                <p x-show="type === 'incorrect'" class="text-3xl font-black tracking-tight text-white drop-shadow-lg sm:text-5xl">
                    {{ __('JAWAABTA WAA QALAD!') }}
                </p>

                <p x-show="type === 'correct'" class="text-base font-semibold text-emerald-200 sm:text-lg">
                    {{ __('Well done!') }}
                </p>

                <div x-show="type === 'incorrect' && contestantAnswer" class="flex flex-col items-center gap-1">
                    <p class="text-xs uppercase tracking-widest text-red-200/80">{{ __('Their answer') }}</p>
                    <p class="text-xl font-bold text-white line-through sm:text-2xl" x-text="contestantAnswer"></p>
                </div>

                <div x-show="type === 'incorrect' && answer" class="flex flex-col items-center gap-1">
                    <p class="text-xs uppercase tracking-widest text-red-200/80">{{ __('Correct Answer') }}</p>
                    <p class="text-xl font-bold text-white sm:text-2xl" x-text="answer"></p>
                </div>

                <p x-show="points !== null" class="rounded-full border border-white/20 bg-black/30 px-6 py-2 font-mono text-xl font-black text-gold-200 sm:text-2xl"
                   x-text="(type === 'correct' ? '+' : '') + points + ' {{ __('pts') }}' + (totalScore !== null ? ' · {{ __('Total Score') }}: ' + totalScore : '')"></p>
            </div>
        </div>
    </template>
</div>