import React from 'react';
import { Pie, Doughnut } from 'react-chartjs-2';
import {
  Chart as ChartJS,
  ArcElement,
  Tooltip,
  Legend,
} from 'chart.js';
import ChartDataLabels from 'chartjs-plugin-datalabels';

ChartJS.register(ArcElement, Tooltip, Legend, ChartDataLabels);

export function ViolationPieChart({ data }) {
  const chartData = {
    labels: data.map(item => item.category),
    datasets: [{
      data: data.map(item => item.count),
      backgroundColor: [
        '#3B82F6', // Blue
        '#F59E0B', // Orange
        '#10B981', // Green
        '#EF4444', // Red
        '#8B5CF6', // Purple
        '#06B6D4', // Cyan
        '#F97316', // Orange-500
      ],
      borderWidth: 0,
      hoverBorderWidth: 2,
      hoverBorderColor: '#ffffff',
    }],
  };

  const options = {
    responsive: true,
    maintainAspectRatio: false,
    cutout: '60%', // This creates the donut hole
    plugins: {
      datalabels: {
        color: '#000',
        font: {
          weight: 'bold',
          size: 10,
        },
        formatter: (value, context) => {
          const total = context.dataset.data.reduce((a, b) => a + b, 0);
          const percentage = ((value / total) * 100).toFixed(0);
          return `${percentage}%`;
        },
      },
      legend: {
        display: false,
      },
      tooltip: {
        enabled: true,
        callbacks: {
          label: function (tooltipItem) {
            const label = tooltipItem.label || '';
            const value = tooltipItem.parsed;
            const total = tooltipItem.dataset.data.reduce((a, b) => a + b, 0);
            const percentage = ((value / total) * 100).toFixed(1);
            return `${label}: ${value} (${percentage}%)`;
          }
        }
      }
    }
  };

  return (
    <div className="w-full h-full flex items-center justify-center">
      <Doughnut data={chartData} options={options} />
    </div>
  );
}

export function StatusPieChart({ newCount, raisedCount, rejectedCount }) {
  const data = {
    labels: ['New', 'Raised', 'Rejected'],
    datasets: [
      {
        data: [newCount, raisedCount, rejectedCount],
        backgroundColor: ['#10B981', '#F59E0B', '#EF4444'], // Green, Orange, Red
        borderWidth: 0,
        hoverBorderWidth: 2,
        hoverBorderColor: '#ffffff',
      },
    ],
  };

  const options = {
    responsive: true,
    maintainAspectRatio: false,
    cutout: '60%', // This creates the donut hole
    plugins: {
      datalabels: {
        color: '#000',
        font: {
          weight: 'bold',
          size: 10,
        },
        formatter: (value) => {
          return value.toString();
        },
      },
      legend: {
        display: false,
      },
      tooltip: {
        enabled: true,
        callbacks: {
          label: function (tooltipItem) {
            const total = tooltipItem.dataset.data.reduce((a, b) => a + b, 0);
            const percentage = ((tooltipItem.parsed / total) * 100).toFixed(1);
            return `${tooltipItem.label}: ${tooltipItem.parsed} (${percentage}%)`;
          }
        }
      }
    }
  };

  return (
    <div className="w-full h-full flex items-center justify-center">
      <Doughnut data={data} options={options} />
    </div>
  );
}
