'use client'

import { useSearchParams, useRouter, usePathname } from 'next/navigation'
import { categoryLabels, categoryDescriptions, type ProductCategory, type Product } from '@/lib/products'
import ProductCard from '@/components/ProductCard'

interface Props {
  categories: ProductCategory[]
  products: Product[]
}

export default function ProductsClientFilter({ categories, products }: Props) {
  const searchParams = useSearchParams()
  const router = useRouter()
  const pathname = usePathname()
  const activeCategory = (searchParams.get('kategoria') as ProductCategory | null)

  const filtered = activeCategory ? products.filter((p) => p.category === activeCategory) : products

  function setCategory(cat: ProductCategory | null) {
    const params = new URLSearchParams(searchParams.toString())
    if (cat) params.set('kategoria', cat)
    else params.delete('kategoria')
    router.push(`${pathname}?${params.toString()}`, { scroll: false })
  }

  return (
    <>
      {/* Filtry */}
      <div className="flex flex-wrap gap-2 mb-8">
        <button
          onClick={() => setCategory(null)}
          className={`px-4 py-2 rounded-full text-sm font-medium transition-colors ${
            !activeCategory
              ? 'bg-brand-600 text-white shadow-sm'
              : 'bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 text-gray-600 dark:text-gray-300 hover:border-brand-300 hover:text-brand-600 dark:hover:text-brand-400'
          }`}
        >
          Wszystkie ({products.length})
        </button>
        {categories.map((cat) => {
          const count = products.filter((p) => p.category === cat).length
          return (
            <button
              key={cat}
              onClick={() => setCategory(cat)}
              className={`px-4 py-2 rounded-full text-sm font-medium transition-colors ${
                activeCategory === cat
                  ? 'bg-brand-600 text-white shadow-sm'
                  : 'bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 text-gray-600 dark:text-gray-300 hover:border-brand-300 hover:text-brand-600 dark:hover:text-brand-400'
              }`}
            >
              {categoryLabels[cat]} ({count})
            </button>
          )
        })}
      </div>

      {/* Opis kategorii */}
      {activeCategory && (
        <div className="mb-6 p-4 bg-brand-50 dark:bg-brand-950/30 border border-brand-100 dark:border-brand-900 rounded-xl">
          <h2 className="font-semibold text-brand-800 dark:text-brand-300 mb-1">{categoryLabels[activeCategory]}</h2>
          <p className="text-sm text-brand-700 dark:text-brand-400">{categoryDescriptions[activeCategory]}</p>
        </div>
      )}

      {/* Siatka produktów */}
      <div className="grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
        {filtered.map((p) => <ProductCard key={p.slug} product={p} />)}
      </div>

      {filtered.length === 0 && (
        <div className="text-center py-16 text-gray-500 dark:text-gray-400">
          Brak produktów w tej kategorii.
        </div>
      )}
    </>
  )
}