<div class="witness-split-view">
    @if($designMode)
        <x-witness.demo-banner concept="Concept 3 — Document-first split view" :state="$demoState" />
    @endif

    @if($demoState === 'loading')
        <x-witness.loading-skeleton :columns="2" />
    @elseif(! $hasStatement || $demoState === 'empty')
        <x-witness.empty-state />
    @else
        @php
            $sections = $questionnaire->sections();
            $activeSection = $sections->firstWhere('key', $activeSectionKey) ?? $sections->first();
        @endphp

        <div class="row g-3">
            {{-- LEFT — Source documents & evidence --}}
            <div class="col-12 col-lg-6">
                <div class="sticky-lg-top" style="top: 1rem;">
                    <x-witness.document-preview :document="$focusedDocument" :page="$focusedPage" height="440px" class="mb-3" />

                    <div class="card border-0 shadow-sm">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <h6 class="fw-semibold text-uppercase text-muted small mb-0">Relevant evidence</h6>
                                <a href="{{ route('clients.evidence', $statement->client) }}" class="small" target="_blank" rel="noopener">
                                    Evidence Review <span class="mdi mdi-open-in-new" aria-hidden="true"></span>
                                </a>
                            </div>

                            @if($evidence->isEmpty())
                                <p class="text-muted small mb-0">No confirmed evidence for this claim yet.</p>
                            @else
                                <ul class="list-group list-group-flush">
                                    @foreach($evidence as $item)
                                        <li class="list-group-item px-0" wire:key="ev-{{ $item->id }}">
                                            <x-witness.evidence-source-badge :category="$item->category" :severity="$item->severity"
                                                :page="$item->page" :document="$item->document?->display_name" />
                                            <div class="text-muted my-1" style="font-size: .82rem;">“{{ \Illuminate\Support\Str::limit($item->quote, 120) }}”</div>
                                            <div class="d-flex gap-2">
                                                <button type="button" class="btn btn-sm btn-outline-secondary" wire:click="focusEvidence({{ $item->id }})">
                                                    <span class="mdi mdi-eye-outline" aria-hidden="true"></span> View source
                                                </button>
                                                <button type="button" class="btn btn-sm btn-outline-primary" wire:click="addExhibit({{ $item->id }})">
                                                    <span class="mdi mdi-paperclip-plus" aria-hidden="true"></span> Exhibit
                                                </button>
                                            </div>
                                        </li>
                                    @endforeach
                                </ul>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            {{-- RIGHT — Editable statement --}}
            <div class="col-12 col-lg-6">
                <div class="card border-0 shadow-sm mb-3">
                    <div class="card-body d-flex flex-wrap gap-3 align-items-center justify-content-between">
                        <x-witness.statement-progress :progress="$progress" compact class="flex-grow-1" style="min-width: 12rem;" />
                        <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
                        </button>
                    </div>
                </div>

                <div class="mb-3">
                    <label for="split-section" class="form-label small fw-semibold">Section</label>
                    <select id="split-section" class="form-select" wire:model.live="activeSectionKey">
                        @foreach($sections as $section)
                            <option value="{{ $section->key }}">{{ $section->group }} — {{ $section->title }}</option>
                        @endforeach
                    </select>
                </div>

                <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" />

                <div class="card border-0 shadow-sm mb-3">
                    <div class="card-body">
                        <x-witness.exhibit-list :exhibits="$exhibits" :evidence="$evidence" :show-available="false" />
                    </div>
                </div>

                <div class="card border-0 shadow-sm">
                    <div class="card-body">
                        <h6 class="fw-semibold mb-3"><span class="mdi mdi-note-text-outline" aria-hidden="true"></span> Notes</h6>
                        <livewire:note-manager :owner="$statement" :wire:key="'witness-notes-split-'.$statement->id" />
                    </div>
                </div>
            </div>
        </div>
    @endif
</div>
