import React from 'react';
import { Cell, Pie, PieChart, ResponsiveContainer } from 'recharts';
import Card from '@/components/Card';
import { formatNumber } from '@/lib/helper';
import { Icon } from '@iconify/react';

interface UniformityGaugeChartProps {
  value: number;
  label: string;
  week?: string;
  currentValue?: number;
  totalValue?: number;
  onWeekChange?: (direction: 'prev' | 'next') => void;
  hasPrevWeek?: boolean;
  hasNextWeek?: boolean;
}

const UniformityGaugeChart: React.FC<UniformityGaugeChartProps> = ({
  value,
  label,
  week,
  currentValue,
  totalValue,
  onWeekChange,
  hasPrevWeek = false,
  hasNextWeek = false,
}) => {
  const numberOfSegments = 50;
  const filledSegments = Math.round((value / 100) * numberOfSegments);

  const data = Array.from({ length: numberOfSegments }, (_, index) => ({
    name: index,
    value: 1,
    filled: index < filledSegments,
  }));

  const activeColor = '#1890ff';
  const inactiveColor = '#f0f0f0';

  return (
    <div className='flex flex-col w-full items-center'>
      <div className='h-64 w-full relative flex justify-center'>
        <div className='relative w-full h-full flex flex-col items-center justify-end'>
          <ResponsiveContainer width='100%' height='100%'>
            <PieChart>
              <Pie
                data={data}
                cx='50%'
                cy='70%'
                startAngle={180}
                endAngle={0}
                innerRadius='75%'
                outerRadius='100%'
                paddingAngle={2}
                dataKey='value'
                stroke='none'
                isAnimationActive={false}
              >
                {data.map((entry, index) => (
                  <Cell
                    key={`cell-${index}`}
                    fill={entry.filled ? activeColor : inactiveColor}
                  />
                ))}
              </Pie>
            </PieChart>
          </ResponsiveContainer>
          <div className='absolute inset-x-0 bottom-10 flex flex-col items-center justify-center'>
            <span className='text-2xl font-medium text-base-content mb-4 leading-8'>
              {value}%
            </span>
            <div className='px-3.5 py-1 bg-base-100 rounded-full shadow-sm border border-base-content/10'>
              <span className='text-lg font-medium text-base-content leading-6'>
                {label}
              </span>
            </div>
          </div>
        </div>
      </div>
      <div className='flex items-center justify-center gap-2 w-full'>
        <button
          onClick={() => onWeekChange?.('prev')}
          disabled={!hasPrevWeek}
          className='p-1 rounded-lg border border-base-content/10 bg-white hover:bg-base-content/5 disabled:opacity-30 disabled:cursor-not-allowed transition-colors shadow-sm cursor-pointer'
          aria-label='Previous week'
        >
          <Icon icon='heroicons:chevron-left' width={20} height={20} />
        </button>
        <Card
          variant='bordered'
          className={{
            wrapper: 'max-w-40 rounded-lg',
            body: 'p-3',
          }}
        >
          <section className='flex items-center justify-center gap-4'>
            <div className='grid grid-cols-1 min-w-0 text-center'>
              <div className='flex items-center justify-center space-x-2 text-base-content/50 text-sm mb-1'>
                <span className='text-primary font-semibold truncate'>
                  {week}
                </span>
              </div>
              <div className='text-xl font-bold text-base-content/50'>
                <span className='text-primary break-all'>
                  {formatNumber(currentValue ?? 0)}
                </span>
                <span className='mx-1 text-base-content/50 text-sm font-semibold leading-5'>
                  From
                </span>
                <span className='break-all'>
                  {formatNumber(totalValue ?? 0)}
                </span>
              </div>
            </div>
          </section>
        </Card>
        <button
          onClick={() => onWeekChange?.('next')}
          disabled={!hasNextWeek}
          className='p-1 rounded-lg border border-base-content/10 bg-white hover:bg-base-content/5 disabled:opacity-30 disabled:cursor-not-allowed transition-colors shadow-sm cursor-pointer'
          aria-label='Next week'
        >
          <Icon icon='heroicons:chevron-right' width={20} height={20} />
        </button>
      </div>
    </div>
  );
};

export default UniformityGaugeChart;
