<x-app-layout>
    <x-slot:header>Contacts / {{ $contact->name }} / Edit</x-slot:header>

    <div class="space-y-4">
        <div class="flex flex-wrap items-center justify-between gap-3">
            <div class="flex items-center gap-2 flex-wrap">
                <h1 class="text-2xl font-semibold tracking-tight">Edit {{ $contact->name }}</h1>
                @if ($contact->status === 'banned')
                    <span class="inline-flex items-center rounded-md bg-red-700 px-2 py-0.5 text-xs font-semibold text-white">Banned</span>
                @elseif ($contact->status === 'suspended')
                    <span class="inline-flex items-center rounded-md bg-orange-100 px-2 py-0.5 text-xs font-medium text-orange-800">Suspended</span>
                @endif
            </div>
            <div class="flex items-center gap-2">
                <a href="{{ route('contacts.show', $contact) }}">
                    <x-ui.button variant="outline" size="sm">View contact</x-ui.button>
                </a>
                @if (in_array($contact->status, ['banned', 'suspended'], true))
                    @can('reactivate', $contact)
                        <form method="POST" action="{{ route('contacts.reactivate', $contact) }}" class="inline">
                            @csrf
                            <x-ui.button type="submit" variant="outline" size="sm" class="text-green-600 border-green-600 hover:bg-green-50">Reactivate</x-ui.button>
                        </form>
                    @endcan
                @else
                    @can('manage', $contact)
                        <form method="POST" action="{{ route('contacts.ban', $contact) }}" class="inline">
                            @csrf
                            <x-ui.button type="submit" variant="outline" size="sm" class="text-red-900 border-red-900 hover:bg-red-50">Ban</x-ui.button>
                        </form>
                    @endcan
                @endif
                @can('manage', $contact)
                    <x-ui.dropdown-menu align="end">
                        <x-slot:trigger>
                            <button class="rounded-md border border-input bg-background h-9 px-3 hover:bg-accent">
                                <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01"/></svg>
                            </button>
                        </x-slot:trigger>
                        @if ($contact->status !== 'suspended')
                            <form method="POST" action="{{ route('contacts.suspend', $contact) }}">
                                @csrf
                                <x-ui.dropdown-menu-item as="button" type="submit" class="text-orange-600">Suspend</x-ui.dropdown-menu-item>
                            </form>
                        @endif
                    </x-ui.dropdown-menu>
                @endcan
            </div>
        </div>

        @php
            $canEdit = Auth::user()->can('update', $contact);
            $canEditNotes = $canEdit || Auth::user()->can('updateNotes', $contact);
            $userRole = Auth::user()->role;
        @endphp

        @error('edit')
            <div class="rounded-md border border-destructive/30 bg-destructive/10 px-4 py-3 text-sm text-destructive">
                {{ $message }}
            </div>
        @enderror

        @if (!$canEdit)
            <div class="rounded-md border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800">
                <strong>View-only mode:</strong>
                @if ($userRole === 'clerk')
                    As a Clerk, you can edit and save the Quick notes field, but cannot edit other contact fields. Only Managers and above can modify contact details.
                @else
                    This contact is in read-only mode. Only authorized users can edit these fields.
                @endif
            </div>
        @elseif ($userRole === 'manager')
            <div class="rounded-md border border-blue-200 bg-blue-50 px-4 py-3 text-sm text-blue-800">
                As a Manager, changes you save here are held for approval — an Admin or Super Admin needs to
                approve them before they take effect.
            </div>
        @endif

        @if ($pendingEdit)
            <div class="rounded-md border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800">
                @if ($pendingEdit->requested_by === Auth::id())
                    Your edit submitted {{ $pendingEdit->created_at->diffForHumans() }} is still awaiting approval.
                @elseif (Auth::user()->can('approve-edits'))
                    <strong>{{ $pendingEdit->requestedBy?->name ?? 'Someone' }}</strong> proposed changes
                    {{ $pendingEdit->created_at->diffForHumans() }} that are awaiting your review —
                    <a href="{{ route('contacts.pending') }}" class="underline font-medium">view pending approvals</a>.
                @else
                    An edit to this contact is awaiting approval.
                @endif
            </div>
        @endif

        <form action="{{ route('contacts.update', $contact) }}" method="POST" enctype="multipart/form-data" @if (!$canEditNotes) onsubmit="return false;" @endif>
            @csrf
            @method('PUT')
            @include('contacts._form', ['contact' => $contact, 'groups' => $groups, 'tags' => $tags, 'canEdit' => $canEdit, 'canEditNotes' => $canEditNotes])
        </form>
    </div>
</x-app-layout>
