// frontend/src/components/alerts/AlertStats.tsx
/**
 * Statistics display for alerts and recommendations
 */

import React from 'react';

interface AlertStatsProps {
  urgentCount: number;
  highCount: number;
  recCount: number;
  totalItems: number;
  activeItems: number;
}

export const AlertStats: React.FC<AlertStatsProps> = ({
  urgentCount,
  highCount,
  recCount,
  totalItems,
  activeItems
}) => {
  const stats = [
    {
      name: 'Alertas Urgentes',
      value: urgentCount,
      icon: '🚨',
      color: urgentCount > 0 ? 'text-red-600' : 'text-gray-600',
      bgColor: urgentCount > 0 ? 'bg-red-50' : 'bg-gray-50',
      borderColor: urgentCount > 0 ? 'border-red-200' : 'border-gray-200'
    },
    {
      name: 'Alertas Altas',
      value: highCount,
      icon: '⚠️',
      color: highCount > 0 ? 'text-orange-600' : 'text-gray-600',
      bgColor: highCount > 0 ? 'bg-orange-50' : 'bg-gray-50',
      borderColor: highCount > 0 ? 'border-orange-200' : 'border-gray-200'
    },
    {
      name: 'Recomendaciones',
      value: recCount,
      icon: '💡',
      color: recCount > 0 ? 'text-blue-600' : 'text-gray-600',
      bgColor: recCount > 0 ? 'bg-blue-50' : 'bg-gray-50',
      borderColor: recCount > 0 ? 'border-blue-200' : 'border-gray-200'
    },
    {
      name: 'Total Activos',
      value: activeItems,
      icon: '📊',
      color: 'text-gray-600',
      bgColor: 'bg-gray-50',
      borderColor: 'border-gray-200'
    }
  ];

  return (
    <div className="bg-white border-b border-gray-200">
      <div className="px-6 py-4">
        <dl className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
          {stats.map((stat) => (
            <div
              key={stat.name}
              className={`relative overflow-hidden rounded-lg border ${stat.borderColor} ${stat.bgColor} p-4 transition-all duration-200 hover:shadow-md`}
            >
              <dt className="flex items-center text-sm font-medium text-gray-600">
                <span className="text-lg mr-2">{stat.icon}</span>
                {stat.name}
              </dt>
              <dd className={`mt-1 text-2xl font-semibold ${stat.color}`}>
                {stat.value}
              </dd>
              
              {/* Pulse animation for urgent alerts */}
              {stat.name === 'Alertas Urgentes' && urgentCount > 0 && (
                <div className="absolute inset-0 rounded-lg border-2 border-red-400 animate-pulse opacity-50"></div>
              )}
            </div>
          ))}
        </dl>
        
        {/* Summary text */}
        <div className="mt-4 text-sm text-gray-600">
          {totalItems === 0 ? (
            <p className="flex items-center">
              <span className="text-green-500 mr-2">✅</span>
              Todos los sistemas funcionan correctamente
            </p>
          ) : (
            <p>
              Mostrando {totalItems} elementos total{totalItems !== 1 ? 'es' : ''} 
              {activeItems > 0 && (
                <>, {activeItems} activo{activeItems !== 1 ? 's' : ''}</>
              )}
            </p>
          )}
        </div>
      </div>
    </div>
  );
};