@props([
    'question',
    'number',
    'sectionKey',
    'value' => null,
    'meta' => null,
    'prompts',
    'citations',
    'exhibitByItem',
    'validationRequested' => false,
    'touched' => [],
])
@php
    $model = "answers.$sectionKey.{$question->key}";
    $fieldId = "wq-$sectionKey-{$question->key}";
    $key = "$sectionKey.{$question->key}";
    $isRequiredMissing = $question->required && ! $question->isAnswered($value);
    $showError = $isRequiredMissing && ($validationRequested || in_array($key, $touched, true));
    $describedBy = collect([$question->help ? "$fieldId-help" : null, $showError ? "$fieldId-error" : null])->filter()->implode(' ');
    $openPrompts = $prompts->filter(fn ($p) => $p->isOpen() || $p->isDeferred());
    $handledPrompts = $prompts->filter(fn ($p) => $p->isResolved() || $p->isIrrelevant());
@endphp

<div class="witness-question mb-4" id="wq-anchor-{{ $sectionKey }}-{{ $question->key }}" tabindex="-1"
     wire:key="q-{{ $sectionKey }}-{{ $question->key }}">

    <label for="{{ $fieldId }}" class="form-label fw-semibold mb-1 d-flex align-items-baseline gap-2">
        <span class="text-muted small" style="min-width:1.4rem;">{{ $number }}.</span>
        <span>
            {{ $question->label }}
            @if($question->required)
                <span class="text-danger" title="Required before generation" aria-hidden="true">*</span>
                <span class="visually-hidden">(required)</span>
            @endif
        </span>
    </label>

    @if($question->why)
        <div class="form-text mt-0 mb-2 ms-4"><span class="mdi mdi-information-outline" aria-hidden="true"></span> {{ $question->why }}</div>
    @endif
    @if($question->help)
        <div id="{{ $fieldId }}-help" class="form-text mt-0 mb-2 ms-4">{{ $question->help }}</div>
    @endif

    <div class="witness-answer ms-4">
        @switch($question->type)
            @case('long_text')
                <textarea id="{{ $fieldId }}" rows="4"
                          class="form-control @if($showError) is-invalid @endif"
                          wire:model="{{ $model }}"
                          wire:change="saveAnswer('{{ $sectionKey }}', '{{ $question->key }}')"
                          placeholder="The client's answer, in their own words…"
                          @if($describedBy) aria-describedby="{{ $describedBy }}" @endif
                          @if($showError) aria-invalid="true" @endif></textarea>
                @break

            @case('date')
                <input type="date" id="{{ $fieldId }}" style="max-width: 16rem;"
                       class="form-control @if($showError) is-invalid @endif"
                       wire:model="{{ $model }}"
                       wire:change="saveAnswer('{{ $sectionKey }}', '{{ $question->key }}')"
                       @if($showError) aria-invalid="true" aria-describedby="{{ $describedBy }}" @endif>
                @break

            @case('select')
                <select id="{{ $fieldId }}" style="max-width: 24rem;"
                        class="form-select @if($showError) is-invalid @endif"
                        wire:model="{{ $model }}"
                        wire:change="saveAnswer('{{ $sectionKey }}', '{{ $question->key }}')"
                        @if($showError) aria-invalid="true" aria-describedby="{{ $describedBy }}" @endif>
                    <option value="">— Select —</option>
                    @foreach($question->options as $opt)
                        <option value="{{ $opt }}">{{ $opt }}</option>
                    @endforeach
                </select>
                @break

            @case('boolean')
            @case('declaration')
                <div class="btn-group" role="group" aria-label="{{ $question->label }}">
                    <button type="button" class="btn btn-sm {{ $value === true ? 'btn-success' : 'btn-outline-success' }}"
                            aria-pressed="{{ $value === true ? 'true' : 'false' }}"
                            wire:click="saveBoolean('{{ $sectionKey }}', '{{ $question->key }}', true)">
                        <span class="mdi mdi-check" aria-hidden="true"></span> Yes
                    </button>
                    <button type="button" class="btn btn-sm {{ $value === false ? 'btn-danger' : 'btn-outline-danger' }}"
                            aria-pressed="{{ $value === false ? 'true' : 'false' }}"
                            wire:click="saveBoolean('{{ $sectionKey }}', '{{ $question->key }}', false)">
                        <span class="mdi mdi-close" aria-hidden="true"></span> No
                    </button>
                </div>
                @break

            @case('multiselect')
                <div role="group" aria-label="{{ $question->label }}"
                     class="d-flex flex-wrap gap-2 @if($showError) border border-danger rounded p-2 @endif">
                    @foreach($question->options as $opt)
                        <input type="checkbox" class="btn-check" id="{{ $fieldId }}-{{ $loop->index }}"
                               value="{{ $opt }}" wire:model="{{ $model }}"
                               wire:change="saveAnswer('{{ $sectionKey }}', '{{ $question->key }}')">
                        <label class="btn btn-sm btn-outline-primary rounded-pill" for="{{ $fieldId }}-{{ $loop->index }}">{{ $opt }}</label>
                    @endforeach
                </div>
                @break

            @case('repeater')
                @php $rows = is_array($value) ? $value : []; @endphp
                <div class="witness-repeater border rounded p-2">
                    @forelse($rows as $rowIndex => $row)
                        <div class="row g-2 align-items-end mb-2 pb-2 border-bottom" wire:key="rep-{{ $sectionKey }}-{{ $question->key }}-{{ $rowIndex }}">
                            @foreach($question->fields as $sub)
                                <div class="col-md">
                                    <label class="form-label small text-muted mb-0" for="{{ $fieldId }}-{{ $rowIndex }}-{{ $sub->key }}">{{ $sub->label }}</label>
                                    <input type="text" id="{{ $fieldId }}-{{ $rowIndex }}-{{ $sub->key }}" class="form-control form-control-sm"
                                           wire:model="answers.{{ $sectionKey }}.{{ $question->key }}.{{ $rowIndex }}.{{ $sub->key }}"
                                           wire:change="saveAnswer('{{ $sectionKey }}', '{{ $question->key }}')">
                                </div>
                            @endforeach
                            <div class="col-md-auto">
                                <button type="button" class="btn btn-sm btn-outline-danger"
                                        wire:click="removeRepeaterRow('{{ $sectionKey }}', '{{ $question->key }}', {{ $rowIndex }})"
                                        aria-label="Remove row {{ $rowIndex + 1 }}">
                                    <span class="mdi mdi-delete-outline" aria-hidden="true"></span>
                                </button>
                            </div>
                        </div>
                    @empty
                        <p class="text-muted small mb-2">No entries yet.</p>
                    @endforelse
                    <button type="button" class="btn btn-sm btn-outline-primary" wire:click="addRepeaterRow('{{ $sectionKey }}', '{{ $question->key }}')">
                        <span class="mdi mdi-plus" aria-hidden="true"></span> Add entry
                    </button>
                </div>
                @break

            @default
                <input type="text" id="{{ $fieldId }}"
                       class="form-control @if($showError) is-invalid @endif"
                       wire:model="{{ $model }}"
                       wire:change="saveAnswer('{{ $sectionKey }}', '{{ $question->key }}')"
                       @if($describedBy) aria-describedby="{{ $describedBy }}" @endif
                       @if($showError) aria-invalid="true" @endif>
        @endswitch

        @if($showError)
            <div id="{{ $fieldId }}-error" class="invalid-feedback d-block small">This answer is required before the statement can be generated.</div>
        @endif

        {{-- Cited exhibits (relations — not text in the answer) --}}
        @if($citations->isNotEmpty())
            <div class="d-flex flex-wrap gap-1 mt-2 align-items-center">
                <span class="small text-muted me-1">Exhibits:</span>
                @foreach($citations as $c)
                    <span class="badge rounded-pill bg-primary-subtle text-primary-emphasis d-inline-flex align-items-center gap-1">
                        <span class="mdi mdi-paperclip" aria-hidden="true"></span>{{ $c['exhibit']->exhibit_ref }}
                        <button type="button" class="btn-close btn-close-sm" style="font-size:.5rem;"
                                wire:click="uncite({{ $c['reference_id'] }})" aria-label="Remove citation of {{ $c['exhibit']->exhibit_ref }}"></button>
                    </span>
                @endforeach
            </div>
        @endif

        {{-- Evidence prompts — questions to ask, never answers --}}
        @if($openPrompts->isNotEmpty())
            <div class="mt-2 d-flex flex-column gap-2">
                @foreach($openPrompts as $prompt)
                    <x-witness.ws-prompt :prompt="$prompt" :is-exhibit="$exhibitByItem->has($prompt->evidenceItemId)" />
                @endforeach
            </div>
        @endif

        @if($handledPrompts->isNotEmpty())
            <details class="mt-2">
                <summary class="small text-muted">{{ $handledPrompts->count() }} handled evidence prompt{{ $handledPrompts->count() === 1 ? '' : 's' }}</summary>
                <div class="mt-2 d-flex flex-column gap-2">
                    @foreach($handledPrompts as $prompt)
                        <x-witness.ws-prompt :prompt="$prompt" :is-exhibit="$exhibitByItem->has($prompt->evidenceItemId)" />
                    @endforeach
                </div>
            </details>
        @endif
    </div>
</div>