@extends('layouts.app')

@section('title', 'Conversation Detail')

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

@section('content')
<div class="grid grid-2" style="gap:24px; align-items:start;">
    <div class="card">
        <div class="section-title mb-4">Conversation Details</div>
        <table style="width:100%; border-collapse:collapse;">
            @php
                $rows = [
                    'ID'          => $conversation->google_conversation_id,
                    'Type'        => $conversation->type,
                    'Participant' => $conversation->participant_type ?? '—',
                    'Event Time'  => $conversation->event_at?->format('M j, Y g:i A') ?? '—',
                ];
                if ($conversation->call_duration_seconds) {
                    $rows['Call Duration'] = gmdate('i:s', $conversation->call_duration_seconds);
                }
            @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>

        @if($conversation->call_recording_url)
            <div class="mt-4">
                <a href="{{ $conversation->call_recording_url }}" target="_blank" class="btn btn-secondary">🎙 Listen to Recording</a>
            </div>
        @endif
    </div>

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

        @if($conversation->lead)
        <div class="card">
            <div class="section-title mb-4">Associated Lead</div>
            <p><strong>{{ $conversation->lead->consumer_name ?? 'Unknown' }}</strong></p>
            <p class="text-muted">{{ $conversation->lead->consumer_phone_number }}</p>
            <p class="text-muted">{{ $conversation->lead->lead_type }} — {{ $conversation->lead->lead_status }}</p>
            <div class="mt-4">
                <a href="{{ route('leads.show', $conversation->lead) }}" class="btn btn-primary btn-sm">View Lead</a>
            </div>
        </div>
        @endif
    </div>
</div>
@endsection