'use client'

import { useState, useEffect } from 'react'
import { useRouter } from 'next/navigation'
import useSWR, { mutate } from 'swr'
import { 
  Plus, 
  LogOut, 
  Film, 
  Tv, 
  Trash2, 
  Edit2, 
  Search,
  ChevronDown,
  Crown
} from 'lucide-react'
import { toast } from 'sonner'
import type { Movie, Genre, Episode } from '@/lib/types'

const fetcher = (url: string) => fetch(url).then((res) => res.json())

export default function AdminDashboard() {
  const router = useRouter()
  const [activeTab, setActiveTab] = useState<'movies' | 'episodes'>('movies')
  const [searchQuery, setSearchQuery] = useState('')
  const [showMovieForm, setShowMovieForm] = useState(false)
  const [showEpisodeForm, setShowEpisodeForm] = useState(false)
  const [editingMovie, setEditingMovie] = useState<(Movie & { genres?: Genre[] }) | null>(null)
  const [editingEpisode, setEditingEpisode] = useState<Episode | null>(null)
  const [selectedMovieForEpisode, setSelectedMovieForEpisode] = useState<string>('')

  const { data: movies, error: moviesError } = useSWR<(Movie & { genres?: Genre[] })[]>(
    '/api/admin/movies',
    fetcher
  )
  const { data: genres } = useSWR<Genre[]>('/api/admin/genres', fetcher)
  const { data: episodes } = useSWR<Episode[]>('/api/admin/episodes', fetcher)

  useEffect(() => {
    if (moviesError?.message?.includes('Unauthorized')) {
      router.push('/admin')
    }
  }, [moviesError, router])

  const handleLogout = async () => {
    await fetch('/api/admin/logout', { method: 'POST' })
    router.push('/admin')
  }

  const filteredMovies = movies?.filter((movie) =>
    movie.title.toLowerCase().includes(searchQuery.toLowerCase())
  )

  const filteredEpisodes = episodes?.filter((episode) => {
    const movie = movies?.find((m) => m.id === episode.movie_id)
    return (
      episode.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
      movie?.title.toLowerCase().includes(searchQuery.toLowerCase())
    )
  })

  return (
    <div className="min-h-screen bg-[#0b0b0b]">
      {/* Header */}
      <header className="sticky top-0 z-50 glass border-b border-white/10">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between h-16">
            <h1 className="text-2xl font-bold font-[family-name:var(--font-poppins)] text-[#e50914]">
              WATCHFLIX
              <span className="text-sm font-normal text-gray-400 ml-2">Admin</span>
            </h1>
            
            <button
              onClick={handleLogout}
              className="flex items-center gap-2 px-4 py-2 text-gray-400 hover:text-white transition-colors"
            >
              <LogOut className="w-5 h-5" />
              Logout
            </button>
          </div>
        </div>
      </header>

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* Stats */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
          <StatCard
            label="Total Movies"
            value={movies?.length || 0}
            icon={<Film className="w-5 h-5" />}
          />
          <StatCard
            label="Premium Movies"
            value={movies?.filter((m) => m.is_premium).length || 0}
            icon={<Crown className="w-5 h-5" />}
          />
          <StatCard
            label="Episodes"
            value={episodes?.length || 0}
            icon={<Tv className="w-5 h-5" />}
          />
          <StatCard
            label="Genres"
            value={genres?.length || 0}
            icon={<ChevronDown className="w-5 h-5" />}
          />
        </div>

        {/* Tabs */}
        <div className="flex items-center gap-4 mb-6">
          <button
            onClick={() => setActiveTab('movies')}
            className={`px-4 py-2 rounded-lg font-medium transition-colors ${
              activeTab === 'movies'
                ? 'bg-[#e50914] text-white'
                : 'bg-[#141414] text-gray-400 hover:text-white'
            }`}
          >
            Movies
          </button>
          <button
            onClick={() => setActiveTab('episodes')}
            className={`px-4 py-2 rounded-lg font-medium transition-colors ${
              activeTab === 'episodes'
                ? 'bg-[#e50914] text-white'
                : 'bg-[#141414] text-gray-400 hover:text-white'
            }`}
          >
            Episodes
          </button>
        </div>

        {/* Search & Add */}
        <div className="flex flex-col sm:flex-row gap-4 mb-6">
          <div className="relative flex-1">
            <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" />
            <input
              type="text"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              placeholder={`Search ${activeTab}...`}
              className="w-full pl-12 pr-4 py-3 bg-[#141414] border border-white/10 rounded-xl text-white placeholder-gray-500 focus:outline-none focus:border-[#e50914]"
            />
          </div>
          <button
            onClick={() => {
              if (activeTab === 'movies') {
                setEditingMovie(null)
                setShowMovieForm(true)
              } else {
                setEditingEpisode(null)
                setShowEpisodeForm(true)
              }
            }}
            className="flex items-center gap-2 px-6 py-3 bg-[#e50914] text-white rounded-xl font-medium hover:bg-[#f40612] transition-colors"
          >
            <Plus className="w-5 h-5" />
            Add {activeTab === 'movies' ? 'Movie' : 'Episode'}
          </button>
        </div>

        {/* Content */}
        {activeTab === 'movies' ? (
          <MoviesTable
            movies={filteredMovies || []}
            onEdit={(movie) => {
              setEditingMovie(movie)
              setShowMovieForm(true)
            }}
            onDelete={async (id) => {
              if (confirm('Are you sure you want to delete this movie?')) {
                await fetch(`/api/admin/movies/${id}`, { method: 'DELETE' })
                mutate('/api/admin/movies')
                toast.success('Movie deleted')
              }
            }}
          />
        ) : (
          <EpisodesTable
            episodes={filteredEpisodes || []}
            movies={movies || []}
            onEdit={(episode) => {
              setEditingEpisode(episode)
              setSelectedMovieForEpisode(episode.movie_id)
              setShowEpisodeForm(true)
            }}
            onDelete={async (id) => {
              if (confirm('Are you sure you want to delete this episode?')) {
                await fetch(`/api/admin/episodes/${id}`, { method: 'DELETE' })
                mutate('/api/admin/episodes')
                toast.success('Episode deleted')
              }
            }}
          />
        )}
      </div>

      {/* Movie Form Modal */}
      {showMovieForm && (
        <MovieFormModal
          movie={editingMovie}
          genres={genres || []}
          onClose={() => {
            setShowMovieForm(false)
            setEditingMovie(null)
          }}
          onSave={() => {
            mutate('/api/admin/movies')
            setShowMovieForm(false)
            setEditingMovie(null)
          }}
        />
      )}

      {/* Episode Form Modal */}
      {showEpisodeForm && (
        <EpisodeFormModal
          episode={editingEpisode}
          movies={movies || []}
          selectedMovieId={selectedMovieForEpisode}
          onClose={() => {
            setShowEpisodeForm(false)
            setEditingEpisode(null)
            setSelectedMovieForEpisode('')
          }}
          onSave={() => {
            mutate('/api/admin/episodes')
            setShowEpisodeForm(false)
            setEditingEpisode(null)
            setSelectedMovieForEpisode('')
          }}
        />
      )}
    </div>
  )
}

