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 } from '../data/kpiData';

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

const commonOptions = {
  plugins: {
    legend: {
      labels: {
        color: '#cbd5e1',
      },
    },
  },
  scales: {
    y: {
      ticks: {
        color: '#94a3b8',
      },
      grid: {
        color: 'rgba(148, 163, 184, 0.1)',
      },
    },
    x: {
      ticks: {
        color: '#94a3b8',
      },
      grid: {
        color: 'rgba(148, 163, 184, 0.1)',
      },
    },
  },
};

export const TrendChart: React.FC = () => {
  const data = {
    labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4'],
    datasets: [
      {
        label: 'Safety (%)',
        data: [94, 95, 96, 96],
        borderColor: '#ef4444',
        backgroundColor: 'rgba(239, 68, 68, 0.1)',
        tension: 0.4
      },
      {
        label: 'Quality (%)',
        data: [75, 76, 77, 78.5],
        borderColor: '#3b82f6',
        backgroundColor: 'rgba(59, 130, 246, 0.1)',
        tension: 0.4
      },
      {
        label: 'Delivery (%)',
        data: [97, 97.5, 97.8, 98],
        borderColor: '#f59e0b',
        backgroundColor: 'rgba(245, 158, 11, 0.1)',
        tension: 0.4
      },
      {
        label: 'Cost (%)',
        data: [92, 91, 90.5, 89],
        borderColor: '#10b981',
        backgroundColor: 'rgba(16, 185, 129, 0.1)',
        tension: 0.4
      }
    ]
  };

  return (
    <div>
      <h3 className="text-lg font-semibold mb-4">SQDC Trends</h3>
      <div style={{ height: '300px' }}>
        <Line
          data={data}
          options={{
            ...commonOptions,
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
              ...commonOptions.plugins,
              legend: {
                position: 'top' as const,
                labels: { color: '#cbd5e1' }
              }
            },
            scales: {
              ...commonOptions.scales,
              y: {
                ...commonOptions.scales.y,
                beginAtZero: true,
                max: 100
              }
            }
          }}
        />
      </div>
    </div>
  );
};

export const CategoryDistributionChart: React.FC = () => {
  const categoryCounts = {
    'Safety': kpiData.security.length,
    'Quality': kpiData.quality.length,
    'Delivery': kpiData.delays.length,
    'Cost': kpiData.costs.length,
    'Maintenance': kpiData.maintenance.length
  };

  const data = {
    labels: Object.keys(categoryCounts),
    datasets: [{
      data: Object.values(categoryCounts),
      backgroundColor: [
        '#ef4444',
        '#3b82f6',
        '#f59e0b',
        '#10b981',
        '#8b5cf6'
      ],
      borderColor: '#1e293b',
      borderWidth: 2
    }]
  };

  return (
    <div>
      <h3 className="text-lg font-semibold mb-4">KPI Distribution by Category</h3>
      <div style={{ height: '300px' }}>
        <Doughnut
          data={data}
          options={{
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
              legend: {
                position: 'bottom' as const,
                labels: { color: '#cbd5e1' }
              }
            }
          }}
        />
      </div>
    </div>
  );
};

export const StatusChart: React.FC = () => {
  const categories = ['Safety', 'Quality', 'Delivery', 'Cost', 'Maintenance'];
  const categoryKPIs = [
    kpiData.security,
    kpiData.quality,
    kpiData.delays,
    kpiData.costs,
    kpiData.maintenance
  ];

  const data = {
    labels: categories,
    datasets: [
      {
        label: 'On Target',
        data: categoryKPIs.map(cat => cat.filter(k => k.status === 'good').length),
        backgroundColor: '#10b981'
      },
      {
        label: 'Warning',
        data: categoryKPIs.map(cat => cat.filter(k => k.status === 'warning').length),
        backgroundColor: '#f59e0b'
      },
      {
        label: 'Critical',
        data: categoryKPIs.map(cat => cat.filter(k => k.status === 'critical').length),
        backgroundColor: '#ef4444'
      }
    ]
  };

  return (
    <div>
      <h3 className="text-lg font-semibold mb-4">KPI Status by Category</h3>
      <div style={{ height: '300px' }}>
        <Bar
          data={data}
          options={{
            responsive: true,
            maintainAspectRatio: false,
            indexAxis: 'y' as const,
            plugins: {
              legend: {
                position: 'top' as const,
                labels: { color: '#cbd5e1' }
              }
            },
            scales: {
              x: {
                stacked: true,
                ticks: { color: '#94a3b8' },
                grid: { color: 'rgba(148, 163, 184, 0.1)' }
              },
              y: {
                stacked: true,
                ticks: { color: '#94a3b8' },
                grid: { color: 'rgba(148, 163, 184, 0.1)' }
              }
            }
          }}
        />
      </div>
    </div>
  );
};

export const CNQChart: React.FC = () => {
  const data = {
    labels: ['Scrap', 'Rework', 'Returns'],
    datasets: [{
      label: 'Cost (€)',
      data: [8500, 7200, 2800],
      backgroundColor: [
        '#ef4444',
        '#f59e0b',
        '#3b82f6'
      ],
      borderColor: '#1e293b',
      borderWidth: 2
    }]
  };

  return (
    <div>
      <h3 className="text-lg font-semibold mb-4">Non-Quality Costs</h3>
      <div style={{ height: '300px' }}>
        <Bar
          data={data}
          options={{
            ...commonOptions,
            responsive: true,
            maintainAspectRatio: false,
            plugins: { legend: { display: false } },
            scales: {
              ...commonOptions.scales,
              y: {
                ...commonOptions.scales.y,
                beginAtZero: true
              }
            }
          }}
        />
      </div>
    </div>
  );
};
