@extends('layouts.app-full')

@section('title', 'Preview Simulator')

@section('content')
<section
    class="min-h-screen bg-background"
    x-data="questionPreviewSimulator({
        questions: @js($questions ?? []),
        loadError: @js($loadError ?? null),
        indexUrl: @js(route('admin.question.index')),
    })"
    x-init="init()"
    @mouseup.window="captureSelection"
    @keyup.window="captureSelection">

    <template x-if="finished">
        <section class="flex min-h-screen items-center justify-center px-4 py-12">
            <article class="w-full max-w-xl rounded-2xl border border-border bg-card p-8 text-center shadow-hover">
                <span class="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-brand/10 text-brand">
                    <x-heroicon-o-check-circle class="h-8 w-8" />
                </span>
                <h1 class="mt-5 text-2xl font-bold tracking-tight text-foreground">Thank you</h1>
                <p class="mt-2 text-sm leading-6 text-muted-foreground">
                    Your exam has been submitted successfully.
                </p>
                <div class="mt-5 grid gap-3 rounded-xl border border-border bg-muted/40 p-4 sm:grid-cols-2">
                    <div>
                        <p class="text-xs font-semibold uppercase text-muted-foreground">Score</p>
                        <p class="mt-1 text-xl font-bold text-foreground"><span x-text="score"></span>/<span x-text="totalMarks"></span></p>
                    </div>
                    <div>
                        <p class="text-xs font-semibold uppercase text-muted-foreground">Answered</p>
                        <p class="mt-1 text-xl font-bold text-foreground"><span x-text="answeredCount"></span>/<span x-text="total"></span></p>
                    </div>
                </div>
                <div class="mt-6 flex flex-wrap justify-center gap-3">
                    <x-buttons.secondary href="{{ route('admin.question.index') }}">
                        <x-heroicon-o-arrow-left class="h-4 w-6" />
                        Back
                    </x-buttons.secondary>
                    <x-buttons.primary type="button" @click="restart">
                        <x-heroicon-o-arrow-path class="h-4 w-6" />
                        Restart
                    </x-buttons.primary>
                </div>
            </article>
        </section>
    </template>

    <template x-if="!finished">
        <section class="min-h-screen pb-24">
            <header class="sticky top-0 z-30 border-b border-border bg-card/95 backdrop-blur">
                <div class="mx-auto flex max-w-6xl items-center justify-between gap-4 px-4 py-3">

                    <x-buttons.primary @click="reviewOpen = true">
                        <x-heroicon-o-clipboard-document-list class="h-4 w-4" />
                        Review
                    </x-buttons.primary>

                    <div class="flex min-w-0 flex-col items-center" x-cloak>
                        <span
                            x-show="showTimer"
                            class="font-mono text-sm font-bold leading-none text-foreground"
                            x-text="formattedTime">
                        </span>

                        <button
                            x-show="showTimer"
                            type="button"
                            class="mt-1 inline-flex items-center gap-1 rounded-full bg-brand px-2 py-0.5 text-[11px] font-semibold text-brand-foreground"
                            @click="showTimer = false">
                            <x-heroicon-o-eye-slash class="h-3 w-3" />
                            Hide
                        </button>

                        <button
                            x-show="!showTimer"
                            type="button"
                            class="inline-flex items-center gap-1 rounded-full border border-border bg-card px-2 py-1 text-xs font-semibold text-card-foreground shadow-sm"
                            @click="showTimer = true">
                            <x-heroicon-o-eye class="h-3.5 w-3.5" />
                            Timer
                        </button>
                    </div>

                    <div class="flex items-center gap-1">


                        <x-utility.tooltip text="Full screen" position="bottom">
                            <x-buttons.icon variant="ghost" title="Full screen" @click="toggleFullscreen">
                                <x-heroicon-o-arrows-pointing-out class="h-5 w-5" />
                            </x-buttons.icon>
                        </x-utility.tooltip>
                        <x-utility.tooltip text="Exit simulator" position="bottom">
                            <x-buttons.icon variant="ghost" title="Exit simulator" @click="finish">
                                <x-heroicon-o-arrow-right-on-rectangle class="h-5 w-5" />
                            </x-buttons.icon>
                        </x-utility.tooltip>
                    </div>
                </div>
            </header>

            <template x-if="loadError || total === 0">
                <div class="mx-auto max-w-3xl px-4 py-12">
                    <div class="rounded-2xl border border-border bg-card px-6 py-10 text-center shadow-sm">
                        <x-heroicon-o-exclamation-circle class="mx-auto h-10 w-10 text-muted-foreground" />
                        <h1 class="mt-3 text-lg font-bold text-foreground">No preview questions available</h1>
                        <p class="mt-1 text-sm text-muted-foreground" x-text="loadError || 'Add questions before opening the preview simulator.'"></p>
                    </div>
                </div>
            </template>

            <template x-if="!loadError && total > 0">
                <div class="mx-auto max-w-6xl px-4 py-5">
                    <div class="mb-4 flex flex-wrap items-center justify-between gap-3">
                        <div class="text-sm font-semibold text-muted-foreground">
                            Marks: <span class="text-foreground" x-text="totalMarks"></span>
                            <span class="mx-2 text-border">
                        </div>
                    </div>

                    <div
                        class="grid items-start gap-8"
                        :class="current?.scenarioHtml ? 'lg:grid-cols-[minmax(0,1fr)_minmax(380px,460px)]' : 'lg:grid-cols-1'">
                        <aside
                            class="rounded-xl border border-border bg-card p-5 text-sm font-medium leading-7 text-foreground shadow-sm"
                            x-show="current?.scenarioHtml"
                            x-cloak>
                            <div
                                class="simulator-question-text prose max-w-none dark:prose-invert"
                                :class="{ 'max-h-96 overflow-hidden': hasLongScenario() && !currentState?.scenarioExpanded }"
                                x-html="current?.scenarioHtml">
                            </div>
                            <button
                                type="button"
                                class="mt-3 text-sm font-semibold text-brand hover:text-brand/80"
                                x-show="hasLongScenario()"
                                x-cloak
                                @click="toggleScenarioExpanded"
                                x-text="currentState?.scenarioExpanded ? 'Read less' : 'Read more'"></button>
                        </aside>

                        <section class="min-w-0 space-y-5">
                            <article class="rounded-xl border border-border bg-card p-4 shadow-sm">
                                <div class="mb-4 flex items-start justify-between gap-3">
                                    <div class="min-w-0 flex-1">
                                        <div class="flex flex-wrap items-center gap-3">
                                            <h1 class="text-base font-bold text-foreground">
                                                Question: <span x-text="current?.number"></span> of <span x-text="total"></span>
                                            </h1>
                                            <div class="h-2 w-44 overflow-hidden rounded-full bg-muted">
                                                <div class="h-full rounded-full bg-brand transition-all" :style="`width: ${progress}%`"></div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="flex items-center gap-1">
                                        <x-utility.tooltip text="Clear highlight" position="top">
                                            <x-buttons.icon variant="ghost" size="sm" title="Clear highlight" x-bind:disabled="!canErase" @click="eraseHighlights">
                                                <x-heroicon-o-backspace class="h-5 w-5" />
                                            </x-buttons.icon>
                                        </x-utility.tooltip>
                                        <x-utility.tooltip text="Add note" position="top">
                                            <x-buttons.icon
                                                variant="ghost"
                                                size="sm"
                                                title="Add note"
                                                @click="openNoteModal"
                                                x-bind:class="hasNote() ? 'text-brand bg-brand/80' : ''">
                                                <x-heroicon-o-document-plus class="h-5 w-5" />
                                            </x-buttons.icon>
                                        </x-utility.tooltip>
                                        <x-utility.tooltip text="Flag to revisit" position="top">
                                            <x-buttons.icon variant="secondary" size="sm" title="Flag to revisit" @click="toggleFlag">
                                                <x-heroicon-o-flag class="h-5 w-5" x-bind:class="{ 'fill-brand text-brand': currentState?.flagged }" />
                                            </x-buttons.icon>
                                        </x-utility.tooltip>
                                    </div>
                                </div>

                                <div
                                    class="simulator-question-text prose max-w-none text-base font-medium leading-7 text-foreground dark:prose-invert"
                                    :class="{ 'max-h-44 overflow-hidden': hasLongQuestion() && !currentState?.questionExpanded }"
                                    data-question-content
                                    x-html="currentState?.highlightedHtml || current?.questionHtml"></div>
                                <button
                                    type="button"
                                    class="mt-3 text-sm font-semibold text-brand hover:text-brand/80"
                                    x-show="hasLongQuestion()"
                                    x-cloak
                                    @click="toggleQuestionExpanded"
                                    x-text="currentState?.questionExpanded ? 'Read less' : 'Read more'"></button>
                            </article>

                            <section>
                                <h2 class="mb-3 text-sm font-bold text-foreground" x-show="(current?.options || []).length > 0">
                                    <span x-text="isMultiChoice() ? 'Select all correct answers' : 'Select the correct answer'"></span>
                                </h2>

                                <div class="space-y-3" x-show="(current?.options || []).length > 0">
                                    <template x-for="option in current?.options || []" :key="option.key">
                                        <button
                                            type="button"
                                            class="group flex min-h-14 w-full items-start gap-3 rounded-xl border bg-card px-4 py-3 text-left text-sm font-medium leading-6 shadow-sm transition"
                                            :class="isSelected(option.key)
                                                ? 'border-brand bg-brand/10 text-foreground ring-2 ring-brand/20'
                                                : 'border-border text-foreground hover:border-brand/50 hover:bg-muted/60'"
                                            @click="selectOption(option.key)">
                                            <span
                                                class="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center border text-sm font-bold transition"
                                                :class="[
                                                    isMultiChoice() ? 'rounded-md' : 'rounded-full',
                                                    isSelected(option.key) ? 'border-brand bg-brand text-brand-foreground' : 'border-border bg-background text-muted-foreground group-hover:border-brand'
                                                ]"
                                                x-text="option.key"></span>
                                            <span class="min-w-0 flex-1" x-html="option.html"></span>
                                        </button>
                                    </template>
                                </div>

                                <div class="rounded-xl border border-border bg-card p-4 shadow-sm" x-show="current?.mode === 'fill_blank'">
                                    <x-forms.textarea
                                        name="fill_answer"
                                        rows="4"
                                        placeholder="Type your answer"
                                        x-bind:value="currentState?.fillAnswer || ''"
                                        @input="updateFillAnswer($event.target.value)" />
                                    <div class="mt-4 rounded-lg border border-border bg-muted/40 px-3 py-2 text-sm">
                                        <span class="font-semibold text-muted-foreground">Your answer is:</span>
                                        <span class="font-semibold text-foreground" x-text="currentState?.fillAnswer || '--'"></span>
                                    </div>
                                </div>

                                <div class="rounded-xl border border-border bg-card p-4 text-sm text-muted-foreground shadow-sm" x-show="current?.mode === 'text'">
                                    No answer input is configured for this question type.
                                </div>
                            </section>
                        </section>
                    </div>
                </div>
            </template>

            <div class="fixed inset-x-0 bottom-0 z-20 border-t border-border bg-card/95 backdrop-blur">
                <div class="mx-auto flex max-w-6xl items-center justify-between gap-3 px-4 py-4">
                    <x-buttons.secondary type="button" @click="previous" x-bind:disabled="currentIndex === 0 || total === 0">
                        <x-heroicon-o-arrow-left class="h-4 w-4" />
                        Previous
                    </x-buttons.secondary>

                    <x-buttons.primary type="button" @click="nextOrSubmit" x-bind:disabled="total === 0">
                        <span x-text="isLast ? 'Submit' : 'Next'"></span>
                        <x-heroicon-o-arrow-right class="h-4 w-4" x-show="!isLast" />
                        <x-heroicon-o-check class="h-4 w-4" x-show="isLast" x-cloak />
                    </x-buttons.primary>
                </div>
            </div>

            <div class="fixed inset-0 z-40 bg-black/45" x-show="reviewOpen" x-cloak @click="reviewOpen = false"></div>
            <aside
                class="fixed inset-y-0 left-0 z-50 flex w-72 max-w-[85vw] flex-col border-r border-border bg-card shadow-hover transition-transform duration-200"
                x-show="reviewOpen"
                x-cloak
                x-transition:enter-start="-translate-x-full"
                x-transition:enter-end="translate-x-0">
                <div class="flex items-center justify-between border-b border-border px-4 py-4">
                    <h2 class="text-lg font-bold text-foreground">Review Questions</h2>
                    <x-utility.tooltip text="Close review" position="bottom">
                        <x-buttons.icon variant="ghost" size="sm" title="Close review" @click="reviewOpen = false">
                            <x-heroicon-o-x-mark class="h-5 w-5" />
                        </x-buttons.icon>
                    </x-utility.tooltip>
                </div>

                <div class="grid grid-cols-3 gap-3 overflow-y-auto p-4">
                    <template x-for="(question, index) in questions" :key="question.id + '-' + question.number">
                        <button
                            type="button"
                            class="relative h-10 rounded-md border text-sm font-semibold transition"
                            :class="reviewButtonClass(index)"
                            @click="goTo(index); reviewOpen = false">
                            <span x-text="question.number"></span>
                            <span class="absolute -right-1 -top-1 flex h-4 w-4 items-center justify-center rounded-full bg-brand text-brand-foreground" x-show="hasNote(index)" x-cloak>
                                <x-heroicon-o-document-text class="h-3 w-3" />
                            </span>
                        </button>
                    </template>
                </div>

                <div class="m-3 mt-auto space-y-3 rounded-lg border border-border p-3 text-sm font-medium text-foreground">
                    <div class="flex items-center justify-between"><span>Unanswered</span><span class="h-7 w-7 rounded border border-border bg-card"></span></div>
                    <div class="flex items-center justify-between"><span>Active</span><span class="h-7 w-7 rounded border-2 border-brand bg-card"></span></div>
                    <div class="flex items-center justify-between"><span>Answered</span><span class="h-7 w-7 rounded border border-brand bg-brand"></span></div>
                    <div class="flex items-center justify-between"><span>Flagged</span><span class="flex h-7 w-7 items-center justify-center rounded border border-brand text-brand"><x-heroicon-o-flag class="h-4 w-4" /></span></div>
                </div>
            </aside>

            <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 px-4" x-show="noteModalOpen" x-cloak>
                <div class="w-full max-w-lg rounded-xl border border-border bg-card p-5 shadow-hover" @click.outside="closeNoteModal">
                    <div class="mb-4 flex items-center justify-between gap-3">
                        <h2 class="text-lg font-bold text-foreground">Question Note</h2>
                        <x-utility.tooltip text="Close note" position="left">
                            <x-buttons.icon variant="ghost" size="sm" title="Close note" @click="closeNoteModal">
                                <x-heroicon-o-x-mark class="h-5 w-5" />
                            </x-buttons.icon>
                        </x-utility.tooltip>
                    </div>
                    <x-forms.textarea
                        name="question_note"
                        rows="5"
                        placeholder="Write your note"
                        x-model="noteDraft" />
                    <div class="mt-5 flex justify-end gap-2">
                        <x-buttons.secondary type="button" @click="closeNoteModal">Cancel</x-buttons.secondary>
                        <x-buttons.primary type="button" @click="saveNote">Save Note</x-buttons.primary>
                    </div>
                </div>
            </div>
        </section>
    </template>
</section>
@endsection

@push('before-app-js')
@vite(['resources/js/admin/question-preview-simulator.js'])
@endpush