function StatCard({ label, value, icon }: { label: string; value: number; icon: React.ReactNode }) {
  return (
    <div className="bg-[#141414] rounded-xl p-4 border border-white/10">
      <div className="flex items-center gap-3">
        <div className="p-2 bg-[#e50914]/10 rounded-lg text-[#e50914]">
          {icon}
        </div>
        <div>
          <p className="text-2xl font-bold text-white">{value}</p>
          <p className="text-sm text-gray-400">{label}</p>
        </div>
      </div>
    </div>
  )
}

function MoviesTable({
  movies,
  onEdit,
  onDelete,
}: {
  movies: (Movie & { genres?: Genre[] })[]
  onEdit: (movie: Movie & { genres?: Genre[] }) => void
  onDelete: (id: string) => void
}) {
  const categoryColors = {
    nyarwanda: 'bg-green-600',
    translated: 'bg-blue-600',
    international: 'bg-purple-600',
  }

  if (movies.length === 0) {
    return (
      <div className="bg-[#141414] rounded-xl p-8 text-center">
        <Film className="w-12 h-12 text-gray-600 mx-auto mb-4" />
        <p className="text-gray-400">No movies found. Add your first movie!</p>
      </div>
    )
  }

  return (
    <div className="bg-[#141414] rounded-xl overflow-hidden border border-white/10">
      <div className="overflow-x-auto">
        <table className="w-full">
          <thead className="bg-white/5">
            <tr>
              <th className="px-6 py-4 text-left text-sm font-medium text-gray-400">Title</th>
              <th className="px-6 py-4 text-left text-sm font-medium text-gray-400">Category</th>
              <th className="px-6 py-4 text-left text-sm font-medium text-gray-400">Genres</th>
              <th className="px-6 py-4 text-left text-sm font-medium text-gray-400">Premium</th>
              <th className="px-6 py-4 text-left text-sm font-medium text-gray-400">Actions</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-white/10">
            {movies.map((movie) => (
              <tr key={movie.id} className="hover:bg-white/5">
                <td className="px-6 py-4">
                  <div className="flex items-center gap-3">
                    {movie.thumbnail && (
                      <img
                        src={movie.thumbnail}
                        alt={movie.title}
                        className="w-10 h-14 object-cover rounded"
                      />
                    )}
                    <span className="text-white font-medium">{movie.title}</span>
                  </div>
                </td>
                <td className="px-6 py-4">
                  <span className={`px-2 py-1 ${categoryColors[movie.category]} rounded text-xs text-white`}>
                    {movie.category}
                  </span>
                </td>
                <td className="px-6 py-4">
                  <div className="flex flex-wrap gap-1">
                    {movie.genres?.slice(0, 2).map((genre) => (
                      <span key={genre.id} className="px-2 py-0.5 bg-white/10 rounded text-xs text-gray-300">
                        {genre.name}
                      </span>
                    ))}
                    {movie.genres && movie.genres.length > 2 && (
                      <span className="px-2 py-0.5 bg-white/10 rounded text-xs text-gray-400">
                        +{movie.genres.length - 2}
                      </span>
                    )}
                  </div>
                </td>
                <td className="px-6 py-4">
                  {movie.is_premium ? (
                    <Crown className="w-5 h-5 text-amber-500" />
                  ) : (
                    <span className="text-gray-500">-</span>
                  )}
                </td>
                <td className="px-6 py-4">
                  <div className="flex items-center gap-2">
                    <button
                      onClick={() => onEdit(movie)}
                      className="p-2 text-gray-400 hover:text-white transition-colors"
                    >
                      <Edit2 className="w-4 h-4" />
                    </button>
                    <button
                      onClick={() => onDelete(movie.id)}
                      className="p-2 text-gray-400 hover:text-red-500 transition-colors"
                    >
                      <Trash2 className="w-4 h-4" />
                    </button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  )
}

function EpisodesTable({
  episodes,
  movies,
  onEdit,
  onDelete,
}: {
  episodes: Episode[]
  movies: (Movie & { genres?: Genre[] })[]
  onEdit: (episode: Episode) => void
  onDelete: (id: string) => void
}) {
  if (episodes.length === 0) {
    return (
      <div className="bg-[#141414] rounded-xl p-8 text-center">
        <Tv className="w-12 h-12 text-gray-600 mx-auto mb-4" />
        <p className="text-gray-400">No episodes found. Add episodes to movies!</p>
      </div>
    )
  }

  return (
    <div className="bg-[#141414] rounded-xl overflow-hidden border border-white/10">
      <div className="overflow-x-auto">
        <table className="w-full">
          <thead className="bg-white/5">
            <tr>
              <th className="px-6 py-4 text-left text-sm font-medium text-gray-400">Title</th>
              <th className="px-6 py-4 text-left text-sm font-medium text-gray-400">Movie</th>
              <th className="px-6 py-4 text-left text-sm font-medium text-gray-400">Season</th>
              <th className="px-6 py-4 text-left text-sm font-medium text-gray-400">Episode</th>
              <th className="px-6 py-4 text-left text-sm font-medium text-gray-400">Actions</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-white/10">
            {episodes.map((episode) => {
              const movie = movies.find((m) => m.id === episode.movie_id)
              return (
                <tr key={episode.id} className="hover:bg-white/5">
                  <td className="px-6 py-4 text-white">{episode.title}</td>
                  <td className="px-6 py-4 text-gray-400">{movie?.title || 'Unknown'}</td>
                  <td className="px-6 py-4 text-gray-400">S{episode.season_number}</td>
                  <td className="px-6 py-4 text-gray-400">E{episode.episode_number}</td>
                  <td className="px-6 py-4">
                    <div className="flex items-center gap-2">
                      <button
                        onClick={() => onEdit(episode)}
                        className="p-2 text-gray-400 hover:text-white transition-colors"
                      >
                        <Edit2 className="w-4 h-4" />
                      </button>
                      <button
                        onClick={() => onDelete(episode.id)}
                        className="p-2 text-gray-400 hover:text-red-500 transition-colors"
                      >
                        <Trash2 className="w-4 h-4" />
                      </button>
                    </div>
                  </td>
                </tr>
              )
            })}
          </tbody>
        </table>
      </div>
    </div>
  )
}

function MovieFormModal({
  movie,
  genres,
  onClose,
  onSave,
}: {
  movie: (Movie & { genres?: Genre[] }) | null
  genres: Genre[]
  onClose: () => void
  onSave: () => void
}) {
  const [formData, setFormData] = useState({
    title: movie?.title || '',
    thumbnail: movie?.thumbnail || '',
    video_url: movie?.video_url || '',
    description: movie?.description || '',
    translator_name: movie?.translator_name || '',
    category: movie?.category || 'nyarwanda',
    language: movie?.language || 'kinyarwanda',
    is_premium: movie?.is_premium || false,
    genre_ids: movie?.genres?.map((g) => g.id) || [],
  })
  const [isLoading, setIsLoading] = useState(false)

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsLoading(true)

    try {
      const url = movie ? `/api/admin/movies/${movie.id}` : '/api/admin/movies'
      const method = movie ? 'PUT' : 'POST'

      const response = await fetch(url, {
        method,
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(formData),
      })

      if (response.ok) {
        toast.success(movie ? 'Movie updated!' : 'Movie created!')
        onSave()
      } else {
        const data = await response.json()
        toast.error(data.error || 'Failed to save movie')
      }
    } catch {
      toast.error('An error occurred')
    } finally {
      setIsLoading(false)
    }
  }

  const toggleGenre = (genreId: string) => {
    setFormData((prev) => ({
      ...prev,
      genre_ids: prev.genre_ids.includes(genreId)
        ? prev.genre_ids.filter((id) => id !== genreId)
        : [...prev.genre_ids, genreId],
    }))
  }

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80">
      <div className="bg-[#141414] rounded-2xl w-full max-w-2xl max-h-[90vh] overflow-y-auto border border-white/10">
        <div className="sticky top-0 bg-[#141414] px-6 py-4 border-b border-white/10">
          <h2 className="text-xl font-bold text-white">
            {movie ? 'Edit Movie' : 'Add Movie'}
          </h2>
        </div>

        <form onSubmit={handleSubmit} className="p-6 space-y-6">
          <div>
            <label className="block text-sm font-medium text-gray-400 mb-2">
              Title *
            </label>
            <input
              type="text"
              value={formData.title}
              onChange={(e) => setFormData({ ...formData, title: e.target.value })}
              required
              className="w-full px-4 py-3 bg-[#0b0b0b] border border-white/10 rounded-xl text-white focus:outline-none focus:border-[#e50914]"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-400 mb-2">
              Thumbnail URL
            </label>
            <input
              type="url"
              value={formData.thumbnail}
              onChange={(e) => setFormData({ ...formData, thumbnail: e.target.value })}
              className="w-full px-4 py-3 bg-[#0b0b0b] border border-white/10 rounded-xl text-white focus:outline-none focus:border-[#e50914]"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-400 mb-2">
              Video URL
            </label>
            <input
              type="url"
              value={formData.video_url}
              onChange={(e) => setFormData({ ...formData, video_url: e.target.value })}
              placeholder="YouTube, Vimeo, or direct video URL"
              className="w-full px-4 py-3 bg-[#0b0b0b] border border-white/10 rounded-xl text-white focus:outline-none focus:border-[#e50914]"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-400 mb-2">
              Description
            </label>
            <textarea
              value={formData.description}
              onChange={(e) => setFormData({ ...formData, description: e.target.value })}
              rows={3}
              className="w-full px-4 py-3 bg-[#0b0b0b] border border-white/10 rounded-xl text-white focus:outline-none focus:border-[#e50914] resize-none"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-400 mb-2">
              Translator Name
            </label>
            <input
              type="text"
              value={formData.translator_name}
              onChange={(e) => setFormData({ ...formData, translator_name: e.target.value })}
              className="w-full px-4 py-3 bg-[#0b0b0b] border border-white/10 rounded-xl text-white focus:outline-none focus:border-[#e50914]"
            />
          </div>

          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-gray-400 mb-2">
                Category *
              </label>
              <select
                value={formData.category}
                onChange={(e) => setFormData({ ...formData, category: e.target.value as Movie['category'] })}
                className="w-full px-4 py-3 bg-[#0b0b0b] border border-white/10 rounded-xl text-white focus:outline-none focus:border-[#e50914]"
              >
                <option value="nyarwanda">Nyarwanda</option>
                <option value="translated">Translated</option>
                <option value="international">International</option>
              </select>
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-400 mb-2">
                Language
              </label>
              <select
                value={formData.language}
                onChange={(e) => setFormData({ ...formData, language: e.target.value })}
                className="w-full px-4 py-3 bg-[#0b0b0b] border border-white/10 rounded-xl text-white focus:outline-none focus:border-[#e50914]"
              >
                <option value="kinyarwanda">Kinyarwanda</option>
                <option value="english">English</option>
                <option value="french">French</option>
                <option value="swahili">Swahili</option>
              </select>
            </div>
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-400 mb-2">
              Genres
            </label>
            <div className="flex flex-wrap gap-2">
              {genres.map((genre) => (
                <button
                  key={genre.id}
                  type="button"
                  onClick={() => toggleGenre(genre.id)}
                  className={`px-3 py-1.5 rounded-full text-sm transition-colors ${
                    formData.genre_ids.includes(genre.id)
                      ? 'bg-[#e50914] text-white'
                      : 'bg-white/10 text-gray-400 hover:bg-white/20'
                  }`}
                >
                  {genre.name}
                </button>
              ))}
            </div>
          </div>

          <div className="flex items-center gap-3">
            <input
              type="checkbox"
              id="is_premium"
              checked={formData.is_premium}
              onChange={(e) => setFormData({ ...formData, is_premium: e.target.checked })}
              className="w-5 h-5 rounded border-white/10 bg-[#0b0b0b] text-[#e50914] focus:ring-[#e50914]"
            />
            <label htmlFor="is_premium" className="text-white flex items-center gap-2">
              <Crown className="w-5 h-5 text-amber-500" />
              Premium Content
            </label>
          </div>

          <div className="flex gap-4 pt-4">
            <button
              type="button"
              onClick={onClose}
              className="flex-1 py-3 bg-white/10 text-white rounded-xl font-medium hover:bg-white/20 transition-colors"
            >
              Cancel
            </button>
            <button
              type="submit"
              disabled={isLoading}
              className="flex-1 py-3 bg-[#e50914] text-white rounded-xl font-medium hover:bg-[#f40612] transition-colors disabled:opacity-50"
            >
              {isLoading ? 'Saving...' : movie ? 'Update' : 'Create'}
            </button>
          </div>
        </form>
      </div>
    </div>
  )
}

function EpisodeFormModal({
  episode,
  movies,
  selectedMovieId,
  onClose,
  onSave,
}: {
  episode: Episode | null
  movies: (Movie & { genres?: Genre[] })[]
  selectedMovieId: string
  onClose: () => void
  onSave: () => void
}) {
  const [formData, setFormData] = useState({
    movie_id: episode?.movie_id || selectedMovieId || '',
    title: episode?.title || '',
    video_url: episode?.video_url || '',
    episode_number: episode?.episode_number || 1,
    season_number: episode?.season_number || 1,
  })
  const [isLoading, setIsLoading] = useState(false)

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsLoading(true)

    try {
      const url = episode ? `/api/admin/episodes/${episode.id}` : '/api/admin/episodes'
      const method = episode ? 'PUT' : 'POST'

      const response = await fetch(url, {
        method,
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(formData),
      })

      if (response.ok) {
        toast.success(episode ? 'Episode updated!' : 'Episode created!')
        onSave()
      } else {
        const data = await response.json()
        toast.error(data.error || 'Failed to save episode')
      }
    } catch {
      toast.error('An error occurred')
    } finally {
      setIsLoading(false)
    }
  }

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80">
      <div className="bg-[#141414] rounded-2xl w-full max-w-lg border border-white/10">
        <div className="px-6 py-4 border-b border-white/10">
          <h2 className="text-xl font-bold text-white">
            {episode ? 'Edit Episode' : 'Add Episode'}
          </h2>
        </div>

        <form onSubmit={handleSubmit} className="p-6 space-y-6">
          <div>
            <label className="block text-sm font-medium text-gray-400 mb-2">
              Movie *
            </label>
            <select
              value={formData.movie_id}
              onChange={(e) => setFormData({ ...formData, movie_id: e.target.value })}
              required
              className="w-full px-4 py-3 bg-[#0b0b0b] border border-white/10 rounded-xl text-white focus:outline-none focus:border-[#e50914]"
            >
              <option value="">Select a movie</option>
              {movies.map((movie) => (
                <option key={movie.id} value={movie.id}>
                  {movie.title}
                </option>
              ))}
            </select>
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-400 mb-2">
              Episode Title *
            </label>
            <input
              type="text"
              value={formData.title}
              onChange={(e) => setFormData({ ...formData, title: e.target.value })}
              placeholder="e.g., Part A, Episode 1, etc."
              required
              className="w-full px-4 py-3 bg-[#0b0b0b] border border-white/10 rounded-xl text-white focus:outline-none focus:border-[#e50914]"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-400 mb-2">
              Video URL
            </label>
            <input
              type="url"
              value={formData.video_url}
              onChange={(e) => setFormData({ ...formData, video_url: e.target.value })}
              className="w-full px-4 py-3 bg-[#0b0b0b] border border-white/10 rounded-xl text-white focus:outline-none focus:border-[#e50914]"
            />
          </div>

          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-gray-400 mb-2">
                Season
              </label>
              <input
                type="number"
                value={formData.season_number}
                onChange={(e) => setFormData({ ...formData, season_number: parseInt(e.target.value) })}
                min={1}
                className="w-full px-4 py-3 bg-[#0b0b0b] border border-white/10 rounded-xl text-white focus:outline-none focus:border-[#e50914]"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-400 mb-2">
                Episode Number
              </label>
              <input
                type="number"
                value={formData.episode_number}
                onChange={(e) => setFormData({ ...formData, episode_number: parseInt(e.target.value) })}
                min={1}
                className="w-full px-4 py-3 bg-[#0b0b0b] border border-white/10 rounded-xl text-white focus:outline-none focus:border-[#e50914]"
              />
            </div>
          </div>

          <div className="flex gap-4 pt-4">
            <button
              type="button"
              onClick={onClose}
              className="flex-1 py-3 bg-white/10 text-white rounded-xl font-medium hover:bg-white/20 transition-colors"
            >
              Cancel
            </button>
            <button
              type="submit"
              disabled={isLoading}
              className="flex-1 py-3 bg-[#e50914] text-white rounded-xl font-medium hover:bg-[#f40612] transition-colors disabled:opacity-50"
            >
              {isLoading ? 'Saving...' : episode ? 'Update' : 'Create'}
            </button>
          </div>
        </form>
      </div>
    </div>
  )
}