<div class="witness-review-dashboard">
    @if($designMode)
        <x-witness.demo-banner concept="Concept 4 — Review dashboard" :state="$demoState" />
    @endif

    @if($demoState === 'loading')
        <x-witness.loading-skeleton :columns="3" />
    @elseif(! $hasStatement || $demoState === 'empty')
        <x-witness.empty-state />
    @else
        @php
            $sections = $questionnaire->sections();
            $activeSection = $sections->firstWhere('key', $activeSectionKey) ?? $sections->first();
            $tiles = [
                ['key' => 'sections', 'label' => 'Complete', 'value' => $progress->overallPercent().'%', 'variant' => $progress->isReadyToGenerate() ? 'success' : 'primary', 'icon' => 'chart-donut'],
                ['key' => 'required', 'label' => 'Required outstanding', 'value' => count($progress->requiredUnanswered), 'variant' => $progress->requiredUnanswered ? 'danger' : 'success', 'icon' => 'asterisk'],
                ['key' => 'review', 'label' => 'Awaiting review', 'value' => $progress->awaitingReview, 'variant' => $progress->awaitingReview ? 'warning' : 'success', 'icon' => 'lightbulb-on-outline'],
                ['key' => 'conflicts', 'label' => 'Conflicts', 'value' => count($progress->conflicts), 'variant' => $progress->conflicts ? 'danger' : 'success', 'icon' => 'alert-octagon-outline'],
                ['key' => 'missing', 'label' => 'Missing evidence', 'value' => count($progress->missingEvidenceSections), 'variant' => $progress->missingEvidenceSections ? 'warning' : 'success', 'icon' => 'shield-alert-outline'],
            ];
        @endphp

        {{-- KPI tiles (clickable triage) --}}
        <div class="row g-2 mb-3">
            @foreach($tiles as $tile)
                <div class="col-6 col-md">
                    <button type="button" wire:click="setFocus('{{ $tile['key'] }}')"
                            class="card border-0 shadow-sm w-100 h-100 text-start {{ $focus === $tile['key'] ? 'ring border-'.$tile['variant'] : '' }}"
                            style="{{ $focus === $tile['key'] ? 'outline: 2px solid var(--bs-'.$tile['variant'].');' : '' }}">
                        <div class="card-body py-2">
                            <div class="text-muted text-uppercase" style="font-size: .7rem;">{{ $tile['label'] }}</div>
                            <div class="fs-4 fw-bold text-{{ $tile['variant'] }}-emphasis">
                                <span class="mdi mdi-{{ $tile['icon'] }}" aria-hidden="true"></span> {{ $tile['value'] }}
                            </div>
                        </div>
                    </button>
                </div>
            @endforeach
        </div>

        <div class="row g-3">
            {{-- LEFT — triage working panel --}}
            <div class="col-12 col-lg-8">
                <div class="card border-0 shadow-sm">
                    <div class="card-body">
                        @switch($focus)
                            @case('required')
                                <h5 class="card-title">Required questions outstanding</h5>
                                @if(! $progress->requiredUnanswered)
                                    <div class="alert alert-success py-2 px-3 mb-0"><span class="mdi mdi-check" aria-hidden="true"></span> All required questions answered.</div>
                                @else
                                    <ul class="list-group list-group-flush mb-3">
                                        @foreach($progress->requiredUnanswered as $item)
                                            <li class="list-group-item px-0 d-flex justify-content-between align-items-center">
                                                <span class="small">{{ $item['label'] }}</span>
                                                <button type="button" class="btn btn-sm btn-outline-primary" wire:click="setActiveSection('{{ $item['section'] }}')">Open</button>
                                            </li>
                                        @endforeach
                                    </ul>
                                    <x-witness.questionnaire-section :section="$activeSection" :answers="$answers"
                                        :answer-meta="$answerMeta" :section-progress="$progress->sections[$activeSection->key] ?? null"
                                        :editing-answer-id="$editingAnswerId" :editing-value="$editingValue" />
                                @endif
                                @break

                            @case('review')
                                <h5 class="card-title">Suggested answers awaiting review</h5>
                                @if($suggestions->isEmpty())
                                    <div class="alert alert-success py-2 px-3 mb-0"><span class="mdi mdi-check" aria-hidden="true"></span> No suggestions pending review.</div>
                                @else
                                    <div class="d-flex flex-column gap-3">
                                        @foreach($suggestions as $suggestion)
                                            <x-witness.suggested-answer
                                                :answer="$suggestion"
                                                :question="$questionnaire->findQuestion($suggestion->section_key, $suggestion->question_key)"
                                                :editing-answer-id="$editingAnswerId"
                                                :editing-value="$editingValue" />
                                        @endforeach
                                    </div>
                                @endif
                                @break

                            @case('conflicts')
                                <h5 class="card-title">Conflicting answers</h5>
                                @if(! $progress->conflicts)
                                    <div class="alert alert-success py-2 px-3 mb-0"><span class="mdi mdi-check" aria-hidden="true"></span> No conflicts detected.</div>
                                @else
                                    <ul class="list-group list-group-flush">
                                        @foreach($progress->conflicts as $conflict)
                                            <li class="list-group-item px-0 d-flex justify-content-between align-items-center">
                                                <span class="small text-danger-emphasis"><span class="mdi mdi-alert" aria-hidden="true"></span> {{ $conflict['label'] }}</span>
                                                <button type="button" class="btn btn-sm btn-outline-primary" wire:click="setActiveSection('{{ $conflict['section'] }}')">Open</button>
                                            </li>
                                        @endforeach
                                    </ul>
                                @endif
                                @break

                            @case('missing')
                                <h5 class="card-title">Missing supporting evidence</h5>
                                <p class="text-muted small">Evidence-backed sections with no confirmed findings. Add exhibits from Evidence Review.</p>
                                @if(! $progress->missingEvidenceSections)
                                    <div class="alert alert-success py-2 px-3"><span class="mdi mdi-check" aria-hidden="true"></span> Every evidence-backed section has confirmed findings.</div>
                                @else
                                    <x-witness.missing-info-warning title="Sections without evidence" :items="$progress->missingEvidenceSections" variant="warning" icon="shield-alert-outline" class="mb-3" />
                                @endif
                                <x-witness.exhibit-list :exhibits="$exhibits" :evidence="$evidence" />
                                @break

                            @default
                                <h5 class="card-title">Completion by section</h5>
                                <div class="d-flex flex-column gap-2">
                                    @foreach($sections as $section)
                                        @php $sp = $progress->sections[$section->key] ?? ['answered' => 0, 'total' => 0, 'percent' => 0]; @endphp
                                        <div>
                                            <div class="d-flex justify-content-between small">
                                                <span>{{ $section->title }}</span>
                                                <span class="text-muted">{{ $sp['answered'] }}/{{ $sp['total'] }}</span>
                                            </div>
                                            <div class="progress" style="height: .4rem;" role="progressbar" aria-valuenow="{{ $sp['percent'] }}" aria-valuemin="0" aria-valuemax="100">
                                                <div class="progress-bar {{ $sp['percent'] === 100 ? 'bg-success' : 'bg-primary' }}" style="width: {{ $sp['percent'] }}%"></div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                        @endswitch
                    </div>
                </div>
            </div>

            {{-- RIGHT — readiness & generate --}}
            <div class="col-12 col-lg-4">
                <div class="card border-0 shadow-sm sticky-lg-top" style="top: 1rem;">
                    <div class="card-body">
                        <h6 class="fw-semibold text-uppercase text-muted small mb-3">Readiness</h6>
                        <x-witness.statement-progress :progress="$progress" class="mb-3" />
                        <hr>
                        <x-witness.generation-options :options-config="$optionsConfig" :selected="$options" :statement="$statement" class="mb-3" />
                        <button type="button" class="btn btn-primary w-100" wire:click="generate" @disabled(! $progress->isReadyToGenerate())>
                            <span class="mdi mdi-file-document-check-outline" aria-hidden="true"></span> Generate statement
                        </button>
                        <hr>
                        <x-witness.activity-history :versions="$versions" />

                        <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-dash-'.$statement->id" />
                    </div>
                </div>
            </div>
        </div>
    @endif
</div>
