"use client";

import { useRouter, useSearchParams } from "next/navigation";
import { Button } from "@/components/ui/button";
import { ScrollArea } from "@/components/ui/scroll-area";
import FilterContent, { type FilterOption } from "./FilterContent";

export default function FilterSidebar({
  categories,
  brands,
  parentCategories,
  priceMax = 5000,
  currencySymbol = "৳",
}: {
  categories: FilterOption[];
  brands: FilterOption[];
  parentCategories: { slug: string; label: string; hasChildren: boolean }[];
  priceMax?: number;
  currencySymbol?: string;
}) {
  const router = useRouter();
  const searchParams = useSearchParams();

  function applyFilters() {
    // Keep the current params but force a re-render upstream by ensuring
    // the (already applied) params are set; the real filtering happens as
    // FilterContent toggles individual params.
    const params = new URLSearchParams(searchParams.toString());
    router.push(`?${params.toString()}`, { scroll: false });
  }

  function resetFilters() {
    router.push("/products", { scroll: false });
  }

  return (
    <aside className="sticky top-10 hidden h-[calc(100vh-120px)] w-[320px] flex-col border-r bg-background md:flex">
      <div className="border-b p-4">
        <h2 className="text-xl font-bold">Product Filters</h2>
        <p className="font-body-md text-xs text-on-surface-variant">
          Use filters to quickly find the products that match your needs.
        </p>
      </div>

      <ScrollArea className="min-h-0 flex-1">
        <div className="space-y-4 p-4">
          <FilterContent
            categories={categories}
            brandOptions={brands}
            parentCategories={parentCategories}
            priceMax={priceMax}
            currencySymbol={currencySymbol}
          />
        </div>
      </ScrollArea>

      <div className="shrink-0 border-t bg-background p-4">
        <Button className="w-full" onClick={applyFilters}>
          Apply Filters
        </Button>
        <Button
          variant="outline"
          className="mt-2 w-full"
          onClick={resetFilters}
        >
          Reset Filters
        </Button>
      </div>
    </aside>
  );
}