@extends('layouts.admin')

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

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

<!-- Alertes -->
@if($stats['failed_messages'] > 0)
<div class="mb-8 rounded-md bg-red-50 p-4 border-l-4 border-red-400">
    <div class="flex">
        <div class="flex-shrink-0">
            <i class="fas fa-exclamation-triangle text-red-400 text-xl"></i>
        </div>
        <div class="ml-3 flex-1">
            <h3 class="text-sm font-medium text-red-800">
                ⚠️ {{ $stats['failed_messages'] }} message(s) en échec
            </h3>
            <div class="mt-2 text-sm text-red-700">
                <p>Des messages nécessitent votre attention. Vérifiez les erreurs et rejouer les messages si nécessaire.</p>
                <a href="{{ route('dashboard.messages.index', ['status' => 'failed']) }}"
                   class="mt-2 inline-flex items-center font-medium underline text-red-700 hover:text-red-600">
                    Voir les messages en échec
                    <i class="fas fa-arrow-right ml-2"></i>
                </a>
            </div>
        </div>
    </div>
</div>
@endif

@if($stats['pending_messages'] > 10)
<div class="mb-8 rounded-md bg-yellow-50 p-4 border-l-4 border-yellow-400">
    <div class="flex">
        <div class="flex-shrink-0">
            <i class="fas fa-clock text-yellow-400 text-xl"></i>
        </div>
        <div class="ml-3 flex-1">
            <h3 class="text-sm font-medium text-yellow-800">
                📋 {{ $stats['pending_messages'] }} message(s) en attente
            </h3>
            <div class="mt-2 text-sm text-yellow-700">
                <p>Un nombre élevé de messages est en attente de traitement. Vérifiez que les workers sont actifs.</p>
                <a href="{{ route('dashboard.messages.index', ['status' => 'pending']) }}"
                   class="mt-2 inline-flex items-center font-medium underline text-yellow-700 hover:text-yellow-600">
                    Voir les messages en attente
                    <i class="fas fa-arrow-right ml-2"></i>
                </a>
            </div>
        </div>
    </div>
</div>
@endif

<!-- Stats Cards -->
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6 mb-8">
    <!-- Total Messages -->
    <a href="{{ route('dashboard.messages.index') }}" class="overflow-hidden rounded-lg bg-white shadow hover:shadow-lg transition-shadow">
        <div class="p-5">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="rounded-md bg-indigo-500 p-3">
                        <i class="fas fa-envelope text-white text-xl"></i>
                    </div>
                </div>
                <div class="ml-5 w-0 flex-1">
                    <dl>
                        <dt class="truncate text-sm font-medium text-gray-500">Total</dt>
                        <dd class="text-3xl font-semibold text-gray-900">{{ number_format($stats['total_messages']) }}</dd>
                    </dl>
                </div>
            </div>
        </div>
    </a>

    <!-- Pending -->
    <a href="{{ route('dashboard.messages.index', ['status' => 'pending']) }}" class="overflow-hidden rounded-lg bg-white shadow hover:shadow-lg transition-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-clock text-white text-xl"></i>
                    </div>
                </div>
                <div class="ml-5 w-0 flex-1">
                    <dl>
                        <dt class="truncate text-sm font-medium text-gray-500">Pending</dt>
                        <dd class="text-3xl font-semibold text-gray-900">{{ number_format($stats['pending_messages']) }}</dd>
                    </dl>
                </div>
            </div>
        </div>
    </a>

    <!-- Processing -->
    <a href="{{ route('dashboard.messages.index', ['status' => 'processing']) }}" class="overflow-hidden rounded-lg bg-white shadow hover:shadow-lg transition-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-spinner text-white text-xl"></i>
                    </div>
                </div>
                <div class="ml-5 w-0 flex-1">
                    <dl>
                        <dt class="truncate text-sm font-medium text-gray-500">Processing</dt>
                        <dd class="text-3xl font-semibold text-gray-900">{{ number_format($stats['processing_messages']) }}</dd>
                    </dl>
                </div>
            </div>
        </div>
    </a>

    <!-- Completed -->
    <a href="{{ route('dashboard.messages.index', ['status' => 'completed']) }}" class="overflow-hidden rounded-lg bg-white shadow hover:shadow-lg transition-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 text-white text-xl"></i>
                    </div>
                </div>
                <div class="ml-5 w-0 flex-1">
                    <dl>
                        <dt class="truncate text-sm font-medium text-gray-500">Completed</dt>
                        <dd class="text-3xl font-semibold text-gray-900">{{ number_format($stats['completed_messages']) }}</dd>
                    </dl>
                </div>
            </div>
        </div>
    </a>

    <!-- Failed -->
    <a href="{{ route('dashboard.messages.index', ['status' => 'failed']) }}" class="overflow-hidden rounded-lg bg-white shadow hover:shadow-lg transition-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-triangle text-white text-xl"></i>
                    </div>
                </div>
                <div class="ml-5 w-0 flex-1">
                    <dl>
                        <dt class="truncate text-sm font-medium text-gray-500">Failed</dt>
                        <dd class="text-3xl font-semibold text-gray-900">{{ number_format($stats['failed_messages']) }}</dd>
                    </dl>
                </div>
            </div>
        </div>
    </a>

    <!-- Active Domains -->
    <a href="{{ route('dashboard.domains.index') }}" class="overflow-hidden rounded-lg bg-white shadow hover:shadow-lg transition-shadow">
        <div class="p-5">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="rounded-md bg-purple-500 p-3">
                        <i class="fas fa-globe text-white text-xl"></i>
                    </div>
                </div>
                <div class="ml-5 w-0 flex-1">
                    <dl>
                        <dt class="truncate text-sm font-medium text-gray-500">Domaines</dt>
                        <dd class="text-3xl font-semibold text-gray-900">{{ number_format($stats['total_domains']) }}</dd>
                    </dl>
                </div>
            </div>
        </div>
    </a>
