<x-layouts.admin :title="__('Homepage Leads')" :subtitle="__('Visitors captured by the AI agent on your landing page')">
    <div class="space-y-6">

        {{-- Stat tiles --}}
        <div class="grid grid-cols-2 md:grid-cols-5 gap-3">
            @php
                $tiles = [
                    ['label' => __('Total'),     'value' => $total,                                'color' => 'brand'],
                    ['label' => __('New'),       'value' => $counts[\App\Models\HomepageLead::STATUS_NEW]       ?? 0, 'color' => 'info'],
                    ['label' => __('Contacted'), 'value' => $counts[\App\Models\HomepageLead::STATUS_CONTACTED] ?? 0, 'color' => 'warning'],
                    ['label' => __('Qualified'), 'value' => $counts[\App\Models\HomepageLead::STATUS_QUALIFIED] ?? 0, 'color' => 'success'],
                    ['label' => __('Closed'),    'value' => $counts[\App\Models\HomepageLead::STATUS_CLOSED]    ?? 0, 'color' => 'muted'],
                ];
            @endphp
            @foreach($tiles as $t)
                <div class="panel p-4">
                    <p class="text-[10px] font-bold uppercase tracking-wider text-muted">{{ $t['label'] }}</p>
                    <p class="mt-1 text-2xl font-extrabold text-ink">{{ number_format((int) $t['value']) }}</p>
                </div>
            @endforeach
        </div>

        {{-- Filters + search --}}
        <div class="panel p-4">
            <form method="GET" action="{{ route('admin.homepage-leads.index') }}" class="flex flex-col sm:flex-row gap-3 sm:items-center">
                <div class="flex-1">
                    <input type="text" name="q" value="{{ $search }}" placeholder="{{ __('Search name, email, or company…') }}"
                           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">
                </div>
                <div class="flex items-center gap-2">
                    <select name="status" class="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">
                        <option value="">{{ __('All statuses') }}</option>
                        @foreach(\App\Models\HomepageLead::STATUSES as $s)
                            <option value="{{ $s }}" @selected($status === $s)>{{ ucfirst($s) }}</option>
                        @endforeach
                    </select>
                    <button type="submit" class="btn-primary">{{ __('Filter') }}</button>
                    @if($search !== '' || $status !== '')
                        <a href="{{ route('admin.homepage-leads.index') }}" class="text-xs font-semibold text-muted hover:text-brand transition">
                            {{ __('Reset') }}
                        </a>
                    @endif
                </div>
                <a href="{{ route('admin.homepage-leads.export') }}" class="inline-flex items-center gap-1.5 px-4 py-2.5 text-xs font-semibold text-muted border border-border rounded-xl hover:border-brand/40 hover:text-ink transition">
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 10v6m0 0l-3-3m3 3l3-3M3 17a2 2 0 002 2h14a2 2 0 002-2"/></svg>
                    {{ __('Export CSV') }}
                </a>
            </form>
        </div>

        {{-- Leads table --}}
        <div class="panel overflow-hidden">
            @if($leads->isEmpty())
                <div class="p-12 text-center">
                    <div class="w-12 h-12 mx-auto rounded-xl bg-violet-500/10 text-violet-500 flex items-center justify-center">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="1.6" 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>
                    <p class="mt-3 text-sm font-semibold text-ink">{{ __('No leads yet') }}</p>
                    <p class="mt-1 text-xs text-muted max-w-sm mx-auto">
                        {{ __('Visitors who chat with the AI agent on your homepage will appear here. Make sure the Agent Homepage theme is active under Frontend Settings.') }}
                    </p>
                    <a href="{{ route('admin.frontend-settings.index') }}" class="mt-4 inline-flex items-center gap-1 text-xs font-semibold text-brand hover:underline">
                        {{ __('Open Frontend Settings') }} →
                    </a>
                </div>
            @else
                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead class="bg-surface-2 text-muted">
                            <tr class="text-left">
                                <th class="px-4 py-3 text-[10px] font-bold uppercase tracking-wider">{{ __('Visitor') }}</th>
                                <th class="px-4 py-3 text-[10px] font-bold uppercase tracking-wider">{{ __('Use case') }}</th>
                                <th class="px-4 py-3 text-[10px] font-bold uppercase tracking-wider">{{ __('First message') }}</th>
                                <th class="px-4 py-3 text-[10px] font-bold uppercase tracking-wider">{{ __('Msgs') }}</th>
                                <th class="px-4 py-3 text-[10px] font-bold uppercase tracking-wider">{{ __('Status') }}</th>
                                <th class="px-4 py-3 text-[10px] font-bold uppercase tracking-wider">{{ __('When') }}</th>
                                <th class="px-4 py-3 text-[10px] font-bold uppercase tracking-wider text-right">{{ __('Action') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-border">
                            @foreach($leads as $lead)
                                @php
                                    $statusColors = [
                                        'new'       => 'bg-info/10 text-info',
                                        'contacted' => 'bg-warning/10 text-warning',
                                        'qualified' => 'bg-success/10 text-success',
                                        'closed'    => 'bg-surface-2 text-muted',
                                        'spam'      => 'bg-danger/10 text-danger',
                                    ];
                                    $statusClass = $statusColors[$lead->status] ?? 'bg-surface-2 text-muted';
                                @endphp
                                <tr class="hover:bg-surface-2/50 transition">
                                    <td class="px-4 py-3">
                                        <a href="{{ route('admin.homepage-leads.show', $lead) }}" class="font-semibold text-ink hover:text-brand transition">
                                            {{ $lead->display_name }}
                                        </a>
                                        <p class="text-xs text-muted truncate max-w-[220px]">
                                            {{ $lead->email ?: '—' }}
                                            @if($lead->company) · {{ $lead->company }} @endif
                                        </p>
                                    </td>
                                    <td class="px-4 py-3">
                                        <span class="text-xs text-muted">{{ $lead->use_case ? ucfirst($lead->use_case) : '—' }}</span>
                                    </td>
                                    <td class="px-4 py-3">
                                        <p class="text-xs text-muted truncate max-w-[260px]">{{ \Illuminate\Support\Str::limit($lead->first_message ?: '—', 90) }}</p>
                                    </td>
                                    <td class="px-4 py-3">
                                        <span class="text-xs font-semibold text-ink">{{ $lead->message_count }}</span>
                                    </td>
                                    <td class="px-4 py-3">
                                        <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider {{ $statusClass }}">
                                            {{ $lead->status }}
                                        </span>
                                    </td>
                                    <td class="px-4 py-3">
                                        <span class="text-xs text-muted" title="{{ $lead->created_at }}">{{ $lead->created_at?->diffForHumans() }}</span>
                                    </td>
                                    <td class="px-4 py-3 text-right">
                                        <a href="{{ route('admin.homepage-leads.show', $lead) }}" class="inline-flex items-center gap-1 text-xs font-semibold text-brand hover:underline">
                                            {{ __('Open') }} →
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <div class="border-t border-border px-4 py-3">
                    {{ $leads->links() }}
                </div>
            @endif
        </div>
    </div>
</x-layouts.admin>
