import React from 'react';
import { Card } from '../../ui';
import { Activity, AlertTriangle, TrendingUp, Clock } from 'lucide-react';
import { AuditLogStatsResponse } from '../../../api/types/auditLogs';

interface EventStatsWidgetProps {
  stats: AuditLogStatsResponse;
}

export const EventStatsWidget: React.FC<EventStatsWidgetProps> = ({ stats }) => {
  const criticalCount = stats.events_by_severity?.critical || 0;
  const highCount = stats.events_by_severity?.high || 0;
  const todayCount = stats.total_events; // Simplified - would need date filtering for actual "today"

  // Find most common action
  const mostCommonAction = Object.entries(stats.events_by_action || {})
    .sort(([, a], [, b]) => b - a)[0]?.[0] || 'N/A';

  return (
    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
      {/* Total Events */}
      <Card>
        <div className="p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-gray-600">Total de Eventos</p>
              <p className="mt-2 text-3xl font-bold text-gray-900">{stats.total_events}</p>
            </div>
            <div className="rounded-full bg-blue-100 p-3">
              <Activity className="h-6 w-6 text-blue-600" />
            </div>
          </div>
        </div>
      </Card>

      {/* Critical Events */}
      <Card>
        <div className="p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-gray-600">Eventos Críticos</p>
              <p className="mt-2 text-3xl font-bold text-red-600">{criticalCount}</p>
              {highCount > 0 && (
                <p className="mt-1 text-xs text-gray-500">+{highCount} de alta prioridad</p>
              )}
            </div>
            <div className="rounded-full bg-red-100 p-3">
              <AlertTriangle className="h-6 w-6 text-red-600" />
            </div>
          </div>
        </div>
      </Card>

      {/* Most Common Action */}
      <Card>
        <div className="p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-gray-600">Acción Más Común</p>
              <p className="mt-2 text-2xl font-bold text-gray-900 capitalize">
                {mostCommonAction}
              </p>
              {stats.events_by_action && stats.events_by_action[mostCommonAction] && (
                <p className="mt-1 text-xs text-gray-500">
                  {stats.events_by_action[mostCommonAction]} veces
                </p>
              )}
            </div>
            <div className="rounded-full bg-green-100 p-3">
              <TrendingUp className="h-6 w-6 text-green-600" />
            </div>
          </div>
        </div>
      </Card>

      {/* Date Range */}
      <Card>
        <div className="p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-gray-600">Período</p>
              {stats.date_range.min && stats.date_range.max ? (
                <>
                  <p className="mt-2 text-sm font-semibold text-gray-900">
                    {new Date(stats.date_range.min).toLocaleDateString()}
                  </p>
                  <p className="text-sm text-gray-600">hasta</p>
                  <p className="text-sm font-semibold text-gray-900">
                    {new Date(stats.date_range.max).toLocaleDateString()}
                  </p>
                </>
              ) : (
                <p className="mt-2 text-sm text-gray-500">Sin datos</p>
              )}
            </div>
            <div className="rounded-full bg-purple-100 p-3">
              <Clock className="h-6 w-6 text-purple-600" />
            </div>
          </div>
        </div>
      </Card>
    </div>
  );
};
