<div class="witness-workspace">
    @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>
            @if($hasStatement)
                <p class="small mt-2">(Empty state preview)</p>
            @endif
        </x-witness.empty-state>
    @else
        @php $forceMissing = $demoState === 'missing'; @endphp

        @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="row g-3">
            {{-- LEFT — Exhibits (relevant documents pulled through from Evidence Review) --}}
            <div class="col-12 col-lg-3">
                <div class="card border-0 shadow-sm sticky-lg-top" style="top: 1rem;">
                    <div class="card-body">
                        <x-witness.exhibits-panel
                            :evidence="$evidence"
                            :exhibits="$exhibits"
                            :client="$statement->client" />

                        @if($forceMissing || $progress->missingEvidenceSections)
                            <hr>
                            <x-witness.missing-info-warning
                                title="Sections missing supporting evidence"
                                :items="$progress->missingEvidenceSections"
                                variant="warning" icon="shield-alert-outline" />
                        @endif
                    </div>
                </div>
            </div>

            {{-- CENTRE — Witness Questionnaire (numbered accordion sections) --}}
            <div class="col-12 col-lg-6">
                <div class="mb-3">
                    <h4 class="mb-1">Witness Questionnaire</h4>
                    <p class="text-muted small mb-0">
                        Complete all relevant questions below. Once complete, use “Convert to Statement” to
                        generate the witness statement.
                    </p>
                </div>

                @if($progress->awaitingReview > 0)
                    <div class="alert alert-warning d-flex align-items-start gap-2">
                        <span class="mdi mdi-lightbulb-on-outline fs-5" aria-hidden="true"></span>
                        <div class="small">
                            <strong>{{ $progress->awaitingReview }} answer(s) suggested from your evidence.</strong>
                            They're drafted from confirmed Evidence Review findings and marked
                            <span class="badge bg-warning-subtle text-warning-emphasis"><span class="mdi mdi-lightbulb-on-outline" aria-hidden="true"></span> suggested</span>
                            in the sections below. Open a flagged section to <strong>Accept</strong>, <strong>Edit</strong> or <strong>Reject</strong> each — nothing is added to the statement until you accept it.
                        </div>
                    </div>
                @endif

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

            {{-- RIGHT — Convert to Statement --}}
            <div class="col-12 col-lg-3">
                <div class="card border-0 shadow-sm sticky-lg-top" style="top: 1rem;">
                    <div class="card-body">
                        <h5 class="mb-1">
                            <span class="mdi mdi-file-document-check-outline" aria-hidden="true"></span>
                            Convert to Statement
                        </h5>
                        <p class="text-muted small">
                            Once all questions are completed, convert your answers into a fully formatted Witness Statement.
                        </p>

                        <button type="button" class="btn btn-primary w-100 mb-3"
                                wire:click="generate"
                                @disabled(! $progress->isReadyToGenerate())>
                            Convert to Statement
                        </button>

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

                        <hr>

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

                        <div class="alert alert-light border small mb-0">
                            <span class="mdi mdi-information-outline" aria-hidden="true"></span>
                            You will be able to review and edit the statement after it is generated.
                        </div>

                        <hr>
                        <x-witness.activity-history :versions="$versions" />
                    </div>
                </div>
            </div>
        </div>

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