<div class="witness-builder">
    @if($designMode)
        <x-witness.demo-banner concept="Concept 2 — Guided step-by-step builder" :state="$demoState" />
    @endif

    @if($demoState === 'loading')
        <x-witness.loading-skeleton :columns="1" />
    @elseif(! $hasStatement || $demoState === 'empty')
        <x-witness.empty-state />
    @else
        @php $totalSteps = count($stepGroups) + 1; @endphp

        <div class="row justify-content-center">
            <div class="col-12 col-lg-9 col-xl-8">

                {{-- Stepper --}}
                <div class="card border-0 shadow-sm mb-3">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span class="fw-semibold">Step {{ $step + 1 }} of {{ $totalSteps }}</span>
                            <span class="text-muted small">{{ $progress->overallPercent() }}% complete</span>
                        </div>
                        <div class="progress mb-3" style="height: .4rem;" role="progressbar"
                             aria-valuenow="{{ (int) round((($step + 1) / $totalSteps) * 100) }}" aria-valuemin="0" aria-valuemax="100">
                            <div class="progress-bar bg-primary" style="width: {{ (int) round((($step + 1) / $totalSteps) * 100) }}%"></div>
                        </div>
                        <div class="d-flex flex-wrap gap-1">
                            @foreach($stepGroups as $i => $group)
                                @php $gp = $progress->groups[$group] ?? ['percent' => 0]; @endphp
                                <button type="button"
                                        class="btn btn-sm {{ $i === $step ? 'btn-primary' : 'btn-outline-secondary' }}"
                                        wire:click="goToStep({{ $i }})">
                                    {{ $group }}
                                    <span class="badge {{ $gp['percent'] === 100 ? 'bg-success' : 'bg-light text-dark' }} ms-1">{{ $gp['percent'] }}%</span>
                                </button>
                            @endforeach
                            <button type="button" class="btn btn-sm {{ $isReviewStep ? 'btn-primary' : 'btn-outline-success' }}"
                                    wire:click="goToStep({{ count($stepGroups) }})">
                                <span class="mdi mdi-flag-checkered" aria-hidden="true"></span> Review & generate
                            </button>
                        </div>
                    </div>
                </div>

                @if(! $isReviewStep && $currentGroup)
                    {{-- Sections within the current group --}}
                    @foreach($questionnaire->sectionsForGroup($currentGroup) as $section)
                        <x-witness.questionnaire-section
                            :section="$section"
                            :answers="$answers"
                            :answer-meta="$answerMeta"
                            :section-progress="$progress->sections[$section->key] ?? null"
                            :editing-answer-id="$editingAnswerId"
                            :editing-value="$editingValue" />
                    @endforeach
                @else
                    {{-- Review step --}}
                    <div class="card border-0 shadow-sm mb-3">
                        <div class="card-body">
                            <h5 class="card-title">Review &amp; generate</h5>
                            <p class="text-muted small">Check the summary below before converting to a witness statement.</p>

                            <x-witness.statement-progress :progress="$progress" class="mb-3" />

                            @if($progress->requiredUnanswered)
                                <x-witness.missing-info-warning
                                    title="Required questions still unanswered"
                                    :items="$progress->requiredUnanswered"
                                    variant="danger" icon="asterisk" class="mb-3" />
                            @endif

                            @if($progress->awaitingReview)
                                <div class="alert alert-warning py-2 px-3 small mb-3">
                                    <span class="mdi mdi-lightbulb-on-outline" aria-hidden="true"></span>
                                    {{ $progress->awaitingReview }} suggested answer(s) still awaiting review across the questionnaire.
                                </div>
                            @endif

                            @if($progress->conflicts)
                                <x-witness.missing-info-warning
                                    title="Conflicting answers"
                                    :items="$progress->conflicts"
                                    variant="danger" icon="alert-octagon-outline" class="mb-3" />
                            @endif

                            <hr>
                            <x-witness.generation-options :options-config="$optionsConfig" :selected="$options" :statement="$statement" class="mb-3" />

                            <button type="button" class="btn btn-primary" wire:click="generate" @disabled(! $progress->isReadyToGenerate())>
                                <span class="mdi mdi-file-document-check-outline" aria-hidden="true"></span> Generate statement
                            </button>

                            <div class="mt-3">
                                <x-witness.activity-history :versions="$versions" />
                            </div>

                            <hr>
                            <h6 class="fw-semibold"><span class="mdi mdi-note-text-outline" aria-hidden="true"></span> Notes</h6>
                            <livewire:note-manager :owner="$statement" :wire:key="'witness-notes-builder-'.$statement->id" />
                        </div>
                    </div>
                @endif

                {{-- Nav --}}
                <div class="d-flex justify-content-between">
                    <button type="button" class="btn btn-outline-secondary" wire:click="previousStep" @disabled($step === 0)>
                        <span class="mdi mdi-arrow-left" aria-hidden="true"></span> Back
                    </button>
                    @unless($isReviewStep)
                        <button type="button" class="btn btn-primary" wire:click="nextStep">
                            Next <span class="mdi mdi-arrow-right" aria-hidden="true"></span>
                        </button>
                    @endunless
                </div>
            </div>
        </div>
    @endif
</div>
