'use client'

import { useState } from 'react'
import Image from 'next/image'
import { Play, Crown, Globe, User, Calendar, Film } from 'lucide-react'
import { VideoPlayer } from '@/components/video-player'
import { EpisodeList } from '@/components/episode-list'
import { PremiumOverlay } from '@/components/premium-overlay'
import type { Movie, Genre, Episode } from '@/lib/types'

interface MovieDetailClientProps {
  movie: Movie & { genres?: Genre[] }
  episodes: Episode[]
}

export function MovieDetailClient({ movie, episodes }: MovieDetailClientProps) {
  const [isPlaying, setIsPlaying] = useState(false)
  const [isUnlocked, setIsUnlocked] = useState(!movie.is_premium)
  const [currentEpisode, setCurrentEpisode] = useState<Episode | null>(
    episodes.length > 0 ? episodes[0] : null
  )

  const categoryLabel = {
    nyarwanda: 'Nyarwanda',
    translated: 'Translated',
    international: 'International',
  }

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

  const handlePlay = () => {
    if (movie.is_premium && !isUnlocked) {
      return
    }
    setIsPlaying(true)
  }

  const handleUnlock = () => {
    setIsUnlocked(true)
    setIsPlaying(true)
  }

  const currentVideoUrl = currentEpisode?.video_url || movie.video_url || ''

  return (
    <div className="px-4 sm:px-6 lg:px-8 max-w-[1800px] mx-auto">
      {/* Video Player Section */}
      {isPlaying && currentVideoUrl ? (
        <div className="relative mb-8">
          <VideoPlayer
            videoUrl={currentVideoUrl}
            title={currentEpisode?.title || movie.title}
            poster={movie.thumbnail || undefined}
          />
          {movie.is_premium && !isUnlocked && (
            <PremiumOverlay title={movie.title} onUnlock={handleUnlock} />
          )}
        </div>
      ) : (
        /* Hero Banner */
        <div className="relative rounded-2xl overflow-hidden mb-8">
          <div className="relative aspect-[21/9] md:aspect-[3/1]">
            {movie.thumbnail ? (
              <Image
                src={movie.thumbnail}
                alt={movie.title}
                fill
                className="object-cover"
                priority
              />
            ) : (
              <div className="w-full h-full bg-gradient-to-br from-[#1a1a1a] to-[#0b0b0b]" />
            )}
            
            {/* Gradient Overlay */}
            <div className="absolute inset-0 bg-gradient-to-t from-[#0b0b0b] via-[#0b0b0b]/60 to-transparent" />
            <div className="absolute inset-0 bg-gradient-to-r from-[#0b0b0b] via-transparent to-transparent" />

            {/* Premium Overlay */}
            {movie.is_premium && !isUnlocked && (
              <PremiumOverlay title={movie.title} onUnlock={handleUnlock} />
            )}
          </div>

          {/* Play Button Overlay */}
          <button
            onClick={handlePlay}
            className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-20 h-20 md:w-24 md:h-24 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center hover:bg-white/30 transition-all hover:scale-110"
          >
            <Play className="w-10 h-10 md:w-12 md:h-12 text-white fill-white ml-1" />
          </button>
        </div>
      )}

      {/* Movie Info */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
        {/* Main Info */}
        <div className="lg:col-span-2 space-y-6">
          {/* Title & Badges */}
          <div className="space-y-4">
            <div className="flex flex-wrap items-center gap-3">
              <span className={`px-3 py-1 ${categoryColors[movie.category]} rounded-full text-sm font-medium text-white`}>
                {categoryLabel[movie.category]}
              </span>
              {movie.is_premium && (
                <span className="inline-flex items-center gap-1 px-3 py-1 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
                </span>
              )}
            </div>

            <h1 className="text-3xl md:text-5xl font-bold font-[family-name:var(--font-poppins)] text-white">
              {movie.title}
            </h1>
          </div>

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

          {/* Description */}
          {movie.description && (
            <p className="text-lg text-gray-300 leading-relaxed">
              {movie.description}
            </p>
          )}

          {/* Action Buttons */}
          <div className="flex flex-wrap gap-4">
            <button
              onClick={handlePlay}
              className="inline-flex items-center gap-2 px-8 py-4 bg-[#e50914] text-white rounded-xl font-semibold text-lg hover:bg-[#f40612] transition-colors"
            >
              <Play className="w-6 h-6 fill-white" />
              {isPlaying ? 'Playing' : 'Play Now'}
            </button>
          </div>

          {/* Episodes */}
          {episodes.length > 0 && (
            <EpisodeList
              episodes={episodes}
              currentEpisodeId={currentEpisode?.id}
              onSelectEpisode={(episode) => {
                setCurrentEpisode(episode)
                setIsPlaying(true)
              }}
            />
          )}
        </div>

        {/* Side Info */}
        <div className="space-y-6">
          <div className="bg-[#141414] rounded-2xl p-6 space-y-4">
            <h3 className="text-lg font-bold font-[family-name:var(--font-poppins)] text-white mb-4">
              Details
            </h3>

            {movie.translator_name && (
              <div className="flex items-start gap-3">
                <User className="w-5 h-5 text-gray-400 mt-0.5" />
                <div>
                  <p className="text-sm text-gray-400">Translator</p>
                  <p className="text-white font-medium">{movie.translator_name}</p>
                </div>
              </div>
            )}

            <div className="flex items-start gap-3">
              <Globe className="w-5 h-5 text-gray-400 mt-0.5" />
              <div>
                <p className="text-sm text-gray-400">Language</p>
                <p className="text-white font-medium capitalize">{movie.language}</p>
              </div>
            </div>

            <div className="flex items-start gap-3">
              <Film className="w-5 h-5 text-gray-400 mt-0.5" />
              <div>
                <p className="text-sm text-gray-400">Category</p>
                <p className="text-white font-medium">{categoryLabel[movie.category]}</p>
              </div>
            </div>

            <div className="flex items-start gap-3">
              <Calendar className="w-5 h-5 text-gray-400 mt-0.5" />
              <div>
                <p className="text-sm text-gray-400">Added</p>
                <p className="text-white font-medium">
                  {new Date(movie.created_at).toLocaleDateString('en-US', {
                    year: 'numeric',
                    month: 'long',
                    day: 'numeric',
                  })}
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}