'use client';

import React from 'react';
import { motion } from 'framer-motion';
import { FiPlay, FiClock, FiCheck } from 'react-icons/fi';
import { cn, formatDuration, getImageUrl } from '@/lib/utils';
import { PLACEHOLDER_BACKDROP } from '@/lib/constants';
import type { Episode } from '@/types';

interface EpisodeListProps {
  episodes: Episode[];
  onPlay: (episode: Episode) => void;
  currentEpisodeId?: string;
  className?: string;
}

export default function EpisodeList({
  episodes,
  onPlay,
  currentEpisodeId,
  className,
}: EpisodeListProps) {
  if (episodes.length === 0) {
    return (
      <div className="text-center py-12">
        <p className="text-white/40">No hay episodios disponibles</p>
      </div>
    );
  }

  return (
    <div className={cn('space-y-2', className)}>
      {episodes.map((episode, index) => {
        const isCurrent = episode.id === currentEpisodeId;
        return (
          <motion.div
            key={episode.id}
            initial={{ opacity: 0, x: -20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ delay: index * 0.05 }}
            onClick={() => onPlay(episode)}
            className={cn(
              'flex items-center gap-4 p-3 rounded-lg cursor-pointer transition-all duration-300 group',
              isCurrent
                ? 'bg-primary/10 border border-primary/20'
                : 'hover:bg-white/5 border border-transparent'
            )}
          >
            {/* Episode number */}
            <div className="flex-shrink-0 w-8 text-center">
              {isCurrent ? (
                <div className="w-6 h-6 rounded-full bg-primary flex items-center justify-center mx-auto">
                  <FiPlay size={12} className="ml-0.5" />
                </div>
              ) : (
                <span className="text-lg font-bold text-white/30">{episode.number}</span>
              )}
            </div>

            {/* Thumbnail */}
            <div className="relative flex-shrink-0 w-32 aspect-video rounded-md overflow-hidden bg-dark-200">
              <img
                src={getImageUrl(episode.thumbnailUrl, PLACEHOLDER_BACKDROP)}
                alt={episode.title}
                className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                loading="lazy"
              />
              {/* Progress bar */}
              {episode.progress !== undefined && episode.progress > 0 && (
                <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-white/20">
                  <div
                    className="h-full bg-primary"
                    style={{ width: `${episode.progress}%` }}
                  />
                </div>
              )}
              {/* Watched overlay */}
              {episode.watched && (
                <div className="absolute top-1 right-1 w-5 h-5 rounded-full bg-green-500 flex items-center justify-center">
                  <FiCheck size={10} className="text-white" />
                </div>
              )}
              {/* Play overlay */}
              <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity bg-black/30">
                <FiPlay size={20} className="text-white" />
              </div>
            </div>

            {/* Info */}
            <div className="flex-1 min-w-0">
              <h4 className={cn(
                'text-sm font-semibold line-clamp-1',
                isCurrent ? 'text-primary' : 'text-white group-hover:text-white'
              )}>
                {episode.title}
              </h4>
              {episode.synopsis && (
                <p className="text-xs text-white/40 mt-1 line-clamp-2">{episode.synopsis}</p>
              )}
            </div>

            {/* Duration */}
            <div className="flex-shrink-0 flex items-center gap-1 text-xs text-white/40">
              <FiClock size={12} />
              {formatDuration(episode.duration)}
            </div>
          </motion.div>
        );
      })}
    </div>
  );
}
