/**
 * DataQualityChart component - Before/after comparison bar chart
 */

import React from 'react';
import {
  Box,
  Typography,
  Paper,
} from '@mui/material';
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend,
} from 'chart.js';
import { Bar } from 'react-chartjs-2';

ChartJS.register(
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend
);

interface DataQualityChartProps {
  beforeCleaning: {
    missingValues: number;
    duplicates: number;
    outliers: number;
    qualityScore: number;
  };
  afterCleaning: {
    missingValues: number;
    duplicates: number;
    outliers: number;
    qualityScore: number;
  };
  title?: string;
}

const DataQualityChart: React.FC<DataQualityChartProps> = ({
  beforeCleaning,
  afterCleaning,
  title = 'Data Quality Comparison',
}) => {
  const labels = ['Missing Values (%)', 'Duplicates', 'Outliers', 'Quality Score'];

  const data = {
    labels,
    datasets: [
      {
        label: 'Before Cleaning',
        data: [
          beforeCleaning.missingValues,
          beforeCleaning.duplicates,
          beforeCleaning.outliers,
          beforeCleaning.qualityScore * 100,
        ],
        backgroundColor: 'rgba(54, 162, 235, 0.7)',
        borderColor: 'rgba(54, 162, 235, 1)',
        borderWidth: 1,
      },
      {
        label: 'After Cleaning',
        data: [
          afterCleaning.missingValues,
          afterCleaning.duplicates,
          afterCleaning.outliers,
          afterCleaning.qualityScore * 100,
        ],
        backgroundColor: 'rgba(75, 192, 192, 0.7)',
        borderColor: 'rgba(75, 192, 192, 1)',
        borderWidth: 1,
      },
    ],
  };

  const options = {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      legend: {
        position: 'top' as const,
      },
      title: {
        display: false,
      },
    },
    scales: {
      y: {
        beginAtZero: true,
      },
    },
  };

  return (
    <Paper elevation={2} sx={{ p: 3 }}>
      <Typography variant="h6" gutterBottom sx={{ fontWeight: 600 }}>
        {title}
      </Typography>
      <Box sx={{ height: 300 }}>
        <Bar data={data} options={options} />
      </Box>
    </Paper>
  );
};

export default DataQualityChart;