import { SkeletonBone, SkeletonText } from '@/components/layout/Skeleton';

export const SkeletonListItem = () => {
  return (
    <div className='flex shrink-0 flex-col gap-2'>
      <SkeletonBone className='mb-4 h-[240px] w-[160px]' />
      <SkeletonText className='w-3/4' />
      <SkeletonText className='w-1/2' />
      <div className='flex flex-row items-center gap-2'>
        <SkeletonBone className='aspect-square h-[36px] rounded-full' />
        <SkeletonText className='flex-1' />
      </div>
    </div>
  );
};

export const RowSkeleton = () => {
  return (
    <div className='flex w-full shrink-0 flex-col'>
      <SkeletonBone className='mb-3 h-6 w-48 rounded-md' />
      <SkeletonBone className='mb-6 h-4 w-32 rounded-md' />
      <div className='mb-8 flex w-full flex-row flex-nowrap gap-4 overflow-hidden'>
        <SkeletonListItem />
        <SkeletonListItem />
        <SkeletonListItem />
        <SkeletonListItem />
        <SkeletonListItem />
        <SkeletonListItem />
        <SkeletonListItem />
        <SkeletonListItem />
        <SkeletonListItem />
        <SkeletonListItem />
        <SkeletonListItem />
        <SkeletonListItem />
        <SkeletonListItem />
        <SkeletonListItem />
        <SkeletonListItem />
      </div>
    </div>
  );
};

export const HeroCarouselSkeleton = () => {
  return (
    <div className='mb-2 w-full'>
      <SkeletonBone className='h-[280px] w-full rounded-2xl lg:h-[356px]' />
      <div className='mt-1 flex justify-center gap-2'>
        <SkeletonBone className='h-[0.5px] w-8 rounded-full' />
        <SkeletonBone className='h-[0.5px] w-8 rounded-full' />
      </div>
    </div>
  );
};

export const FeedSkeleton = ({
  columnCount = 1,
  itemCount = 5,
  showTitles = false,
  className = '',
}: {
  columnCount?: number;
  itemCount?: number;
  showTitles?: boolean;
  className?: string;
} = {}) => {
  const renderFeedItem = () => (
    <div className='flex items-center gap-3 py-2'>
      <SkeletonBone className='size-14 shrink-0 rounded-md' />
      <div className='flex min-w-0 flex-1 flex-col gap-2'>
        <SkeletonText className='w-3/4' />
        <div className='flex items-center gap-2'>
          <SkeletonBone className='h-6 w-6 rounded-full' />
          <SkeletonText className='w-24' />
        </div>
      </div>
    </div>
  );

  if (columnCount === 1) {
    // Single column list
    return (
      <div className={className}>
        {Array.from({ length: itemCount }, (_, itemIndex) => (
          <div key={itemIndex}>{renderFeedItem()}</div>
        ))}
      </div>
    );
  }

  // Multi-column grid
  return (
    <div
      className={`mt-8 grid grid-flow-col gap-6 overflow-hidden pb-10 ${className}`}
    >
      {Array.from({ length: columnCount }, (_, columnIndex) => (
        <div
          key={columnIndex}
          className='flex min-h-96 max-w-[40rem] min-w-[min(22rem,calc(100vw-2rem))] flex-col gap-3'
        >
          {showTitles && (
            <div className='flex flex-row items-center gap-1'>
              <SkeletonBone className='h-6 w-32 rounded-md' />
            </div>
          )}
          <div className='flex flex-col gap-1'>
            {Array.from({ length: itemCount }, (_, itemIndex) => (
              <div key={itemIndex}>{renderFeedItem()}</div>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
};

export const ContestRowSkeleton = () => {
  return (
    <div className='flex w-full shrink-0 flex-col'>
      <SkeletonBone className='mb-3 h-6 w-48 rounded-md' />
      <div className='mb-8 flex w-full flex-row flex-nowrap gap-4 overflow-hidden'>
        {Array.from({ length: 6 }, (_, i) => (
          <div
            key={i}
            className='flex h-[208px] w-[563px] shrink-0 flex-col gap-3 rounded-[20px] p-3'
          >
            {/* Labels at top */}
            <div className='flex gap-2'>
              <SkeletonBone className='h-6 w-32 rounded-full' />
            </div>
            {/* Content area with image and text */}
            <div className='flex flex-1 items-center gap-4'>
              <SkeletonBone className='h-[140px] w-[140px] shrink-0 rounded-xl' />
              <div className='flex flex-1 flex-col gap-3'>
                <SkeletonBone className='h-6 w-3/4 rounded-md' />
                <SkeletonBone className='h-4 w-full rounded-md' />
                <SkeletonBone className='h-4 w-5/6 rounded-md' />
                <div className='mt-auto flex gap-2'>
                  <SkeletonBone className='h-9 w-24 rounded-full' />
                  <SkeletonBone className='h-9 w-32 rounded-full' />
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export const HookCardSkeleton = (
  props: React.ComponentProps<typeof SkeletonBone>
) => {
  return <SkeletonBone className='h-[240px] w-[160px] rounded-md' {...props} />;
};

export const HooksSkeleton = () => {
  return (
    <div className='flex w-full shrink-0 flex-col'>
      <SkeletonBone className='mb-3 h-6 w-48 rounded-md' />
      <SkeletonBone className='mb-6 h-4 w-32 rounded-md' />
      <div className='mb-8 flex w-full flex-row flex-nowrap gap-4 overflow-hidden'>
        {Array.from({ length: 15 }, (_, i) => (
          <HookCardSkeleton key={i} />
        ))}
      </div>
    </div>
  );
};

/**
 * Skeleton for individual contest cards in the carousel
 * Matches the layout of DiscoverContestCard
 */
export const ContestCardSkeleton = (
  props: React.HTMLAttributes<HTMLDivElement>
) => {
  return (
    <div
      className='flex h-[208px] w-[563px] shrink-0 flex-col gap-3 rounded-[20px] p-3'
      {...props}
    >
      {/* Labels at top */}
      <div className='flex gap-2'>
        <SkeletonBone className='h-6 w-32 rounded-full' />
      </div>
      {/* Content area with image and text */}
      <div className='flex flex-1 items-center gap-4'>
        <SkeletonBone className='h-[140px] w-[140px] shrink-0 rounded-xl' />
        <div className='flex flex-1 flex-col gap-3'>
          <SkeletonBone className='h-6 w-3/4 rounded-md' />
          <SkeletonBone className='h-4 w-full rounded-md' />
          <SkeletonBone className='h-4 w-5/6 rounded-md' />
          <div className='mt-auto flex gap-2'>
            <SkeletonBone className='h-9 w-24 rounded-full' />
            <SkeletonBone className='h-9 w-32 rounded-full' />
          </div>
        </div>
      </div>
    </div>
  );
};