@php
    $primaryContact = $institution?->contacts?->firstWhere('is_primary', true)
        ?? $institution?->contacts?->first();
    $showRail = in_array($activeTab, ['overview', 'correspondence']);
    $client   = $dsar->claim->client;

    // Built from the raw columns rather than $client->fullName — reading the
    // accessor caches a joined value that a later toArray() would feed back
    // through the set mutator and corrupt (see ValidateRecipientAction::nameOf).
    $clientName = trim(collect([
        $client->title,
        $client->name_first,
        $client->name_last,
    ])->filter()->implode(' '));
@endphp

<div>
    {{-- ══════════════════════════════════════════════════════════════════════
         Header — who, what state, how late, and every action in one place.
    ══════════════════════════════════════════════════════════════════════ --}}
    <div class="card shadow-sm mb-3">
        <div class="card-body">
            <div class="d-flex flex-wrap align-items-start justify-content-between gap-3">
                <div class="min-w-0">
                    <div class="d-flex align-items-center gap-2 flex-wrap">
                        <h2 class="fw-bold mb-0">
                            <i class="bi bi-shield-lock text-primary me-2"></i>{{ $institution->display_name ?? 'Unknown institution' }}
                        </h2>
                        @if($dsar->is_flagged)
                            <span class="badge bg-danger">
                                <i class="bi bi-flag-fill me-1"></i>Flagged
                            </span>
                        @endif
                    </div>
                    <p class="text-muted mb-0 mt-1">
                        Subject Access Request for
                        <a wire:navigate href="{{ route('clients.show', $client) }}" class="fw-semibold">
                            {{ $clientName ?: 'Client' }}
                        </a>
                        @if($dsar->reference)
                            <span class="font-monospace small ms-2">{{ $dsar->reference }}</span>
                        @endif
                    </p>
                </div>

                <div class="d-flex align-items-center gap-2 flex-wrap">
                    @can('dsars.batch.send')
                        <select class="form-select form-select-sm w-auto"
                                wire:change="updateStatus($event.target.value)">
                            @foreach(\App\Enum\Dsar\DsarStatus::manuallySelectable() as $s)
                                <option value="{{ $s }}" @selected($dsar->status === $s)>{{ \App\Enum\Dsar\DsarStatus::label($s) }}</option>
                            @endforeach
                        </select>
                    @else
                        <span class="badge {{ \App\Enum\Dsar\DsarStatus::badgeFor($dsar->status) }} badge-status">
                            {{ \App\Enum\Dsar\DsarStatus::label($dsar->status) }}
                        </span>
                    @endcan

                    {{-- Secondary actions live behind one menu so the header stays readable. --}}
                    <div class="dropdown">
                        <button class="btn btn-outline-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown">
                            <i class="mdi mdi-dots-vertical"></i>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end">
                            @can('synapse.use')
                                <li>
                                    <button class="dropdown-item"
                                            wire:click="runEvidenceExtraction"
                                            wire:loading.attr="disabled"
                                            wire:confirm="Queue evidence extraction for all response attachments on this DSAR?">
                                        <i class="mdi mdi-brain me-1" style="color:#7c3aed;"></i>Extract evidence
                                    </button>
                                </li>
                            @endcan
                            @can('delete', $dsar)
                                <li><hr class="dropdown-divider"></li>
                                <li>
                                    <button class="dropdown-item text-danger"
                                            wire:click="deleteDsar"
                                            wire:confirm="Permanently delete this DSAR? This cannot be undone.">
                                        <i class="bi bi-trash me-1"></i>Delete DSAR
                                    </button>
                                </li>
                            @endcan
                        </ul>
                    </div>
                </div>
            </div>

            {{-- ── At-a-glance strip: the questions this screen is opened to answer ── --}}
            <div class="d-flex flex-wrap gap-4 mt-3 pt-3 border-top">
                <div>
                    <span class="label-upper d-block">Sent</span>
                    <span class="fw-medium">{{ $dsar->created_at->format('d M Y') }}</span>
                </div>
                <div>
                    <span class="label-upper d-block">Due</span>
                    <span class="fw-medium {{ $summary['isOverdue'] ? 'text-danger fw-bold' : '' }}">
                        {{ $summary['deadline']?->format('d M Y') ?? '—' }}
                        @if($summary['isOverdue'])
                            <span class="badge bg-danger ms-1">Overdue</span>
                        @endif
                    </span>
                </div>
                @if($summary['daysOutstanding'] !== null)
                    <div>
                        <span class="label-upper d-block">Outstanding</span>
                        <span class="fw-medium">{{ $summary['daysOutstanding'] }} days</span>
                    </div>
                @endif
                <div>
                    <span class="label-upper d-block">Last contact</span>
                    <span class="fw-medium">
                        {{ $summary['lastContactAt']?->diffForHumans() ?? 'No contact yet' }}
                    </span>
                </div>
                <div>
                    <span class="label-upper d-block">Chases</span>
                    <span class="fw-medium">{{ $summary['chaseCount'] }}</span>
                </div>
                <div>
                    <span class="label-upper d-block">Responses</span>
                    <span class="fw-medium">{{ $summary['responseCount'] }}</span>
                </div>
            </div>
        </div>
    </div>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible py-2 px-3 small mb-3" role="alert">
            <i class="mdi mdi-check-circle-outline me-1"></i>{{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    {{-- ══════════════════════════════════════════════════════════════════════
         Tabs — Correspondence is the working tab; everything else is reference.
    ══════════════════════════════════════════════════════════════════════ --}}
    <ul class="nav nav-tabs mb-4">
        @foreach([
            'overview'       => ['label' => 'Overview',       'icon' => 'mdi-file-document-outline'],
            'correspondence' => ['label' => 'Correspondence', 'icon' => 'mdi-message-text-outline'],
            'evidence'       => ['label' => 'Evidence',       'icon' => 'mdi-brain'],
            'documents'      => ['label' => 'Documents',      'icon' => 'mdi-paperclip'],
            'history'        => ['label' => 'History',        'icon' => 'mdi-history'],
        ] as $tab => $meta)
            <li class="nav-item">
                <a class="nav-link {{ $activeTab === $tab ? 'active' : '' }}"
                   wire:click.prevent="setTab('{{ $tab }}')" href="#">
                    <i class="mdi {{ $meta['icon'] }} me-1" @if($tab === 'evidence') style="color:#7c3aed;" @endif></i>{{ $meta['label'] }}
                    @if($tab === 'correspondence' && $summary['responseCount'] > 0)
                        <span class="badge bg-secondary-subtle text-secondary ms-1">{{ $summary['responseCount'] }}</span>
                    @endif
                </a>
            </li>
        @endforeach
    </ul>

    <div class="row">
        {{-- ══════════════════════════════════════════════════════════════════
             Left rail — constant context. Same place on every working tab, so
             the caseworker never loses who / where while reading the log.
        ══════════════════════════════════════════════════════════════════ --}}
        @if($showRail)
            <div class="col-lg-3">
                <x-client.client-card :client="$client"/>

                <div class="card shadow-sm mb-3">
                    <div class="card-body">
                        <h6 class="fw-bold mb-3">
                            <i class="mdi mdi-bank text-primary me-1"></i>Institution
                        </h6>

                        <div class="mb-2">
                            <span class="label-upper d-block">Name</span>
                            <span class="fw-medium">{{ $institution->display_name ?? '—' }}</span>
                        </div>

                        @if($institution?->dsarType)
                            <div class="mb-2">
                                <span class="label-upper d-block">DSAR Type</span>
                                <span class="fw-medium">{{ $institution->dsarType->display_name }}</span>
                            </div>
                        @endif

                        @if($primaryContact)
                            <div class="mb-2">
                                <span class="label-upper d-block">Contact</span>
                                <span class="fw-medium">{{ $primaryContact->name ?? '—' }}</span>
                                @if($primaryContact->job_title)
                                    <div class="text-muted small">{{ $primaryContact->job_title }}</div>
                                @endif
                            </div>
                            @if($primaryContact->email)
                                <div class="mb-2">
                                    <span class="label-upper d-block">Email</span>
                                    <span class="small text-break">{{ $primaryContact->email }}</span>
                                </div>
                            @endif
                            @if($primaryContact->telephone)
                                <div class="mb-2">
                                    <span class="label-upper d-block">Telephone</span>
                                    <span class="small">{{ $primaryContact->telephone->toNational() }}</span>
                                </div>
                            @endif
                        @else
                            <p class="text-muted small mb-0">No contact on file.</p>
                        @endif
                    </div>
                </div>

                {{-- Key facts sit beside the log rather than inside it, and stay editable. --}}
                <div class="card shadow-sm mb-3">
                    <div class="card-body">
                        <h6 class="fw-bold mb-3">Key Details</h6>

                        <div class="mb-2">
                            <span class="label-upper d-block">Due Date</span>
                            @can('dsars.batch.send')
                                <input type="date"
                                       class="form-control form-control-sm"
                                       value="{{ $dsar->expected_at?->format('Y-m-d') }}"
                                       wire:change="updateDueDate($event.target.value)">
                            @else
                                <span class="fw-medium">{{ $dsar->expected_at?->format('d M Y') ?? '—' }}</span>
                            @endcan
                        </div>

                        @if($dsar->reference)
                            <div class="mb-2">
                                <span class="label-upper d-block">Our Reference</span>
                                <span class="fw-medium font-monospace small">{{ $dsar->reference }}</span>
                            </div>
                        @endif

                        @if($dsar->receiver_reference)
                            <div class="mb-2">
                                <span class="label-upper d-block">Their Reference</span>
                                <span class="fw-medium font-monospace small">{{ $dsar->receiver_reference }}</span>
                            </div>
                        @endif

                        <div class="mb-2">
                            <span class="label-upper d-block">Delivery</span>
                            @if($emailSend)
                                <span class="badge bg-info-subtle text-info">
                                    <i class="mdi mdi-email-outline me-1"></i>Email
                                </span>
                                <div class="text-muted small mt-1 text-break">
                                    {{ $emailSend->recipient_name ? $emailSend->recipient_name . ' — ' : '' }}{{ $emailSend->recipient_email }}
                                </div>
                            @elseif(in_array($dsar->status, ['sent', 'needs posting', 'completed']))
                                <span class="badge bg-secondary-subtle text-secondary">
                                    <i class="bi bi-envelope-paper me-1"></i>Posted
                                </span>
                                @if($dsar->posted_at)
                                    <div class="text-muted small mt-1">{{ $dsar->posted_at->format('d M Y') }}</div>
                                @endif
                            @else
                                <span class="text-muted small">Not sent yet</span>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        @endif

        {{-- ══════════════════════════════════════════════════════════════════
             Tab content
        ══════════════════════════════════════════════════════════════════ --}}
        <div class="{{ $showRail ? 'col-lg-9' : 'col-12' }}">

            @if($activeTab === 'overview')
                <div class="card shadow-sm mb-3">
                    <div class="card-body">
                        <h5 class="fw-bold mb-3">What was sent</h5>

                        {{-- The letter and covering email are reference material, so they
                             are collapsed rather than dumped over the whole column. --}}
                        <div class="accordion" id="dsarContentAccordion">
                            <div class="accordion-item">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed" type="button"
                                            data-bs-toggle="collapse" data-bs-target="#dsarLetterContent">
                                        <i class="mdi mdi-file-document-outline me-2"></i>DSAR letter
                                    </button>
                                </h2>
                                <div id="dsarLetterContent" class="accordion-collapse collapse"
                                     data-bs-parent="#dsarContentAccordion">
                                    <div class="accordion-body small">{!! $dsar->content !!}</div>
                                </div>
                            </div>

                            @if($dsar->email_content)
                                <div class="accordion-item">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button collapsed" type="button"
                                                data-bs-toggle="collapse" data-bs-target="#dsarEmailContent">
                                            <i class="mdi mdi-email-outline me-2"></i>Covering email
                                        </button>
                                    </h2>
                                    <div id="dsarEmailContent" class="accordion-collapse collapse"
                                         data-bs-parent="#dsarContentAccordion">
                                        <div class="accordion-body small">{!! $dsar->email_content !!}</div>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>

                <livewire:note-manager :owner="$dsar"/>

            @elseif($activeTab === 'correspondence')
                {{-- One log for every contact with this institution about this DSAR:
                     emails in and out, calls, chases and logged responses. --}}
                <livewire:contact.contact-hub :model="$dsar" :wire:key="'dsar-contact-hub-' . $dsar->id"/>

                {{-- Contact that happened off-system still has to reach the same log. --}}
                <div class="accordion mt-3" id="dsarOfflineLog">
                    <div class="accordion-item">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button"
                                    data-bs-toggle="collapse" data-bs-target="#dsarOfflineResponse">
                                <i class="mdi mdi-inbox-arrow-down me-2"></i>Log a response received by post or phone
                            </button>
                        </h2>
                        <div id="dsarOfflineResponse" class="accordion-collapse collapse"
                             data-bs-parent="#dsarOfflineLog">
                            <div class="accordion-body">
                                <livewire:dsar.response-logger :dsar="$dsar" :compact="true"/>
                            </div>
                        </div>
                    </div>

                    <div class="accordion-item">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button"
                                    data-bs-toggle="collapse" data-bs-target="#dsarOfflineChase">
                                <i class="mdi mdi-bell-ring-outline me-2"></i>Record a chase
                            </button>
                        </h2>
                        <div id="dsarOfflineChase" class="accordion-collapse collapse"
                             data-bs-parent="#dsarOfflineLog">
                            <div class="accordion-body">
                                <livewire:dsar.chase-logger :dsar="$dsar" :compact="true"/>
                            </div>
                        </div>
                    </div>
                </div>

            @elseif($activeTab === 'evidence')
                <livewire:dsar.evidence-manager :dsar="$dsar" :key="'em-' . $dsar->id"/>

            @elseif($activeTab === 'documents')
                <livewire:document-manager :owner="$dsar"/>

            @elseif($activeTab === 'history')
                <livewire:history :owner="$dsar"/>

            @endif
        </div>
    </div>
</div>