import React from 'react';
import { Line, Doughnut, Bar } from 'react-chartjs-2';
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  BarElement,
  ArcElement,
  Tooltip,
  Legend
} from 'chart.js';
import { kpiData, getCategoryColor } from '../data/kpiData';
import '../styles/Charts.css';

ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  BarElement,
  ArcElement,
  Tooltip,
  Legend
);

export const TrendChart: React.FC = () => {
  const data = {
    labels: ['Semaine 1', 'Semaine 2', 'Semaine 3', 'Semaine 4'],
    datasets: [
      {
        label: 'Sécurité (%)',
        data: [94, 95, 96, 96],
        borderColor: getCategoryColor('security'),
        backgroundColor: 'rgba(231, 76, 60, 0.1)',
        tension: 0.4
      },
      {
        label: 'Qualité (%)',
        data: [75, 76, 77, 78.5],
        borderColor: getCategoryColor('quality'),
        backgroundColor: 'rgba(52, 152, 219, 0.1)',
        tension: 0.4
      },
      {
        label: 'Délais (%)',
        data: [97, 97.5, 97.8, 98],
        borderColor: getCategoryColor('delays'),
        backgroundColor: 'rgba(243, 156, 18, 0.1)',
        tension: 0.4
      },
      {
        label: 'Coûts (%)',
        data: [92, 91, 90.5, 89],
        borderColor: getCategoryColor('costs'),
        backgroundColor: 'rgba(39, 174, 96, 0.1)',
        tension: 0.4
      }
    ]
  };

  return (
    <div className="chart-container">
      <h2>📈 Tendances SQDC</h2>
      <Line data={data} options={{
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { position: 'top' as const } },
        scales: { y: { beginAtZero: true, max: 100 } }
      }} />
    </div>
  );
};

export const CategoryDistributionChart: React.FC = () => {
  const categoryCounts = {
    'Sécurité': kpiData.security.length,
    'Qualité': kpiData.quality.length,
    'Délais': kpiData.delays.length,
    'Coûts': kpiData.costs.length,
    'Maintenance': kpiData.maintenance.length
  };

  const data = {
    labels: Object.keys(categoryCounts),
    datasets: [{
      data: Object.values(categoryCounts),
      backgroundColor: [
        getCategoryColor('security'),
        getCategoryColor('quality'),
        getCategoryColor('delays'),
        getCategoryColor('costs'),
        getCategoryColor('maintenance')
      ],
      borderColor: 'white',
      borderWidth: 2
    }]
  };

  return (
    <div className="chart-container">
      <h2>📊 Répartition KPI par Catégorie</h2>
      <Doughnut data={data} options={{
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { position: 'bottom' as const } }
      }} />
    </div>
  );
};

export const StatusChart: React.FC = () => {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const allKPIs = [
    ...kpiData.security,
    ...kpiData.quality,
    ...kpiData.delays,
    ...kpiData.costs,
    ...kpiData.maintenance
  ];

  const categories = ['Sécurité', 'Qualité', 'Délais', 'Coûts', 'Maintenance'];
  const categoryKPIs = [
    kpiData.security,
    kpiData.quality,
    kpiData.delays,
    kpiData.costs,
    kpiData.maintenance
  ];

  const data = {
    labels: categories,
    datasets: [
      {
        label: 'Bon',
        data: categoryKPIs.map(cat => cat.filter(k => k.status === 'good').length),
        backgroundColor: '#27ae60'
      },
      {
        label: 'À améliorer',
        data: categoryKPIs.map(cat => cat.filter(k => k.status === 'warning').length),
        backgroundColor: '#f39c12'
      },
      {
        label: 'Critique',
        data: categoryKPIs.map(cat => cat.filter(k => k.status === 'critical').length),
        backgroundColor: '#e74c3c'
      }
    ]
  };

  return (
    <div className="chart-container">
      <h2>📊 État des KPI par Catégorie</h2>
      <Bar data={data} options={{
        responsive: true,
        maintainAspectRatio: false,
        indexAxis: 'y' as const,
        plugins: { legend: { position: 'top' as const } },
        scales: {
          x: { stacked: true },
          y: { stacked: true }
        }
      }} />
    </div>
  );
};

export const CNQChart: React.FC = () => {
  const data = {
    labels: ['Rebuts', 'Retouches', 'Retours Clients'],
    datasets: [{
      label: 'Coût (€)',
      data: [8500, 7200, 2800],
      backgroundColor: [
        '#e74c3c',
        '#f39c12',
        '#3498db'
      ],
      borderColor: 'white',
      borderWidth: 2
    }]
  };

  return (
    <div className="chart-container">
      <h2>💔 Coûts des Non-Qualité</h2>
      <Bar data={data} options={{
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: false } },
        scales: { y: { beginAtZero: true } }
      }} />
    </div>
  );
};
