{{-- Global transient answer notification layer. Listens for the Livewire browser event `dadka-alert`. --}}
<div
    x-data="dadkaAlert()"
    x-on:dadka-alert.window="show($event)"
    class="pointer-events-none fixed inset-x-0 top-3 z-[100] flex flex-col items-center gap-3 px-4 sm:top-6"
    role="region"
    aria-label="{{ __('Quiz notifications') }}"
>
    <template x-for="toast in toasts" :key="toast.id">
        <div
            x-transition:enter="transition ease-out duration-300"
            x-transition:enter-start="opacity-0 -translate-y-3 scale-95"
            x-transition:enter-end="opacity-100 translate-y-0 scale-100"
            x-transition:leave="transition ease-in duration-200"
            x-transition:leave-start="opacity-100"
            x-transition:leave-end="opacity-0 -translate-y-2"
            class="pointer-events-auto w-full max-w-md overflow-hidden rounded-2xl border shadow-2xl backdrop-blur"
            :class="toast.type === 'correct'
                ? 'border-emerald-400/50 bg-emerald-950/90'
                : (toast.type === 'incorrect' ? 'border-red-500/50 bg-red-950/90' : 'border-gold-500/40 bg-ink-900/90')"
            role="status"
            aria-live="polite"
        >
            <div class="flex items-start gap-3 p-4">
                <span
                    class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full"
                    :class="toast.type === 'correct'
                        ? 'bg-emerald-500 text-ink-950'
                        : (toast.type === 'incorrect' ? 'bg-red-500 text-white' : 'bg-gold-500 text-ink-950')"
                >
                    <template x-if="toast.type === 'correct'">
                        <svg class="h-5 w-5" 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 0L3.3 9.7a1 1 0 0 1 1.4-1.4l3.3 3.3 6.8-6.8a1 1 0 0 1 1.4 0Z" clip-rule="evenodd"/>
                        </svg>
                    </template>
                    <template x-if="toast.type === 'incorrect'">
                        <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M6.3 5A1 1 0 0 0 5 6.3L8.6 10 5 13.7A1 1 0 1 0 6.3 15L10 11.4 13.7 15A1 1 0 1 0 15 13.7L11.4 10 15 6.3A1 1 0 1 0 13.7 5L10 8.6 6.3 5Z" clip-rule="evenodd"/>
                        </svg>
                    </template>
                    <template x-if="toast.type === 'info'">
                        <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                            <path d="M10 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm1 12H9v-6h2v6Zm0-8H9V4h2v2Z"/>
                        </svg>
                    </template>
                </span>

                <div class="min-w-0 flex-1">
                    <p
                        class="text-sm font-bold"
                        :class="toast.type === 'correct' ? 'text-emerald-200' : (toast.type === 'incorrect' ? 'text-red-200' : 'text-gold-200')"
                        x-text="toast.message"
                    ></p>
                    <p class="mt-1 text-xs text-gray-400" x-show="toast.question" x-text="'{{ __('Question') }} ' + toast.question"></p>
                    <p
                        class="mt-1 text-xs font-semibold text-red-200"
                        x-show="toast.type === 'incorrect' && toast.contestantAnswer"
                        x-text="'{{ __('Their answer') }}: ' + toast.contestantAnswer"
                    ></p>
                    <p
                        class="mt-1 text-xs font-semibold"
                        :class="toast.type === 'incorrect' ? 'text-red-200' : 'text-emerald-200'"
                        x-show="toast.answer"
                        x-text="'{{ __('Correct answer') }}: ' + toast.answer"
                    ></p>
                    <p
                        class="mt-1 text-xs font-semibold text-gold-200"
                        x-show="toast.points !== null"
                        x-text="(toast.type === 'correct' ? '+' : '') + toast.points + ' {{ __('pts') }}' + (toast.totalScore !== null ? ' · {{ __('Total Score') }}: ' + toast.totalScore : '')"
                    ></p>
                    <p class="mt-1 text-xs text-gray-400" x-show="toast.who" x-text="toast.who"></p>
                </div>

                <button
                    type="button"
                    class="shrink-0 text-gray-500 transition hover:text-white"
                    @click="dismiss(toast.id)"
                    aria-label="{{ __('Dismiss') }}"
                >
                    <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor"><path d="M6.3 5 5 6.3 8.6 10 5 13.7 6.3 15 10 11.4 13.7 15 15 13.7 11.4 10 15 6.3 13.7 5 10 8.6 6.3 5Z"/></svg>
                </button>
            </div>
        </div>
    </template>
</div>