</div>

<!-- Processing Stats -->
<div class="mb-8 rounded-lg bg-white shadow">
    <div class="border-b border-gray-200 px-4 py-5 sm:px-6">
        <h3 class="text-lg font-medium leading-6 text-gray-900">Processing Logs Stats</h3>
    </div>
    <div class="px-4 py-5 sm:p-6">
        <div class="grid grid-cols-2 gap-4 sm:grid-cols-5">
            <div class="text-center">
                <dt class="text-sm font-medium text-gray-500">Total</dt>
                <dd class="mt-1 text-2xl font-semibold text-gray-900">{{ number_format($processingStats['total']) }}</dd>
            </div>
            <div class="text-center">
                <dt class="text-sm font-medium text-gray-500">Pending</dt>
                <dd class="mt-1 text-2xl font-semibold text-yellow-600">{{ number_format($processingStats['pending']) }}</dd>
            </div>
            <div class="text-center">
                <dt class="text-sm font-medium text-gray-500">Success</dt>
                <dd class="mt-1 text-2xl font-semibold text-green-600">{{ number_format($processingStats['success']) }}</dd>
            </div>
            <div class="text-center">
                <dt class="text-sm font-medium text-gray-500">Failed</dt>
                <dd class="mt-1 text-2xl font-semibold text-red-600">{{ number_format($processingStats['failed']) }}</dd>
            </div>
            <div class="text-center">
                <dt class="text-sm font-medium text-gray-500">Retryable</dt>
                <dd class="mt-1 text-2xl font-semibold text-orange-600">{{ number_format($processingStats['retryable']) }}</dd>
            </div>
        </div>
    </div>
</div>

