'use client'

import Image from 'next/image'
import Link from 'next/link'
import { Play, Lock, Crown } from 'lucide-react'
import type { Movie, Genre } from '@/lib/types'

interface MovieCardProps {
  movie: Movie & { genres?: Genre[] }
  priority?: boolean
}

export function MovieCard({ movie, priority = false }: MovieCardProps) {
  const categoryLabel = {
    nyarwanda: 'Nyarwanda',
    translated: 'Translated',
    international: 'International',
  }

  const categoryColors = {
    nyarwanda: 'bg-green-600',
    translated: 'bg-blue-600',
    international: 'bg-purple-600',
  }

  return (
    <Link href={`/movie/${movie.id}`} className="group block flex-shrink-0 w-[160px] md:w-[200px]">
      <div className="relative rounded-xl overflow-hidden card-hover bg-[#141414]">
        {/* Thumbnail */}
        <div className="relative aspect-[2/3]">
          {movie.thumbnail ? (
            <Image
              src={movie.thumbnail}
              alt={movie.title}
              fill
              className={`object-cover transition-transform duration-300 group-hover:scale-110 ${
                movie.is_premium ? 'group-hover:brightness-50' : ''
              }`}
              sizes="(max-width: 768px) 160px, 200px"
              priority={priority}
            />
          ) : (
            <div className="w-full h-full bg-gradient-to-br from-[#1a1a1a] to-[#0b0b0b] flex items-center justify-center">
              <Play className="w-12 h-12 text-gray-600" />
            </div>
          )}

          {/* Overlay on hover */}
          <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <div className="absolute bottom-0 left-0 right-0 p-4">
              <div className="flex items-center gap-2">
                <div className="w-10 h-10 rounded-full bg-white flex items-center justify-center">
                  <Play className="w-5 h-5 text-black fill-black" />
                </div>
                <span className="text-sm font-medium">Play</span>
              </div>
            </div>
          </div>

          {/* Premium Badge */}
          {movie.is_premium && (
            <div className="absolute top-2 right-2 flex items-center gap-1 px-2 py-1 bg-gradient-to-r from-amber-500 to-orange-500 rounded-full text-xs font-semibold text-white shadow-lg">
              <Crown className="w-3 h-3" />
              Premium
            </div>
          )}

          {/* Category Badge */}
          <div className={`absolute top-2 left-2 px-2 py-1 ${categoryColors[movie.category]} rounded-full text-xs font-medium text-white`}>
            {categoryLabel[movie.category]}
          </div>

          {/* Premium Lock Overlay */}
          {movie.is_premium && (
            <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
              <div className="flex flex-col items-center gap-2 text-white">
                <Lock className="w-8 h-8" />
                <span className="text-sm font-medium">Unlock to Watch</span>
              </div>
            </div>
          )}
        </div>

        {/* Info */}
        <div className="p-3">
          <h3 className="text-sm font-semibold text-white truncate group-hover:text-[#e50914] transition-colors">
            {movie.title}
          </h3>
          {movie.genres && movie.genres.length > 0 && (
            <p className="text-xs text-gray-400 mt-1 truncate">
              {movie.genres.slice(0, 2).map(g => g.name).join(' • ')}
            </p>
          )}
        </div>
      </div>
    </Link>
  )
}

export function MovieCardSkeleton() {
  return (
    <div className="flex-shrink-0 w-[160px] md:w-[200px]">
      <div className="rounded-xl overflow-hidden bg-[#141414]">
        <div className="aspect-[2/3] skeleton" />
        <div className="p-3 space-y-2">
          <div className="h-4 w-3/4 skeleton rounded" />
          <div className="h-3 w-1/2 skeleton rounded" />
        </div>
      </div>
    </div>
  )
}