@props([
    'questionnaire',
    'activeSection',
    'answers' => [],
    'answerMeta' => null,
    'progress',
    'promptsByQuestion',
    'citationsByQuestion',
    'exhibitByItem',
    'validationRequested' => false,
    'touched' => [],
])
@php
    $sections = $questionnaire->sections()->values();
    $index = $sections->search(fn ($s) => $s->key === $activeSection?->key);
    $index = $index === false ? 0 : $index;
    $sectionProgress = $activeSection ? ($progress->sections[$activeSection->key] ?? null) : null;
@endphp

<div class="card border-0 shadow-sm">
    <div class="card-body">
        {{-- Section navigation --}}
        <div class="d-flex align-items-center gap-2 mb-3">
            <label for="ws-section-select" class="visually-hidden">Jump to section</label>
            <select id="ws-section-select" class="form-select form-select-sm" wire:model.live="activeSectionKey" style="max-width: 26rem;">
                @foreach($questionnaire->groups() as $group)
                    <optgroup label="{{ $group }}">
                        @foreach($questionnaire->sectionsForGroup($group) as $s)
                            @php $sp = $progress->sections[$s->key] ?? null; @endphp
                            <option value="{{ $s->key }}">
                                {{ $s->title }}@if($sp) — {{ $sp['answered'] }}/{{ $sp['total'] }}@endif
                            </option>
                        @endforeach
                    </optgroup>
                @endforeach
            </select>

            <div class="btn-group btn-group-sm ms-auto" role="group" aria-label="Section navigation">
                <button type="button" class="btn btn-outline-secondary" wire:click="goToPreviousSection" @disabled($index === 0)>
                    <span class="mdi mdi-chevron-left" aria-hidden="true"></span><span class="visually-hidden">Previous section</span>
                </button>
                <button type="button" class="btn btn-outline-secondary" wire:click="goToNextSection" @disabled($index === $sections->count() - 1)>
                    <span class="visually-hidden">Next section</span><span class="mdi mdi-chevron-right" aria-hidden="true"></span>
                </button>
            </div>
        </div>

        @if($activeSection)
            <div class="d-flex align-items-start gap-2 mb-1">
                <h2 class="h5 mb-0">{{ $activeSection->title }}</h2>
                @if($activeSection->sensitive)
                    <x-witness.ws-pill type="warning" icon="shield-alert-outline">Sensitive</x-witness.ws-pill>
                @endif
                @if($sectionProgress)
                    <span class="ms-auto small text-muted">{{ $sectionProgress['answered'] }}/{{ $sectionProgress['total'] }} answered</span>
                @endif
            </div>
            @if($activeSection->description)
                <p class="text-muted small mb-3">{{ $activeSection->description }}</p>
            @endif

            <div class="text-muted small mb-3">
                Record the client's answer in their own words. Evidence appears only as prompts to ask about — it is never entered for them.
            </div>

            @foreach($activeSection->questions as $q)
                <x-witness.ws-question
                    :question="$q"
                    :number="$loop->iteration"
                    :section-key="$activeSection->key"
                    :value="$answers[$activeSection->key][$q->key] ?? null"
                    :meta="$answerMeta?->get($activeSection->key.'.'.$q->key)"
                    :prompts="$promptsByQuestion->get($q->key) ?? collect()"
                    :citations="$citationsByQuestion->get($q->key) ?? collect()"
                    :exhibit-by-item="$exhibitByItem"
                    :validation-requested="$validationRequested"
                    :touched="$touched" />
            @endforeach

            <div class="d-flex justify-content-between mt-4 pt-2 border-top">
                <button type="button" class="btn btn-sm btn-outline-secondary" wire:click="goToPreviousSection" @disabled($index === 0)>
                    <span class="mdi mdi-arrow-left" aria-hidden="true"></span> Previous
                </button>
                <button type="button" class="btn btn-sm btn-outline-primary" wire:click="goToNextSection" @disabled($index === $sections->count() - 1)>
                    Next section <span class="mdi mdi-arrow-right" aria-hidden="true"></span>
                </button>
            </div>
        @endif
    </div>
</div>