$(function () {
  'use strict';

  // Initialize charts
  initDealsChart();
  initPipelineChart();
  initLeadSourcesChart();
  initTaskStatusChart();

  // Deals Overview Chart
  function initDealsChart() {
    const chartElement = document.querySelector("#dealsChart");
    if (!chartElement) return;

    $.ajax({
      url: pageData.urls.dealsChart,
      method: 'GET',
      success: function(response) {
        if (response.status === 'success' && response.data.chart_data) {
          const chartData = response.data.chart_data;

          // Handle empty data or all zeros
          if (!chartData || chartData.length === 0) {
            chartElement.innerHTML = '<div class="text-center text-muted p-5">' + pageData.labels.noData + '</div>';
            return;
          }

          // Check if all values are zero
          const hasData = chartData.some(item => (item.total || 0) > 0 || (item.won || 0) > 0 || (item.revenue || 0) > 0);
          if (!hasData) {
            chartElement.innerHTML = '<div class="text-center text-muted p-5">' + pageData.labels.noData + '</div>';
            return;
          }

          const options = {
            chart: {
              type: 'line',
              height: 350,
              toolbar: {
                show: false
              }
            },
            series: [
              {
                name: pageData.labels.deals,
                type: 'column',
                data: chartData.map(item => item.total || 0)
              },
              {
                name: pageData.labels.won,
                type: 'column',
                data: chartData.map(item => item.won || 0)
              },
              {
                name: pageData.labels.revenue,
                type: 'line',
                data: chartData.map(item => item.revenue || 0)
              }
            ],
            xaxis: {
              categories: chartData.map(item => item.month)
            },
            yaxis: [
              {
                title: {
                  text: pageData.labels.deals
                }
              },
              {
                opposite: true,
                title: {
                  text: pageData.labels.revenue + ' ($)'
                }
              }
            ],
            colors: ['#71dd37', '#03c3ec', '#ff3e1d'],
            dataLabels: {
              enabled: false
            },
            stroke: {
              width: [0, 0, 3],
              curve: 'smooth'
            },
            plotOptions: {
              bar: {
                columnWidth: '50%'
              }
            },
            fill: {
              opacity: [0.85, 0.85, 1]
            }
          };

          const chart = new ApexCharts(chartElement, options);
          chart.render();
        } else {
          chartElement.innerHTML = '<div class="text-center text-muted p-5">' + pageData.labels.noData + '</div>';
        }
      },
      error: function() {
        console.error('Failed to load deals chart data');
        chartElement.innerHTML = '<div class="text-center text-muted p-5">' + pageData.labels.noData + '</div>';
      }
    });
  }

  // Pipeline Distribution Chart
  function initPipelineChart() {
    const chartElement = document.querySelector("#pipelineChart");
    if (!chartElement) return;

    const pipelineData = pageData.pipelines || [];

    // Handle empty data
    if (pipelineData.length === 0) {
      chartElement.innerHTML = '<div class="text-center text-muted p-5">' + pageData.labels.noData + '</div>';
      return;
    }

    // Check if all counts are zero
    const totalDeals = pipelineData.reduce((sum, p) => sum + (p.deals_count || 0), 0);
    if (totalDeals === 0) {
      chartElement.innerHTML = '<div class="text-center text-muted p-5">' + pageData.labels.noData + '</div>';
      return;
    }

    const options = {
      chart: {
        type: 'donut',
        height: 280
      },
      series: pipelineData.map(p => p.deals_count || 0),
      labels: pipelineData.map(p => p.name),
      colors: ['#71dd37', '#03c3ec', '#ffab00', '#ff3e1d', '#836AF9'],
      dataLabels: {
        enabled: false
      },
      legend: {
        show: false
      },
      plotOptions: {
        pie: {
          donut: {
            size: '70%',
            labels: {
              show: true,
              total: {
                show: true,
                label: pageData.labels.deals,
                formatter: function(w) {
                  return w.globals.seriesTotals.reduce((a, b) => a + b, 0);
                }
              }
            }
          }
        }
      }
    };

    const chart = new ApexCharts(chartElement, options);
    chart.render();
  }

  // Lead Sources Chart
  function initLeadSourcesChart() {
    const chartElement = document.querySelector("#leadSourcesChart");
    if (!chartElement) return;

    $.ajax({
      url: pageData.urls.leadsChart,
      method: 'GET',
      success: function(response) {
        if (response.status === 'success' && response.data.chart_data) {
          const chartData = response.data.chart_data;

          // Handle empty data or all zeros
          if (!chartData || chartData.length === 0) {
            chartElement.innerHTML = '<div class="text-center text-muted p-5">' + pageData.labels.noData + '</div>';
            return;
          }

          // Check if all counts are zero
          const totalLeads = chartData.reduce((sum, item) => sum + (item.count || 0), 0);
          if (totalLeads === 0) {
            chartElement.innerHTML = '<div class="text-center text-muted p-5">' + pageData.labels.noData + '</div>';
            return;
          }

          const options = {
            chart: {
              type: 'bar',
              height: 300,
              toolbar: {
                show: false
              }
            },
            series: [{
              name: pageData.labels.leads,
              data: chartData.map(item => item.count || 0)
            }],
            xaxis: {
              categories: chartData.map(item => item.source),
              labels: {
                rotate: -45,
                trim: true
              }
            },
            colors: ['#03c3ec'],
            dataLabels: {
              enabled: false
            },
            plotOptions: {
              bar: {
                horizontal: true,
                barHeight: '60%'
              }
            }
          };

          const chart = new ApexCharts(chartElement, options);
          chart.render();
        } else {
          chartElement.innerHTML = '<div class="text-center text-muted p-5">' + pageData.labels.noData + '</div>';
        }
      },
      error: function() {
        console.error('Failed to load lead sources chart data');
        chartElement.innerHTML = '<div class="text-center text-muted p-5">' + pageData.labels.noData + '</div>';
      }
    });
  }

  // Task Status Chart
  function initTaskStatusChart() {
    const chartElement = document.querySelector("#taskStatusChart");
    if (!chartElement) return;

    $.ajax({
      url: pageData.urls.tasksChart,
      method: 'GET',
      success: function(response) {
        if (response.status === 'success' && response.data.chart_data) {
          const chartData = response.data.chart_data;

          // Handle empty data
          if (!chartData || chartData.length === 0) {
            chartElement.innerHTML = '<div class="text-center text-muted p-5">' + pageData.labels.noData + '</div>';
            return;
          }

          // Calculate total to prevent division by zero
          const totalCount = chartData.reduce((sum, i) => sum + (i.count || 0), 0);
          if (totalCount === 0) {
            chartElement.innerHTML = '<div class="text-center text-muted p-5">' + pageData.labels.noData + '</div>';
            return;
          }

          const options = {
            chart: {
              type: 'radialBar',
              height: 300
            },
            series: chartData.map(item => Math.round(((item.count || 0) / totalCount) * 100)),
            labels: chartData.map(item => item.status),
            colors: ['#71dd37', '#ffab00', '#ff3e1d', '#03c3ec'],
            plotOptions: {
              radialBar: {
                dataLabels: {
                  name: {
                    fontSize: '14px'
                  },
                  value: {
                    fontSize: '16px',
                    formatter: function(val) {
                      return val + '%';
                    }
                  },
                  total: {
                    show: true,
                    label: pageData.labels.tasks,
                    formatter: function() {
                      return totalCount;
                    }
                  }
                }
              }
            }
          };

          const chart = new ApexCharts(chartElement, options);
          chart.render();
        } else {
          chartElement.innerHTML = '<div class="text-center text-muted p-5">' + pageData.labels.noData + '</div>';
        }
      },
      error: function() {
        console.error('Failed to load task status chart data');
        chartElement.innerHTML = '<div class="text-center text-muted p-5">' + pageData.labels.noData + '</div>';
      }
    });
  }
});