// Componente de Dashboard de Alertas
// Arquitectura modular - Componente independiente y reutilizable

function AlertsDashboard() {
  const { useState } = React;
  const [selectedFilter, setSelectedFilter] = useState('all');

  // Usar datos y utilidades globales (verificar disponibilidad)
  const alertsData = window.mockData?.alertsData || [];
  const helpers = window.analyticsHelpers || {};
  const { filterAlerts, sortAlertsByPriority, getAlertTypeConfig } = helpers;

  const filteredAlerts = selectedFilter === 'all' 
    ? (sortAlertsByPriority ? sortAlertsByPriority(alertsData) : alertsData)
    : (filterAlerts && sortAlertsByPriority ? sortAlertsByPriority(filterAlerts(alertsData, selectedFilter)) : alertsData);

  const criticalCount = alertsData.filter(alert => alert.type === 'critical').length;
  const warningCount = alertsData.filter(alert => alert.type === 'warning').length;
  const actionRequiredCount = alertsData.filter(alert => alert.actionRequired).length;

  // Categorías disponibles para filtros
  const categories = ['all', 'pagos', 'mantenimiento', 'contratos', 'finanzas', 'ocupacion', 'reportes'];
  const categoryLabels = {
    all: 'Todas',
    pagos: 'Pagos',
    mantenimiento: 'Mantenimiento', 
    contratos: 'Contratos',
    finanzas: 'Finanzas',
    ocupacion: 'Ocupación',
    reportes: 'Reportes'
  };

  const handleAlertAction = (alertId, action) => {
    console.log(`Acción ${action} en alerta ${alertId}`);
    // Aquí iría la lógica real de manejo de alertas
  };

  return React.createElement('div', { className: 'alerts-dashboard' },
    // Header simplificado sin estadísticas
    React.createElement('div', { className: 'alerts-header' },
      React.createElement('div', { className: 'alerts-header-title' },
        React.createElement('h3', null, 'Centro de Alertas'),
        React.createElement('span', { className: 'alerts-subtitle' }, 
          `${filteredAlerts.length} alertas activas`
        )
      )
    ),
    
    // Filtros mejorados
    React.createElement('div', { className: 'alerts-filters' },
      categories.map(filter =>
        React.createElement('button', {
          key: filter,
          className: `alert-filter ${selectedFilter === filter ? 'active' : ''}`,
          onClick: () => setSelectedFilter(filter)
        }, categoryLabels[filter])
      )
    ),
    
    // Lista de alertas con acciones
    React.createElement('div', { className: 'alerts-list' },
      filteredAlerts.length === 0 
        ? React.createElement('div', { className: 'alerts-empty' },
            React.createElement('i', { className: 'fas fa-check-circle' }),
            React.createElement('p', null, 'No hay alertas en esta categoría'),
            React.createElement('small', null, 'Todo está funcionando correctamente')
          )
        : filteredAlerts.map((alert, index) => {
            const config = getAlertTypeConfig ? getAlertTypeConfig(alert.type) : {
              bgColor: "rgba(58, 107, 218, 0.1)",
              borderColor: "#3A6BDA", 
              iconColor: "#3A6BDA"
            };
            return React.createElement('div', {
              key: alert.id,
              className: `alert-item ${alert.type} ${alert.actionRequired ? 'requires-action' : ''}`,
              style: {
                backgroundColor: config.bgColor,
                borderLeft: `4px solid ${config.borderColor}`
              }
            },
              React.createElement('div', { className: 'alert-icon' },
                React.createElement('i', {
                  className: alert.icon,
                  style: { color: config.iconColor }
                })
              ),
              React.createElement('div', { className: 'alert-content' },
                React.createElement('div', { className: 'alert-header-row' },
                  React.createElement('div', { className: 'alert-title' }, alert.title),
                  alert.actionRequired && React.createElement('span', { 
                    className: 'action-badge' 
                  }, 'Acción Requerida')
                ),
                React.createElement('div', { className: 'alert-message' }, alert.message),
                React.createElement('div', { className: 'alert-meta' },
                  React.createElement('span', { className: 'alert-timestamp' }, alert.timestamp),
                  alert.amount && React.createElement('span', { className: 'alert-amount' }, alert.amount),
                  alert.percentage && React.createElement('span', { className: 'alert-percentage' }, 
                    `${alert.percentage}%`
                  )
                )
              ),
              React.createElement('div', { className: 'alert-actions' },
                React.createElement('button', { 
                  className: 'alert-action-btn primary',
                  onClick: () => handleAlertAction(alert.id, 'view'),
                  title: 'Ver detalles'
                },
                  React.createElement('i', { className: 'fas fa-eye' })
                ),
                alert.actionRequired && React.createElement('button', { 
                  className: 'alert-action-btn success',
                  onClick: () => handleAlertAction(alert.id, 'resolve'),
                  title: 'Resolver'
                },
                  React.createElement('i', { className: 'fas fa-check' })
                ),
                React.createElement('button', { 
                  className: 'alert-action-btn secondary',
                  onClick: () => handleAlertAction(alert.id, 'dismiss'),
                  title: 'Descartar'
                },
                  React.createElement('i', { className: 'fas fa-times' })
                )
              )
            );
          })
    )
  );
}

// Hacer disponible globalmente
if (typeof window !== 'undefined') {
  window.AlertsDashboard = AlertsDashboard;
}