"use client";

import { useRouter, useSearchParams } from "next/navigation";

interface ShopFiltersProps {
  categories: string[];
  currentPet?: string;
  currentCategory?: string;
  currentSort?: string;
}

const petTypes = [
  { value: "all", label: "All Pets" },
  { value: "dog", label: "🐕 Dogs" },
  { value: "cat", label: "🐈 Cats" },
  { value: "bird", label: "🦜 Birds" },
  { value: "fish", label: "🐟 Fish" },
  { value: "small", label: "🐹 Small Pets" },
  { value: "reptile", label: "🦎 Reptiles" },
];

const sortOptions = [
  { value: "", label: "Newest" },
  { value: "popular", label: "Most Popular" },
  { value: "rating", label: "Top Rated" },
  { value: "price-asc", label: "Price: Low to High" },
  { value: "price-desc", label: "Price: High to Low" },
];

export default function ShopFilters({ categories, currentPet, currentCategory, currentSort }: ShopFiltersProps) {
  const router = useRouter();
  const searchParams = useSearchParams();

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

  return (
    <aside className="w-full lg:w-60 shrink-0">
      <div className="bg-white rounded-2xl p-6 shadow-sm sticky top-24 space-y-7">
        <div>
          <h3 className="font-bold text-gray-900 mb-3 text-sm uppercase tracking-wide">Pet Type</h3>
          <div className="space-y-1.5">
            {petTypes.map((pet) => (
              <button
                key={pet.value}
                onClick={() => updateFilter("pet", pet.value === "all" ? "" : pet.value)}
                className={`w-full text-left px-3 py-2 rounded-xl text-sm transition-colors ${
                  (currentPet === pet.value || (!currentPet && pet.value === "all"))
                    ? "bg-primary-500 text-white font-medium"
                    : "text-gray-600 hover:bg-gray-50"
                }`}
              >
                {pet.label}
              </button>
            ))}
          </div>
        </div>

        <div>
          <h3 className="font-bold text-gray-900 mb-3 text-sm uppercase tracking-wide">Category</h3>
          <div className="space-y-1.5">
            <button
              onClick={() => updateFilter("category", "")}
              className={`w-full text-left px-3 py-2 rounded-xl text-sm transition-colors ${
                !currentCategory ? "bg-primary-500 text-white font-medium" : "text-gray-600 hover:bg-gray-50"
              }`}
            >
              All Categories
            </button>
            {categories.map((cat) => (
              <button
                key={cat}
                onClick={() => updateFilter("category", cat)}
                className={`w-full text-left px-3 py-2 rounded-xl text-sm transition-colors ${
                  currentCategory === cat ? "bg-primary-500 text-white font-medium" : "text-gray-600 hover:bg-gray-50"
                }`}
              >
                {cat}
              </button>
            ))}
          </div>
        </div>

        <div>
          <h3 className="font-bold text-gray-900 mb-3 text-sm uppercase tracking-wide">Sort By</h3>
          <select
            value={currentSort || ""}
            onChange={(e) => updateFilter("sort", e.target.value)}
            className="input-field text-sm"
          >
            {sortOptions.map((o) => (
              <option key={o.value} value={o.value}>{o.label}</option>
            ))}
          </select>
        </div>
      </div>
    </aside>
  );
}