// Compatible con Babel standalone - NO usar imports
// React y Chart.js están disponibles globalmente
// Los datos y utilidades están en mockData.js y helpers.js
// Los componentes están en la carpeta components/

function AnalyticsDashboard() {
  const { useEffect } = React;

  useEffect(() => {
    // Registrar componentes de Chart.js
    Chart.register(Chart.CategoryScale, Chart.LinearScale, Chart.BarElement, Chart.ArcElement, Chart.PointElement, Chart.LineElement, Chart.Tooltip, Chart.Legend);

    // Verificar que los datos estén disponibles
    if (!window.mockData || !window.analyticsHelpers) {
      console.error('Analytics data or helpers not loaded');
      return;
    }

    const { paymentsByMonth, latePaymentsPie, ratingsData, colorsRepo } = window.mockData;

    // Crear gráfico de barras
    const ctxBar = document.getElementById('paymentsChart');
    if (ctxBar) {
      new Chart(ctxBar, {
        type: 'bar',
        data: paymentsByMonth,
        options: {
          plugins: {
            legend: { labels: { color: colorsRepo.blanco, font: { size: 14, weight: "bold" } } },
            tooltip: { backgroundColor: "#111", titleColor: colorsRepo.blanco, bodyColor: colorsRepo.blanco, borderColor: colorsRepo.azul, borderWidth: 2 }
          },
          scales: {
            x: { ticks: { color: colorsRepo.blanco, font: { size: 14 } }, grid: { color: "#222" } },
            y: { ticks: { color: colorsRepo.blanco, font: { size: 14 } }, grid: { color: "#222" }, beginAtZero: true }
          },
          animation: { duration: 950, easing: "easeOutBack" },
          responsive: true,
          maintainAspectRatio: false
        }
      });
    }

    // Crear gráfico de pastel
    const ctxPie = document.getElementById('latePaymentsChart');
    if (ctxPie) {
      new Chart(ctxPie, {
        type: 'pie',
        data: latePaymentsPie,
        options: {
          plugins: {
            legend: {
              labels: {
                color: "#fff",
                font: { size: 14, weight: "bold" },
                usePointStyle: true,
                padding: 15
              }
            },
            tooltip: { backgroundColor: "#111", titleColor: "#fff", bodyColor: "#fff", borderColor: colorsRepo.rojo, borderWidth: 2 }
          },
          animation: { duration: 950, easing: "easeOutBack" },
          responsive: true,
          maintainAspectRatio: false
        }
      });
    }

    // Crear gráfico de línea
    const ctxLine = document.getElementById('ratingsChart');
    if (ctxLine) {
      new Chart(ctxLine, {
        type: 'line',
        data: ratingsData,
        options: {
          plugins: {
            legend: { labels: { color: colorsRepo.blanco, font: { size: 14 } } },
            tooltip: { backgroundColor: "#111", titleColor: colorsRepo.blanco, bodyColor: colorsRepo.blanco, borderColor: colorsRepo.verde, borderWidth: 2 }
          },
          scales: {
            x: { ticks: { color: colorsRepo.blanco, font: { size: 14 } }, grid: { color: "#222" } },
            y: { ticks: { color: colorsRepo.blanco, font: { size: 14 } }, grid: { color: "#222" }, min: 4, max: 5 }
          },
          layout: {
            padding: { left: 0, right: 0, top: 0, bottom: 0 }
          },
          maintainAspectRatio: false,
          animation: { duration: 950, easing: "easeOutBack" },
          responsive: true
        }
      });
    }
  }, []);

  // Verificar que las funciones auxiliares estén disponibles
  const meanRating = window.analyticsHelpers ? 
    window.analyticsHelpers.calculateMeanRating(window.mockData.mockTenantData) : 
    4.7;

  return React.createElement('div', { className: 'analytics-container' },
    // Dashboard de Alertas - Componente modular nivel senior
    React.createElement('div', { className: 'analytics-alerts-section' },
      React.createElement(window.AlertsDashboard || (() => React.createElement('div', null, 'Cargando alertas...')))
    ),
    
    // Flujo de Caja - Componente modular nivel senior  
    React.createElement('div', { className: 'analytics-card analytics-card-large' },
      React.createElement(window.CashFlowChart || (() => React.createElement('div', null, 'Cargando flujo de caja...')))
    ),

    // Pagos mensuales
    React.createElement('div', { className: 'analytics-card' },
      React.createElement('div', { className: 'analytics-chart-title' }, 'Pagos mensuales (últimos 5 meses)'),
      React.createElement('div', { className: 'chart-container' },
        React.createElement('canvas', { id: 'paymentsChart' })
      )
    ),

    // Pagos atrasados y Calificaciones
    React.createElement('div', { className: 'analytics-row' },
      React.createElement('div', { className: 'analytics-card analytics-card-secondary' },
        React.createElement('div', { className: 'analytics-chart-title' }, 'Pagos atrasados por inquilino'),
        React.createElement('div', { className: 'chart-container' },
          React.createElement('canvas', { id: 'latePaymentsChart' })
        )
      ),
      React.createElement('div', { className: 'analytics-card analytics-card-secondary analytics-card-secondary--full' },
        React.createElement('div', { className: 'analytics-chart-title' }, 'Calificaciones de inquilinos'),
        React.createElement('div', { className: 'analytics-chart-full' },
          React.createElement('canvas', { id: 'ratingsChart', style: { height: '160px' } })
        ),
        React.createElement('div', { className: 'analytics-stars-block' },
          React.createElement('span', { className: 'analytics-stars-label-block' }, 'Media de estrellas:'),
          React.createElement('span', { className: 'analytics-stars-value-block' }, meanRating),
          React.createElement('span', { className: 'analytics-stars-icons-block' },
            Array.from({ length: 5 }, (_, i) => 
              React.createElement('svg', {
                key: i,
                width: "22",
                height: "22",
                viewBox: "0 0 24 24",
                style: { verticalAlign: "middle", marginLeft: "2px", opacity: i < Math.round(meanRating) ? 1 : 0.28 }
              },
                React.createElement('polygon', {
                  points: "12,2 15,9 22,9.3 17,14.2 18.3,21 12,17.3 5.7,21 7,14.2 2,9.3 9,9",
                  fill: i < Math.round(meanRating) ? "#F7C04A" : "#222",
                  stroke: "#F7C04A",
                  strokeWidth: "1"
                })
              )
            )
          )
        )
      )
    ),

    // NUEVA SECCIÓN DE REPORTES INTEGRADA - AL FINAL
    React.createElement('div', { className: 'analytics-reports-container' },
      React.createElement(window.AnalyticsReportsSection || (() => React.createElement('div', null, 'Cargando sección de reportes...')))
    )
  );
}

// Hacer disponible globalmente para Babel
window.AnalyticsDashboard = AnalyticsDashboard;