<x-layouts.admin :title="$lead->display_name" :subtitle="__('Homepage Lead').' #'.$lead->id">
    <div class="space-y-6">

        <div class="flex items-center gap-2">
            <a href="{{ route('admin.homepage-leads.index') }}" class="text-xs font-semibold text-muted hover:text-brand transition inline-flex items-center gap-1">
                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/></svg>
                {{ __('Back to all leads') }}
            </a>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-[1fr_320px] gap-6">

            {{-- ── Left: Transcript ────────────────────────────── --}}
            <div class="panel p-5">
                <div class="flex items-center justify-between mb-4">
                    <div>
                        <h3 class="text-sm font-bold text-ink uppercase tracking-wider">{{ __('Conversation') }}</h3>
                        <p class="text-xs text-muted mt-0.5">
                            {{ $lead->message_count }} {{ __('messages') }}
                            @if($lead->last_message_at)
                                · {{ __('last activity') }} {{ $lead->last_message_at->diffForHumans() }}
                            @endif
                        </p>
                    </div>
                </div>

                @if(empty($lead->transcript))
                    <p class="text-sm text-muted py-12 text-center">{{ __('No messages exchanged yet.') }}</p>
                @else
                    <div class="space-y-3 max-h-[600px] overflow-y-auto pr-2">
                        @foreach($lead->transcript as $entry)
                            @php
                                $role = ($entry['role'] ?? '') === 'user' ? 'user' : 'agent';
                                $at   = ! empty($entry['at']) ? \Carbon\Carbon::parse($entry['at']) : null;
                            @endphp
                            <div class="flex items-end gap-2 {{ $role === 'user' ? 'justify-end' : '' }}">
                                @if($role !== 'user')
                                    <div class="w-7 h-7 rounded-lg bg-violet-500/15 text-violet-500 flex items-center justify-center shrink-0">
                                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.86 9.86 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg>
                                    </div>
                                @endif
                                <div class="max-w-[75%]">
                                    <div class="px-3.5 py-2.5 text-sm leading-relaxed whitespace-pre-wrap rounded-2xl
                                                {{ $role === 'user' ? 'bg-brand text-white rounded-br-sm' : 'bg-surface-2 text-ink rounded-bl-sm' }}">
                                        {{ $entry['content'] ?? '' }}
                                    </div>
                                    @if($at)
                                        <p class="text-[10px] text-muted mt-1 {{ $role === 'user' ? 'text-right' : '' }}">
                                            {{ $at->format('M j · g:i A') }}
                                        </p>
                                    @endif
                                </div>
                                @if($role === 'user')
                                    <div class="w-7 h-7 rounded-lg bg-brand/15 text-brand flex items-center justify-center shrink-0 font-bold text-xs">
                                        {{ strtoupper(substr($lead->name, 0, 1)) ?: '?' }}
                                    </div>
                                @endif
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>

            {{-- ── Right: Lead info + actions ─────────────────── --}}
            <div class="space-y-4">

                {{-- Visitor info --}}
                <div class="panel p-5">
                    <h3 class="text-xs font-bold text-muted uppercase tracking-wider mb-3">{{ __('Visitor') }}</h3>
                    <dl class="space-y-2.5 text-sm">
                        <div>
                            <dt class="text-xs text-muted">{{ __('Name') }}</dt>
                            <dd class="font-semibold text-ink">{{ $lead->name ?: '—' }}</dd>
                        </div>
                        <div>
                            <dt class="text-xs text-muted">{{ __('Email') }}</dt>
                            <dd class="text-ink break-all">
                                @if($lead->email)
                                    <a href="mailto:{{ $lead->email }}" class="text-brand hover:underline">{{ $lead->email }}</a>
                                @else
                                    —
                                @endif
                            </dd>
                        </div>
                        <div>
                            <dt class="text-xs text-muted">{{ __('Company') }}</dt>
                            <dd class="text-ink">{{ $lead->company ?: '—' }}</dd>
                        </div>
                        <div>
                            <dt class="text-xs text-muted">{{ __('Use case') }}</dt>
                            <dd class="text-ink">{{ $lead->use_case ? ucfirst($lead->use_case) : '—' }}</dd>
                        </div>
                        <div>
                            <dt class="text-xs text-muted">{{ __('Source page') }}</dt>
                            <dd class="text-ink text-xs break-all">{{ $lead->page_url ?: '—' }}</dd>
                        </div>
                        <div>
                            <dt class="text-xs text-muted">{{ __('Captured') }}</dt>
                            <dd class="text-ink text-xs">{{ $lead->created_at?->format('M j, Y · g:i A') }}</dd>
                        </div>
                    </dl>
                </div>

                {{-- Status --}}
                <div class="panel p-5">
                    <h3 class="text-xs font-bold text-muted uppercase tracking-wider mb-3">{{ __('Status') }}</h3>
                    <form method="POST" action="{{ route('admin.homepage-leads.status', $lead) }}">
                        @csrf
                        @method('PATCH')
                        <select name="status" class="w-full px-3 py-2.5 text-sm border border-border rounded-xl bg-surface focus:ring-2 focus:ring-brand/30 focus:border-brand/60 transition" onchange="this.form.submit()">
                            @foreach(\App\Models\HomepageLead::STATUSES as $s)
                                <option value="{{ $s }}" @selected($lead->status === $s)>{{ ucfirst($s) }}</option>
                            @endforeach
                        </select>
                    </form>
                </div>

                {{-- AI accounting --}}
                @if($lead->ai_provider)
                    <div class="panel p-5">
                        <h3 class="text-xs font-bold text-muted uppercase tracking-wider mb-3">{{ __('AI Usage') }}</h3>
                        <dl class="space-y-1.5 text-sm">
                            <div class="flex justify-between"><dt class="text-xs text-muted">{{ __('Provider') }}</dt><dd class="text-ink">{{ ucfirst($lead->ai_provider) }}</dd></div>
                            <div class="flex justify-between"><dt class="text-xs text-muted">{{ __('Model') }}</dt><dd class="text-ink font-mono text-xs">{{ $lead->ai_model }}</dd></div>
                            <div class="flex justify-between"><dt class="text-xs text-muted">{{ __('Tokens in') }}</dt><dd class="text-ink">{{ number_format($lead->ai_tokens_in) }}</dd></div>
                            <div class="flex justify-between"><dt class="text-xs text-muted">{{ __('Tokens out') }}</dt><dd class="text-ink">{{ number_format($lead->ai_tokens_out) }}</dd></div>
                            <div class="flex justify-between pt-2 border-t border-border mt-2">
                                <dt class="text-xs font-semibold text-ink">{{ __('Total cost') }}</dt>
                                <dd class="text-ink font-bold">${{ number_format((float) $lead->ai_total_cost, 4) }}</dd>
                            </div>
                        </dl>
                    </div>
                @endif

                {{-- Notes --}}
                <div class="panel p-5">
                    <h3 class="text-xs font-bold text-muted uppercase tracking-wider mb-3">{{ __('Internal notes') }}</h3>
                    <form method="POST" action="{{ route('admin.homepage-leads.notes', $lead) }}">
                        @csrf
                        @method('PATCH')
                        <textarea name="admin_notes" rows="4" maxlength="5000"
                                  placeholder="{{ __('Add follow-up notes only your team can see…') }}"
                                  class="w-full px-3 py-2.5 text-sm border border-border rounded-xl bg-surface focus:ring-2 focus:ring-brand/30 focus:border-brand/60 transition resize-none">{{ $lead->admin_notes }}</textarea>
                        <div class="mt-2 flex justify-end">
                            <button type="submit" class="btn-primary text-xs">{{ __('Save notes') }}</button>
                        </div>
                    </form>
                </div>

                {{-- Delete --}}
                <form method="POST" action="{{ route('admin.homepage-leads.destroy', $lead) }}"
                      onsubmit="return confirm('{{ __('Delete this lead and its full transcript? This cannot be undone.') }}')">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="w-full px-4 py-2.5 text-xs font-semibold text-danger border border-danger/30 hover:bg-danger/5 rounded-xl transition">
                        {{ __('Delete lead') }}
                    </button>
                </form>
            </div>
        </div>
    </div>
</x-layouts.admin>
