<div>
    {{-- Flagged alert --}}
    @if($dsar->is_flagged)
        <div class="alert alert-danger d-flex align-items-center mb-3">
            <i class="bi bi-flag-fill me-2 fs-5"></i>
            <strong>This DSAR has been flagged and requires attention.</strong>
        </div>
    @endif

    <div class="row mb-4 align-items-center">
        <div class="col-md-8">
            <h2 class="fw-bold mb-0">
                <i class="bi bi-shield-lock text-primary me-2"></i>
                Subject Access Request
            </h2>
            <p class="text-muted mt-1">
                Submitted to: <span class="fw-semibold text-dark">{{ $institution->display_name }}</span>
            </p>
        </div>
        <div class="col-md-4 text-md-end d-flex align-items-center justify-content-md-end 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 bg-primary-subtle text-primary badge-status">{{ ucwords($dsar->status) }}</span>
            @endcan

            @can('synapse.use')
                <button wire:click="runEvidenceExtraction"
                        wire:loading.attr="disabled"
                        wire:confirm="Queue evidence extraction for all response attachments on this DSAR?"
                        class="btn btn-sm text-white"
                        style="background:#7c3aed;">
                    <span wire:loading.remove wire:target="runEvidenceExtraction">
                        <i class="mdi mdi-brain me-1"></i>Extract evidence
                    </span>
                    <span wire:loading wire:target="runEvidenceExtraction">
                        <span class="spinner-border spinner-border-sm me-1"></span>Queuing…
                    </span>
                </button>
            @endcan

            @can('delete', $dsar)
                <button class="btn btn-outline-danger btn-sm"
                        wire:click="deleteDsar"
                        wire:confirm="Permanently delete this DSAR? This cannot be undone.">
                    <i class="bi bi-trash"></i>
                </button>
            @endcan
        </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 --}}
    <ul class="nav nav-tabs mb-4">
        <li class="nav-item">
            <a class="nav-link {{ $activeTab === 'details' ? 'active' : '' }}"
               wire:click.prevent="setTab('details')" href="#">
                Details
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link {{ $activeTab === 'evidence' ? 'active' : '' }}"
               wire:click.prevent="setTab('evidence')" href="#">
                <i class="mdi mdi-brain me-1" style="color:#7c3aed;"></i>Evidence
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link {{ $activeTab === 'documents' ? 'active' : '' }}"
               wire:click.prevent="setTab('documents')" href="#">
                Documents
            </a>
        </li>
    </ul>

    {{-- Tab content --}}
    @if($activeTab === 'details')
        <div class="row">
            <!-- Left Sidebar: Client Details & History -->
            <div class="col-lg-3">
                <x-client.client-card :client="$dsar->claim->client"/>
                <livewire:history :owner="$dsar"/>
            </div>

            <!-- Middle Column: Request Details & Timeline -->
            <div class="col-lg-6">
                <div class="card">
                    <div class="card-body">
                        <h4 class="fw-bold">Request Details</h4>
                        <div class="row g-3">
                            <div class="col-sm-6">
                                <span class="label-upper">Date Sent</span>
                                <p class="mb-0 fw-medium">{{ $dsar->created_at->format('d M Y') }}</p>
                            </div>
                            <div class="col-sm-6">
                                <span class="label-upper">Response Deadline</span>
                                <p class="mb-0 fw-medium {{ $dsar->created_at->addDays(30)->isPast() && $dsar->status !== 'completed' ? 'text-danger fw-bold' : '' }}">
                                    {{ $dsar->created_at->addDays(30)->format('d M Y') }}
                                </p>
                            </div>

                            <div class="col-sm-6">
                                <span class="label-upper">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
                                    <p class="mb-0 fw-medium">{{ $dsar->expected_at?->format('d M Y') ?? '—' }}</p>
                                @endcan
                            </div>

                            @if($dsar->reference)
                            <div class="col-sm-6">
                                <span class="label-upper">Our Reference</span>
                                <p class="mb-0 fw-medium font-monospace">{{ $dsar->reference }}</p>
                            </div>
                            @endif
                            @if($dsar->receiver_reference)
                            <div class="col-sm-6">
                                <span class="label-upper">Their Reference</span>
                                <p class="mb-0 fw-medium font-monospace">{{ $dsar->receiver_reference }}</p>
                            </div>
                            @endif

                            @if($dsar->posted_at)
                                <div class="col-sm-6">
                                    <span class="label-upper">Posted On</span>
                                    <p class="mb-0 fw-medium">{{ $dsar->posted_at->format('d M Y') }}</p>
                                </div>
                            @endif

                            @if($emailSend)
                                @php
                                    $sentToName  = $emailSend->recipient_name ?? null;
                                    $sentToEmail = $emailSend->recipient_email ?? null;
                                @endphp
                                <div class="col-12">
                                    <span class="label-upper">Sent To</span>
                                    <p class="mb-0">
                                        @if($sentToName)
                                            <span class="fw-medium">{{ $sentToName }}</span>
                                            <span class="text-muted small ms-1">&lt;{{ $sentToEmail }}&gt;</span>
                                        @else
                                            <span class="fw-medium">{{ $sentToEmail }}</span>
                                        @endif
                                        <span class="badge bg-info-subtle text-info ms-2 small">Email</span>
                                    </p>
                                </div>
                            @elseif(in_array($dsar->status, ['sent', 'needs posting', 'completed']))
                                <div class="col-12">
                                    <span class="label-upper">Delivery Method</span>
                                    <p class="mb-0">
                                        <span class="badge bg-secondary-subtle text-secondary">
                                            <i class="bi bi-envelope-paper me-1"></i>Posted
                                        </span>
                                    </p>
                                </div>
                            @endif

                            <div class="col-12">
                                <span class="label-upper">Letter Content</span>
                                <div class="small bg-light p-2 rounded">{!! $dsar->content !!}</div>
                            </div>

                            @if($dsar->email_content)
                            <div class="col-12">
                                <span class="label-upper">Email Content</span>
                                <div class="small bg-light p-2 rounded">{!! $dsar->email_content !!}</div>
                            </div>
                            @endif
                        </div>
                    </div>
                </div>

                <div class="card mt-3">
                    <div class="card-body">
                        <livewire:contact.communication-timeline :model="$dsar" :include-inbound="true"/>
                    </div>
                </div>
            </div>

            <!-- Right Sidebar: Response Logger & Notes -->
            <div class="col-lg-3">
                <div class="card border-primary mb-3">
                    <div class="card-header bg-primary text-white">
                        <i class="bi bi-reply-all me-2"></i>Response Log
                    </div>
                    <div class="card-body p-2">
                        <livewire:dsar.response-logger :dsar="$dsar"/>
                    </div>
                </div>

                <livewire:dsar.chase-logger :dsar="$dsar"/>

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

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

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

    @endif
</div>
