@extends('admin.layouts.app')

@section('title', 'Manage Responses')
@section('subtitle', 'Review new leads, track late replies, and keep every contact conversation organized.')

@section('content')
    @php
        $activeStatus = request('status', 'all');
    @endphp

    <div class="admin-grid" x-data="{ selected: [] }">
        <div class="admin-card">
            <div class="admin-toolbar">
                <div>
                    <p class="admin-section-title">Response Queue</p>
                    <p class="admin-section-subtitle">{{ $contacts->total() }} messages in the current view.</p>
                </div>
                <div class="flex flex-wrap gap-2">
                    <a href="{{ route('admin.contacts.index') }}" class="admin-button admin-button--secondary">All messages</a>
                    <a href="{{ route('admin.contacts.index', ['status' => 'late']) }}" class="admin-button admin-button--ghost">Late replies</a>
                </div>
            </div>

            <div class="admin-response-tabs admin-response-tabs--compact">
                @php
                    $tabs = [
                        ['key' => 'all', 'label' => 'All', 'value' => array_sum($statusSummary)],
                        ['key' => 'new', 'label' => 'New', 'value' => $statusSummary['new']],
                        ['key' => 'read', 'label' => 'In Review', 'value' => $statusSummary['read']],
                        ['key' => 'late', 'label' => 'Late', 'value' => $statusSummary['late']],
                        ['key' => 'replied', 'label' => 'Replied', 'value' => $statusSummary['replied']],
                        ['key' => 'archived', 'label' => 'Archived', 'value' => $statusSummary['archived']],
                    ];
                @endphp

                @foreach($tabs as $tab)
                    <a
                        href="{{ $tab['key'] === 'all' ? route('admin.contacts.index') : route('admin.contacts.index', ['status' => $tab['key']]) }}"
                        class="admin-response-tab {{ $activeStatus === $tab['key'] ? 'is-active' : '' }} admin-response-tab--{{ $tab['key'] === 'read' ? 'read' : $tab['key'] }}"
                    >
                        <span>{{ $tab['label'] }}</span>
                        <strong>{{ $tab['value'] }}</strong>
                    </a>
                @endforeach
            </div>

            <form method="GET" class="mt-5 admin-form-grid admin-form-grid--three">
                <input type="hidden" name="status" value="{{ request('status') }}">

                <div class="admin-field">
                    <label for="contact-search">Search</label>
                    <input id="contact-search" type="text" name="search" value="{{ request('search') }}" placeholder="Search name, email, or message">
                </div>

                <div class="admin-field">
                    <label for="contact-status">Status</label>
                    <select id="contact-status" name="status">
                        <option value="">All statuses</option>
                        <option value="new" @selected(request('status') === 'new')>New</option>
                        <option value="read" @selected(request('status') === 'read')>In Review</option>
                        <option value="late" @selected(request('status') === 'late')>Late</option>
                        <option value="replied" @selected(request('status') === 'replied')>Replied</option>
                        <option value="archived" @selected(request('status') === 'archived')>Archived</option>
                    </select>
                </div>

                <div class="flex flex-wrap gap-3">
                    <button type="submit" class="admin-button">Apply filters</button>
                    <a href="{{ route('admin.contacts.index') }}" class="admin-button admin-button--secondary">Reset</a>
                </div>
            </form>
        </div>

        <div class="admin-card">
            <div class="admin-toolbar">
                <div>
                    <p class="admin-section-title">Messages</p>
                    <p class="admin-section-subtitle">Open a record to review it, add notes, mark it replied, or delete it.</p>
                </div>
                <div class="flex flex-wrap gap-2">
                    <form method="POST" action="{{ route('admin.contacts.bulk-status') }}">
                        @csrf
                        <input type="hidden" name="ids" :value="selected.join(',')">
                        <button type="submit" name="status" value="read" class="admin-button admin-button--secondary" :disabled="selected.length === 0">Mark read</button>
                    </form>
                    <form method="POST" action="{{ route('admin.contacts.bulk-status') }}">
                        @csrf
                        <input type="hidden" name="ids" :value="selected.join(',')">
                        <button type="submit" name="status" value="replied" class="admin-button" :disabled="selected.length === 0">Mark replied</button>
                    </form>
                    <form method="POST" action="{{ route('admin.contacts.bulk-status') }}">
                        @csrf
                        <input type="hidden" name="ids" :value="selected.join(',')">
                        <button type="submit" name="status" value="archived" class="admin-button admin-button--warning" :disabled="selected.length === 0">Archive</button>
                    </form>
                    <form method="POST" action="{{ route('admin.contacts.bulk-delete') }}" onsubmit="return confirm('Delete the selected responses? This cannot be undone.');">
                        @csrf
                        <input type="hidden" name="ids" :value="selected.join(',')">
                        <button type="submit" class="admin-button admin-button--danger" :disabled="selected.length === 0">Delete selected</button>
                    </form>
                </div>
            </div>

            <div class="admin-response-table">
                <table>
                    <thead>
                        <tr>
                            <th><input type="checkbox" @click="selected = $event.target.checked ? @js($contacts->pluck('id')->all()) : []"></th>
                            <th>Visitor</th>
                            <th>Message</th>
                            <th>Received</th>
                            <th>Status</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($contacts as $contact)
                            @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
                            <tr>
                                <td><input type="checkbox" value="{{ $contact->id }}" x-model="selected"></td>
                                <td>
                                    <div class="admin-table-person">
                                        <strong>{{ $contact->name }}</strong>
                                        <span>{{ $contact->email }}</span>
                                        @if($contact->phone)
                                            <span>{{ $contact->phone }}</span>
                                        @endif
                                        <span>{{ $contact->source === 'support_chat' ? 'Support chat' : 'Contact form' }}</span>
                                    </div>
                                </td>
                                <td>{{ \Illuminate\Support\Str::limit($contact->message, 90) }}</td>
                                <td>{{ $contact->created_at->format('M j, Y g:i A') }}</td>
                                <td><span class="admin-badge admin-badge--{{ $statusClass }}">{{ $statusLabel }}</span></td>
                                <td>
                                    <div class="flex flex-wrap gap-2 justify-end">
                                        <a href="{{ route('admin.contacts.show', $contact) }}" class="admin-button admin-button--ghost">Open</a>
                                        <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</button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="admin-empty">No contact submissions match the current filters.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="mt-6">
                {{ $contacts->links() }}
            </div>
        </div>
    </div>
@endsection
