@php $pageTitle = $lead->name ?: __('messages.dashboard.lead_fallback'); @endphp
@include('dashboard.partials.head', ['pageTitle' => $pageTitle])

<div class="flex h-screen overflow-hidden">
    @include('dashboard.partials.sidebar')

    <div class="flex-1 flex flex-col min-w-0 h-screen overflow-hidden">
        <header class="glass-bar sticky top-0 z-30 border-b border-black/[0.06] flex-shrink-0">
            <div class="px-5 sm:px-8 h-[3.25rem] flex items-center justify-between gap-4">
                <div class="flex items-center gap-2 min-w-0">
                    <button type="button" id="mobileMenuBtn" class="md:hidden p-2 -ml-2 rounded-[10px] text-apple-charcoal/60 hover:bg-black/[0.04] transition-colors" aria-label="Menu">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
                    </button>
                    <a href="{{ route('dashboard.leads.index') }}" class="p-2 rounded-[10px] text-apple-charcoal/50 hover:bg-black/[0.04] hover:text-apple-charcoal transition-colors" title="{{ __('messages.dashboard.leads_dashboard') }}">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
                    </a>
                    <div class="min-w-0 border-l border-black/[0.06] pl-3 ml-1">
                        <h1 class="text-[15px] sm:text-[17px] font-semibold text-apple-charcoal truncate">{{ $lead->name ?: __('messages.dashboard.unknown_visitor') }}</h1>
                        <p class="text-[11px] text-apple-gray hidden sm:block">{{ __('messages.dashboard.lead_details') }}</p>
                    </div>
                </div>
                <div class="flex items-center gap-2 flex-shrink-0">
                    <select id="statusSelect" onchange="updateStatus(this.value)" class="px-3 py-2 text-[13px] bg-white rounded-[10px] shadow-panel border border-black/[0.06] focus:ring-2 focus:ring-apple-blue/30 focus:outline-none text-apple-charcoal max-w-[9rem] sm:max-w-none">
                        <option value="cold" {{ $lead->status === 'cold' ? 'selected' : '' }}>{{ __('messages.dashboard.status_cold') }}</option>
                        <option value="warm" {{ $lead->status === 'warm' ? 'selected' : '' }}>{{ __('messages.dashboard.status_warm') }}</option>
                        <option value="hot" {{ $lead->status === 'hot' ? 'selected' : '' }}>{{ __('messages.dashboard.status_hot') }}</option>
                        <option value="submitted" {{ $lead->status === 'submitted' ? 'selected' : '' }}>{{ __('messages.dashboard.status_submitted') }}</option>
                        <option value="contacted" {{ $lead->status === 'contacted' ? 'selected' : '' }}>{{ __('messages.dashboard.status_contacted') }}</option>
                        <option value="converted" {{ $lead->status === 'converted' ? 'selected' : '' }}>{{ __('messages.dashboard.status_converted') }}</option>
                        <option value="lost" {{ $lead->status === 'lost' ? 'selected' : '' }}>{{ __('messages.dashboard.status_lost') }}</option>
                        <option value="archived" {{ $lead->status === 'archived' ? 'selected' : '' }}>{{ __('messages.dashboard.status_archived') }}</option>
                    </select>
                    <form action="{{ route('dashboard.leads.destroy', $lead) }}" method="POST" onsubmit="return confirm('{{ __('messages.dashboard.delete_lead_confirm') }}')" class="inline">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="p-2 rounded-[10px] text-apple-red hover:bg-apple-red/8 transition-colors" title="{{ __('messages.dashboard.delete') }}">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                        </button>
                    </form>
                </div>
            </div>
        </header>

        <main class="flex-1 overflow-y-auto">
            <div class="max-w-4xl mx-auto px-5 sm:px-8 py-6">
            <!-- Hero -->
            <div class="panel rounded-[1.25rem] p-6 sm:p-8 mb-6">
                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-6">
                    <div class="flex items-center gap-5">
                        <div class="w-[4.5rem] h-[4.5rem] rounded-full flex items-center justify-center bg-black/[0.05] text-apple-charcoal font-semibold text-2xl border border-black/[0.06]">
                            {{ $lead->name ? strtoupper(substr($lead->name, 0, 2)) : '?' }}
                        </div>
                        <div>
                            <h2 class="text-[26px] sm:text-[28px] font-semibold text-apple-charcoal tracking-tight leading-tight">{{ $lead->name ?: __('messages.dashboard.unknown_visitor') }}</h2>
                            <div class="flex flex-wrap items-center gap-3 mt-2.5">
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-[12px] font-semibold uppercase tracking-wide
                                    @switch($lead->status)
                                        @case('submitted') bg-apple-blue/10 text-apple-blue @break
                                        @case('hot') bg-apple-orange/10 text-apple-orange @break
                                        @case('warm') bg-amber-500/10 text-amber-700 @break
                                        @case('cold') bg-black/[0.06] text-apple-zinc @break
                                        @case('contacted') bg-apple-purple/10 text-apple-purple @break
                                        @case('converted') bg-apple-green/10 text-apple-green @break
                                        @case('lost') bg-apple-red/10 text-apple-red @break
                                        @case('archived') bg-black/[0.06] text-apple-gray @break
                                        @default bg-black/[0.06] text-apple-zinc
                                    @endswitch
                                ">
                                    {{ __('messages.dashboard.status_' . $lead->status) }}
                                </span>
                                <div class="flex items-center gap-2 text-[13px] text-apple-gray">
                                    <div class="w-28 h-1.5 bg-black/[0.08] rounded-full overflow-hidden">
                                        <div class="h-full rounded-full {{ $lead->form_completion_percentage >= 80 ? 'bg-apple-green' : ($lead->form_completion_percentage >= 40 ? 'bg-apple-orange' : 'bg-apple-zinc') }}" style="width: {{ $lead->form_completion_percentage }}%"></div>
                                    </div>
                                    <span class="font-semibold text-apple-charcoal/70">{{ $lead->form_completion_percentage }}{{ __('messages.dashboard.complete_percentage') }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="flex gap-2.5 sm:flex-col sm:items-stretch">
                        @if($lead->email)
                        <a href="mailto:{{ $lead->email }}" class="inline-flex items-center justify-center gap-2 px-5 py-2.5 text-[15px] font-semibold bg-apple-blue text-white rounded-[10px] hover:bg-[#0077ED] transition-colors shadow-panel">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
                            {{ __('messages.dashboard.link_email') }}
                        </a>
                        @endif
                        @if($lead->phone)
                        <a href="tel:{{ $lead->phone }}" class="inline-flex items-center justify-center gap-2 px-5 py-2.5 text-[15px] font-semibold bg-white border border-black/[0.08] text-apple-charcoal rounded-[10px] hover:bg-black/[0.02] transition-colors shadow-panel">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg>
                            {{ __('messages.dashboard.link_call') }}
                        </a>
                        @endif
                    </div>
                </div>
            </div>

            @if($lead->message)
            <div class="panel rounded-[1.25rem] p-6 mb-6">
                <h3 class="text-[13px] font-semibold uppercase tracking-wider text-apple-gray mb-4">{{ __('messages.dashboard.label_message') }}</h3>
                <div class="bg-apple-bg rounded-[14px] p-5 border border-black/[0.04]">
                    <p class="text-[16px] sm:text-[17px] text-apple-charcoal whitespace-pre-wrap leading-relaxed select-text">{{ $lead->message }}</p>
                </div>
            </div>
            @endif

            <div class="grid md:grid-cols-2 gap-6">
                <!-- Contact (iOS grouped list) -->
                <section>
                    <h3 class="text-[13px] font-semibold uppercase tracking-wider text-apple-gray mb-2 px-1">{{ __('messages.dashboard.contact_information') }}</h3>
                    <div class="panel rounded-[1.25rem] overflow-hidden divide-y divide-black/[0.06]">
                        <div class="flex justify-between items-center px-4 py-3.5 gap-4">
                            <span class="text-[15px] text-apple-charcoal">{{ __('messages.dashboard.label_email') }}</span>
                            @if($lead->email)
                            <a href="mailto:{{ $lead->email }}" class="text-[15px] font-medium text-apple-blue hover:underline text-right truncate select-text">{{ $lead->email }}</a>
                            @else
                            <span class="text-[15px] text-apple-gray">-</span>
                            @endif
                        </div>
                        <div class="flex justify-between items-center px-4 py-3.5 gap-4">
                            <span class="text-[15px] text-apple-charcoal">{{ __('messages.dashboard.label_phone') }}</span>
                            @if($lead->phone)
                            <a href="tel:{{ $lead->phone }}" class="text-[15px] font-medium text-apple-blue hover:underline select-text">{{ $lead->phone }}</a>
                            @else
                            <span class="text-[15px] text-apple-gray">-</span>
                            @endif
                        </div>
                        <div class="flex justify-between items-center px-4 py-3.5 gap-4">
                            <span class="text-[15px] text-apple-charcoal">{{ __('messages.dashboard.label_company') }}</span>
                            <span class="text-[15px] font-medium text-apple-charcoal text-right">{{ $lead->company ?: '-' }}</span>
                        </div>
                    </div>
                </section>

                <!-- Interest (iOS grouped list) -->
                <section>
                    <h3 class="text-[13px] font-semibold uppercase tracking-wider text-apple-gray mb-2 px-1">{{ __('messages.dashboard.label_interest') }}</h3>
                    <div class="panel rounded-[1.25rem] overflow-hidden divide-y divide-black/[0.06]">
                        <div class="flex justify-between items-center px-4 py-3.5 gap-4">
                            <span class="text-[15px] text-apple-charcoal">{{ __('messages.dashboard.label_service') }}</span>
                            <span class="text-[15px] font-medium text-apple-charcoal text-right">{{ $lead->service_name ?: '-' }}</span>
                        </div>
                        <div class="flex justify-between items-center px-4 py-3.5 gap-4">
                            <span class="text-[15px] text-apple-charcoal">{{ __('messages.dashboard.label_industry') }}</span>
                            <span class="text-[15px] font-medium text-apple-charcoal text-right">{{ $lead->industry_name ?: '-' }}</span>
                        </div>
                        @if($lead->pricing_tier)
                        <div class="flex justify-between items-center px-4 py-3.5 gap-4">
                            <span class="text-[15px] text-apple-charcoal">{{ __('messages.dashboard.package_selected') }}</span>
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-md text-[12px] font-semibold uppercase tracking-wide
                                @if($lead->pricing_tier === 'Scale') bg-apple-purple/10 text-apple-purple
                                @elseif($lead->pricing_tier === 'Growth') bg-criazo-primary/10 text-criazo-primary
                                @else bg-black/[0.06] text-apple-zinc
                                @endif
                            ">{{ $lead->pricing_tier }}{{ $lead->pricing_value ? ' · ' . $lead->pricing_value : '' }}</span>
                        </div>
                        @endif
                        <div class="flex justify-between items-center px-4 py-3.5 gap-4">
                            <span class="text-[15px] text-apple-charcoal">{{ __('messages.dashboard.label_budget') }}</span>
                            <span class="text-[15px] font-medium text-apple-charcoal">{{ $lead->budget ?: '-' }}</span>
                        </div>
                        <div class="flex justify-between items-center px-4 py-3.5 gap-4">
                            <span class="text-[15px] text-apple-charcoal">{{ __('messages.dashboard.label_timeline') }}</span>
                            <span class="text-[15px] font-medium text-apple-charcoal">{{ $lead->timeline ?: '-' }}</span>
                        </div>
                    </div>
                </section>
            </div>

            <div class="grid md:grid-cols-2 gap-6 mt-6">
                <!-- Tracking -->
                <div class="bg-white rounded-criazo-lg p-6 shadow-criazo border border-black/[0.04]">
                    <h3 class="text-[14px] font-semibold text-black/80 tracking-wide mb-5">{{ __('messages.dashboard.label_tracking') }}</h3>
                    <div class="space-y-4 text-[13px]">
                        <div class="bg-black/[0.02] p-3 rounded-xl border border-black/5">
                            <span class="text-[11px] font-semibold uppercase tracking-wider text-black/40 block mb-1">{{ __('messages.dashboard.source_page') }}</span>
                            @if($lead->source_page)
                                @php
                                    $sourcePageUrl = \App\Helpers\LeadTrackingHelper::absoluteUrl($lead->source_page);
                                    $sourceBreadcrumbs = \App\Helpers\LeadTrackingHelper::urlToBreadcrumbs($lead->source_page);
                                @endphp
                                @if(count($sourceBreadcrumbs) > 0)
                                    <div class="flex flex-wrap items-center gap-1.5 text-black/80 font-medium">
                                        @foreach($sourceBreadcrumbs as $crumb)
                                            @if(!$loop->first)<span class="text-black/30">›</span>@endif
                                            @if($crumb['url'])
                                                <a href="{{ $crumb['url'] }}" target="_blank" rel="noopener noreferrer" class="text-criazo-primary hover:underline truncate max-w-[200px] sm:max-w-none" title="{{ $lead->source_page }}">{{ $crumb['label'] }}</a>
                                            @else
                                                <span class="truncate max-w-[200px] sm:max-w-none">{{ $crumb['label'] }}</span>
                                            @endif
                                        @endforeach
                                    </div>
                                    <a href="{{ $sourcePageUrl }}" target="_blank" rel="noopener noreferrer" class="text-[11px] text-black/40 hover:text-criazo-primary mt-1 block truncate max-w-full select-text" title="{{ $sourcePageUrl }}">{{ $sourcePageUrl }}</a>
                                @else
                                    <a href="{{ $sourcePageUrl }}" target="_blank" rel="noopener noreferrer" class="text-criazo-primary font-medium hover:underline truncate block text-[13px] select-text" title="{{ $sourcePageUrl }}">{{ $sourcePageUrl }}</a>
                                @endif
                            @else
                                <div class="text-black/80 font-medium">-</div>
                            @endif
                        </div>

                        <div class="bg-black/[0.02] p-3 rounded-xl border border-black/5">
                            <span class="text-[11px] font-semibold uppercase tracking-wider text-black/40 block mb-1">{{ __('messages.dashboard.label_referrer') }}</span>
                            @if($lead->referrer)
                                @php
                                    $referrerUrl = \App\Helpers\LeadTrackingHelper::absoluteUrl($lead->referrer);
                                    $referrerBreadcrumbs = \App\Helpers\LeadTrackingHelper::urlToBreadcrumbs($lead->referrer);
                                @endphp
                                @if(count($referrerBreadcrumbs) > 0)
                                    <div class="flex flex-wrap items-center gap-1.5 text-black/80 font-medium">
                                        @foreach($referrerBreadcrumbs as $crumb)
                                            @if(!$loop->first)<span class="text-black/30">›</span>@endif
                                            @if($crumb['url'])
                                                <a href="{{ $crumb['url'] }}" target="_blank" rel="noopener noreferrer" class="text-criazo-primary hover:underline truncate max-w-[200px] sm:max-w-none" title="{{ $lead->referrer }}">{{ $crumb['label'] }}</a>
                                            @else
                                                <span class="truncate max-w-[200px] sm:max-w-none">{{ $crumb['label'] }}</span>
                                            @endif
                                        @endforeach
                                    </div>
                                    <a href="{{ $referrerUrl }}" target="_blank" rel="noopener noreferrer" class="text-[11px] text-black/40 hover:text-criazo-primary mt-1 block truncate max-w-full select-text" title="{{ $referrerUrl }}">{{ $referrerUrl }}</a>
                                @else
                                    <a href="{{ $referrerUrl }}" target="_blank" rel="noopener noreferrer" class="text-criazo-primary font-medium hover:underline truncate block text-[13px] select-text" title="{{ $referrerUrl }}">{{ $referrerUrl }}</a>
                                @endif
                            @else
                                <div class="text-black/80 font-medium">-</div>
                            @endif
                        </div>

                        <div class="grid grid-cols-2 gap-4 pt-2">
                            <div><span class="text-[11px] font-semibold uppercase tracking-wider text-black/40 block mb-0.5">{{ __('messages.dashboard.source_button') }}</span><div class="font-semibold text-black/80">{{ $lead->source_button ?: '-' }}</div></div>
                            <div><span class="text-[11px] font-semibold uppercase tracking-wider text-black/40 block mb-0.5">{{ __('messages.dashboard.label_referrer_domain') }}</span><div class="font-semibold text-black/80">{{ $lead->referrer_domain ?: '-' }}</div></div>
                            <div><span class="text-[11px] font-semibold uppercase tracking-wider text-black/40 block mb-0.5">IP</span><div class="font-semibold text-black/80">{{ $lead->ip_address ?: '-' }}</div></div>
                            <div><span class="text-[11px] font-semibold uppercase tracking-wider text-black/40 block mb-0.5">{{ __('messages.dashboard.label_device') }}</span><div class="font-semibold text-black/80 capitalize">{{ $lead->device_type ?: '-' }}</div></div>
                            <div><span class="text-[11px] font-semibold uppercase tracking-wider text-black/40 block mb-0.5">{{ __('messages.dashboard.label_browser') }}</span><div class="font-semibold text-black/80">{{ $lead->browser ?: '-' }}</div></div>
                            <div><span class="text-[11px] font-semibold uppercase tracking-wider text-black/40 block mb-0.5">{{ __('messages.dashboard.label_os') }}</span><div class="font-semibold text-black/80">{{ $lead->os ?: '-' }}</div></div>
                            <div><span class="text-[11px] font-semibold uppercase tracking-wider text-black/40 block mb-0.5">{{ __('messages.dashboard.label_country') }}</span><div class="font-semibold text-black/80">{{ $lead->country ?: '-' }}</div></div>
                            <div><span class="text-[11px] font-semibold uppercase tracking-wider text-black/40 block mb-0.5">{{ __('messages.dashboard.label_city') }}</span><div class="font-semibold text-black/80">{{ $lead->city ?: '-' }}</div></div>
                        </div>
                    </div>
                </div>

                <!-- Timeline & Activity -->
                <div class="bg-white rounded-criazo-lg p-6 shadow-criazo border border-black/[0.04] flex flex-col">
                    <h3 class="text-[14px] font-semibold text-black/80 tracking-wide mb-5">{{ __('messages.dashboard.section_timeline') }}</h3>
                    <div class="space-y-4 flex-1 relative">
                        <div class="absolute left-[9px] top-2 bottom-2 w-0.5 bg-black/5 rounded-full z-0"></div>

                        <div class="relative z-10 flex items-start gap-4">
                            <div class="w-5 h-5 rounded-full bg-blue-100 border-2 border-white flex items-center justify-center flex-shrink-0 mt-0.5 shadow-sm">
                                <div class="w-2 h-2 rounded-full bg-blue-500"></div>
                            </div>
                            <div class="flex-1 pb-4">
                                <div class="text-[14px] font-semibold text-black/80">{{ __('messages.dashboard.label_created') }}</div>
                                <div class="text-[13px] text-black/50 mt-0.5">{{ $lead->created_at->format('M d, Y · H:i') }}</div>
                            </div>
                        </div>

                        @if($lead->submitted_at)
                        <div class="relative z-10 flex items-start gap-4">
                            <div class="w-5 h-5 rounded-full bg-green-100 border-2 border-white flex items-center justify-center flex-shrink-0 mt-0.5 shadow-sm">
                                <div class="w-2 h-2 rounded-full bg-green-500"></div>
                            </div>
                            <div class="flex-1 pb-4">
                                <div class="text-[14px] font-semibold text-black/80">{{ __('messages.dashboard.label_submitted') }}</div>
                                <div class="text-[13px] text-black/50 mt-0.5">{{ $lead->submitted_at->format('M d, Y · H:i') }}</div>
                            </div>
                        </div>
                        @endif

                        <div class="relative z-10 flex items-start gap-4">
                            <div class="w-5 h-5 rounded-full bg-purple-100 border-2 border-white flex items-center justify-center flex-shrink-0 mt-0.5 shadow-sm">
                                <div class="w-2 h-2 rounded-full bg-purple-500"></div>
                            </div>
                            <div class="flex-1 pb-4">
                                <div class="text-[14px] font-semibold text-black/80">{{ __('messages.dashboard.last_activity') }}</div>
                                <div class="text-[13px] text-black/50 mt-0.5">{{ $lead->last_interaction_at?->format('M d, Y · H:i') ?: '-' }}</div>
                            </div>
                        </div>

                        @if($lead->events->count() > 0)
                        <div class="relative z-10 mt-2 pt-2">
                            <h4 class="text-[11px] font-semibold uppercase tracking-wider text-black/40 mb-3 ml-9">{{ __('messages.dashboard.activity_log') }}</h4>
                            <div class="space-y-3 max-h-48 overflow-y-auto pr-2 text-[13px]">
                                @foreach($lead->events->sortByDesc('created_at')->take(10) as $event)
                                <div class="flex items-start gap-3 ml-9 bg-black/[0.02] p-3 rounded-lg border border-black/5">
                                    <span class="text-black/40 flex-shrink-0 text-lg leading-none pt-0.5">{{ $event->event_icon }}</span>
                                    <div class="min-w-0 flex-1">
                                        <div class="font-semibold text-black/80">{{ $event->event_label }}</div>
                                        @if($event->event_source)<div class="text-[12px] text-black/50 mt-0.5">{{ Str::limit($event->event_source, 30) }}</div>@endif
                                    </div>
                                    <span class="text-[11px] font-medium text-black/40 flex-shrink-0 whitespace-nowrap pt-0.5">{{ $event->created_at->diffForHumans(null, true) }}</span>
                                </div>
                                @endforeach
                            </div>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
            </div>
        </main>
    </div>
</div>

    <script>
        async function updateStatus(status) {
            try {
                const r = await fetch('{{ route('dashboard.leads.update-status', $lead) }}', {
                    method: 'PATCH',
                    headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content },
                    body: JSON.stringify({ status }),
                });
                if (r.ok) window.location.reload();
            } catch (e) { console.error(e); }
        }
    </script>
    @include('dashboard.partials.mobile-nav')
</body>
</html>