<x-filament-widgets::widget>
    <x-filament::section>
        <x-slot name="heading">
            <div class="flex items-center gap-2">
                <x-filament::icon
                    icon="heroicon-o-bell-alert"
                    class="h-5 w-5 text-warning-500"
                />
                Alertas de Rendimiento
            </div>
        </x-slot>

        @php
            $alerts = $this->getAlerts();
        @endphp

        @if (count($alerts) > 0)
            <div class="space-y-3">
                @foreach ($alerts as $alert)
                    <div class="flex items-start gap-3 p-3 rounded-lg bg-{{ $this->getSeverityColor($alert['severity']) }}-50 dark:bg-{{ $this->getSeverityColor($alert['severity']) }}-900/20 border border-{{ $this->getSeverityColor($alert['severity']) }}-200 dark:border-{{ $this->getSeverityColor($alert['severity']) }}-800">
                        <x-filament::icon
                            :icon="$this->getTypeIcon($alert['type'])"
                            class="h-5 w-5 mt-0.5 text-{{ $this->getSeverityColor($alert['severity']) }}-500"
                        />
                        <div class="flex-1 min-w-0">
                            <p class="text-sm font-medium text-gray-900 dark:text-white">
                                {{ $alert['message'] }}
                            </p>
                            @if ($alert['type'] === 'no_activity' && isset($alert['data']['last_payment_date']))
                                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                    Último pago: {{ \Carbon\Carbon::parse($alert['data']['last_payment_date'])->format('d/m/Y') }}
                                </p>
                            @elseif ($alert['type'] === 'high_delinquency' && isset($alert['data']['delinquency_rate']))
                                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                    Tasa de morosidad: {{ $alert['data']['delinquency_rate'] }}%
                                </p>
                            @endif
                        </div>
                        <x-filament::badge
                            :color="$this->getSeverityColor($alert['severity'])"
                            size="sm"
                        >
                            {{ $alert['severity'] === 'high' ? 'Alta' : ($alert['severity'] === 'medium' ? 'Media' : 'Baja') }}
                        </x-filament::badge>
                    </div>
                @endforeach
            </div>
        @else
            <div class="flex flex-col items-center justify-center py-6 text-center">
                <x-filament::icon
                    icon="heroicon-o-check-circle"
                    class="h-12 w-12 text-success-500 mb-3"
                />
                <h3 class="text-sm font-medium text-gray-900 dark:text-white">
                    Sin alertas
                </h3>
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                    Todo el equipo está funcionando correctamente.
                </p>
            </div>
        @endif
    </x-filament::section>
</x-filament-widgets::widget>
