'use client'

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

interface HeroBannerProps {
  movie: Movie & { genres?: Genre[] }
}

export function HeroBanner({ movie }: HeroBannerProps) {
  return (
    <div className="relative h-[70vh] md:h-[85vh] w-full overflow-hidden">
      {/* Background Image */}
      <div className="absolute inset-0">
        {movie.thumbnail ? (
          <Image
            src={movie.thumbnail}
            alt={movie.title}
            fill
            className="object-cover"
            priority
            sizes="100vw"
          />
        ) : (
          <div className="w-full h-full bg-gradient-to-br from-[#1a1a1a] to-[#0b0b0b]" />
        )}
        
        {/* Gradient Overlays */}
        <div className="absolute inset-0 bg-gradient-to-t from-[#0b0b0b] via-[#0b0b0b]/50 to-transparent" />
        <div className="absolute inset-0 bg-gradient-to-r from-[#0b0b0b] via-transparent to-transparent" />
      </div>

      {/* Content */}
      <div className="relative h-full flex items-end pb-16 md:pb-24">
        <div className="px-4 sm:px-6 lg:px-8 max-w-[1800px] mx-auto w-full">
          <div className="max-w-2xl space-y-4 md:space-y-6">
            {/* Premium Badge */}
            {movie.is_premium && (
              <div className="inline-flex items-center gap-2 px-3 py-1.5 bg-gradient-to-r from-amber-500 to-orange-500 rounded-full text-sm font-semibold text-white">
                <Crown className="w-4 h-4" />
                Premium Content
              </div>
            )}

            {/* Title */}
            <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold font-[family-name:var(--font-poppins)] text-white leading-tight text-balance">
              {movie.title}
            </h1>

            {/* Genres */}
            {movie.genres && movie.genres.length > 0 && (
              <div className="flex flex-wrap gap-2">
                {movie.genres.map((genre) => (
                  <span
                    key={genre.id}
                    className="px-3 py-1 bg-white/10 rounded-full text-sm text-gray-300"
                  >
                    {genre.name}
                  </span>
                ))}
              </div>
            )}

            {/* Description */}
            {movie.description && (
              <p className="text-base md:text-lg text-gray-300 line-clamp-3 max-w-xl">
                {movie.description}
              </p>
            )}

            {/* Translator */}
            {movie.translator_name && (
              <p className="text-sm text-gray-400">
                Translated by <span className="text-white font-medium">{movie.translator_name}</span>
              </p>
            )}

            {/* Action Buttons */}
            <div className="flex flex-wrap gap-4 pt-2">
              <Link
                href={`/movie/${movie.id}`}
                className="inline-flex items-center gap-2 px-6 md:px-8 py-3 md:py-4 bg-white text-black rounded-xl font-semibold text-base md:text-lg hover:bg-white/90 transition-colors"
              >
                <Play className="w-5 h-5 md:w-6 md:h-6 fill-black" />
                Play
              </Link>
              <Link
                href={`/movie/${movie.id}`}
                className="inline-flex items-center gap-2 px-6 md:px-8 py-3 md:py-4 bg-white/20 text-white rounded-xl font-semibold text-base md:text-lg hover:bg-white/30 transition-colors backdrop-blur-sm"
              >
                <Info className="w-5 h-5 md:w-6 md:h-6" />
                More Info
              </Link>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export function HeroBannerSkeleton() {
  return (
    <div className="relative h-[70vh] md:h-[85vh] w-full overflow-hidden bg-[#141414]">
      <div className="absolute inset-0 skeleton" />
      <div className="absolute inset-0 bg-gradient-to-t from-[#0b0b0b] via-[#0b0b0b]/50 to-transparent" />
      <div className="relative h-full flex items-end pb-16 md:pb-24">
        <div className="px-4 sm:px-6 lg:px-8 max-w-[1800px] mx-auto w-full">
          <div className="max-w-2xl space-y-4">
            <div className="h-12 w-3/4 skeleton rounded-lg" />
            <div className="h-6 w-1/2 skeleton rounded-lg" />
            <div className="h-20 w-full skeleton rounded-lg" />
            <div className="flex gap-4 pt-2">
              <div className="h-14 w-32 skeleton rounded-xl" />
              <div className="h-14 w-40 skeleton rounded-xl" />
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}