import { Suspense } from 'react'
import { Navbar } from '@/components/navbar'
import { HeroBanner, HeroBannerSkeleton } from '@/components/hero-banner'
import { MovieSection } from '@/components/movie-section'
import { FilterBar } from '@/components/filter-bar'
import { 
  getGenres, 
  getMovies, 
  getFeaturedMovie, 
  getMoviesByCategory,
  getMoviesByGenre 
} from '@/lib/data'
import type { FilterState, Category } from '@/lib/types'

interface HomePageProps {
  searchParams: Promise<{ [key: string]: string | undefined }>
}

export default async function HomePage({ searchParams }: HomePageProps) {
  const params = await searchParams
  
  const filters: FilterState = {
    category: (params.category as Category) || 'all',
    genre: params.genre || '',
    language: params.language || '',
    isPremium: (params.isPremium as 'all' | 'free' | 'premium') || 'all',
    search: params.search || '',
  }

  const hasFilters = filters.category !== 'all' || 
    filters.genre || 
    filters.language || 
    filters.isPremium !== 'all' ||
    filters.search

  return (
    <main className="min-h-screen bg-[#0b0b0b]">
      <Navbar />
      
      <Suspense fallback={<HeroBannerSkeleton />}>
        <HeroSection />
      </Suspense>

      <Suspense fallback={<FilterBarSkeleton />}>
        <FilterSection currentFilters={filters} />
      </Suspense>

      {hasFilters ? (
        <Suspense fallback={<SectionSkeleton title="Search Results" />}>
          <FilteredMoviesSection filters={filters} />
        </Suspense>
      ) : (
        <>
          <Suspense fallback={<SectionSkeleton title="Trending Now" />}>
            <TrendingSection />
          </Suspense>

          <Suspense fallback={<SectionSkeleton title="Nyarwanda Movies" />}>
            <CategorySection category="nyarwanda" title="Nyarwanda Movies" icon="🇷🇼" />
          </Suspense>

          <Suspense fallback={<SectionSkeleton title="Translated Movies" />}>
            <CategorySection category="translated" title="Translated Movies" icon="🌍" />
          </Suspense>

          <Suspense fallback={<SectionSkeleton title="International" />}>
            <CategorySection category="international" title="International" icon="🌎" />
          </Suspense>

          <Suspense fallback={<SectionSkeleton title="Action" />}>
            <GenreSection genreName="Action" />
          </Suspense>

          <Suspense fallback={<SectionSkeleton title="Comedy" />}>
            <GenreSection genreName="Comedy" />
          </Suspense>

          <Suspense fallback={<SectionSkeleton title="Drama" />}>
            <GenreSection genreName="Drama" />
          </Suspense>

          <Suspense fallback={<SectionSkeleton title="Romance" />}>
            <GenreSection genreName="Romance" />
          </Suspense>
        </>
      )}

      {/* Footer */}
      <footer className="py-12 px-4 sm:px-6 lg:px-8 max-w-[1800px] mx-auto">
        <div className="text-center text-gray-500 text-sm">
          <p className="font-[family-name:var(--font-poppins)] text-xl font-bold text-[#e50914] mb-2">
            WATCHFLIX
          </p>
          <p>&copy; {new Date().getFullYear()} WatchFlix. All rights reserved.</p>
        </div>
      </footer>
    </main>
  )
}

async function HeroSection() {
  const featuredMovie = await getFeaturedMovie()
  
  if (!featuredMovie) {
    return (
      <div className="h-[70vh] md:h-[85vh] bg-gradient-to-b from-[#141414] to-[#0b0b0b] flex items-center justify-center">
        <div className="text-center px-4">
          <h1 className="text-4xl md:text-6xl font-bold font-[family-name:var(--font-poppins)] text-white mb-4">
            Welcome to WatchFlix
          </h1>
          <p className="text-gray-400 text-lg max-w-xl mx-auto">
            Your premium destination for Rwandan and international movies. Add movies through the admin panel to get started.
          </p>
        </div>
      </div>
    )
  }
  
  return <HeroBanner movie={featuredMovie} />
}

async function FilterSection({ currentFilters }: { currentFilters: FilterState }) {
  const genres = await getGenres()
  return <FilterBar genres={genres} currentFilters={currentFilters} />
}

async function FilteredMoviesSection({ filters }: { filters: FilterState }) {
  const movies = await getMovies(filters)
  
  return (
    <MovieSection
      title={filters.search ? `Results for "${filters.search}"` : "Filtered Results"}
      movies={movies}
    />
  )
}

async function TrendingSection() {
  const movies = await getMovies()
  return <MovieSection title="Trending Now" movies={movies.slice(0, 10)} />
}

async function CategorySection({ 
  category, 
  title, 
  icon 
}: { 
  category: string
  title: string
  icon: string 
}) {
  const movies = await getMoviesByCategory(category)
  return <MovieSection title={title} icon={icon} movies={movies} />
}

async function GenreSection({ genreName }: { genreName: string }) {
  const genres = await getGenres()
  const genre = genres.find((g) => g.name === genreName)
  
  if (!genre) return null
  
  const movies = await getMoviesByGenre(genre.id)
  return <MovieSection title={genreName} movies={movies} />
}

function FilterBarSkeleton() {
  return (
    <div className="px-4 sm:px-6 lg:px-8 max-w-[1800px] mx-auto py-4">
      <div className="flex gap-4">
        {Array.from({ length: 4 }).map((_, i) => (
          <div key={i} className="h-10 w-40 skeleton rounded-xl" />
        ))}
      </div>
    </div>
  )
}

function SectionSkeleton({ title }: { title: string }) {
  return (
    <section className="py-6 md:py-8">
      <div className="px-4 sm:px-6 lg:px-8 max-w-[1800px] mx-auto">
        <h2 className="text-xl md:text-2xl font-bold font-[family-name:var(--font-poppins)] text-white mb-4">
          {title}
        </h2>
        <div className="flex gap-4 overflow-hidden">
          {Array.from({ length: 8 }).map((_, i) => (
            <div key={i} 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>
          ))}
        </div>
      </div>
    </section>
  )
}