@props([
    'statement',
    'activeSection',
    'evidenceTab' => 'section',
    'evidenceSearch' => '',
    'contextualEvidence',
    'exhibits',
    'exhibitByItem',
])

<div class="card border-0 shadow-sm">
    <div class="card-header bg-body border-bottom-0 pb-0">
        <div class="d-flex align-items-center justify-content-between">
            <h2 class="h6 mb-0"><span class="mdi mdi-folder-search-outline" aria-hidden="true"></span> Evidence &amp; exhibits</h2>
            <a href="{{ route('clients.evidence', $statement->client) }}" class="small text-decoration-none" target="_blank" rel="noopener">
                Evidence Review <span class="mdi mdi-open-in-new" aria-hidden="true"></span>
            </a>
        </div>

        <ul class="nav nav-pills nav-fill gap-1 mt-2 small">
            <li class="nav-item">
                <button type="button" class="nav-link py-1 {{ $evidenceTab === 'section' ? 'active' : '' }}" wire:click="setEvidenceTab('section')">
                    This section
                </button>
            </li>
            <li class="nav-item">
                <button type="button" class="nav-link py-1 {{ $evidenceTab === 'all' ? 'active' : '' }}" wire:click="setEvidenceTab('all')">
                    All evidence
                </button>
            </li>
            <li class="nav-item">
                <button type="button" class="nav-link py-1 {{ $evidenceTab === 'exhibits' ? 'active' : '' }}" wire:click="setEvidenceTab('exhibits')">
                    Exhibits @if($exhibits->isNotEmpty())<span class="badge bg-secondary">{{ $exhibits->count() }}</span>@endif
                </button>
            </li>
        </ul>
    </div>

    <div class="card-body">
        @if($evidenceTab === 'exhibits')
            <x-witness.ws-exhibits :exhibits="$exhibits" />

        @else
            @if($evidenceTab === 'all')
                <div class="mb-2">
                    <input type="search" class="form-control form-control-sm" placeholder="Search evidence…"
                           wire:model.live.debounce.300ms="evidenceSearch" aria-label="Search evidence">
                </div>
            @else
                <p class="text-muted small mb-2">
                    Confirmed findings relevant to <strong>{{ $activeSection?->title ?? 'this section' }}</strong>.
                </p>
            @endif

            @forelse($contextualEvidence as $item)
                <x-witness.ws-evidence-card :item="$item" :exhibit="$exhibitByItem->get($item->id)" />
            @empty
                <div class="text-center text-muted small py-4">
                    <span class="mdi mdi-file-search-outline d-block" style="font-size:1.75rem;" aria-hidden="true"></span>
                    @if($evidenceTab === 'all' && $evidenceSearch !== '')
                        No evidence matches “{{ $evidenceSearch }}”.
                    @elseif($evidenceTab === 'all')
                        No confirmed evidence yet.
                    @else
                        No confirmed evidence tagged to this section.
                    @endif
                </div>
            @endforelse
        @endif
    </div>
</div>