@php
    $questionDetailUrlTemplate = route('dashboard.questions.show', ['batteryQuestion' => '__ID__']);
@endphp

<x-modal name="dashboard-question-detail" :show="false" maxWidth="2xl" focusable backdrop>
    <div
        class="p-6"
        x-data="{
            detailUrlTemplate: @js($questionDetailUrlTemplate),
            loading: false,
            error: null,
            stem: '',
            alternatives: [],
            highlightWrongPosition: null,
            detailUrl(questionId) {
                return this.detailUrlTemplate.replace('__ID__', String(questionId));
            },
            alternativeRowClass(alternative) {
                if (
                    this.highlightWrongPosition !== null
                    && alternative.position === this.highlightWrongPosition
                ) {
                    return 'border-red-300 bg-red-50 font-semibold text-red-900';
                }

                if (alternative.is_correct) {
                    return 'border-green-300 bg-green-50 font-semibold text-green-900';
                }

                return 'border-gray-200 bg-white text-gray-800';
            },
            alternativeBadgeClass(alternative) {
                if (
                    this.highlightWrongPosition !== null
                    && alternative.position === this.highlightWrongPosition
                ) {
                    return 'bg-red-200 text-red-900';
                }

                if (alternative.is_correct) {
                    return 'bg-green-200 text-green-900';
                }

                return 'bg-gray-100 text-gray-700';
            },
            async loadDetail(detail) {
                const questionId = detail?.questionId;
                if (! questionId) {
                    return;
                }

                this.highlightWrongPosition = detail.wrongPosition ?? null;
                window.openModal('dashboard-question-detail');
                this.loading = true;
                this.error = null;
                this.stem = '';
                this.alternatives = [];
                try {
                    const response = await fetch(this.detailUrl(questionId), {
                        headers: {
                            Accept: 'application/json',
                            'X-Requested-With': 'XMLHttpRequest',
                        },
                    });
                    if (! response.ok) {
                        this.error = 'Não foi possível carregar os detalhes da pergunta.';
                        return;
                    }
                    const data = await response.json();
                    this.stem = data.stem ?? '';
                    this.alternatives = data.alternatives ?? [];
                } catch (exception) {
                    this.error = 'Não foi possível carregar os detalhes da pergunta.';
                } finally {
                    this.loading = false;
                }
            },
        }"
        x-on:dashboard-open-question.window="loadDetail($event.detail)"
    >
        <div class="flex items-start justify-between gap-3">
            <div>
                <h2 class="text-lg font-semibold text-gray-900">Detalhe da pergunta</h2>
                <p
                    class="mt-1 text-sm text-gray-500"
                    x-text="highlightWrongPosition !== null
                        ? 'Alternativa errada em vermelho e correta em verde.'
                        : 'Alternativa correta destacada em verde.'"
                ></p>
            </div>
            <button
                type="button"
                class="rounded-lg p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-600"
                x-on:click="$dispatch('close-modal', 'dashboard-question-detail')"
                aria-label="Fechar"
            >
                <i class="fa-solid fa-xmark" aria-hidden="true"></i>
            </button>
        </div>

        <p x-show="loading" class="mt-6 text-sm text-gray-500">
            <i class="fa-solid fa-spinner fa-spin mr-1" aria-hidden="true"></i>
            Carregando…
        </p>

        <p x-show="error" class="mt-6 text-sm text-red-700" x-text="error"></p>

        <div x-show="! loading && ! error && stem" class="mt-6 space-y-5" x-cloak>
            <p class="text-base font-medium leading-relaxed text-gray-900" x-text="stem"></p>

            <ul class="space-y-2" role="list">
                <template x-for="alternative in alternatives" :key="alternative.position">
                    <li
                        class="flex gap-3 rounded-lg border px-4 py-3 text-sm"
                        :class="alternativeRowClass(alternative)"
                    >
                        <span
                            class="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded text-xs font-bold"
                            :class="alternativeBadgeClass(alternative)"
                            x-text="alternative.label"
                        ></span>
                        <span class="min-w-0 flex-1 leading-relaxed" x-text="alternative.body"></span>
                    </li>
                </template>
            </ul>

            <p x-show="alternatives.length === 0" class="text-sm text-gray-500">
                Esta pergunta não possui alternativas cadastradas.
            </p>
        </div>
    </div>
</x-modal>