@props(['kpis'])

<!-- 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="flex items-center justify-between mb-1">
                <div class="text-xs font-medium text-gray-700 dark:text-gray-300">CA facturé 30j</div>
                @if(isset($kpis['revenue_30d_change']))
                    <span class="text-[10px] font-semibold px-1 py-0.5 rounded {{ $kpis['revenue_30d_change'] >= 0 ? 'text-green-700 bg-green-100 dark:bg-green-900 dark:text-green-300' : 'text-red-700 bg-red-100 dark:bg-red-900 dark:text-red-300' }}">
                        {{ $kpis['revenue_30d_change'] >= 0 ? '+' : '' }}{{ $kpis['revenue_30d_change'] }}%
                    </span>
                @endif
            </div>
            <div class="text-xl font-bold text-gray-900 dark:text-white">{{ format_currency($kpis['revenue_30d'], $kpis['revenue_30d'] >= 1000 ? 0 : 3) }}<span class="text-xs font-normal ml-1">TND</span></div>
        </div>
        <a href="{{ route('provider.clients.index', ['filter' => 'unpaid']) }}" 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($kpis['unpaid_total'], $kpis['unpaid_total'] >= 1000 ? 0 : 3) }}<span class="text-xs font-normal ml-1">TND</span></div>
        </a>
    </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="flex items-center justify-between mb-1">
                <div class="text-xs font-medium text-gray-700 dark:text-gray-300">RDV dans 7j</div>
                @if(isset($kpis['upcoming_appointments_change']))
                    <span class="text-[10px] font-semibold px-1 py-0.5 rounded {{ $kpis['upcoming_appointments_change'] >= 0 ? 'text-green-700 bg-green-100 dark:bg-green-900 dark:text-green-300' : 'text-red-700 bg-red-100 dark:bg-red-900 dark:text-red-300' }}">
                        {{ $kpis['upcoming_appointments_change'] >= 0 ? '+' : '' }}{{ $kpis['upcoming_appointments_change'] }}%
                    </span>
                @endif
            </div>
            <div class="text-2xl font-bold text-gray-900 dark:text-white">{{ $kpis['upcoming_appointments'] }}</div>
        </div>
        <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-3">
            <div class="flex items-center justify-between mb-1">
                <div class="text-xs font-medium text-gray-700 dark:text-gray-300">Sans activité 6m</div>
                @if(isset($kpis['inactive_clients_change']))
                    <span class="text-[10px] font-semibold px-1 py-0.5 rounded {{ $kpis['inactive_clients_change'] < 0 ? 'text-green-700 bg-green-100 dark:bg-green-900 dark:text-green-300' : 'text-red-700 bg-red-100 dark:bg-red-900 dark:text-red-300' }}">
                        {{ $kpis['inactive_clients_change'] >= 0 ? '+' : '' }}{{ $kpis['inactive_clients_change'] }}%
                    </span>
                @endif
            </div>
            <div class="text-2xl font-bold text-gray-900 dark:text-white">{{ $kpis['inactive_clients'] }}</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" title="Montant net total des factures émises dans les 30 derniers jours (non lié aux encaissements)">
        <div class="flex items-center justify-between mb-2">
            <div class="text-xs md:text-sm font-medium text-gray-700 dark:text-gray-300">CA facturé 30j</div>
            @if(isset($kpis['revenue_30d_change']))
                <span class="text-[10px] font-semibold px-1 py-0.5 rounded {{ $kpis['revenue_30d_change'] >= 0 ? 'text-green-700 bg-green-100 dark:bg-green-900 dark:text-green-300' : 'text-red-700 bg-red-100 dark:bg-red-900 dark:text-red-300' }}">
                    {{ $kpis['revenue_30d_change'] >= 0 ? '+' : '' }}{{ $kpis['revenue_30d_change'] }}%
                </span>
            @endif
        </div>
        <div class="text-base md:text-3xl font-bold text-gray-900 dark:text-white whitespace-nowrap overflow-hidden text-ellipsis">{{ format_currency($kpis['revenue_30d'], $kpis['revenue_30d'] >= 1000 ? 0 : 3) }}<span class="text-xs md:text-lg font-normal ml-1">TND</span></div>
    </div>
    <a href="{{ route('provider.clients.index', ['filter' => 'unpaid']) }}" 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 whitespace-nowrap overflow-hidden text-ellipsis underline">{{ format_currency($kpis['unpaid_total'], $kpis['unpaid_total'] >= 1000 ? 0 : 3) }}<span class="text-xs md:text-lg font-normal ml-1">TND</span></div>
    </a>
    <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-3 md:p-4">
        <div class="flex items-center justify-between mb-2">
            <div class="text-xs md:text-sm font-medium text-gray-700 dark:text-gray-300">RDV dans 7j</div>
            @if(isset($kpis['upcoming_appointments_change']))
                <span class="text-[10px] font-semibold px-1 py-0.5 rounded {{ $kpis['upcoming_appointments_change'] >= 0 ? 'text-green-700 bg-green-100 dark:bg-green-900 dark:text-green-300' : 'text-red-700 bg-red-100 dark:bg-red-900 dark:text-red-300' }}">
                    {{ $kpis['upcoming_appointments_change'] >= 0 ? '+' : '' }}{{ $kpis['upcoming_appointments_change'] }}%
                </span>
            @endif
        </div>
        <div class="text-xl md:text-3xl font-bold text-gray-900 dark:text-white whitespace-nowrap">{{ $kpis['upcoming_appointments'] }}</div>
    </div>
    <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-3 md:p-4">
        <div class="flex items-center justify-between mb-2">
            <div class="text-xs md:text-sm font-medium text-gray-700 dark:text-gray-300">Sans activité 6m</div>
            @if(isset($kpis['inactive_clients_change']))
                <span class="text-[10px] font-semibold px-1 py-0.5 rounded {{ $kpis['inactive_clients_change'] < 0 ? 'text-green-700 bg-green-100 dark:bg-green-900 dark:text-green-300' : 'text-red-700 bg-red-100 dark:bg-red-900 dark:text-red-300' }}">
                    {{ $kpis['inactive_clients_change'] >= 0 ? '+' : '' }}{{ $kpis['inactive_clients_change'] }}%
                </span>
            @endif
        </div>
        <div class="text-xl md:text-3xl font-bold text-gray-900 dark:text-white whitespace-nowrap">{{ $kpis['inactive_clients'] }}</div>
    </div>
</div>