import React from 'react';
import Card from '@/components/Card';
import UniformityBarChart from '@/components/pages/uniformity/chart/UniformityBarChart';
import UniformityGaugeChart from '@/components/pages/uniformity/chart/UniformityGaugeChart';

interface BarChartData {
  name: string;
  uv: number;
}

interface GaugeChartData {
  value: number;
  label: string;
  kandang?: string;
  week?: string;
  currentValue?: number;
  totalValue?: number;
}

const UniformityChart = () => {
  // TODO: Replace with actual API call
  const barChartData: BarChartData[] = [
    {
      name: '48-52',
      uv: 80,
    },
    {
      name: '52-56',
      uv: 120,
    },
    {
      name: '56-60',
      uv: 160,
    },
    {
      name: '60-64',
      uv: 200,
    },
    {
      name: '64-68',
      uv: 160,
    },
    {
      name: '68-72',
      uv: 120,
    },
    {
      name: '72-76',
      uv: 80,
    },
    {
      name: '76-80',
      uv: 120,
    },
    {
      name: '84-88',
      uv: 160,
    },
    {
      name: '88-92',
      uv: 200,
    },
    {
      name: '92-96',
      uv: 160,
    },
  ];

  // TODO: Replace with actual API call
  const gaugeChartData: GaugeChartData = {
    value: 52,
    label: 'Uniformity',
    kandang: 'Kandang Cirangga',
    week: 'Week 2',
    currentValue: 512,
    totalValue: 1024,
  };

  return (
    <section className='w-full grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-4 gap-4'>
      <Card
        title='Performance Overview ⓘ'
        variant='bordered'
        className={{
          wrapper: 'xl:col-span-1 2xl:col-span-3 w-full',
          body: 'h-96',
        }}
      >
        <div className='w-full h-full flex items-center justify-center'>
          <UniformityBarChart data={barChartData} />
        </div>
      </Card>
      <Card
        variant='bordered'
        title='Weekly Performance ⓘ'
        className={{
          wrapper: 'xl:col-span-1 2xl:col-span-1 w-full',
          body: 'p-4',
        }}
      >
        <UniformityGaugeChart
          value={gaugeChartData.value}
          label={gaugeChartData.label}
          kandang={gaugeChartData.kandang}
          week={gaugeChartData.week}
          currentValue={gaugeChartData.currentValue}
          totalValue={gaugeChartData.totalValue}
        />
      </Card>
    </section>
  );
};

export default UniformityChart;