'use client';

import React from 'react';
import { cn } from '@/lib/utils';

interface SkeletonProps {
  className?: string;
}

export function Skeleton({ className }: SkeletonProps) {
  return (
    <div 
      className={cn(
        "animate-pulse bg-white/5 rounded-lg select-none pointer-events-none relative overflow-hidden before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/5 before:to-transparent", 
        className
      )} 
    />
  );
}

export function CardSkeleton({ type = 'movie' }: { type?: 'movie' | 'series' | 'channel' }) {
  const aspectClass = type === 'channel' ? 'aspect-video' : 'aspect-[2/3]';
  return (
    <div className="flex flex-col gap-2">
      <Skeleton className={cn("w-full rounded-xl", aspectClass)} />
      <Skeleton className="h-4 w-3/4 rounded" />
      {type !== 'channel' && <Skeleton className="h-3 w-1/2 rounded" />}
    </div>
  );
}

export function RowSkeleton({ title, count = 6, type = 'movie' }: { title?: string; count?: number; type?: 'movie' | 'series' | 'channel' }) {
  return (
    <div className="space-y-3 w-full">
      {title && <Skeleton className="h-6 w-48 rounded mb-2" />}
      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4 overflow-hidden">
        {Array.from({ length: count }).map((_, idx) => (
          <CardSkeleton key={idx} type={type} />
        ))}
      </div>
    </div>
  );
}

export function HomeSkeleton() {
  return (
    <div className="-m-4 lg:-m-6 space-y-8 pb-12">
      {/* Hero Banner Skeleton */}
      <div className="relative h-[65vh] w-full bg-dark-200/50 flex flex-col justify-end p-6 md:p-12 gap-4">
        <Skeleton className="h-4 w-24 rounded" />
        <Skeleton className="h-12 w-2/3 md:w-1/2 rounded-lg" />
        <Skeleton className="h-16 w-3/4 md:w-2/3 rounded-lg" />
        <div className="flex gap-3">
          <Skeleton className="h-12 w-32 rounded-lg" />
          <Skeleton className="h-12 w-32 rounded-lg" />
        </div>
      </div>

      {/* Content Rows Skeletons */}
      <div className="px-4 lg:px-6 space-y-10 -mt-16 relative z-10">
        <RowSkeleton title="Televisión en Vivo" type="channel" count={6} />
        <RowSkeleton title="Películas Populares" type="movie" count={6} />
        <RowSkeleton title="Series Populares" type="series" count={6} />
      </div>
    </div>
  );
}

export function GridSkeleton({ count = 12, type = 'movie' }: { count?: number; type?: 'movie' | 'series' | 'channel' }) {
  return (
    <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
      {Array.from({ length: count }).map((_, idx) => (
        <CardSkeleton key={idx} type={type} />
      ))}
    </div>
  );
}

export function DetailsSkeleton() {
  return (
    <div className="-m-4 lg:-m-6 space-y-8 pb-12">
      {/* Backdrop Area */}
      <div className="relative h-[45vh] w-full bg-dark-200/50" />

      {/* Detail info area */}
      <div className="px-4 lg:px-6 space-y-6 max-w-4xl -mt-20 relative z-10">
        <div className="flex gap-2">
          <Skeleton className="h-5 w-16 rounded" />
          <Skeleton className="h-5 w-16 rounded" />
        </div>
        <Skeleton className="h-12 w-2/3 rounded-lg" />
        <div className="flex gap-4">
          <Skeleton className="h-4 w-12 rounded" />
          <Skeleton className="h-4 w-12 rounded" />
          <Skeleton className="h-4 w-20 rounded" />
        </div>
        <div className="space-y-2">
          <Skeleton className="h-4 w-full rounded" />
          <Skeleton className="h-4 w-full rounded" />
          <Skeleton className="h-4 w-3/4 rounded" />
        </div>
        <div className="flex gap-3">
          <Skeleton className="h-12 w-36 rounded-lg" />
          <Skeleton className="h-12 w-36 rounded-lg" />
        </div>
      </div>
    </div>
  );
}
