<div class="witness-workspace">
    @once
        <style>
            .witness-grid { display: block; }
            @media (min-width: 1200px) {
                .witness-grid {
                    display: grid;
                    grid-template-columns: 280px minmax(680px, 1fr) 300px;
                    gap: 1.25rem;
                    align-items: start;
                }
            }
            @media (min-width: 1200px) {
                .witness-sticky-rail { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; }
            }
            .witness-context-header { position: sticky; top: 0; z-index: 5; }
            .witness-mobile-bar { position: sticky; bottom: 0; z-index: 6; }
            .witness-main-footer { position: sticky; bottom: 0; z-index: 4; }
        </style>
    @endonce

    @if($designMode)
        <x-witness.demo-banner concept="Concept 1 — Three-column workspace" :state="$demoState" />
    @endif

    @if($demoState === 'loading')
        <x-witness.loading-skeleton :columns="3" />
    @elseif(! $hasStatement || $demoState === 'empty')
        <x-witness.empty-state />
    @else
        @php
            $activeSection = $questionnaire->section($activeSectionKey) ?? $questionnaire->sections()->first();
            $backUrl = route('clients.show', $statement->client);
        @endphp

        <x-witness.context-header :statement="$statement" :progress="$progress" :back-url="$backUrl" />

        @if($demoState === 'completed')
            <div class="alert alert-success d-flex align-items-center gap-2">
                <span class="mdi mdi-check-decagram" aria-hidden="true"></span>
                Witness statement generated. Preview the document and continue to the sending workflow.
            </div>
        @endif

        <div class="witness-grid">
            {{-- LEFT — contextual evidence (drawer below 1200px) --}}
            <aside class="offcanvas-xl offcanvas-start witness-rail" tabindex="-1" id="evidenceDrawer" aria-labelledby="evidenceDrawerLabel">
                <div class="offcanvas-header d-xl-none">
                    <h5 class="offcanvas-title" id="evidenceDrawerLabel">Evidence</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#evidenceDrawer" aria-label="Close"></button>
                </div>
                <div class="offcanvas-body p-xl-0">
                    <div class="witness-sticky-rail">
                        <x-witness.contextual-evidence-panel
                            :statement="$statement"
                            :evidence="$evidence"
                            :contextual-evidence="$contextualEvidence"
                            :exhibits="$exhibits"
                            :progress="$progress"
                            :active-section-title="$activeSection?->title"
                            :show-all-evidence="$showAllEvidence" />
                    </div>
                </div>
            </aside>

            {{-- CENTRE — questionnaire (visually dominant) --}}
            <main>
                <div class="d-flex align-items-center justify-content-between mb-2">
                    <h2 class="h4 mb-0">Witness Questionnaire</h2>
                    <x-witness.save-status :status="$saveStatus" />
                </div>
                <p class="text-muted small">Complete all relevant questions. Suggestions from evidence appear inline for review.</p>

                <x-witness.suggestion-summary :progress="$progress" :guidance-dismissed="$guidanceDismissed" />

                <x-witness.questionnaire-accordion
                    :questionnaire="$questionnaire"
                    :answers="$answers"
                    :answer-meta="$answerMeta"
                    :progress="$progress"
                    :suggestions="$suggestions"
                    :active-section-key="$activeSectionKey"
                    :editing-answer-id="$editingAnswerId"
                    :editing-value="$editingValue"
                    :validation-requested="$validationRequested"
                    :touched="$touched" />

                {{-- Sticky section actions --}}
                <div class="witness-main-footer bg-body border-top py-2 mt-3 d-flex flex-wrap align-items-center gap-2">
                    <button type="button" class="btn btn-outline-primary btn-sm" wire:click="goToNextIncompleteSection">
                        <span class="mdi mdi-arrow-down-bold-outline" aria-hidden="true"></span> Next incomplete section
                    </button>
                    @if($progress->isReadyToGenerate())
                        <button type="button" class="btn btn-success btn-sm ms-auto" wire:click="generate">
                            <span class="mdi mdi-file-document-check-outline" aria-hidden="true"></span> Generate Witness Statement
                        </button>
                    @else
                        <span class="ms-auto small text-muted">
                            {{ $progress->requiredAnswered }} of {{ $progress->requiredTotal }} required answered
                        </span>
                    @endif
                </div>
            </main>

            {{-- RIGHT — statement readiness (drawer below 1200px) --}}
            <aside class="offcanvas-xl offcanvas-end witness-rail" tabindex="-1" id="readinessDrawer" aria-labelledby="readinessDrawerLabel">
                <div class="offcanvas-header d-xl-none">
                    <h5 class="offcanvas-title" id="readinessDrawerLabel">Statement Readiness</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#readinessDrawer" aria-label="Close"></button>
                </div>
                <div class="offcanvas-body p-xl-0">
                    <div class="witness-sticky-rail card border-0 shadow-sm">
                        <div class="card-body">
                            <x-witness.statement-readiness
                                :progress="$progress"
                                :statement="$statement"
                                :options-config="$optionsConfig"
                                :options="$options"
                                :versions="$versions" />
                        </div>
                    </div>
                </div>
            </aside>
        </div>

        {{-- NOTES — internal notes (reuses the app's Note system) --}}
        <div class="row g-3 mt-1">
            <div class="col-12 col-xxl-9">
                <div class="card border-0 shadow-sm">
                    <div class="card-body">
                        <h2 class="h5 mb-3"><span class="mdi mdi-note-text-outline" aria-hidden="true"></span> Notes</h2>
                        <livewire:note-manager :owner="$statement" :wire:key="'witness-notes-'.$statement->id" />
                    </div>
                </div>
            </div>
        </div>

        {{-- Mobile action bar: open drawers + save state (hidden ≥1200px) --}}
        <div class="witness-mobile-bar d-xl-none bg-body border-top py-2 mt-3">
            <div class="d-flex align-items-center gap-2">
                <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-toggle="offcanvas" data-bs-target="#evidenceDrawer" aria-controls="evidenceDrawer">
                    <span class="mdi mdi-folder-search-outline" aria-hidden="true"></span> Evidence
                    @if($evidence->isNotEmpty())<span class="badge bg-secondary">{{ $evidence->count() }}</span>@endif
                </button>
                <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-toggle="offcanvas" data-bs-target="#readinessDrawer" aria-controls="readinessDrawer">
                    <span class="mdi mdi-clipboard-check-outline" aria-hidden="true"></span> Readiness
                    @unless($progress->isReadyToGenerate())<span class="badge bg-warning text-dark">{{ count($progress->blockers()) }}</span>@endunless
                </button>
                <x-witness.save-status :status="$saveStatus" class="ms-auto" />
            </div>
        </div>
    @endif
</div>
