'use client';

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

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

export default function ContentRow({
  title,
  items,
  type,
  cardSize = 'md',
  className,
}: ContentRowProps) {
  const scrollRef = useRef<HTMLDivElement>(null);
  const [canScrollLeft, setCanScrollLeft] = useState(false);
  const [canScrollRight, setCanScrollRight] = useState(true);

  const checkScroll = () => {
    if (!scrollRef.current) return;
    const { scrollLeft, scrollWidth, clientWidth } = scrollRef.current;
    setCanScrollLeft(scrollLeft > 10);
    setCanScrollRight(scrollLeft < scrollWidth - clientWidth - 10);
  };

  const scroll = (direction: 'left' | 'right') => {
    if (!scrollRef.current) return;
    const amount = scrollRef.current.clientWidth * 0.75;
    scrollRef.current.scrollBy({
      left: direction === 'left' ? -amount : amount,
      behavior: 'smooth',
    });
    setTimeout(checkScroll, 500);
  };

  if (items.length === 0) return null;

  return (
    <motion.section
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5 }}
      className={cn('relative group/row', className)}
    >
      {/* Title */}
      <h2 className="text-lg md:text-xl font-bold text-white mb-3 px-1 flex items-center gap-2">
        {title}
      </h2>

      {/* Scroll container */}
      <div className="relative">
        {/* Left arrow */}
        {canScrollLeft && (
          <button
            onClick={() => scroll('left')}
            className="absolute left-0 top-0 bottom-8 z-20 w-12 bg-gradient-to-r from-dark to-transparent flex items-center justify-start pl-1 opacity-0 group-hover/row:opacity-100 transition-opacity duration-300"
          >
            <div className="w-9 h-9 rounded-full bg-dark-200/90 border border-white/10 flex items-center justify-center text-white hover:bg-white/20 transition-colors">
              <FiChevronLeft size={20} />
            </div>
          </button>
        )}

        {/* Right arrow */}
        {canScrollRight && (
          <button
            onClick={() => scroll('right')}
            className="absolute right-0 top-0 bottom-8 z-20 w-12 bg-gradient-to-l from-dark to-transparent flex items-center justify-end pr-1 opacity-0 group-hover/row:opacity-100 transition-opacity duration-300"
          >
            <div className="w-9 h-9 rounded-full bg-dark-200/90 border border-white/10 flex items-center justify-center text-white hover:bg-white/20 transition-colors">
              <FiChevronRight size={20} />
            </div>
          </button>
        )}

        {/* Cards */}
        <div
          ref={scrollRef}
          onScroll={checkScroll}
          className="content-row-scroll"
        >
          {items.map((item, index) => (
            <ContentCard
              key={item.id || index}
              item={item}
              type={type}
              size={cardSize}
            />
          ))}
        </div>
      </div>
    </motion.section>
  );
}
