@props(['refresh' => 60])

<div x-data="bmpStatsWidget()" x-init="init()" class="bg-white rounded-lg shadow p-6">
    <div class="flex justify-between items-center mb-4">
        <h3 class="text-lg font-semibold text-gray-900">BMP Processing Stats</h3>
        <button @click="fetchStats()" class="text-gray-500 hover:text-gray-700">
            <i class="fas fa-sync-alt" :class="{ 'fa-spin': loading }"></i>
        </button>
    </div>

    <div x-show="!loading && stats" class="space-y-4">
        <!-- Global metrics -->
        <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
            <div class="text-center p-3 bg-blue-50 rounded-lg">
                <div class="text-xs text-blue-600 font-medium">Total</div>
                <div class="text-2xl font-bold text-blue-900" x-text="stats.total || 0"></div>
            </div>
            <div class="text-center p-3 bg-green-50 rounded-lg">
                <div class="text-xs text-green-600 font-medium">Succès</div>
                <div class="text-2xl font-bold text-green-900" x-text="stats.success || 0"></div>
            </div>
            <div class="text-center p-3 bg-red-50 rounded-lg">
                <div class="text-xs text-red-600 font-medium">Échecs</div>
                <div class="text-2xl font-bold text-red-900" x-text="stats.failed || 0"></div>
            </div>
            <div class="text-center p-3 bg-yellow-50 rounded-lg">
                <div class="text-xs text-yellow-600 font-medium">À rejouer</div>
                <div class="text-2xl font-bold text-yellow-900" x-text="stats.retryable || 0"></div>
            </div>
        </div>

        <!-- Success rate -->
        <div class="mt-4">
            <div class="flex justify-between items-center mb-2">
                <span class="text-sm font-medium text-gray-700">Taux de succès</span>
                <span class="text-sm font-bold" x-text="(stats.success_rate || 0) + '%'"></span>
            </div>
            <div class="w-full bg-gray-200 rounded-full h-3">
                <div class="bg-gradient-to-r from-green-400 to-green-600 h-3 rounded-full transition-all duration-500"
                     :style="`width: ${stats.success_rate || 0}%`"></div>
            </div>
        </div>

        <!-- File types -->
        <div class="mt-4">
            <div class="text-sm font-medium text-gray-700 mb-2">Par type de fichier</div>
            <div class="space-y-2">
                <div class="flex justify-between items-center text-sm">
                    <span class="text-gray-600">Sales:</span>
                    <span class="font-medium" x-text="stats.by_file_type?.sales || 0"></span>
                </div>
                <div class="flex justify-between items-center text-sm">
                    <span class="text-gray-600">Credit:</span>
                    <span class="font-medium" x-text="stats.by_file_type?.credit || 0"></span>
                </div>
                <div class="flex justify-between items-center text-sm">
                    <span class="text-gray-600">Subagents:</span>
                    <span class="font-medium" x-text="stats.by_file_type?.subagents || 0"></span>
                </div>
            </div>
        </div>

        <!-- Last update -->
        <div class="mt-4 text-xs text-gray-500 text-center">
            Mis à jour: <span x-text="lastUpdate"></span>
        </div>

        <!-- Actions -->
        <div class="mt-4 pt-4 border-t border-gray-200">
            <a href="{{ route('admin.bmp-logs.index') }}"
               class="block text-center text-sm text-blue-600 hover:text-blue-800 font-medium">
                Voir tous les logs →
            </a>
        </div>
    </div>

    <!-- Loading state -->
    <div x-show="loading" class="flex justify-center items-center py-8">
        <i class="fas fa-spinner fa-spin text-3xl text-gray-400"></i>
    </div>

    <!-- Error state -->
    <div x-show="error" class="text-center py-4">
        <p class="text-red-600 text-sm" x-text="error"></p>
        <button @click="fetchStats()" class="mt-2 text-sm text-blue-600 hover:underline">
            Réessayer
        </button>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
<script>
function bmpStatsWidget() {
    return {
        stats: null,
        loading: false,
        error: null,
        lastUpdate: '',
        refreshInterval: {{ $refresh }}, // seconds
        intervalId: null,

        init() {
            this.fetchStats();
            // Auto-refresh every X seconds
            this.intervalId = setInterval(() => {
                this.fetchStats();
            }, this.refreshInterval * 1000);
        },

        async fetchStats() {
            this.loading = true;
            this.error = null;

            try {
                const response = await fetch('/api/admin/bmp-logs/stats');
                if (!response.ok) {
                    throw new Error('Erreur réseau');
                }
                this.stats = await response.json();
                this.lastUpdate = new Date().toLocaleTimeString('fr-FR');
            } catch (err) {
                this.error = 'Impossible de charger les statistiques';
                console.error(err);
            } finally {
                this.loading = false;
            }
        },

        destroy() {
            if (this.intervalId) {
                clearInterval(this.intervalId);
            }
        }
    };
}
</script>
@endpush