@extends('layouts.admin')

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

@section('content')
<!-- Stats Cards -->
<div class="grid grid-cols-1 gap-4 sm:grid-cols-4 mb-6">
    <div class="overflow-hidden rounded-lg bg-white shadow">
        <div class="p-5">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="rounded-md bg-red-500 p-3">
                        <i class="fas fa-exclamation-circle text-white"></i>
                    </div>
                </div>
                <div class="ml-5">
                    <dt class="truncate text-sm font-medium text-gray-500">Ouvertes</dt>
                    <dd class="text-2xl font-semibold text-gray-900">{{ $stats['open'] }}</dd>
                </div>
            </div>
        </div>
    </div>
    <div class="overflow-hidden rounded-lg bg-white shadow">
        <div class="p-5">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="rounded-md bg-yellow-500 p-3">
                        <i class="fas fa-eye text-white"></i>
                    </div>
                </div>
                <div class="ml-5">
                    <dt class="truncate text-sm font-medium text-gray-500">Prises en charge</dt>
                    <dd class="text-2xl font-semibold text-gray-900">{{ $stats['acknowledged'] }}</dd>
                </div>
            </div>
        </div>
    </div>
    <div class="overflow-hidden rounded-lg bg-white shadow">
        <div class="p-5">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="rounded-md bg-blue-500 p-3">
                        <i class="fas fa-wrench text-white"></i>
                    </div>
                </div>
                <div class="ml-5">
                    <dt class="truncate text-sm font-medium text-gray-500">Auto-corrigees</dt>
                    <dd class="text-2xl font-semibold text-gray-900">{{ $stats['auto_resolved'] }}</dd>
                </div>
            </div>
        </div>
    </div>
    <div class="overflow-hidden rounded-lg bg-white shadow">
        <div class="p-5">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="rounded-md bg-green-500 p-3">
                        <i class="fas fa-check-circle text-white"></i>
                    </div>
                </div>
                <div class="ml-5">
                    <dt class="truncate text-sm font-medium text-gray-500">Resolues</dt>
                    <dd class="text-2xl font-semibold text-gray-900">{{ $stats['resolved'] }}</dd>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Filtres -->
