@php
    $consentColours = ['granted' => 'emerald', 'withdrawn' => 'rose', 'unknown' => 'slate'];
    $stageColour = fn (string $stage): string => match ($stage) {
        'won' => 'emerald', 'lost' => 'rose', 'deferred' => 'amber', default => 'sky',
    };
@endphp

<div class="px-4 py-8 sm:px-6 lg:px-8">
    <div class="mx-auto max-w-7xl space-y-6">
        <div>
            <a href="{{ route('crm.contacts.index') }}" wire:navigate class="inline-flex items-center gap-1 text-xs font-medium text-slate-500 transition hover:text-slate-700">
                <x-icon name="chevron-left" class="h-3.5 w-3.5" /> {{ __('Contacts') }}
            </a>

            <x-page-header :title="$contact->name" :subtitle="collect([$contact->title, $contact->department])->filter()->implode(', ') ?: null" class="!mb-0 mt-1">
                <x-notes-button variant="button" type="contact" :id="$contact->id" :title="$contact->name" />
                @if ($canDelete)
                    <x-secondary-button type="button" wire:click="removeContact" wire:confirm="{{ __('Remove :name? Their past activity stays on the organisation.', ['name' => $contact->name]) }}">
                        {{ __('Remove') }}
                    </x-secondary-button>
                @endif
                @if ($canEdit)
                    <x-button type="button" wire:click="editContact({{ $contact->id }})"><x-icon name="pencil-square" class="mr-1.5 h-4 w-4" /> {{ __('Edit') }}</x-button>
                @endif
            </x-page-header>

            <div class="mt-2 flex flex-wrap items-center gap-2 text-sm">
                @if ($contact->customer)
                    <a href="{{ route('crm.organisations.show', $contact->customer) }}" wire:navigate class="inline-flex items-center gap-1 font-medium text-indigo-600 hover:text-indigo-800">
                        <x-icon name="building-office" class="h-3.5 w-3.5" /> {{ $contact->customer->name }}
                    </a>
                @endif
                @if ($contact->is_primary)
                    <x-badge color="indigo">{{ __('Main contact') }}</x-badge>
                @endif
                @if ($contact->decision_role)
                    <x-badge color="slate">{{ __(\App\Models\Crm\Contact::DECISION_ROLES[$contact->decision_role] ?? $contact->decision_role) }}</x-badge>
                @endif
            </div>
        </div>

        <div class="grid grid-cols-1 gap-4 lg:grid-cols-3">
            <x-card class="p-5">
                <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Reaching them') }}</p>
                <dl class="mt-3 space-y-2 text-sm">
                    @foreach ([
                        __('Email') => $contact->email,
                        __('Phone') => $contact->phone,
                        __('WhatsApp') => $contact->whatsapp,
                        __('LinkedIn') => $contact->linkedin,
                        __('Prefers') => $contact->preferred_channel ? __(\App\Models\Crm\Contact::CHANNELS[$contact->preferred_channel] ?? $contact->preferred_channel) : null,
                    ] as $label => $value)
                        @if ($value)
                            <div class="flex justify-between gap-3"><dt class="text-slate-500">{{ $label }}</dt><dd class="break-all text-right text-slate-700">{{ $value }}</dd></div>
                        @endif
                    @endforeach
                    @if (! $contact->email && ! $contact->phone && ! $contact->whatsapp && ! $contact->linkedin)
                        <p class="text-slate-400">{{ __('No way to reach them is recorded yet.') }}</p>
                    @endif
                </dl>
            </x-card>

            <x-card class="p-5">
                <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Marketing consent') }}</p>
                <div class="mt-3">
                    <x-badge :color="$consentColours[$contact->marketing_consent] ?? 'slate'">{{ __(\App\Models\Crm\Contact::CONSENTS[$contact->marketing_consent] ?? 'Not recorded') }}</x-badge>
                </div>
                <dl class="mt-3 space-y-2 text-sm">
                    <div class="flex justify-between gap-3"><dt class="text-slate-500">{{ __('Recorded') }}</dt><dd class="text-right text-slate-700">{{ $contact->consent_at?->timezone(config('app.display_timezone'))->format('j M Y') ?? __('Not available') }}</dd></div>
                    <div class="flex justify-between gap-3"><dt class="text-slate-500">{{ __('Source') }}</dt><dd class="text-right text-slate-700">{{ $contact->consent_source ?: __('Not available') }}</dd></div>
                </dl>
                @if ($contact->marketing_consent === 'withdrawn')
                    <p class="mt-3 text-xs text-rose-700">{{ __('Left out of every marketing list and export.') }}</p>
                @endif
            </x-card>

            <x-card class="p-5">
                <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Notes') }}</p>
                <p class="mt-3 whitespace-pre-line text-sm {{ $contact->notes ? 'text-slate-700' : 'text-slate-400' }}">{{ $contact->notes ?: __('Nothing noted.') }}</p>
                <p class="mt-3 text-xs text-slate-400">{{ __('Added :date by :name', ['date' => $contact->created_at?->timezone(config('app.display_timezone'))->format('j M Y'), 'name' => $contact->creator?->name ?? __('an import or the system')]) }}</p>
            </x-card>
        </div>

        <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
            <x-card class="p-4 sm:p-5">
                <h2 class="text-base font-semibold text-slate-900">{{ __('Opportunities') }}</h2>
                <p class="text-xs text-slate-400">{{ __('Deals this person is involved in.') }}</p>
                <ul class="mt-3 divide-y divide-slate-100">
                    @forelse ($opportunities as $opportunity)
                        <li wire:key="contact-opportunity-{{ $opportunity->id }}" class="flex items-center justify-between gap-3 py-2.5 text-sm">
                            <div class="min-w-0">
                                <a href="{{ route('crm.opportunities.show', $opportunity) }}" wire:navigate class="font-medium text-slate-900 hover:text-indigo-600">{{ $opportunity->title }}</a>
                                <p class="text-xs text-slate-400">{{ $opportunity->owner?->name ?? __('No owner') }}@if ($opportunity->pivot->role) · {{ $opportunity->pivot->role }}@endif</p>
                            </div>
                            <x-badge :color="$stageColour($opportunity->stage)">{{ __(\App\Models\Opportunity::STAGES[$opportunity->stage] ?? $opportunity->stage) }}</x-badge>
                        </li>
                    @empty
                        <li class="py-6"><x-empty-state icon="flag" :title="__('Not on any opportunity')" :message="__('When this person is added to an opportunity it appears here.')" class="border-0 bg-transparent py-0" /></li>
                    @endforelse
                </ul>
            </x-card>

            <x-card class="p-4 sm:p-5">
                <h2 class="text-base font-semibold text-slate-900">{{ __('Conversations') }}</h2>
                <p class="text-xs text-slate-400">{{ __('The latest calls, messages and meetings logged with this person.') }}</p>
                <ul class="mt-3 divide-y divide-slate-100">
                    @forelse ($conversations as $entry)
                        <li wire:key="contact-activity-{{ $entry->id }}" class="py-2.5 text-sm">
                            <p class="font-medium text-slate-900">{{ __($types[$entry->type] ?? ucfirst((string) $entry->type)) }}
                                <span class="font-normal text-slate-400">· {{ $entry->occurred_at?->timezone(config('app.display_timezone'))->format('j M Y') ?? __('Date not recorded') }} · {{ $entry->user?->name ?? __('System') }}</span>
                            </p>
                            @if ($entry->body)
                                <p class="mt-0.5 line-clamp-3 break-words text-slate-600">{{ $entry->body }}</p>
                            @endif
                        </li>
                    @empty
                        <li class="py-6"><x-empty-state icon="chat-bubble-left-right" :title="__('Nothing logged yet')" :message="__('Activity logged with this person appears here.')" class="border-0 bg-transparent py-0" /></li>
                    @endforelse
                </ul>
            </x-card>
        </div>

        <x-card class="p-4 sm:p-5">
            <h2 class="mb-3 text-base font-semibold text-slate-900">{{ __('Files') }}</h2>
            <livewire:crm.attachments record-type="contact" :record-id="$contact->id" :key="'files-contact-'.$contact->id" />
        </x-card>
    </div>

    @include('livewire.crm.contacts.partials.contact-modal')
</div>