import Button from '@/components/Button';
import { Icon } from '@iconify/react';

const LeftLegend = () => {
  return (
    <>
      <div className='skeleton h-30 w-4 flex items-center justify-center self-center mb-10' />

      <div className='grid grid-cols-1 justify-center items-center'>
        {[...Array(5)].map((_, index) => (
          <div
            key={`grid-${index}`}
            className='shrink-0 flex flex-col justify-center mb-10'
          >
            <div className='skeleton h-4 w-8' />
          </div>
        ))}
      </div>
    </>
  );
};

const ChartArea = () => {
  const ranges = [
    '48-52',
    '52-56',
    '56-60',
    '60-64',
    '64-68',
    '68-72',
    '72-76',
  ];

  return (
    <>
      <div className='flex-1 min-w-0 flex flex-col relative'>
        <div className='flex-1 ml-6 min-w-0 flex flex-col'>
          <div className='flex-1 relative flex flex-col justify-between py-4'>
            {[...Array(5)].map((_, index) => (
              <div
                key={`grid-${index}`}
                className='w-full border-b border-gray-200 absolute'
                style={{ top: `${(index / 4) * 100}%` }}
              />
            ))}
          </div>

          <div className='flex justify-between gap-2 sm:gap-4 md:gap-8 lg:gap-12 px-2 sm:px-4 py-2'>
            {ranges.map((range) => (
              <div
                key={range}
                className='skeleton h-3 w-8 sm:w-12 md:w-16 shrink-0'
              />
            ))}
          </div>

          <div className='flex justify-center pb-1'>
            <div className='skeleton h-3 w-20 sm:w-28' />
          </div>
        </div>
      </div>
    </>
  );
};

const EmptyState = () => {
  return (
    <>
      <div className='absolute inset-0 flex flex-col items-center justify-center z-10 gap-2'>
        <div className='border border-[#18181B]/25 rounded-2xl p-1 flex items-center justify-center my-2'>
          <Button className='rounded-2xl border border-sky-500 bg-primary  text-white'>
            <Icon icon={'heroicons:funnel'} className='text-4xl text-whitd' />
          </Button>
        </div>
        <span className='text-xl font-semibold text-[#18181B80] leading-5'>
          No Filters Selected
        </span>
        <span className='text-xs font-light text-[#18181B80] leading-4 text-center max-w-xs px-4'>
          Please choose filters to narrow down your results and make your search
          easier.
        </span>
      </div>
    </>
  );
};

const UniformityBarChartSkeleton = () => {
  return (
    <div className='relative w-full h-full min-h-[300px] xl:min-h-[350px]'>
      <div className='sm:flex hidden h-full gap-4'>
        <LeftLegend />
        <ChartArea />
      </div>
      <EmptyState />
    </div>
  );
};

export default UniformityBarChartSkeleton;