<div class="mb-6 rounded-lg bg-white shadow p-6">
    <form method="GET">
        <div class="grid grid-cols-1 gap-4 sm:grid-cols-4">
            <!-- Severite -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Severite</label>
                <select name="severity" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                    <option value="">Toutes</option>
                    <option value="critical" {{ request('severity') === 'critical' ? 'selected' : '' }}>Critique</option>
                    <option value="error" {{ request('severity') === 'error' ? 'selected' : '' }}>Erreur</option>
                    <option value="warning" {{ request('severity') === 'warning' ? 'selected' : '' }}>Warning</option>
                    <option value="info" {{ request('severity') === 'info' ? 'selected' : '' }}>Info</option>
                </select>
            </div>

            <!-- Statut -->
            <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="open" {{ request('status') === 'open' ? 'selected' : '' }}>Ouverte</option>
                    <option value="acknowledged" {{ request('status') === 'acknowledged' ? 'selected' : '' }}>Prise en charge</option>
                    <option value="auto_resolved" {{ request('status') === 'auto_resolved' ? 'selected' : '' }}>Auto-corrigee</option>
                    <option value="resolved" {{ request('status') === 'resolved' ? 'selected' : '' }}>Resolue</option>
                </select>
            </div>

            <!-- Type -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Type</label>
                <select name="type" 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($types as $type)
                        <option value="{{ $type }}" {{ request('type') === $type ? 'selected' : '' }}>{{ $type }}</option>
                    @endforeach
                </select>
            </div>

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

        <div class="mt-4 flex justify-end gap-2">
            <a href="{{ route('dashboard.alerts.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>Reinitialiser
            </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>
    </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">
            <span class="text-sm font-medium text-indigo-900">
                <span id="selected-count">0</span> alerte(s) selectionnee(s)
            </span>
            <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 deselectionner
                </button>
                <button type="button" onclick="bulkResolve()"
                        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-check-circle mr-2"></i>Resoudre la selection
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Liste des alertes -->
<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-4 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-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">ID</th>
                <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">Severite</th>
                <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">Type</th>
                <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">Titre</th>
                <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">Occurrences</th>
                <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">Statut</th>
                <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">Derniere occ.</th>
                <th class="px-4 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($alerts as $alert)
                <tr class="hover:bg-gray-50">
                    <td class="whitespace-nowrap px-4 py-4 text-sm">
                        @if(in_array($alert->status, ['open', 'acknowledged']))
                            <input type="checkbox" class="alert-checkbox h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
                                   value="{{ $alert->id }}" onchange="updateBulkActions()">
                        @endif
                    </td>
                    <td class="whitespace-nowrap px-4 py-4 text-sm font-medium text-gray-900">{{ $alert->id }}</td>
                    <td class="whitespace-nowrap px-4 py-4 text-sm">
                        <span class="inline-flex rounded-full px-2 text-xs font-semibold leading-5
                            {{ $alert->severity === 'critical' ? 'bg-red-100 text-red-800' :
                               ($alert->severity === 'error' ? 'bg-red-100 text-red-800' :
                               ($alert->severity === 'warning' ? 'bg-yellow-100 text-yellow-800' :
                               'bg-blue-100 text-blue-800')) }}">
                            {{ $alert->severity }}
                        </span>
                    </td>
                    <td class="whitespace-nowrap px-4 py-4 text-sm">
                        <span class="inline-flex rounded-full bg-gray-100 px-2 text-xs font-semibold leading-5 text-gray-800">
                            {{ $alert->type }}
                        </span>
                    </td>
                    <td class="px-4 py-4 text-sm text-gray-900">{{ Str::limit($alert->title, 60) }}</td>
                    <td class="whitespace-nowrap px-4 py-4 text-sm text-center text-gray-600">
                        {{ $alert->occurrence_count }}
                    </td>
                    <td class="whitespace-nowrap px-4 py-4 text-sm">
                        <span class="inline-flex rounded-full px-2 text-xs font-semibold leading-5
                            {{ $alert->status === 'open' ? 'bg-red-100 text-red-800' :
                               ($alert->status === 'acknowledged' ? 'bg-yellow-100 text-yellow-800' :
                               ($alert->status === 'auto_resolved' ? 'bg-blue-100 text-blue-800' :
                               'bg-green-100 text-green-800')) }}">
                            {{ match($alert->status) {
                                'open' => 'Ouverte',
                                'acknowledged' => 'Prise en charge',
                                'auto_resolved' => 'Auto-corrigee',
                                'resolved' => 'Resolue',
                                default => $alert->status,
                            } }}
                        </span>
                    </td>
                    <td class="whitespace-nowrap px-4 py-4 text-sm text-gray-500">
                        {{ $alert->last_occurrence_at?->format('d/m/Y H:i') ?? '-' }}
                    </td>
                    <td class="whitespace-nowrap px-4 py-4 text-sm">
                        <div class="flex items-center gap-2">
                            <!-- Details (modal) -->
                            <button type="button" onclick="showDetails({{ $alert->id }})"
                                    class="text-gray-600 hover:text-gray-900" title="Details">
                                <i class="fas fa-info-circle"></i>
                            </button>

                            @if($alert->status === 'open')
                                <!-- Prendre en charge -->
                                <form action="{{ route('dashboard.alerts.acknowledge', $alert->id) }}" method="POST" class="inline">
                                    @csrf
                                    <button type="submit" class="text-yellow-600 hover:text-yellow-900" title="Prendre en charge">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </form>
                            @endif

                            @if(in_array($alert->status, ['open', 'acknowledged']))
                                <!-- Resoudre -->
                                <form action="{{ route('dashboard.alerts.resolve', $alert->id) }}" method="POST" class="inline"
                                      onsubmit="return confirm('Resoudre cette alerte ?')">
                                    @csrf
                                    <button type="submit" class="text-green-600 hover:text-green-900" title="Resoudre">
                                        <i class="fas fa-check-circle"></i>
                                    </button>
                                </form>
                            @endif

                            @if($alert->auto_correctable && $alert->status === 'open')
                                <!-- Auto-corriger -->
                                <form action="{{ route('dashboard.alerts.auto-correct', $alert->id) }}" method="POST" class="inline"
                                      onsubmit="return confirm('Lancer l\'auto-correction ?')">
                                    @csrf
                                    <button type="submit" class="text-blue-600 hover:text-blue-900" title="Auto-corriger">
                                        <i class="fas fa-wrench"></i>
                                    </button>
                                </form>
                            @endif
                        </div>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="9" class="px-4 py-4 text-center text-sm text-gray-500">Aucune alerte trouvee</td>
                </tr>
            @endforelse
        </tbody>
    </table>

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

<!-- Modal Details -->
<div id="detail-modal" class="relative z-50 hidden" role="dialog">
    <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
    <div class="fixed inset-0 z-50 overflow-y-auto">
        <div class="flex min-h-full items-center justify-center p-4">
            <div class="relative w-full max-w-2xl rounded-lg bg-white shadow-xl">
                <div class="flex items-center justify-between border-b px-6 py-4">
                    <h3 id="modal-title" class="text-lg font-semibold text-gray-900"></h3>
                    <button onclick="closeModal()" class="text-gray-400 hover:text-gray-600">
                        <i class="fas fa-times text-xl"></i>
                    </button>
                </div>
                <div id="modal-body" class="px-6 py-4 max-h-[70vh] overflow-y-auto"></div>
                <div class="flex justify-end border-t px-6 py-4">
                    <button onclick="closeModal()"
                            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">
                        Fermer
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Form cache pour le bulk resolve -->
<form id="bulk-resolve-form" action="{{ route('dashboard.alerts.bulk-resolve') }}" method="POST" style="display: none;">
    @csrf
    <input type="hidden" name="alert_ids" id="bulk-resolve-alert-ids">
