@props([
    'question',           // App\Support\Witness\WitnessQuestion
    'sectionKey',
    'value' => null,      // current buffer value
    'meta' => null,       // App\Models\Witness\WitnessStatementAnswer|null
    'showOrigin' => true,
])

@php
    $model = "answers.$sectionKey.{$question->key}";
    $fieldId = "wq-$sectionKey-{$question->key}";
    $isSuggested = $meta && $meta->review_status === 'suggested';
    $isRequiredEmpty = $question->required && ! $question->isAnswered($value) && ! $isSuggested;
    $describedBy = $question->help ? "$fieldId-help" : null;
@endphp

<div class="witness-question mb-3" wire:key="q-{{ $sectionKey }}-{{ $question->key }}">
    <label for="{{ $fieldId }}" class="form-label fw-semibold small mb-1 d-flex align-items-center gap-2 flex-wrap">
        <span>
            {{ $question->label }}
            @if($question->required)<span class="text-danger" aria-hidden="true">*</span><span class="visually-hidden">(required)</span>@endif
        </span>
        @if($showOrigin && $meta && ! $isSuggested)
            <x-witness.review-status :status="$meta->review_status" :origin="$meta->origin" />
        @endif
    </label>

    @if($question->help)
        <div id="{{ $fieldId }}-help" class="form-text mt-0 mb-1">{{ $question->help }}</div>
    @endif

    @switch($question->type)
        @case('long_text')
            <textarea id="{{ $fieldId }}" rows="3"
                      class="form-control @if($isRequiredEmpty) is-invalid @endif"
                      wire:model="{{ $model }}"
                      wire:change="saveAnswer('{{ $sectionKey }}', '{{ $question->key }}')"
                      @if($describedBy) aria-describedby="{{ $describedBy }}" @endif></textarea>
            @break

        @case('date')
            <input type="date" id="{{ $fieldId }}"
                   class="form-control @if($isRequiredEmpty) is-invalid @endif"
                   wire:model="{{ $model }}"
                   wire:change="saveAnswer('{{ $sectionKey }}', '{{ $question->key }}')">
            @break

        @case('select')
            <select id="{{ $fieldId }}" class="form-select @if($isRequiredEmpty) is-invalid @endif"
                    wire:model="{{ $model }}"
                    wire:change="saveAnswer('{{ $sectionKey }}', '{{ $question->key }}')">
                <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' }}"
                        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' }}"
                        wire:click="saveBoolean('{{ $sectionKey }}', '{{ $question->key }}', false)">
                    <span class="mdi mdi-close" aria-hidden="true"></span> No
                </button>
            </div>
            @break

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

        @case('repeater')
            @php $rows = is_array($value) ? $value : []; @endphp
            <div class="witness-repeater border rounded p-2">
                @forelse($rows as $index => $row)
                    <div class="row g-2 align-items-end mb-2 pb-2 border-bottom" wire:key="rep-{{ $sectionKey }}-{{ $question->key }}-{{ $index }}">
                        @foreach($question->fields as $sub)
                            <div class="col-md">
                                <label class="form-label small text-muted mb-0">{{ $sub->label }}</label>
                                <input type="text" class="form-control form-control-sm"
                                       wire:model="answers.{{ $sectionKey }}.{{ $question->key }}.{{ $index }}.{{ $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 }}', {{ $index }})"
                                    aria-label="Remove row">
                                <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($isRequiredEmpty) is-invalid @endif"
                   wire:model="{{ $model }}"
                   wire:change="saveAnswer('{{ $sectionKey }}', '{{ $question->key }}')"
                   @if($describedBy) aria-describedby="{{ $describedBy }}" @endif>
    @endswitch

    @if($isRequiredEmpty)
        <div class="invalid-feedback d-block small">This question is required before the statement can be generated.</div>
    @endif
</div>
