import '../css/app.css';
import Alpine from 'alpinejs';
import ApexCharts from 'apexcharts';

window.Alpine = Alpine;

const parseData = (value, fallback = []) => {
  if (!value) {
    return fallback;
  }

  try {
    return JSON.parse(value);
  } catch (error) {
    return fallback;
  }
};

const initDonutCharts = () => {
  document.querySelectorAll('[data-chart="donut"]').forEach((element) => {
    const labels = parseData(element.dataset.labels);
    const series = parseData(element.dataset.series);
    const colors = parseData(element.dataset.colors);

    if (!series.length) {
      return;
    }

    const chart = new ApexCharts(element, {
      chart: {
        type: 'donut',
        fontFamily: 'Plus Jakarta Sans, sans-serif',
        toolbar: { show: false },
      },
      colors,
      dataLabels: { enabled: false },
      labels,
      legend: {
        position: 'bottom',
        fontSize: '12px',
      },
      series,
      stroke: {
        colors: ['#ffffff'],
        width: 3,
      },
      tooltip: {
        y: {
          formatter: (value) => `${value} copii`,
        },
      },
    });

    chart.render();
  });
};

const initBarCharts = () => {
  document.querySelectorAll('[data-chart="bar"]').forEach((element) => {
    const categories = parseData(element.dataset.categories);
    const series = parseData(element.dataset.series);

    if (!series.length) {
      return;
    }

    const chart = new ApexCharts(element, {
      chart: {
        type: 'bar',
        fontFamily: 'Plus Jakarta Sans, sans-serif',
        height: 320,
        toolbar: { show: false },
      },
      colors: ['#4f46e5'],
      dataLabels: { enabled: false },
      grid: {
        borderColor: '#e2e8f0',
        strokeDashArray: 4,
      },
      plotOptions: {
        bar: {
          borderRadius: 10,
          columnWidth: '46%',
        },
      },
      series: [
        {
          name: 'Copii',
          data: series,
        },
      ],
      xaxis: {
        categories,
        labels: {
          style: {
            colors: '#64748b',
            fontSize: '12px',
          },
        },
      },
      yaxis: {
        labels: {
          style: {
            colors: '#64748b',
            fontSize: '12px',
          },
        },
      },
    });

    chart.render();
  });
};

const initLineCharts = () => {
  document.querySelectorAll('[data-chart="line"]').forEach((element) => {
    const categories = parseData(element.dataset.categories);
    const series = parseData(element.dataset.series);

    if (!series.length) {
      return;
    }

    const chart = new ApexCharts(element, {
      chart: {
        type: 'line',
        fontFamily: 'Plus Jakarta Sans, sans-serif',
        height: 320,
        toolbar: { show: false },
      },
      colors: ['#4f46e5'],
      dataLabels: { enabled: false },
      grid: {
        borderColor: '#e2e8f0',
        strokeDashArray: 4,
      },
      series: [
        {
          name: 'Scor',
          data: series,
        },
      ],
      stroke: {
        curve: 'smooth',
        width: 3,
      },
      xaxis: {
        categories,
        labels: {
          style: {
            colors: '#64748b',
            fontSize: '12px',
          },
        },
      },
      yaxis: {
        min: 0,
        max: 5,
        tickAmount: 5,
        labels: {
          style: {
            colors: '#64748b',
            fontSize: '12px',
          },
        },
      },
    });

    chart.render();
  });
};

const initRadarCharts = () => {
  document.querySelectorAll('[data-chart="radar"]').forEach((element) => {
    const categories = parseData(element.dataset.categories);
    const series = parseData(element.dataset.series);

    if (!series.length) {
      return;
    }

    const chart = new ApexCharts(element, {
      chart: {
        type: 'radar',
        fontFamily: 'Plus Jakarta Sans, sans-serif',
        height: 320,
        toolbar: { show: false },
      },
      colors: ['#0f766e'],
      dataLabels: {
        enabled: true,
        background: {
          enabled: true,
          foreColor: '#0f172a',
          borderRadius: 8,
          opacity: 0.85,
        },
      },
      series: [
        {
          name: 'Scor',
          data: series,
        },
      ],
      xaxis: {
        categories,
        labels: {
          style: {
            colors: Array(categories.length).fill('#475569'),
            fontSize: '12px',
          },
        },
      },
      yaxis: {
        min: 0,
        max: 5,
        tickAmount: 5,
      },
      stroke: {
        width: 2,
      },
      fill: {
        opacity: 0.25,
      },
      markers: {
        size: 4,
      },
    });

    chart.render();
  });
};

document.addEventListener('DOMContentLoaded', () => {
  initDonutCharts();
  initBarCharts();
  initLineCharts();
  initRadarCharts();
});

Alpine.start();