</form>

<!-- Donnees des alertes pour la modale -->
<script>
const alertsData = @json($alerts->keyBy('id'));

function showDetails(id) {
    const alert = alertsData[id];
    if (!alert) return;

    document.getElementById('modal-title').textContent = alert.title;

    const severityColors = {
        critical: 'bg-red-100 text-red-800',
        error: 'bg-red-100 text-red-800',
        warning: 'bg-yellow-100 text-yellow-800',
        info: 'bg-blue-100 text-blue-800',
    };
    const statusLabels = {
        open: 'Ouverte',
        acknowledged: 'Prise en charge',
        auto_resolved: 'Auto-corrigee',
        resolved: 'Resolue',
    };

    let html = `
        <div class="grid grid-cols-2 gap-4 mb-4">
            <div>
                <span class="text-sm font-medium text-gray-500">Type</span>
                <p class="mt-1"><span class="inline-flex rounded-full bg-gray-100 px-2 text-xs font-semibold leading-5 text-gray-800">${alert.type}</span></p>
            </div>
            <div>
                <span class="text-sm font-medium text-gray-500">Severite</span>
                <p class="mt-1"><span class="inline-flex rounded-full px-2 text-xs font-semibold leading-5 ${severityColors[alert.severity] || 'bg-gray-100 text-gray-800'}">${alert.severity}</span></p>
            </div>
            <div>
                <span class="text-sm font-medium text-gray-500">Statut</span>
                <p class="mt-1">${statusLabels[alert.status] || alert.status}</p>
            </div>
            <div>
                <span class="text-sm font-medium text-gray-500">Occurrences</span>
                <p class="mt-1">${alert.occurrence_count}</p>
            </div>
        </div>

        <div class="mb-4">
            <span class="text-sm font-medium text-gray-500">Message</span>
            <p class="mt-1 whitespace-pre-wrap text-sm">${escapeHtml(alert.message)}</p>
        </div>`;

    if (alert.details) {
        html += `
        <div class="mb-4">
            <span class="text-sm font-medium text-gray-500">Details</span>
            <pre class="mt-1 rounded bg-gray-50 p-3 text-xs overflow-x-auto">${JSON.stringify(alert.details, null, 2)}</pre>
        </div>`;
    }

    if (alert.context) {
        html += `
        <div class="mb-4">
            <span class="text-sm font-medium text-gray-500">Contexte</span>
            <pre class="mt-1 rounded bg-gray-50 p-3 text-xs overflow-x-auto">${JSON.stringify(alert.context, null, 2)}</pre>
        </div>`;
    }

    if (alert.correction_result) {
        html += `
        <div class="mb-4">
            <span class="text-sm font-medium text-gray-500">Resultat de correction</span>
            <pre class="mt-1 rounded bg-gray-50 p-3 text-xs overflow-x-auto">${JSON.stringify(alert.correction_result, null, 2)}</pre>
        </div>`;
    }

    if (alert.resolution_notes) {
        html += `
        <div class="mb-4">
            <span class="text-sm font-medium text-gray-500">Notes de resolution</span>
            <p class="mt-1 whitespace-pre-wrap text-sm">${escapeHtml(alert.resolution_notes)}</p>
        </div>`;
    }

    html += `
        <div class="grid grid-cols-2 gap-4 border-t pt-4 text-sm text-gray-500">
            <div>
                <span class="font-medium">Cree le</span>
                <p>${formatDate(alert.created_at)}</p>
            </div>
            <div>
                <span class="font-medium">Derniere occurrence</span>
                <p>${alert.last_occurrence_at ? formatDate(alert.last_occurrence_at) : '-'}</p>
            </div>
            ${alert.resolved_at ? `<div><span class="font-medium">Resolu le</span><p>${formatDate(alert.resolved_at)}</p></div>` : ''}
        </div>`;

    document.getElementById('modal-body').innerHTML = html;
    document.getElementById('detail-modal').classList.remove('hidden');
}

function closeModal() {
    document.getElementById('detail-modal').classList.add('hidden');
}

// Fermer la modale avec Escape
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') closeModal();
});

function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

function formatDate(dateStr) {
    if (!dateStr) return '-';
    const d = new Date(dateStr);
    return d.toLocaleDateString('fr-FR') + ' ' + d.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' });
}

function updateBulkActions() {
    const checkboxes = document.querySelectorAll('.alert-checkbox:checked');
    const count = checkboxes.length;
    document.getElementById('selected-count').textContent = count;
    document.getElementById('bulk-actions').style.display = count > 0 ? 'block' : 'none';

    const allCheckboxes = document.querySelectorAll('.alert-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) {
    document.querySelectorAll('.alert-checkbox').forEach(cb => cb.checked = checkbox.checked);
    updateBulkActions();
}

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

function bulkResolve() {
    const checkboxes = document.querySelectorAll('.alert-checkbox:checked');
    if (checkboxes.length === 0) return;
    if (!confirm(`Resoudre ${checkboxes.length} alerte(s) ?`)) return;

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