@extends('admin.layouts.app')

@section('title', 'Lead Detail')
@section('subtitle', 'Review the inquiry, update its status, and keep internal notes in one place.')

@section('content')
    @php
        $isLate = in_array($contact->status, ['new', 'read'], true) && $contact->created_at->lte(now()->subHours(24));
        $statusLabel = $isLate ? 'Late' : ($contact->status === 'read' ? 'In Review' : ucfirst($contact->status));
        $statusClass = $isLate ? 'late' : $contact->status;
    @endphp

    <div class="admin-fiverr-grid">
        <div class="admin-card admin-card--feature">
            <div class="admin-toolbar">
                <div>
                    <p class="admin-section-title">{{ $contact->name }}</p>
                    <p class="admin-section-subtitle">{{ $contact->email }} @if($contact->phone) | {{ $contact->phone }} @endif</p>
                </div>
                <span class="admin-badge admin-badge--{{ $statusClass }}">{{ $statusLabel }}</span>
            </div>

            <div class="admin-mini-stats">
                <div class="admin-mini-stat">
                    <span>Received</span>
                    <strong>{{ $contact->created_at->format('M j, Y g:i A') }}</strong>
                </div>
                <div class="admin-mini-stat">
                    <span>Source</span>
                    <strong>{{ $contact->source === 'support_chat' ? 'Support chat' : 'Contact form' }}</strong>
                </div>
                <div class="admin-mini-stat">
                    <span>Read at</span>
                    <strong>{{ $contact->read_at?->format('M j, Y g:i A') ?? 'Not yet' }}</strong>
                </div>
                <div class="admin-mini-stat">
                    <span>Replied at</span>
                    <strong>{{ $contact->replied_at?->format('M j, Y g:i A') ?? 'Not yet' }}</strong>
                </div>
            </div>

            <div class="admin-card admin-card--subtle mt-5">
                <p class="admin-section-title">Visitor message</p>
                <div class="mt-3 whitespace-pre-line text-sm text-slate-600">{{ $contact->message }}</div>
            </div>

            <div class="mt-5 flex flex-wrap gap-3">
                <a href="mailto:{{ $contact->email }}" class="admin-button">Reply by email</a>

                <form method="POST" action="{{ route('admin.contacts.mark-read', $contact) }}">
                    @csrf
                    @method('PUT')
                    <button type="submit" class="admin-button admin-button--secondary">Mark read</button>
                </form>
                <form method="POST" action="{{ route('admin.contacts.mark-replied', $contact) }}">
                    @csrf
                    @method('PUT')
                    <button type="submit" class="admin-button">Mark replied</button>
                </form>
                <form method="POST" action="{{ route('admin.contacts.archive', $contact) }}">
                    @csrf
                    @method('PUT')
                    <button type="submit" class="admin-button admin-button--warning">Archive</button>
                </form>
                <form method="POST" action="{{ route('admin.contacts.mark-unread', $contact) }}">
                    @csrf
                    @method('PUT')
                    <button type="submit" class="admin-button admin-button--ghost">Move back to new</button>
                </form>
                <form method="POST" action="{{ route('admin.contacts.destroy', $contact) }}" onsubmit="return confirm('Delete this response? This cannot be undone.');">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="admin-button admin-button--danger">Delete response</button>
                </form>
            </div>
        </div>

        <div class="admin-sidebar-stack">
            <div class="admin-card">
                <p class="admin-section-title">Internal notes</p>
                <p class="admin-section-subtitle">Keep follow-up context for the next response.</p>

                <form action="{{ route('admin.contacts.notes', $contact) }}" method="POST" class="mt-4 admin-form-grid">
                    @csrf
                    @method('PUT')
                    <div class="admin-field">
                        <label for="admin_notes">Notes</label>
                        <textarea id="admin_notes" name="admin_notes" rows="8">{{ old('admin_notes', $contact->admin_notes) }}</textarea>
                    </div>
                    <button type="submit" class="admin-button">Save notes</button>
                </form>
            </div>

            <div class="admin-card">
                <p class="admin-section-title">Response timing</p>
                <div class="admin-list mt-4">
                    <div class="admin-list__item">
                        <div>
                            <p class="font-semibold">Time since submission</p>
                            <p class="text-sm text-slate-500">{{ $contact->created_at->diffForHumans() }}</p>
                        </div>
                    </div>
                    <div class="admin-list__item">
                        <div>
                            <p class="font-semibold">Reply urgency</p>
                            <p class="text-sm text-slate-500">{{ $isLate ? 'Late - needs attention now' : 'Within response window' }}</p>
                        </div>
                    </div>
                    <div class="admin-list__item">
                        <div>
                            <p class="font-semibold">Notification sent</p>
                            <p class="text-sm text-slate-500">{{ $contact->notified_at?->format('M j, Y g:i A') ?? 'Not recorded yet' }}</p>
                        </div>
                    </div>
                    <div class="admin-list__item">
                        <div>
                            <p class="font-semibold">Page URL</p>
                            <p class="text-sm text-slate-500 break-all">{{ $contact->page_url ?: 'Not recorded' }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
