'use client'

import { useRouter, useSearchParams } from 'next/navigation'
import { Filter, X } from 'lucide-react'
import { useState } from 'react'
import type { Genre, FilterState } from '@/lib/types'

interface FilterBarProps {
  genres: Genre[]
  currentFilters: FilterState
}

export function FilterBar({ genres, currentFilters }: FilterBarProps) {
  const router = useRouter()
  const searchParams = useSearchParams()
  const [isOpen, setIsOpen] = useState(false)

  const updateFilter = (key: keyof FilterState, value: string) => {
    const params = new URLSearchParams(searchParams.toString())
    if (value === 'all' || value === '') {
      params.delete(key)
    } else {
      params.set(key, value)
    }
    router.push(`/?${params.toString()}`)
  }

  const clearFilters = () => {
    router.push('/')
  }

  const hasActiveFilters =
    currentFilters.category !== 'all' ||
    currentFilters.genre !== '' ||
    currentFilters.language !== '' ||
    currentFilters.isPremium !== 'all'

  const categories = [
    { value: 'all', label: 'All Categories' },
    { value: 'nyarwanda', label: 'Nyarwanda' },
    { value: 'translated', label: 'Translated' },
    { value: 'international', label: 'International' },
  ]

  const premiumOptions = [
    { value: 'all', label: 'All Content' },
    { value: 'free', label: 'Free Only' },
    { value: 'premium', label: 'Premium Only' },
  ]

  const languages = [
    { value: '', label: 'All Languages' },
    { value: 'kinyarwanda', label: 'Kinyarwanda' },
    { value: 'english', label: 'English' },
    { value: 'french', label: 'French' },
    { value: 'swahili', label: 'Swahili' },
  ]

  return (
    <div className="px-4 sm:px-6 lg:px-8 max-w-[1800px] mx-auto py-4">
      {/* Mobile Toggle */}
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="md:hidden flex items-center gap-2 px-4 py-2 bg-[#141414] rounded-xl text-sm font-medium text-white mb-4"
      >
        <Filter className="w-4 h-4" />
        Filters
        {hasActiveFilters && (
          <span className="w-2 h-2 rounded-full bg-[#e50914]" />
        )}
      </button>

      {/* Filter Bar */}
      <div className={`${isOpen ? 'block' : 'hidden'} md:block`}>
        <div className="flex flex-col md:flex-row gap-4 items-start md:items-center">
          {/* Category Filter */}
          <select
            value={currentFilters.category}
            onChange={(e) => updateFilter('category', e.target.value)}
            className="w-full md:w-auto px-4 py-2.5 bg-[#141414] border border-white/10 rounded-xl text-sm text-white focus:outline-none focus:border-[#e50914] appearance-none cursor-pointer"
          >
            {categories.map((cat) => (
              <option key={cat.value} value={cat.value}>
                {cat.label}
              </option>
            ))}
          </select>

          {/* Genre Filter */}
          <select
            value={currentFilters.genre}
            onChange={(e) => updateFilter('genre', e.target.value)}
            className="w-full md:w-auto px-4 py-2.5 bg-[#141414] border border-white/10 rounded-xl text-sm text-white focus:outline-none focus:border-[#e50914] appearance-none cursor-pointer"
          >
            <option value="">All Genres</option>
            {genres.map((genre) => (
              <option key={genre.id} value={genre.id}>
                {genre.name}
              </option>
            ))}
          </select>

          {/* Language Filter */}
          <select
            value={currentFilters.language}
            onChange={(e) => updateFilter('language', e.target.value)}
            className="w-full md:w-auto px-4 py-2.5 bg-[#141414] border border-white/10 rounded-xl text-sm text-white focus:outline-none focus:border-[#e50914] appearance-none cursor-pointer"
          >
            {languages.map((lang) => (
              <option key={lang.value} value={lang.value}>
                {lang.label}
              </option>
            ))}
          </select>

          {/* Premium Filter */}
          <select
            value={currentFilters.isPremium}
            onChange={(e) => updateFilter('isPremium', e.target.value)}
            className="w-full md:w-auto px-4 py-2.5 bg-[#141414] border border-white/10 rounded-xl text-sm text-white focus:outline-none focus:border-[#e50914] appearance-none cursor-pointer"
          >
            {premiumOptions.map((opt) => (
              <option key={opt.value} value={opt.value}>
                {opt.label}
              </option>
            ))}
          </select>

          {/* Clear Filters */}
          {hasActiveFilters && (
            <button
              onClick={clearFilters}
              className="flex items-center gap-2 px-4 py-2.5 bg-[#e50914]/20 text-[#e50914] rounded-xl text-sm font-medium hover:bg-[#e50914]/30 transition-colors"
            >
              <X className="w-4 h-4" />
              Clear Filters
            </button>
          )}
        </div>
      </div>
    </div>
  )
}