@php
    $fmt = fn (?array $v): ?string => $v ? implode(', ', array_map('strval', array_values($v))) : null;
    $a = $approvalRequest;
@endphp

<x-admin.layout :title="'Approval REQ-'.$a->id" active="approvals">
    <x-admin.backlink :href="route('admin.approvals')">Approval queue</x-admin.backlink>

    <x-admin.view-head
        icon="fa-light fa-stamp"
        :eyebrow="'Approval · REQ-'.$a->id"
        :title="$a->action->label()"
        :lede="'Requested by '.($a->requester?->full_name ?: '—').' · '.$a->requested_at?->diffForHumans()">
        <x-slot:actions>
            <x-admin.pill :variant="$a->risk->pill()">{{ $a->risk->label() }}</x-admin.pill>
            <x-admin.pill :variant="$a->statusPill()">{{ ucfirst($a->status) }}</x-admin.pill>
        </x-slot:actions>
    </x-admin.view-head>

    @if (session('status'))
        <x-admin.skel-note icon="fa-light fa-circle-check">{{ session('status') }}</x-admin.skel-note>
    @endif
    @if (session('error') || $errors->any())
        <x-admin.skel-note icon="fa-light fa-circle-exclamation">{{ session('error') ?? $errors->first() }}</x-admin.skel-note>
    @endif

    <div class="grid-2">
        {{-- Left: the requested change --}}
        <div style="display:flex;flex-direction:column;gap:1rem;min-width:0;">
            <x-admin.panel pad>
                <x-admin.eyebrow icon="fa-light fa-file-pen">Requested change</x-admin.eyebrow>
                <div class="mt-1">
                    <x-admin.kv label="Request type"><strong>{{ $a->action->label() }}</strong></x-admin.kv>
                    <x-admin.kv label="Affected record">
                        @if ($a->affectedUser && (int) $a->affectedUser->role_id === 3)
                            <a href="{{ route('admin.users.show', $a->affectedUser) }}">{{ $a->affectedUser->full_name }}</a> <span class="sub">({{ $a->affected_u_ident }})</span>
                        @elseif ($a->affectedUser)
                            {{ $a->affectedUser->full_name }} <span class="sub">({{ $a->affected_u_ident }})</span>
                        @else
                            {{ $a->entity_type ?? '—' }} @if ($a->entity_id)<span class="sub">#{{ $a->entity_id }}</span>@endif
                        @endif
                    </x-admin.kv>
                    <x-admin.kv label="Requested by">
                        {{ $a->requester?->full_name ?: '—' }}
                        @if ($isOwn)<x-admin.pill variant="neutral">You</x-admin.pill>@endif
                    </x-admin.kv>
                    <x-admin.kv label="Reason given">@if ($a->reason)&ldquo;{{ $a->reason }}&rdquo;@else <span class="sub">—</span>@endif</x-admin.kv>
                    @if ($fmt($a->old_value))
                        <x-admin.kv label="Current value"><span class="diff"><span class="old" style="text-decoration:none;">{{ $fmt($a->old_value) }}</span></span></x-admin.kv>
                    @endif
                    @if ($fmt($a->new_value))
                        <x-admin.kv label="Proposed value"><span class="diff"><span class="new">{{ $fmt($a->new_value) }}</span></span></x-admin.kv>
                    @endif
                </div>
            </x-admin.panel>

            @if ($a->status === \App\Models\ApprovalRequest::STATUS_FAILED && $a->failure_reason)
                <x-admin.impact><strong>Apply failed:</strong> {{ $a->failure_reason }}</x-admin.impact>
            @endif
        </div>

        {{-- Right: the decision + audit history --}}
        <div style="display:flex;flex-direction:column;gap:1rem;min-width:0;">
            <x-admin.panel pad>
                <x-admin.eyebrow icon="fa-light fa-gavel">Decision</x-admin.eyebrow>
                <div class="mt-1">
                    @if ($canDecide)
                        <form method="POST" action="{{ route('admin.approvals.approve', $a) }}">
                            @csrf
                            <label style="font-weight:600;color:var(--navy);font-size:.85rem;display:block;margin-bottom:.35rem;">
                                Decision note <span style="color:var(--coral);">*</span>
                            </label>
                            <textarea name="decision_note" required maxlength="500"
                                placeholder="Why are you approving or rejecting this change?"
                                style="width:100%;min-height:84px;border:1px solid var(--line);border-radius:var(--radius-sm);padding:.62rem .9rem;font-family:'Nunito Sans',sans-serif;font-size:.88rem;color:var(--ink);background:#fff;resize:vertical;">{{ old('decision_note') }}</textarea>
                            <div style="display:flex;gap:.6rem;margin-top:.8rem;flex-wrap:wrap;">
                                <button type="submit" class="btn btn-success btn-sm"><i class="fa-light fa-check"></i> Approve &amp; apply</button>
                                <button type="submit" class="btn btn-danger btn-sm" formaction="{{ route('admin.approvals.reject', $a) }}"><i class="fa-light fa-xmark"></i> Reject</button>
                            </div>
                        </form>
                    @else
                        @if ($a->decision_note)
                            <x-admin.kv label="Decision note">&ldquo;{{ $a->decision_note }}&rdquo;</x-admin.kv>
                            <x-admin.kv label="Decided by">{{ $a->reviewer?->full_name ?: '—' }} @if ($a->reviewed_at)<span class="sub">· {{ $a->reviewed_at->diffForHumans() }}</span>@endif</x-admin.kv>
                        @endif
                        @if ($blockedReason)
                            <x-admin.skel-note icon="fa-light fa-user-shield">{{ $blockedReason }}</x-admin.skel-note>
                        @endif
                    @endif
                </div>
            </x-admin.panel>

            <x-admin.panel pad>
                <x-admin.eyebrow icon="fa-light fa-clock-rotate-left">Related audit history</x-admin.eyebrow>
                <x-admin.timeline class="mt-1">
                    @forelse ($audit as $entry)
                        <x-admin.timeline-item :when="$entry->created_at?->diffForHumans()">
                            {{ $entry->action }} <span class="sub">· {{ $entry->actor?->full_name ?: 'System' }}</span>
                        </x-admin.timeline-item>
                    @empty
                        <p style="color:var(--ink-soft);font-size:.85rem;margin:.4rem 0 0;">No prior audit entries for this record.</p>
                    @endforelse
                </x-admin.timeline>
                <a class="all" style="font-family:'Quicksand',sans-serif;font-weight:600;font-size:.78rem;" href="{{ route('admin.audit') }}">Full audit log &rarr;</a>
            </x-admin.panel>
        </div>
    </div>
</x-admin.layout>