<div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
    <!-- Recent Messages -->
    <div class="rounded-lg bg-white shadow">
        <div class="border-b border-gray-200 px-4 py-5 sm:px-6 flex justify-between items-center">
            <h3 class="text-lg font-medium leading-6 text-gray-900">Messages Récents</h3>
            <a href="{{ route('dashboard.messages.index') }}" class="text-sm text-indigo-600 hover:text-indigo-900">
                Voir tout <i class="fas fa-arrow-right ml-1"></i>
            </a>
        </div>
        <div class="px-4 py-5 sm:p-6">
            <div class="flow-root">
                <ul role="list" class="-mb-8">
                    @forelse($recentMessages as $index => $message)
                        <li>
                            <div class="relative pb-8">
                                @if(!$loop->last)
                                    <span class="absolute left-4 top-4 -ml-px h-full w-0.5 bg-gray-200"></span>
                                @endif
                                <div class="relative flex space-x-3">
                                    <div>
                                        <span class="h-8 w-8 rounded-full flex items-center justify-center ring-8 ring-white
                                            {{ $message->status === 'success' ? 'bg-green-500' : ($message->status === 'failed' ? 'bg-red-500' : 'bg-gray-400') }}">
                                            <i class="fas fa-envelope text-white text-xs"></i>
                                        </span>
                                    </div>
                                    <div class="flex min-w-0 flex-1 justify-between space-x-4 pt-1.5">
                                        <div>
                                            <p class="text-sm text-gray-500">
                                                <span class="font-medium text-gray-900">{{ $message->domain->name ?? 'N/A' }}</span>
                                                - {{ $message->subject ?? 'No subject' }}
                                            </p>
                                            <p class="mt-0.5 text-xs text-gray-500">
                                                <span class="inline-flex items-center rounded-full px-2 py-1 text-xs font-medium
                                                    {{ $message->status === 'success' ? 'bg-green-100 text-green-700' : ($message->status === 'failed' ? 'bg-red-100 text-red-700' : 'bg-gray-100 text-gray-700') }}">
                                                    {{ ucfirst($message->status) }}
                                                </span>
                                            </p>
                                        </div>
                                        <div class="whitespace-nowrap text-right text-sm text-gray-500">
                                            <time>{{ $message->created_at->diffForHumans() }}</time>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    @empty
                        <li class="text-center py-4 text-gray-500">Aucun message récent</li>
                    @endforelse
                </ul>
            </div>
        </div>
    </div>

    <!-- Domain Stats -->
    <div class="rounded-lg bg-white shadow">
        <div class="border-b border-gray-200 px-4 py-5 sm:px-6 flex justify-between items-center">
            <h3 class="text-lg font-medium leading-6 text-gray-900">Statistiques par Domaine</h3>
            <a href="{{ route('dashboard.domains.index') }}" class="text-sm text-indigo-600 hover:text-indigo-900">
                Voir tout <i class="fas fa-arrow-right ml-1"></i>
            </a>
        </div>
        <div class="px-4 py-5 sm:p-6">
            <ul role="list" class="divide-y divide-gray-200">
                @forelse($domainStats as $stat)
                    <li class="py-4">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center space-x-4 flex-1">
                                <div class="flex-shrink-0">
                                    <div class="h-10 w-10 rounded-full bg-indigo-100 flex items-center justify-center">
                                        <i class="fas fa-globe text-indigo-600"></i>
                                    </div>
                                </div>
                                <div class="min-w-0 flex-1">
                                    <p class="text-sm font-medium text-gray-900">{{ $stat->domain->name ?? 'N/A' }}</p>
                                    <p class="text-xs text-gray-500">{{ $stat->domain->slug ?? 'N/A' }}</p>
                                </div>
                            </div>
                            <div class="flex items-center space-x-2">
                                <span class="inline-flex items-center rounded-full bg-green-100 px-2 py-1 text-xs font-medium text-green-700">
                                    ✓ {{ number_format($stat->completed) }}
                                </span>
                                <span class="inline-flex items-center rounded-full bg-yellow-100 px-2 py-1 text-xs font-medium text-yellow-700">
                                    ⏳ {{ number_format($stat->pending) }}
                                </span>
                                <span class="inline-flex items-center rounded-full bg-red-100 px-2 py-1 text-xs font-medium text-red-700">
                                    ✗ {{ number_format($stat->failed) }}
                                </span>
                                <span class="inline-flex items-center rounded-full bg-indigo-100 px-3 py-1 text-sm font-medium text-indigo-700">
                                    {{ number_format($stat->total) }}
                                </span>
                            </div>
                        </div>
                    </li>
                @empty
                    <li class="text-center py-4 text-gray-500">Aucun domaine</li>
                @endforelse
            </ul>
        </div>
    </div>
</div>

<!-- Stats par Queue -->
<div class="mt-8 rounded-lg bg-white shadow">
    <div class="border-b border-gray-200 px-4 py-5 sm:px-6">
        <h3 class="text-lg font-medium leading-6 text-gray-900">Statistiques par Queue</h3>
    </div>
    <div class="px-4 py-5 sm:p-6">
        <ul role="list" class="divide-y divide-gray-200">
            @forelse($queueStats as $stat)
                <li class="py-4">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-4 flex-1">
                            <div class="flex-shrink-0">
                                <div class="h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center">
                                    <i class="fas fa-layer-group text-purple-600"></i>
                                </div>
                            </div>
                            <div class="min-w-0 flex-1">
                                <p class="text-sm font-medium text-gray-900">{{ $stat->queue_name }}</p>
                            </div>
                        </div>
                        <div class="flex items-center space-x-2">
                            <span class="inline-flex items-center rounded-full bg-green-100 px-2 py-1 text-xs font-medium text-green-700">
                                ✓ {{ number_format($stat->completed) }}
                            </span>
                            <span class="inline-flex items-center rounded-full bg-yellow-100 px-2 py-1 text-xs font-medium text-yellow-700">
                                ⏳ {{ number_format($stat->pending) }}
                            </span>
                            <span class="inline-flex items-center rounded-full bg-red-100 px-2 py-1 text-xs font-medium text-red-700">
                                ✗ {{ number_format($stat->failed) }}
                            </span>
                            <span class="inline-flex items-center rounded-full bg-purple-100 px-3 py-1 text-sm font-medium text-purple-700">
                                {{ number_format($stat->total) }}
                            </span>
                        </div>
                    </div>
                </li>
            @empty
                <li class="text-center py-4 text-gray-500">Aucune queue</li>
            @endforelse
        </ul>
    </div>
</div>
@endsection