// ========================================
// ANALYTICS - SECCIÓN DE REPORTES
// ========================================
// Componente integrado de reportes dentro de Analytics
// Migrado desde Reports sistema independiente

function AnalyticsReportsSection() {
  const { useState, useEffect } = React;
  
  // Estados para la sección de reportes
  const [selectedReportType, setSelectedReportType] = useState(null);
  const [reportPeriod, setReportPeriod] = useState('monthly');
  const [isGenerating, setIsGenerating] = useState(false);
  const [dashboardMetrics, setDashboardMetrics] = useState(null);

  // Cargar métricas del dashboard al inicializar
  useEffect(() => {
    if (window.mockData) {
      const { apartmentsData, tenantsData, executiveSummary } = window.mockData;

      // Calcular métricas adicionales en tiempo real
      const occupiedApartments = apartmentsData.filter(apt => apt.occupied);
      const apartmentsNeedingAttention = apartmentsData.filter(apt => 
        apt.status === 'needs_attention' || apt.maintenanceScore < 7
      );
      const tenantsNeedingAttention = tenantsData.filter(tenant => 
        tenant.averagePaymentDelay > 5 || tenant.rating < 4.5
      );

      setDashboardMetrics({
        ...executiveSummary,
        apartmentsAttention: apartmentsNeedingAttention.length,
        tenantsAttention: tenantsNeedingAttention.length,
        occupiedUnits: occupiedApartments.length
      });
    }
  }, []);

  // Función para formatear moneda
  const formatCurrency = (amount) => {
    return new Intl.NumberFormat('es-MX', {
      style: 'currency',
      currency: 'MXN'
    }).format(amount);
  };

  // Tipos de reportes disponibles - Reorganizados: Amarilla y Verde arriba, Azul y Roja abajo
  const reportTypes = [
    {
      id: 'financial',
      title: 'Reporte Financiero',
      description: 'Análisis de ingresos, gastos y rentabilidad por período',
      icon: 'fas fa-chart-line',
      color: '#F7C04A',
      metrics: dashboardMetrics ? [
        { label: 'Ingresos Totales', value: formatCurrency(dashboardMetrics.totalMonthlyRevenue) },
        { label: 'Renta Promedio', value: formatCurrency(dashboardMetrics.averageRent) },
        { label: 'Unidades Ocupadas', value: dashboardMetrics.occupiedUnits },
        { label: 'ROI Estimado', value: '0%' }
      ] : []
    },
    {
      id: 'tenants',
      title: 'Reporte de Inquilinos',
      description: 'Análisis detallado de inquilinos, pagos y comportamiento',
      icon: 'fas fa-users',
      color: '#51B97A',
      metrics: dashboardMetrics ? [
        { label: 'Total Inquilinos', value: dashboardMetrics.totalTenants },
        { label: 'Rating Promedio', value: React.createElement('span', null, 
          dashboardMetrics.averageTenantRating,
          React.createElement('i', {
            className: 'fas fa-star',
            style: { color: '#fff', textShadow: '1px 1px 1px #000', marginLeft: '0.3rem' }
          })
        ) },
        { label: 'Pagos Puntuales', value: `${dashboardMetrics.onTimePaymentRate}%` },
        { label: 'Requieren Atención', value: dashboardMetrics.tenantsAttention }
      ] : []
    },
    {
      id: 'apartments',
      title: 'Reporte de Apartamentos',
      description: 'Análisis completo de ocupación, ingresos y estado de propiedades',
      icon: 'fas fa-building',
      color: '#3A6BDA',
      metrics: dashboardMetrics ? [
        { label: 'Total Apartamentos', value: dashboardMetrics.totalApartments },
        { label: 'Ocupación', value: `${dashboardMetrics.occupancyRate}%` },
        { label: 'Ingresos Mensuales', value: formatCurrency(dashboardMetrics.totalMonthlyRevenue) },
        { label: 'Requieren Atención', value: dashboardMetrics.apartmentsAttention }
      ] : []
    },
    {
      id: 'operations',
      title: 'Reporte Operacional',
      description: 'Análisis completo de mantenimiento, contratos y alertas operativas',
      icon: 'fas fa-cogs',
      color: '#DE4C4A',
      metrics: dashboardMetrics ? [
        { label: 'Mantenimientos', value: dashboardMetrics.maintenanceRequestsThisMonth },
        { label: 'Contratos Activos', value: dashboardMetrics.totalTenants },
        { label: 'Promedio Contrato', value: `${dashboardMetrics.averageContractDuration} meses` },
        { label: 'Alertas Activas', value: dashboardMetrics.apartmentsAttention + dashboardMetrics.tenantsAttention }
      ] : []
    }
  ];

  // Períodos de reporte disponibles
  const reportPeriods = [
    { value: 'weekly', label: 'Última Semana' },
    { value: 'monthly', label: 'Este Mes' },
    { value: 'quarterly', label: 'Este Trimestre' },
    { value: 'yearly', label: 'Este Año' }
  ];

  // Manejar generación de reportes
  const handleGenerateReport = async (reportType) => {
    setIsGenerating(true);
    setSelectedReportType(reportType);
    
    // Simular generación de reporte
    setTimeout(() => {
      setIsGenerating(false);
      console.log(`Generando reporte: ${reportType} para período: ${reportPeriod}`);
      // Aquí se navegaría al reporte específico o se abriría un modal
    }, 2000);
  };

  // Manejar exportación rápida
  const handleQuickExport = (reportType, format) => {
    const data = window.mockData;
    console.log(`Exportando ${reportType} en formato ${format}:`, data);
    // Aquí se implementaría la exportación real
  };

  return React.createElement('div', { className: 'analytics-reports-section' },
    // Header de la sección
    React.createElement('div', { className: 'reports-section-header' },
      React.createElement('div', { className: 'section-title-container' },
        React.createElement('h2', { className: 'section-title' },
          React.createElement('i', { className: 'fas fa-chart-bar section-icon' }),
          'Centro de Reportes'
        ),
        React.createElement('p', { className: 'section-subtitle' },
          'Análisis completo y exportación de datos empresariales'
        )
      ),
      React.createElement('div', { className: 'reports-controls' },
        // Selector de período
        React.createElement('div', { className: 'reports-period-selector-container' },
          React.createElement('label', { className: 'period-label' }, 'Período:'),
          React.createElement('select', {
            className: 'period-selector',
            value: reportPeriod,
            onChange: (e) => setReportPeriod(e.target.value)
          },
            reportPeriods.map(period =>
              React.createElement('option', {
                key: period.value,
                value: period.value
              }, period.label)
            )
          )
        ),
        // Exportación rápida global
        React.createElement('button', {
          className: 'quick-export-btn',
          onClick: () => handleQuickExport('dashboard', 'pdf'),
          title: 'Exportar Dashboard Completo'
        },
          React.createElement('i', { className: 'fas fa-download' }),
          'Exportar Todo'
        )
      )
    ),

    // Resumen Ejecutivo
    React.createElement('div', { className: 'reports-executive-summary' },
      React.createElement('h3', { className: 'summary-title' }, 'Resumen Ejecutivo'),
      React.createElement('div', { className: 'summary-grid' },
        dashboardMetrics && [
          {
            icon: 'fas fa-home',
            label: 'Ocupación Total',
            value: `${dashboardMetrics.occupancyRate}%`,
            trend: '0%',
            trendType: 'positive'
          },
          {
            icon: 'fas fa-dollar-sign',
            label: 'Ingresos Mensuales',
            value: formatCurrency(dashboardMetrics.totalMonthlyRevenue),
            trend: '0%',
            trendType: 'positive'
          },
          {
            icon: 'fas fa-users',
            label: 'Satisfacción Inquilinos',
            value: React.createElement('span', null, 
              dashboardMetrics.averageTenantRating,
              React.createElement('i', {
                className: 'fas fa-star',
                style: { color: '#fff', textShadow: '1px 1px 1px #000', marginLeft: '0.3rem' }
              })
            ),
            trend: '0',
            trendType: 'positive'
          },
          {
            icon: 'fas fa-clock',
            label: 'Pagos Puntuales',
            value: `${dashboardMetrics.onTimePaymentRate}%`,
            trend: '0%',
            trendType: 'positive'
          }
        ].map((metric, index) =>
          React.createElement('div', {
            key: index,
            className: 'summary-metric-card'
          },
            React.createElement('div', { className: 'summary-icon-container' },
              React.createElement('i', { 
                className: `${metric.icon} summary-icon` 
              })
            ),
            React.createElement('div', { className: 'metric-content' },
              React.createElement('span', { className: 'metric-label' }, metric.label),
              React.createElement('span', { className: 'metric-value' }, metric.value),
              React.createElement('span', { 
                className: `metric-trend ${metric.trendType}` 
              },
                React.createElement('i', { 
                  className: `fas fa-arrow-${metric.trendType === 'positive' ? 'up' : 'down'}` 
                }),
                metric.trend
              )
            )
          )
        )
      )
    ),

    // Grid de Tipos de Reportes
    React.createElement('div', { className: 'reports-types-container' },
      React.createElement('h3', { className: 'types-title' }, 'Tipos de Reportes Disponibles'),
      React.createElement('div', { className: 'reports-grid' },
        reportTypes.map(reportType =>
          React.createElement('div', {
            key: reportType.id,
            className: `report-card ${selectedReportType === reportType.id ? 'selected' : ''}`,
            style: { borderColor: reportType.color }
          },
            // Header del card
            React.createElement('div', { className: 'report-card-header' },
              React.createElement('div', { className: 'report-icon-container' },
                React.createElement('i', {
                  className: `${reportType.icon} report-icon`,
                  style: { color: reportType.color }
                })
              ),
              React.createElement('div', { className: 'report-title-container' },
                React.createElement('h4', { className: 'report-title' }, reportType.title),
                React.createElement('p', { className: 'report-description' }, reportType.description)
              )
            ),

            // Métricas del reporte
            React.createElement('div', { className: 'report-metrics' },
              reportType.metrics.map((metric, index) =>
                React.createElement('div', {
                  key: index,
                  className: 'report-metric-item'
                },
                  React.createElement('span', { className: 'metric-item-label' }, metric.label),
                  React.createElement('span', { className: 'metric-item-value' }, metric.value)
                )
              )
            ),

            // Acciones del reporte
            React.createElement('div', { className: 'report-actions' },
              React.createElement('button', {
                className: 'report-action-btn primary',
                onClick: () => handleGenerateReport(reportType.id),
                disabled: isGenerating
              },
                isGenerating && selectedReportType === reportType.id
                  ? React.createElement('i', { className: 'fas fa-spinner fa-spin' })
                  : React.createElement('i', { className: 'fas fa-eye' }),
                isGenerating && selectedReportType === reportType.id ? 'Generando...' : 'Ver Reporte'
              ),
              React.createElement('div', { className: 'export-options' },
                React.createElement('button', {
                  className: 'export-btn pdf',
                  onClick: () => handleQuickExport(reportType.id, 'pdf'),
                  title: 'Exportar a PDF'
                },
                  React.createElement('i', { className: 'fas fa-file-pdf' })
                ),
                React.createElement('button', {
                  className: 'export-btn excel',
                  onClick: () => handleQuickExport(reportType.id, 'excel'),
                  title: 'Exportar a Excel'
                },
                  React.createElement('i', { className: 'fas fa-file-excel' })
                )
              )
            )
          )
        )
      )
    ),

    // Reportes Recientes
    React.createElement('div', { className: 'reports-activity-section' },
      React.createElement('div', { className: 'activity-grid' },
        // Reportes Recientes
        React.createElement('div', { className: 'activity-card' },
          React.createElement('h4', { className: 'activity-title' },
            React.createElement('i', { className: 'fas fa-history' }),
            'Reportes Recientes'
          ),
          React.createElement('div', { className: 'activity-list' },
            [
              { name: 'Reporte Mensual - Apartamentos', date: '8 Oct 2024', type: 'apartments' },
              { name: 'Análisis de Inquilinos Q3', date: '1 Oct 2024', type: 'tenants' },
              { name: 'Reporte Financiero Sept', date: '30 Sep 2024', type: 'financial' },
              { name: 'Estado Operacional', date: '25 Sep 2024', type: 'operations' }
            ].map((report, index) =>
              React.createElement('div', {
                key: index,
                className: 'activity-item'
              },
                React.createElement('div', { className: 'activity-info' },
                  React.createElement('span', { className: 'activity-name' }, report.name),
                  React.createElement('span', { className: 'activity-date' }, report.date)
                ),
                React.createElement('button', {
                  className: 'activity-action',
                  onClick: () => console.log(`Reabrir reporte: ${report.name}`)
                },
                  React.createElement('i', { className: 'fas fa-download' })
                )
              )
            )
          )
        ),

        // Reportes Programados
        React.createElement('div', { className: 'activity-card' },
          React.createElement('h4', { className: 'activity-title' },
            React.createElement('i', { className: 'fas fa-calendar-alt' }),
            'Reportes Programados'
          ),
          React.createElement('div', { className: 'activity-list' },
            [
              { name: 'Reporte Mensual Automático', next: '1 Nov 2024', frequency: 'Mensual' },
              { name: 'Análisis Trimestral', next: '1 Ene 2025', frequency: 'Trimestral' },
              { name: 'Reporte de Ocupación', next: '15 Oct 2024', frequency: 'Quincenal' }
            ].map((scheduled, index) =>
              React.createElement('div', {
                key: index,
                className: 'activity-item'
              },
                React.createElement('div', { className: 'activity-info' },
                  React.createElement('span', { className: 'activity-name' }, scheduled.name),
                  React.createElement('span', { className: 'activity-date' }, 
                    `Próximo: ${scheduled.next} (${scheduled.frequency})`
                  )
                ),
                React.createElement('button', {
                  className: 'activity-action',
                  onClick: () => console.log(`Configurar: ${scheduled.name}`)
                },
                  React.createElement('i', { className: 'fas fa-cog' })
                )
              )
            )
          )
        )
      )
    )
  );
}

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