import { Icon } from '@iconify/react';
import { DashboardMeta } from '@/types/api/dashboard/dashboard';
import DataStateSkeleton from '@/components/helper/skeleton/DataStateSkeleton';

const DashboardLineChartSkeleton = ({ meta }: { meta?: DashboardMeta }) => {
  return (
    <div className='w-full bg-white rounded-xl border border-base-content/10 p-4 relative'>
      {/* Header with title skeleton */}
      <div className='text-base font-semibold'>
        Performance{' '}
        <Icon
          icon='heroicons:information-circle'
          width={20}
          height={20}
          className='inline text-base-content/50'
        />
      </div>

      {/* Chart area with axes skeleton */}
      <div className='relative mt-6 '>
        {/* Chart content area */}
        <div className='flex-1 relative'>
          {/* Empty state centered in chart area */}
          <div className='absolute inset-0 flex flex-col items-center justify-center pb-10'>
            {!meta?.filters && (
              <>
                {/* Filter icon */}
                <DataStateSkeleton
                  icon={
                    <Icon
                      icon='heroicons:funnel'
                      className='text-white'
                      width={20}
                      height={20}
                    />
                  }
                  title='No Filters Selected'
                  description='Please choose filters to narrow down your results and make your search easier.'
                />
              </>
            )}
            {meta?.filters && (
              <>
                {/* Filter icon */}
                <DataStateSkeleton
                  icon={
                    <Icon
                      icon='heroicons:chart-bar'
                      className='text-white'
                      width={20}
                      height={20}
                    />
                  }
                  title='Data Not Yet Available'
                  description='Please change your filters to get the data.'
                />
              </>
            )}
          </div>

          <div className='flex flex-row w-full items-center gap-4'>
            <div className='flex-1 h-full min-w-4'>
              <div className='h-28.5 w-4 bg-base-content/4 rounded'></div>
            </div>
            <div className='w-full grid grid-cols-1 gap-y-13.25 mb-2'>
              {[1, 2, 3, 4].map((item) => (
                <div key={item} className='flex items-center w-full h-4 gap-4'>
                  <div className='h-4 w-6 bg-base-content/4 rounded'></div>
                  <div className='h-0.25 w-full bg-base-content/4 rounded'></div>
                </div>
              ))}
            </div>
          </div>

          {/* X-axis skeleton (bottom) */}
          <div className='grid grid-cols-10 gap-15 mt-4 ps-13 sm:ps-26 overflow-x-hidden'>
            {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((item) => (
              <div
                key={item}
                className='h-4 w-9.5 bg-base-content/4 rounded'
              ></div>
            ))}
          </div>
          <div className='flex justify-center pt-4 ps-13 sm:ps-26'>
            <div className='h-4 w-28.5 bg-base-content/4 rounded'></div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default DashboardLineChartSkeleton;