'use client';

import React from 'react';
import { motion } from 'framer-motion';
import ContentCard from './ContentCard';
import { cn } from '@/lib/utils';
import type { Movie, Series, Channel } from '@/types';

interface ContentGridProps {
  items: (Movie | Series | Channel)[];
  type: 'movie' | 'series' | 'channel';
  cardSize?: 'sm' | 'md' | 'lg';
  className?: string;
  loading?: boolean;
}

const container = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: {
      staggerChildren: 0.05,
    },
  },
};

const gridItem = {
  hidden: { opacity: 0, y: 20 },
  show: { opacity: 1, y: 0 },
};

export default function ContentGrid({
  items,
  type,
  cardSize = 'md',
  className,
  loading = false,
}: ContentGridProps) {
  if (loading) {
    return (
      <div className={cn(
        'grid gap-4',
        type === 'channel'
          ? 'grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6'
          : 'grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6',
        className
      )}>
        {Array.from({ length: 18 }).map((_, i) => (
          <div key={i} className="space-y-2">
            <div className={cn(
              'rounded-card loading-skeleton',
              type === 'channel' ? 'aspect-video' : 'aspect-[2/3]'
            )} />
            <div className="h-4 w-3/4 rounded loading-skeleton" />
            <div className="h-3 w-1/2 rounded loading-skeleton" />
          </div>
        ))}
      </div>
    );
  }

  if (items.length === 0) {
    return (
      <div className="flex flex-col items-center justify-center py-20">
        <div className="w-20 h-20 rounded-full bg-dark-200 flex items-center justify-center mb-4">
          <span className="text-3xl">🎬</span>
        </div>
        <p className="text-white/50 text-lg font-medium">No se encontró contenido</p>
        <p className="text-white/30 text-sm mt-1">Intenta con otra búsqueda o categoría</p>
      </div>
    );
  }

  return (
    <motion.div
      variants={container}
      initial="hidden"
      animate="show"
      className={cn(
        'grid gap-4',
        type === 'channel'
          ? 'grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6'
          : 'grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6',
        className
      )}
    >
      {items.map((item) => (
        <motion.div key={item.id} variants={gridItem}>
          <ContentCard
            item={item}
            type={type}
            size={cardSize}
            className="!w-full"
          />
        </motion.div>
      ))}
    </motion.div>
  );
}
