@props([
    'questionnaire',
    'answers' => [],
    'answerMeta' => null,
    'progress' => null,
    'activeSectionKey' => null,
    'editingAnswerId' => null,
    'editingValue' => '',
    'suggestions' => null,   // Collection<WitnessStatementAnswer> still awaiting review
    'validationRequested' => false,
    'touched' => [],
])

@php
    // The accordion is organised by the nine top-level GROUPS (matching the
    // reference screenshot), each expanding to its member sections/questions.
    $groups = $questionnaire->groups();
    $attentionGroups = collect($progress?->requiredUnanswered ?? [])
        ->map(fn ($u) => $questionnaire->section($u['section'])?->group)
        ->filter()->unique()->all();
    // Groups that contain a pending evidence suggestion (for the 💡 badge / auto-open).
    $suggestionGroups = collect($suggestions ?? [])
        ->map(fn ($s) => $questionnaire->section($s->section_key)?->group)
        ->filter()->countBy()->all();

    $activeGroup = $questionnaire->section($activeSectionKey)?->group;
    // Open the active group, else the first group with a suggestion, else the first group.
    $openGroup = $activeGroup ?: (array_key_first($suggestionGroups) ?: ($groups[0] ?? null));
@endphp

<div class="accordion witness-accordion" id="witnessQuestionnaireAccordion">
    @foreach($groups as $i => $group)
        @php
            $gp = $progress?->groups[$group] ?? ['answered' => 0, 'total' => 0, 'percent' => 0];
            $sections = $questionnaire->sectionsForGroup($group);
            $isOpen = $group === $openGroup;
            $flag = in_array($group, $attentionGroups, true);
            $collapseId = 'wq-collapse-'.$i;
        @endphp
        <div class="accordion-item" wire:key="acc-group-{{ $i }}">
            <h2 class="accordion-header">
                <button class="accordion-button {{ $isOpen ? '' : 'collapsed' }} gap-2 flex-wrap" type="button"
                        data-bs-toggle="collapse" data-bs-target="#{{ $collapseId }}"
                        aria-expanded="{{ $isOpen ? 'true' : 'false' }}" aria-controls="{{ $collapseId }}">
                    <span class="fw-semibold">{{ $i + 1 }}. {{ $group }}</span>

                    <span class="d-inline-flex align-items-center gap-2 ms-auto">
                        @if(($suggestionGroups[$group] ?? 0) > 0)
                            <span class="badge rounded-pill bg-warning-subtle text-warning-emphasis" title="Evidence suggestions awaiting review">
                                <span class="mdi mdi-lightbulb-on-outline" aria-hidden="true"></span> {{ $suggestionGroups[$group] }} suggested
                            </span>
                        @endif
                        @if($flag)
                            <span class="badge rounded-pill bg-danger-subtle text-danger-emphasis" title="Required questions outstanding">
                                <span class="mdi mdi-asterisk" aria-hidden="true"></span> Required
                            </span>
                        @endif
                        <span class="badge rounded-pill {{ $gp['percent'] === 100 ? 'bg-success' : 'bg-light text-dark border' }}"
                              title="{{ $gp['answered'] }} of {{ $gp['total'] }} answered">
                            {{ $gp['answered'] }}/{{ $gp['total'] }}
                            <span class="visually-hidden">answered</span>
                        </span>
                    </span>
                </button>
            </h2>
            <div id="{{ $collapseId }}" class="accordion-collapse collapse {{ $isOpen ? 'show' : '' }}"
                 data-bs-parent="#witnessQuestionnaireAccordion">
                <div class="accordion-body">
                    @foreach($sections as $section)
                        {{-- Section sub-heading (a group can hold several sections). --}}
                        <div class="d-flex align-items-center gap-2 mb-2 {{ $loop->first ? '' : 'mt-4' }}">
                            <h6 class="fw-semibold mb-0">{{ $section->title }}</h6>
                            @if($section->sensitive)
                                <span class="badge bg-danger-subtle text-danger-emphasis" title="Sensitive">
                                    <span class="mdi mdi-heart-outline" aria-hidden="true"></span> Sensitive
                                </span>
                            @endif
                            @if($section->acceptsEvidence())
                                <span class="mdi mdi-shield-search text-primary" title="Evidence-backed section" aria-hidden="true"></span>
                            @endif
                        </div>

                        <x-witness.questionnaire-section
                            bare
                            :section="$section"
                            :answers="$answers"
                            :answer-meta="$answerMeta"
                            :editing-answer-id="$editingAnswerId"
                            :editing-value="$editingValue"
                            :validation-requested="$validationRequested"
                            :touched="$touched" />
                    @endforeach
                </div>
            </div>
        </div>
    @endforeach
</div>
