@php
    $displayName = $displayName ?? ($contact->name ?? __('devices.contacts.no_name'));
    $words = preg_split('/\s+/u', trim($displayName), -1, PREG_SPLIT_NO_EMPTY) ?: [];
    $initials = '';
    foreach (array_slice($words, 0, 2) as $word) {
        $initials .= mb_strtoupper(mb_substr($word, 0, 1));
    }
    if ($initials === '') {
        $initials = '?';
    }
    $contactIndex = \App\Support\ContactResolver::phoneIndex($device);
@endphp

<x-app-layout>
    <x-slot name="header">
        <div class="flex flex-wrap justify-between items-center gap-3">
            <div class="flex items-center gap-3 min-w-0">
                <div class="w-12 h-12 rounded-full bg-indigo-600 text-white flex items-center justify-center text-lg font-semibold shrink-0">
                    {{ $initials }}
                </div>
                <div class="min-w-0">
                    <h2 class="font-semibold text-xl text-gray-800 truncate">{{ $displayName }}</h2>
                    @if($currentPhone)
                        <p class="text-sm font-mono text-indigo-600">{{ $currentPhone }}</p>
                    @endif
                    @if(empty($contact))
                        <p class="text-xs text-amber-700 mt-0.5">{{ __('devices.contacts.profile_not_in_agenda') }}</p>
                    @endif
                </div>
            </div>
            <a href="{{ route('devices.manage', [$device, 'contacts']) }}"
               class="text-sm text-indigo-600 hover:underline shrink-0">
                ← {{ __('devices.contacts.back_to_contacts') }}
            </a>
        </div>
    </x-slot>

    <div class="py-6">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
            @if(count($phoneHistory) > 0)
                <div class="bg-white shadow-sm sm:rounded-lg p-4">
                    <h3 class="text-sm font-semibold text-slate-700 mb-2">{{ __('devices.contacts.phone_history') }}</h3>
                    <div class="flex flex-wrap gap-2">
                        @foreach($phoneHistory as $entry)
                            <div class="inline-flex flex-col gap-0.5">
                                <a href="{{ \App\Support\ContactResolver::profileUrl($device, $entry['phone'], $contact) }}"
                                   class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs border
                                       {{ ($entry['label'] === __('devices.contacts.phone_current')) ? 'bg-indigo-50 border-indigo-200 text-indigo-800' : 'bg-slate-50 border-slate-200 text-slate-700 hover:bg-slate-100' }}">
                                    <span class="font-mono">{{ $entry['phone'] }}</span>
                                    <span class="text-slate-500">({{ $entry['label'] }})</span>
                                </a>
                                @if(!empty($entry['aliases']))
                                    <span class="text-[10px] text-slate-500 px-1">
                                        {{ __('devices.contacts.phone_aliases', ['aliases' => implode(', ', $entry['aliases'])]) }}
                                    </span>
                                @endif
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif

            <div class="grid gap-3" style="display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0.75rem">
                <div class="rounded-lg border border-indigo-200 bg-indigo-50/50 px-4 py-3 text-center min-w-0">
                    <p class="text-2xl font-bold text-indigo-900">{{ $stats['events'] }}</p>
                    <p class="text-xs text-indigo-700 uppercase tracking-wide mt-1">{{ __('devices.contacts.stats_agenda_changes') }}</p>
                </div>
                <div class="rounded-lg border border-emerald-200 bg-emerald-50/50 px-4 py-3 text-center min-w-0">
                    <p class="text-2xl font-bold text-emerald-900">{{ $stats['sms'] }}</p>
                    <p class="text-xs text-emerald-700 uppercase tracking-wide mt-1">SMS</p>
                </div>
                <div class="rounded-lg border border-amber-200 bg-amber-50/50 px-4 py-3 text-center min-w-0">
                    <p class="text-2xl font-bold text-amber-900">{{ $stats['calls'] }}</p>
                    <p class="text-xs text-amber-700 uppercase tracking-wide mt-1">{{ __('devices.pages.calls') }}</p>
                </div>
            </div>

            <div class="bg-white shadow-sm sm:rounded-lg p-6" id="sms-conversation">
                <h3 class="text-base font-semibold text-slate-800 mb-4">{{ __('devices.sms.thread_title') }}</h3>
                @include('admin.devices.partials.contact-sms-thread', [
                    'smsThread' => $smsThread ?? collect(),
                    'smsStats' => $smsStats ?? ['sent' => 0, 'received' => 0],
                ])
            </div>

            <div class="bg-white shadow-sm sm:rounded-lg p-6">
                <h3 class="text-base font-semibold text-slate-800 mb-4">{{ __('devices.contacts.profile_timeline') }}</h3>
                @if($timeline->isEmpty())
                    <p class="text-sm text-slate-500">{{ __('devices.contacts.profile_timeline_empty') }}</p>
                @else
                    <ul class="divide-y divide-slate-100 border border-slate-200 rounded-lg overflow-hidden">
                        @foreach($timeline as $item)
                            @include('admin.devices.partials.contact-timeline-item', [
                                'item' => $item,
                                'device' => $device,
                                'contact' => $contact,
                                'contactIndex' => $contactIndex,
                            ])
                        @endforeach
                    </ul>
                @endif
            </div>
        </div>
    </div>
</x-app-layout>