@extends('layouts.admin')

@section('title', 'Messages')
@section('header', 'Messages')

@section('content')
<!-- Filtre de date global -->
<x-date-filter :action="route('dashboard.messages.index')" />

<!-- Autres Filtres -->
<div class="mb-6 rounded-lg bg-white shadow p-6">
    <form method="GET">
        <!-- Conserver les paramètres de date -->
        <input type="hidden" name="period" value="{{ request('period', 'today') }}">
        @if(request('period') === 'custom')
            <input type="hidden" name="date_from" value="{{ request('date_from') }}">
            <input type="hidden" name="date_to" value="{{ request('date_to') }}">
        @endif

        <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
            <!-- Status -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Statut</label>
                <select name="status" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                    <option value="">Tous</option>
                    <option value="pending" {{ request('status') === 'pending' ? 'selected' : '' }}>Pending</option>
                    <option value="dispatched" {{ request('status') === 'dispatched' ? 'selected' : '' }}>Dispatched</option>
                    <option value="processing" {{ request('status') === 'processing' ? 'selected' : '' }}>Processing</option>
                    <option value="completed" {{ request('status') === 'completed' ? 'selected' : '' }}>Completed</option>
                    <option value="failed" {{ request('status') === 'failed' ? 'selected' : '' }}>Failed</option>
                    <option value="cancelled" {{ request('status') === 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                </select>
            </div>

            <!-- Domain -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Domaine</label>
                <select name="domain_id" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                    <option value="">Tous</option>
                    @foreach($domains as $domain)
                        <option value="{{ $domain->id }}" {{ request('domain_id') == $domain->id ? 'selected' : '' }}>
                            {{ $domain->name }}
                        </option>
                    @endforeach
                </select>
            </div>

            <!-- Search -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Recherche</label>
                <input type="text" name="search" value="{{ request('search') }}" placeholder="ID, queue..."
                       class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
            </div>
        </div>

        <!-- Search et Actions -->
        <div class="mt-4 flex items-end justify-between gap-4">
            <div class="flex-1 max-w-md">
                <label class="block text-sm font-medium text-gray-700 mb-1">Recherche</label>
                <input type="text" name="search" value="{{ request('search') }}"
                       placeholder="ID, Message ID, Payload..."
                       class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
            </div>
            <div class="flex gap-2">
                <a href="{{ route('dashboard.messages.index') }}"
                   class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                    <i class="fas fa-redo mr-2"></i>Réinitialiser
                </a>
                <button type="submit"
                        class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700">
                    <i class="fas fa-search mr-2"></i>Filtrer
                </button>
            </div>
        </div>
    </form>
</div>

<!-- Actions en masse -->
<div class="mb-4" id="bulk-actions" style="display: none;">
    <div class="rounded-lg bg-indigo-50 border border-indigo-200 p-4">
        <div class="flex items-center justify-between">
            <div class="flex items-center">
                <span class="text-sm font-medium text-indigo-900">
                    <span id="selected-count">0</span> message(s) sélectionné(s)
                </span>
            </div>
            <div class="flex gap-2">
                <button type="button" onclick="deselectAll()"
                        class="inline-flex items-center px-3 py-2 border border-indigo-300 shadow-sm text-sm font-medium rounded-md text-indigo-700 bg-white hover:bg-indigo-50">
                    Tout désélectionner
                </button>
                <button type="button" onclick="bulkCancel()"
                        class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700">
                    <i class="fas fa-times-circle mr-2"></i>Annuler la sélection
                </button>
                <button type="button" onclick="bulkReplay()"
                        class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700">
                    <i class="fas fa-redo mr-2"></i>Rejouer la sélection
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Liste -->
<div class="rounded-lg bg-white shadow overflow-hidden">
    <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
            <tr>
                <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
                    <input type="checkbox" id="select-all" onchange="toggleSelectAll(this)"
                           class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                </th>
                <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">ID</th>
                <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">Domaine</th>
                <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">Type</th>
                <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">Sujet</th>
                <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">Statut</th>
                <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">Tentatives</th>
                <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">Date</th>
                <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">Actions</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-200 bg-white">
            @forelse($messages as $message)
                <tr class="hover:bg-gray-50">
                    <td class="whitespace-nowrap px-6 py-4 text-sm">
                        @if($message->canReplay() && $message->attempts < 3)
                            <input type="checkbox" class="message-checkbox h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
                                   value="{{ $message->id }}" onchange="updateBulkActions()"
                                   title="Rejouer ce message (tentatives: {{ $message->attempts }}/3)">
                        @elseif($message->canReplay() && $message->attempts >= 3)
                            <span class="text-gray-400 text-xs" title="Maximum de tentatives atteint ({{ $message->attempts }}/3)">
                                <i class="fas fa-ban"></i>
                            </span>
                        @endif
                    </td>
                    <td class="whitespace-nowrap px-6 py-4 text-sm font-medium text-gray-900">{{ $message->id }}</td>
                    <td class="whitespace-nowrap px-6 py-4 text-sm text-gray-900">
                        <span class="font-medium">{{ $message->domain->name ?? 'N/A' }}</span>
                    </td>
                    <td class="whitespace-nowrap px-6 py-4 text-sm text-gray-600">
                        {{ $message->payload_type ? ucfirst($message->payload_type) : '-' }}
                    </td>
                    <td class="px-6 py-4 text-sm text-gray-900">{{ Str::limit($message->subject ?? 'No subject', 40) }}</td>
                    <td class="whitespace-nowrap px-6 py-4 text-sm">
                        <span class="inline-flex rounded-full px-2 text-xs font-semibold leading-5
                            {{ $message->status === 'completed' ? 'bg-green-100 text-green-800' :
                               ($message->status === 'failed' ? 'bg-red-100 text-red-800' :
                               ($message->status === 'processing' ? 'bg-blue-100 text-blue-800' :
                               ($message->status === 'cancelled' ? 'bg-gray-100 text-gray-800' : 'bg-yellow-100 text-yellow-800'))) }}">
                            {{ ucfirst($message->status) }}
                        </span>
                    </td>
                    <td class="whitespace-nowrap px-6 py-4 text-sm text-gray-600">
                        {{ $message->attempts }}/{{ $message->max_attempts ?? 3 }}
                    </td>
                    <td class="whitespace-nowrap px-6 py-4 text-sm text-gray-500">{{ $message->created_at->format('d/m/Y H:i') }}</td>
                    <td class="whitespace-nowrap px-6 py-4 text-sm">
                        <div class="flex items-center gap-3">
                            <a href="{{ route('dashboard.messages.show', $message->id) }}"
                               class="text-indigo-600 hover:text-indigo-900"
                               title="Voir les détails">
                                <i class="fas fa-eye"></i>
                            </a>
                            @if($message->canReplay())
                                <form action="{{ route('dashboard.messages.replay', $message->id) }}" method="POST" class="inline">
                                    @csrf
                                    <button type="submit"
                                            class="text-green-600 hover:text-green-900"
                                            title="Rejouer le message manuellement (tentatives: {{ $message->attempts }}) - Pas de limite en manuel"
                                            onclick="return confirm('Voulez-vous vraiment rejouer ce message ?\n\nTentatives actuelles: {{ $message->attempts }}\n\nNote: Le rejeu manuel peut être fait même après 3 tentatives.')">
                                        <i class="fas fa-redo"></i>
                                    </button>
                                </form>
                            @endif
                        </div>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="9" class="px-6 py-4 text-center text-sm text-gray-500">Aucun message trouvé</td>
                </tr>
            @endforelse
        </tbody>
    </table>

    <!-- Pagination -->
    @if($messages->hasPages())
        <div class="border-t border-gray-200 bg-white px-4 py-3 sm:px-6">
            {{ $messages->links() }}
        </div>
    @endif
</div>

<!-- Form caché pour le bulk replay -->
<form id="bulk-replay-form" action="{{ route('dashboard.messages.bulk-replay') }}" method="POST" style="display: none;">
    @csrf
    <input type="hidden" name="message_ids" id="bulk-replay-message-ids">
</form>

<!-- Form caché pour le bulk cancel -->
<form id="bulk-cancel-form" action="{{ route('dashboard.messages.bulk-cancel') }}" method="POST" style="display: none;">
    @csrf
    <input type="hidden" name="message_ids" id="bulk-cancel-message-ids">
</form>

<script>
function updateBulkActions() {
    const checkboxes = document.querySelectorAll('.message-checkbox:checked');
    const count = checkboxes.length;
    const bulkActions = document.getElementById('bulk-actions');
    const selectedCount = document.getElementById('selected-count');

    selectedCount.textContent = count;
    bulkActions.style.display = count > 0 ? 'block' : 'none';

    // Update select-all checkbox state
    const allCheckboxes = document.querySelectorAll('.message-checkbox');
    const selectAllCheckbox = document.getElementById('select-all');
    if (allCheckboxes.length > 0) {
        selectAllCheckbox.checked = count === allCheckboxes.length;
        selectAllCheckbox.indeterminate = count > 0 && count < allCheckboxes.length;
    }
}

function toggleSelectAll(checkbox) {
    const checkboxes = document.querySelectorAll('.message-checkbox');
    checkboxes.forEach(cb => {
        cb.checked = checkbox.checked;
    });
    updateBulkActions();
}

function deselectAll() {
    const checkboxes = document.querySelectorAll('.message-checkbox');
    checkboxes.forEach(cb => {
        cb.checked = false;
    });
    document.getElementById('select-all').checked = false;
    updateBulkActions();
}

function bulkReplay() {
    const checkboxes = document.querySelectorAll('.message-checkbox:checked');
    if (checkboxes.length === 0) {
        alert('Veuillez sélectionner au moins un message');
        return;
    }

    if (!confirm(`Voulez-vous vraiment rejouer ${checkboxes.length} message(s) ?`)) {
        return;
    }

    const messageIds = Array.from(checkboxes).map(cb => cb.value);
    document.getElementById('bulk-replay-message-ids').value = JSON.stringify(messageIds);
    document.getElementById('bulk-replay-form').submit();
}

function bulkCancel() {
    const checkboxes = document.querySelectorAll('.message-checkbox:checked');
    if (checkboxes.length === 0) {
        alert('Veuillez sélectionner au moins un message');
        return;
    }

    if (!confirm(`Voulez-vous vraiment annuler ${checkboxes.length} message(s) ?\n\nCes messages passeront en statut "Cancelled" et ne pourront plus être traités.`)) {
        return;
    }

    const messageIds = Array.from(checkboxes).map(cb => cb.value);
    document.getElementById('bulk-cancel-message-ids').value = JSON.stringify(messageIds);
    document.getElementById('bulk-cancel-form').submit();
}
</script>
@endsection