@extends('layouts.admin')

@section('title', 'Dashboard')

@section('content')
<div class="space-y-6">
    <h2 class="text-2xl font-bold text-gray-900">Dashboard</h2>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <!-- BMP Stats Widget -->
        <div class="md:col-span-1">
            <x-bmp-stats-widget :refresh="30" />
        </div>

        <!-- Recent logs widget -->
        <div class="md:col-span-2 bg-white rounded-lg shadow p-6">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">Logs récents</h3>
            <div id="recent-logs" class="space-y-2">
                <div class="text-center py-4">
                    <i class="fas fa-spinner fa-spin text-2xl text-gray-400"></i>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
async function loadRecentLogs() {
    try {
        const response = await fetch('/api/admin/bmp-logs/recent?limit=10');
        const logs = await response.json();

        const container = document.getElementById('recent-logs');

        if (logs.length === 0) {
            container.innerHTML = '<p class="text-gray-500 text-center">Aucun log récent</p>';
            return;
        }

        const statusColors = {
            'success': 'bg-green-100 text-green-800',
            'failed': 'bg-red-100 text-red-800',
            'pending': 'bg-gray-100 text-gray-800',
            'processing': 'bg-blue-100 text-blue-800',
            'skipped': 'bg-yellow-100 text-yellow-800'
        };

        container.innerHTML = logs.map(log => `
            <div class="flex items-center justify-between p-3 bg-gray-50 rounded hover:bg-gray-100">
                <div class="flex items-center space-x-3 flex-1">
                    <span class="px-2 py-1 text-xs rounded-full ${statusColors[log.status] || 'bg-gray-100'}">
                        ${log.status}
                    </span>
                    <span class="text-sm text-gray-600">${log.file_type}</span>
                    <span class="text-sm text-gray-500">Ligne ${log.line_number}</span>
                </div>
                <div class="flex items-center space-x-3">
                    <span class="text-xs text-gray-500">
                        ${new Date(log.created_at).toLocaleString('fr-FR')}
                    </span>
                    <a href="/admin/bmp-logs/${log.id}" class="text-blue-600 hover:text-blue-800">
                        <i class="fas fa-eye"></i>
                    </a>
                </div>
            </div>
        `).join('');

    } catch (err) {
        console.error('Error loading recent logs:', err);
        document.getElementById('recent-logs').innerHTML =
            '<p class="text-red-500 text-center">Erreur de chargement</p>';
    }
}

// Load on page load
document.addEventListener('DOMContentLoaded', loadRecentLogs);

// Refresh every 30 seconds
setInterval(loadRecentLogs, 30000);
</script>
@endpush
@endsection