@extends('layouts.app')
@section('title', 'Search')
@section('page-title', 'Smart Search')

@section('content')
<div class="max-w-3xl mx-auto">
    <form action="{{ route('search') }}" method="GET" class="mb-8">
        <div class="relative">
            <svg class="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
            <input type="text" name="q" value="{{ $query }}" placeholder="Search conversations, contacts, topics..."
                autofocus
                class="w-full pl-12 pr-4 py-4 bg-slate-900 border border-white/10 rounded-2xl text-white placeholder-slate-500 text-lg focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-transparent transition">
            <button type="submit" class="absolute right-3 top-1/2 -translate-y-1/2 px-4 py-2 bg-brand-500 hover:bg-brand-600 text-white text-sm font-medium rounded-xl transition">
                Search
            </button>
        </div>
        <p class="text-xs text-slate-500 mt-2 ml-1">Powered by Claude AI — search naturally: "emails about payment", "WhatsApp from Ahmed"</p>
    </form>

    @if($query && count($results) === 0)
        <div class="text-center py-16">
            <p class="text-slate-400 text-lg mb-2">No results found</p>
            <p class="text-slate-600 text-sm">Try different keywords or connect more accounts.</p>
        </div>
    @elseif(count($results) > 0)
        <p class="text-sm text-slate-500 mb-4">{{ count($results) }} result{{ count($results) !== 1 ? 's' : '' }} for "{{ $query }}"</p>
        <div class="space-y-3">
            @foreach($results as $conv)
            <a href="{{ route('conversation.show', $conv->id) }}"
               class="flex items-start gap-4 p-5 bg-slate-900 border border-white/5 hover:border-brand-500/30 rounded-2xl transition group">
                <div class="w-11 h-11 rounded-full flex items-center justify-center font-bold shrink-0
                    {{ $conv->source === 'gmail' ? 'bg-red-500/20 text-red-400' : 'bg-green-500/20 text-green-400' }}">
                    {{ strtoupper(substr($conv->contact_name ?: '?', 0, 1)) }}
                </div>
                <div class="flex-1 min-w-0">
                    <div class="flex items-center gap-2 mb-1">
                        <p class="font-medium text-white">{{ $conv->contact_name ?: $conv->contact_identifier }}</p>
                        <span class="text-xs px-2 py-0.5 rounded-full {{ $conv->source === 'gmail' ? 'bg-red-500/10 text-red-400' : 'bg-green-500/10 text-green-400' }}">
                            {{ ucfirst($conv->source) }}
                        </span>
                        @if($conv->has_pending_reply)
                            <span class="text-xs px-2 py-0.5 rounded-full bg-amber-500/10 text-amber-400">Reply needed</span>
                        @endif
                    </div>
                    @if($conv->subject)
                        <p class="text-sm text-slate-400 mb-1">{{ $conv->subject }}</p>
                    @endif
                    <p class="text-sm text-slate-500 truncate">{{ $conv->snippet }}</p>
                </div>
                <p class="text-xs text-slate-600 shrink-0 mt-1">{{ $conv->last_message_at?->diffForHumans() }}</p>
            </a>
            @endforeach
        </div>
    @else
        <div class="text-center py-16">
            <div class="w-16 h-16 bg-brand-500/10 rounded-full flex items-center justify-center mx-auto mb-4">
                <svg class="w-8 h-8 text-brand-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
            </div>
            <p class="text-slate-400 font-medium mb-2">Search your conversations</p>
            <p class="text-slate-600 text-sm">Use natural language to find anything across Gmail and WhatsApp.</p>
        </div>
    @endif
</div>
@endsection