@extends('layouts.app')

@section('title', 'Leads')

@section('topbar-actions')
    <form method="POST" action="{{ route('leads.sync') }}">
        @csrf
        <button type="submit" class="btn btn-primary">↻ Sync Leads</button>
    </form>
@endsection

@section('content')
<div class="grid grid-4 mb-4" style="gap:12px;">
    <div class="stat-card blue">
        <div class="stat-label">Total</div>
        <div class="stat-value">{{ number_format($stats['total']) }}</div>
    </div>
    <div class="stat-card green">
        <div class="stat-label">Calls</div>
        <div class="stat-value">{{ number_format($stats['calls']) }}</div>
    </div>
    <div class="stat-card amber">
        <div class="stat-label">Messages</div>
        <div class="stat-value">{{ number_format($stats['messages']) }}</div>
    </div>
    <div class="stat-card violet">
        <div class="stat-label">New</div>
        <div class="stat-value">{{ number_format($stats['new']) }}</div>
    </div>
</div>

<div class="card mb-4 card-sm">
    <form method="GET" class="form-row" style="align-items:flex-end;">
        <div class="form-group" style="margin:0; flex:2;">
            <input type="text" name="search" class="form-control" placeholder="Search by name, phone, business…" value="{{ request('search') }}">
        </div>
        <div class="form-group" style="margin:0;">
            <select name="type" class="form-control">
                <option value="">All Types</option>
                <option value="PHONE_CALL" {{ request('type') === 'PHONE_CALL' ? 'selected' : '' }}>📞 Phone Call</option>
                <option value="MESSAGE"    {{ request('type') === 'MESSAGE'    ? 'selected' : '' }}>💬 Message</option>
                <option value="BOOKING"    {{ request('type') === 'BOOKING'    ? 'selected' : '' }}>📅 Booking</option>
            </select>
        </div>
        <div class="form-group" style="margin:0;">
            <select name="status" class="form-control">
                <option value="">All Statuses</option>
                @foreach(['NEW','ACTIVE','BOOKED','DECLINED','EXPIRED','DISABLED'] as $s)
                    <option value="{{ $s }}" {{ request('status') === $s ? 'selected' : '' }}>{{ $s }}</option>
                @endforeach
            </select>
        </div>
        <button type="submit" class="btn btn-primary" style="height:38px;">Filter</button>
        <a href="{{ route('leads.index') }}" class="btn btn-secondary" style="height:38px;">Clear</a>
    </form>
</div>

<div class="table-wrap">
    <table>
        <thead>
            <tr>
                <th>Consumer</th>
                <th>Type</th>
                <th>Status</th>
                <th>Duration / Message</th>
                <th>Business</th>
                <th>Location</th>
                <th>Date</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            @forelse($leads as $lead)
            <tr>
                <td>
                    <div class="font-semibold">{{ $lead->consumer_name ?? 'Unknown' }}</div>
                    <div class="text-muted">{{ $lead->consumer_phone_number }}</div>
                </td>
                <td>
                    @if($lead->isCall())
                        <span class="badge badge-blue">📞 Call</span>
                    @elseif($lead->isMessage())
                        <span class="badge badge-green">💬 Message</span>
                    @elseif($lead->isBooking())
                        <span class="badge badge-violet">📅 Booking</span>
                    @else
                        <span class="badge badge-gray">{{ $lead->lead_type }}</span>
                    @endif
                </td>
                <td>
                    @php
                        $statusColors = ['NEW'=>'blue','ACTIVE'=>'green','BOOKED'=>'violet','DECLINED'=>'red','EXPIRED'=>'gray','DISABLED'=>'gray'];
                        $color = $statusColors[$lead->lead_status] ?? 'gray';
                    @endphp
                    <span class="badge badge-{{ $color }}">{{ $lead->lead_status }}</span>
                </td>
                <td>
                    @if($lead->isCall())
                        <span class="text-muted">⏱ {{ $lead->formatted_duration }}</span>
                    @elseif($lead->message_text)
                        <span class="truncate text-sm" style="max-width:180px;display:block;">{{ Str::limit($lead->message_text, 60) }}</span>
                    @else
                        <span class="text-muted">—</span>
                    @endif
                </td>
                <td class="text-sm">{{ $lead->business_name ?? '—' }}</td>
                <td class="text-muted text-sm">{{ $lead->geo_location ?? '—' }}</td>
                <td class="text-muted text-sm">{{ $lead->lead_created_at?->format('M j, Y') ?? '—' }}</td>
                <td><a href="{{ route('leads.show', $lead) }}" class="btn btn-secondary btn-sm">View</a></td>
            </tr>
            @empty
            <tr>
                <td colspan="8" style="text-align:center; padding: 40px; color: #94a3b8;">
                    No leads found. Adjust your filters or sync from Google LSA.
                </td>
            </tr>
            @endforelse
        </tbody>
    </table>
</div>

<div class="pagination">
    {{ $leads->links('pagination::simple-default') }}
</div>
@endsection