@php
    $q = $this->currentQuestion();
    $progressPercent = $totalSteps > 0 ? (int) round(($currentStep / $totalSteps) * 100) : 0;
@endphp

<div data-testid="task-runner-modal">

    <header class="flex items-center justify-between gap-4 p-5 border-b border-line">
        <div class="flex items-center gap-3 min-w-0">
            <div class="w-10 h-10 rounded-lg bg-primary-soft text-primary-ink grid place-items-center font-bold text-lg shrink-0">
                {{ $task['icon'] ?? '∑' }}
            </div>
            <div class="min-w-0">
                <div class="text-[10px] uppercase tracking-[0.12em] text-ink-3 font-semibold">{{ $task['meta'] ?? '' }}</div>
                <div class="font-bold text-base text-ink-1 truncate">{{ $task['title'] ?? 'Aufgabe' }}</div>
            </div>
        </div>
        <button type="button" wire:click="closeModal" aria-label="Schließen" class="text-ink-3 hover:text-ink-1 transition-colors p-1 shrink-0">
            <x-heroicon-o-x-mark class="w-5 h-5" />
        </button>
    </header>

    @if(! $finished)
        {{-- Progress bar --}}
        <div class="px-5 pt-4">
            <div class="flex justify-between items-baseline mb-2">
                <span class="text-xs font-semibold text-ink-2 font-mono tabular-nums">Frage {{ $currentStep }} / {{ $totalSteps }}</span>
                <span class="text-xs font-semibold text-amber-ink font-mono tabular-nums">+{{ (int) ($task['points'] ?? 0) }} Pkt.</span>
            </div>
            <div class="h-1.5 rounded-full bg-bg-base overflow-hidden">
                <div class="h-full rounded-full bg-primary-ink transition-all duration-500" style="width:{{ $progressPercent }}%;"></div>
            </div>
        </div>

        {{-- Question --}}
        <div class="p-5">
            <div class="text-[11px] uppercase tracking-[0.12em] text-ink-3 font-semibold mb-2">Aufgabe</div>
            <div class="text-xl font-bold tracking-tight text-ink-1 mb-5" data-testid="runner-question">
                {{ $q['question'] }}
            </div>

            <div class="grid grid-cols-2 gap-3" wire:key="step-{{ $currentStep }}">
                @foreach($q['options'] as $i => $opt)
                    <button
                        type="button"
                        wire:click="submitAnswer({{ $i }})"
                        wire:loading.attr="disabled"
                        wire:target="submitAnswer"
                        class="px-4 py-4 rounded-lg bg-bg-soft border-2 border-line text-ink-1 font-semibold text-base hover:border-primary hover:bg-primary-soft transition-all cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"
                        data-testid="runner-option-{{ $i }}"
                    >
                        {{ $opt }}
                    </button>
                @endforeach
            </div>
        </div>

        <footer class="px-5 pb-5 pt-2 flex justify-between items-center text-xs text-ink-3">
            <span>Klick eine Antwort an, um fortzufahren.</span>
            <button type="button" wire:click="closeModal" class="hover:text-ink-1 underline">Abbrechen</button>
        </footer>
    @else
        {{-- Finished state --}}
        @php
            $passed = $correctAnswers >= (int) ceil($totalSteps / 2);
            $percent = $totalSteps > 0 ? (int) round(($correctAnswers / $totalSteps) * 100) : 0;
        @endphp
        <div class="p-8 text-center" data-testid="runner-finished">
            <div class="w-16 h-16 rounded-full grid place-items-center mx-auto mb-4 {{ $passed ? 'bg-green-soft text-green-ink' : 'bg-amber-soft text-amber-ink' }}">
                @if($passed)
                    <x-heroicon-s-trophy class="w-8 h-8" />
                @else
                    <x-heroicon-s-arrow-path class="w-8 h-8" />
                @endif
            </div>

            <div class="text-xl font-bold text-ink-1 mb-1">
                @if($passed) Super gemacht! @else Fast geschafft @endif
            </div>
            <p class="text-sm text-ink-2 mb-2">
                Du hast <span class="font-mono tabular-nums font-bold text-ink-1">{{ $correctAnswers }}</span>
                von <span class="font-mono tabular-nums font-bold text-ink-1">{{ $totalSteps }}</span> Aufgaben richtig.
            </p>
            <p class="text-xs text-ink-3 mb-6 font-mono tabular-nums">{{ $percent }} % Erfolgsquote</p>

            <div class="flex gap-2">
                <x-btn wire:click="restart" class="flex-1 justify-center">
                    <x-heroicon-o-arrow-path class="w-4 h-4" />
                    Nochmal
                </x-btn>
                <x-btn variant="primary" wire:click="closeModal" class="flex-1 justify-center">
                    @if($passed) Punkte holen @else Fertig @endif
                </x-btn>
            </div>
        </div>
    @endif

</div>