"use client";

import React, { useState } from "react";
import { Film, Play, Sparkles, Tv } from "lucide-react";
import { Movie } from "../types";

interface PosterCardProps {
  movie: Movie;
  onSelect: (movie: Movie) => void;
  id?: string;
}

export function PosterCard({ movie, onSelect, id }: PosterCardProps) {
  const [imageError, setImageError] = useState(false);
  const [imageLoaded, setImageLoaded] = useState(false);

  const isSeries =
    /season|episode|s0\d|e0\d|series|vol/i.test(movie.title) ||
    /season|episode/i.test(movie.category || "");

  return (
    <div
      id={id || `movie-card-${movie.slug || movie.id}`}
      onClick={() => onSelect(movie)}
      className="group relative flex flex-col rounded-[22px] overflow-hidden bg-white/[0.03] border border-white/10 hover:border-red-500/50 transition-all duration-300 ease-[cubic-bezier(0.25,1,0.5,1)] hover:scale-[1.03] hover:shadow-[0_0_25px_rgba(220,38,38,0.35)] cursor-pointer aspect-[2/3] select-none"
    >
      {/* Poster Image or Fallback */}
      <div className="relative w-full h-full bg-neutral-950 overflow-hidden">
        {movie.imageUrl && !imageError ? (
          <img
            src={movie.imageUrl}
            alt={movie.title}
            loading="lazy"
            onLoad={() => setImageLoaded(true)}
            onError={() => setImageError(true)}
            className={`w-full h-full object-cover transition-all duration-500 ease-out group-hover:scale-105 ${
              imageLoaded ? "opacity-100" : "opacity-0"
            }`}
          />
        ) : null}

        {/* Loading / Error placeholder */}
        {(!imageLoaded || imageError || !movie.imageUrl) && (
          <div className="absolute inset-0 flex flex-col items-center justify-center p-4 text-center bg-gradient-to-br from-neutral-900 to-black text-white/30">
            <Film className="w-10 h-10 mb-2 stroke-[1.5] text-red-500/40 group-hover:text-red-500/70 transition-colors" />
            <span className="text-[11px] line-clamp-2 px-2 text-white/50 font-medium">
              {movie.title}
            </span>
          </div>
        )}

        {/* Ambient Gradient Overlays */}
        <div className="absolute inset-0 bg-gradient-to-t from-black via-black/30 to-transparent opacity-80 group-hover:opacity-90 transition-opacity" />
        <div className="absolute inset-0 bg-red-950/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
      </div>

      {/* Top Badges */}
      <div className="absolute top-2.5 left-2.5 right-2.5 flex items-center justify-between gap-1.5 pointer-events-none">
        {isSeries ? (
          <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-semibold tracking-wider uppercase bg-red-600/90 text-white backdrop-blur-md shadow-sm border border-red-400/30">
            <Tv className="w-3 h-3" />
            Series
          </span>
        ) : (
          <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-semibold tracking-wider uppercase bg-white/10 text-white/90 backdrop-blur-md border border-white/10">
            <Sparkles className="w-2.5 h-2.5 text-red-400" />
            Movie
          </span>
        )}

        {movie.quality && (
          <span className="px-2 py-0.5 rounded-full text-[10px] font-bold tracking-wider uppercase bg-black/60 text-red-400 backdrop-blur-md border border-red-500/30 shadow-sm">
            {movie.quality}
          </span>
        )}
      </div>

      {/* Hover Play Button Overlay */}
      <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all duration-300 scale-75 group-hover:scale-100 pointer-events-none">
        <div className="w-12 h-12 rounded-full bg-red-600/90 backdrop-blur-md text-white flex items-center justify-center shadow-lg shadow-red-600/40 border border-red-400/40">
          <Play className="w-5 h-5 fill-current ml-0.5" />
        </div>
      </div>

      {/* Bottom Title & Details */}
      <div className="absolute bottom-0 left-0 right-0 p-3 flex flex-col justify-end bg-gradient-to-t from-black via-black/90 to-transparent">
        {movie.year && (
          <div className="flex items-center gap-1.5 mb-1">
            <span className="text-[10px] font-bold text-red-400 bg-red-950/60 px-1.5 py-0.5 rounded border border-red-500/20">
              {movie.year}
            </span>
          </div>
        )}
        <h3 className="text-[13px] font-semibold text-white/95 line-clamp-2 leading-tight group-hover:text-red-400 transition-colors">
          {movie.title}
        </h3>
      </div>
    </div>
  );
}