@extends('layouts.app')

@section('title', 'Lead — ' . ($lead->consumer_name ?? 'Unknown'))

@section('topbar-actions')
    <a href="{{ route('leads.index') }}" class="btn btn-secondary">← Back to Leads</a>
@endsection

@section('content')
<div class="grid grid-2" style="gap:24px; align-items:start;">

    {{-- Lead Details --}}
    <div>
        <div class="card mb-4">
            <div class="section-header">
                <div class="section-title">Lead Details</div>
                @if($lead->isCall() && $lead->call_recording_url)
                    <a href="{{ $lead->call_recording_url }}" target="_blank" class="btn btn-secondary btn-sm">🎙 Recording</a>
                @endif
            </div>

            <table style="width:100%; border-collapse:collapse;">
                @php
                    $rows = [
                        'Type'     => match($lead->lead_type) {
                            'PHONE_CALL' => '📞 Phone Call',
                            'MESSAGE'    => '💬 Message',
                            'BOOKING'    => '📅 Booking',
                            default      => $lead->lead_type,
                        },
                        'Status'   => $lead->lead_status,
                        'Consumer' => $lead->consumer_name ?? '—',
                        'Phone'    => $lead->consumer_phone_number ?? '—',
                        'Business' => $lead->business_name ?? '—',
                        'Location' => $lead->geo_location ?? '—',
                        'Locale'   => $lead->locale ?? '—',
                        'Created'  => $lead->lead_created_at?->format('M j, Y g:i A') ?? '—',
                    ];
                    if ($lead->isCall()) {
                        $rows['Call Duration'] = $lead->formatted_duration;
                    }
                    if ($lead->charge_amount) {
                        $rows['Charge'] = $lead->currency_code . ' ' . number_format($lead->charge_amount, 2);
                    }
                @endphp
                @foreach($rows as $label => $value)
                <tr>
                    <td style="padding: 10px 0; font-size:13px; font-weight:600; color:#64748b; width:35%; border-top: 1px solid #f1f5f9;">{{ $label }}</td>
                    <td style="padding: 10px 0; font-size:14px; border-top: 1px solid #f1f5f9;">{{ $value }}</td>
                </tr>
                @endforeach
            </table>
        </div>

        @if($lead->message_text)
        <div class="card mb-4">
            <div class="section-title mb-4">Message</div>
            <p style="font-size:14px; line-height:1.6; color:#374151;">{{ $lead->message_text }}</p>
        </div>
        @endif

        @if($lead->note)
        <div class="card mb-4">
            <div class="section-title mb-4">Note</div>
            <p style="font-size:14px; line-height:1.6; color:#374151;">{{ $lead->note }}</p>
        </div>
        @endif

        {{-- Update Status Form --}}
        <div class="card">
            <div class="section-title mb-4">Update Status</div>
            <form method="POST" action="{{ route('leads.update-status', $lead) }}">
                @csrf @method('PATCH')
                <div class="form-group">
                    <label class="form-label">New Status</label>
                    <select name="status" class="form-control">
                        @foreach(['NEW','ACTIVE','BOOKED','DECLINED','EXPIRED','DISABLED'] as $s)
                            <option value="{{ $s }}" {{ $lead->lead_status === $s ? 'selected' : '' }}>{{ $s }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">Note (optional)</label>
                    <textarea name="note" class="form-control" rows="3" placeholder="Add a note…">{{ $lead->note }}</textarea>
                </div>
                <button type="submit" class="btn btn-primary">Update</button>
            </form>
        </div>
    </div>

    {{-- Conversations --}}
    <div>
        <div class="card">
            <div class="section-header">
                <div class="section-title">Conversations ({{ $lead->conversations->count() }})</div>
            </div>

            @forelse($lead->conversations->sortBy('event_at') as $conv)
            <div style="margin-bottom: 16px; padding: 14px; border-radius: 10px; background: {{ $conv->isFromConsumer() ? '#eff6ff' : '#f0fdf4' }}; border: 1px solid {{ $conv->isFromConsumer() ? '#bfdbfe' : '#bbf7d0' }};">
                <div class="flex items-center justify-between mb-4" style="gap:8px;">
                    <div class="flex items-center gap-2">
                        @if($conv->type === 'PHONE_CALLING')
                            <span>📞</span>
                        @elseif($conv->type === 'MESSAGE')
                            <span>💬</span>
                        @else
                            <span>📧</span>
                        @endif
                        <span class="badge {{ $conv->isFromConsumer() ? 'badge-blue' : 'badge-green' }}" style="font-size:11px;">
                            {{ $conv->participant_type ?? 'Unknown' }}
                        </span>
                    </div>
                    <span class="text-muted" style="font-size:12px;">{{ $conv->event_at?->format('M j, Y g:i A') ?? '—' }}</span>
                </div>
                @if($conv->message_text)
                    <p style="font-size:13px; color:#374151; line-height:1.5;">{{ $conv->message_text }}</p>
                @elseif($conv->call_duration_seconds)
                    <p style="font-size:13px; color:#374151;">⏱ {{ gmdate('i:s', $conv->call_duration_seconds) }} call</p>
                    @if($conv->call_recording_url)
                        <a href="{{ $conv->call_recording_url }}" target="_blank" class="btn btn-secondary btn-sm" style="margin-top:8px;">🎙 Listen</a>
                    @endif
                @else
                    <p class="text-muted">No content</p>
                @endif
            </div>
            @empty
            <p class="text-muted">No conversations recorded for this lead.</p>
            @endforelse
        </div>
    </div>
</div>
@endsection