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-1 xs:gap-2 sm:gap-3 md:gap-4 lg:gap-6 px-1 xs:px-2 sm:px-3 md:px-4 py-2'>
            {ranges.map((range) => (
              <div
                key={range}
                className='skeleton h-3 w-6 xs:w-8 sm:w-10 md:w-12 flex-1 max-w-12 xs:max-w-14 sm:max-w-16'
              />
            ))}
          </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 items-center justify-center z-10'>
      <div className='flex flex-col items-center justify-center'>
        {/* Filter icon */}
        <div className='mb-2'>
          <div className='w-12.5 h-12.5 bg-(--main-color-base-100,#FFFFFF) border border-base-content/10 rounded-[0.875rem] shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center'>
            <div className='w-9.5 h-9.5 bg-primary rounded-lg border border-primary flex items-center justify-center shadow-[inset_0px_4px_4px_0px_#FFFFFF80,inset_0px_2px_0px_0px_#FFFFFF80]'>
              <Icon
                icon='heroicons:funnel'
                className='text-white'
                width={20}
                height={20}
              />
            </div>
          </div>
        </div>

        {/* Empty state text */}
        <h3 className='text-base-content/50 font-semibold text-sm mb-1'>
          No Filters Selected
        </h3>
        <p className='text-base-content/50 text-xs text-center max-w-xs'>
          Please choose filters to narrow down your results and make your search
          easier.
        </p>
      </div>
    </div>
  );
};

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

export default UniformityBarChartSkeleton;
