@props(['stats', 'currency', 'unpaidUrl' => null])

@if($stats && $stats['count'] > 0)
<!-- Version mobile : 2 KPIs + bouton -->
<div class="md:hidden mb-4" x-data="{ showAll: false }">
    <div class="grid grid-cols-2 gap-3 mb-3">
        <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-3">
            <div class="text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Total</div>
            <div class="text-xl font-bold text-gray-900 dark:text-white">{{ format_currency($stats['total'], $stats['total'] >= 1000 ? 0 : 3) }}<span class="text-xs font-normal ml-1">{{ $currency }}</span></div>
        </div>
        @if($unpaidUrl)
        <a href="{{ $unpaidUrl }}" class="bg-gray-50 dark:bg-gray-700 rounded-lg p-3 hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors">
            <div class="text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Impayé</div>
            <div class="text-xl font-bold text-red-600 dark:text-red-400 underline">{{ format_currency($stats['unpaid'], ($stats['unpaid'] ?? 0) >= 1000 ? 0 : 3) }}<span class="text-xs font-normal ml-1">{{ $currency }}</span></div>
        </a>
        @else
        <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-3">
            <div class="text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Impayé</div>
            <div class="text-xl font-bold text-red-600 dark:text-red-400">{{ format_currency($stats['unpaid'], ($stats['unpaid'] ?? 0) >= 1000 ? 0 : 3) }}<span class="text-xs font-normal ml-1">{{ $currency }}</span></div>
        </div>
        @endif
    </div>
    
    <div x-show="showAll" x-collapse style="display: none;" class="grid grid-cols-2 gap-3 mb-3">
        <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-3">
            <div class="text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Moyenne</div>
            <div class="text-xl font-bold text-gray-900 dark:text-white">{{ format_currency($stats['average'], $stats['average'] >= 1000 ? 0 : 3) }}<span class="text-xs font-normal ml-1">{{ $currency }}</span></div>
        </div>
        <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-3">
            <div class="text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">{{ $stats['unique_clients'] ?? false ? 'Moy. par client' : 'Factures' }}</div>
            <div class="text-xl font-bold text-gray-900 dark:text-white">{{ $stats['unique_clients'] ?? false ? format_currency($stats['unique_clients'] > 0 ? $stats['total'] / $stats['unique_clients'] : 0, ($stats['unique_clients'] > 0 ? $stats['total'] / $stats['unique_clients'] : 0) >= 1000 ? 0 : 3) : $stats['count'] }}<span class="text-xs font-normal ml-1">{{ $stats['unique_clients'] ?? false ? $currency : '' }}</span></div>
        </div>
    </div>
    
    <button 
        x-show="!showAll"
        @click="showAll = true"
        class="w-full py-2 text-xs font-medium text-gray-600 dark:text-gray-300 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 flex items-center justify-center gap-1"
    >
        <span>Voir plus de stats</span>
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
        </svg>
    </button>
</div>

<!-- Version desktop complète -->
<div class="hidden md:grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-4 mb-6">
    <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-3 md:p-4">
        <div class="text-xs md:text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Total</div>
        <div class="text-base md:text-3xl font-bold text-gray-900 dark:text-white whitespace-nowrap overflow-hidden text-ellipsis">{{ format_currency($stats['total'], $stats['total'] >= 1000 ? 0 : 3) }}<span class="text-xs md:text-lg font-normal ml-1">{{ $currency }}</span></div>
    </div>
    @if($unpaidUrl)
    <a href="{{ $unpaidUrl }}" class="bg-gray-50 dark:bg-gray-700 rounded-lg p-3 md:p-4 hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors">
        <div class="text-xs md:text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Impayé</div>
        <div class="text-base md:text-3xl font-bold text-red-600 dark:text-red-400 underline whitespace-nowrap overflow-hidden text-ellipsis">{{ format_currency($stats['unpaid'], ($stats['unpaid'] ?? 0) >= 1000 ? 0 : 3) }}<span class="text-xs md:text-lg font-normal ml-1">{{ $currency }}</span></div>
    </a>
    @else
    <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-3 md:p-4">
        <div class="text-xs md:text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Impayé</div>
        <div class="text-base md:text-3xl font-bold text-red-600 dark:text-red-400 whitespace-nowrap overflow-hidden text-ellipsis">{{ format_currency($stats['unpaid'], ($stats['unpaid'] ?? 0) >= 1000 ? 0 : 3) }}<span class="text-xs md:text-lg font-normal ml-1">{{ $currency }}</span></div>
    </div>
    @endif
    <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-3 md:p-4">
        <div class="text-xs md:text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Moyenne</div>
        <div class="text-base md:text-3xl font-bold text-gray-900 dark:text-white whitespace-nowrap overflow-hidden text-ellipsis">{{ format_currency($stats['average'], $stats['average'] >= 1000 ? 0 : 3) }}<span class="text-xs md:text-lg font-normal ml-1">{{ $currency }}</span></div>
    </div>
    <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-3 md:p-4">
        <div class="text-xs md:text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{{ $stats['unique_clients'] ?? false ? 'Moy. par client' : 'Factures' }}</div>
        <div class="text-base md:text-3xl font-bold text-gray-900 dark:text-white whitespace-nowrap overflow-hidden text-ellipsis">{{ $stats['unique_clients'] ?? false ? format_currency($stats['unique_clients'] > 0 ? $stats['total'] / $stats['unique_clients'] : 0, ($stats['unique_clients'] > 0 ? $stats['total'] / $stats['unique_clients'] : 0) >= 1000 ? 0 : 3) : $stats['count'] }}<span class="text-xs md:text-lg font-normal ml-1">{{ $stats['unique_clients'] ?? false ? $currency : '' }}</span></div>
    </div>
</div>
@endif