"use client";

import { BrandFacet } from "@/components/facets/brand-facet";
import { CategoryFacet } from "@/components/facets/category-facet";
import { ColorFacet } from "@/components/facets/color-facet";
import { ConditionFacet } from "@/components/facets/condition-facet";
import { PriceFacet } from "@/components/facets/price-facet";
import { SizeFacet } from "@/components/facets/size-facet";
import { StoreFacet } from "@/components/facets/store-facet";
import { Separator } from "@/components/ui/separator";
import type { ItemSearchParams } from "@/lib/item-search-params";
import type { FacetCount } from "@/components/facets/types";

interface FacetsData {
  category_path?: FacetCount[];
  brand?: FacetCount[];
  condition?: FacetCount[];
  size?: FacetCount[];
  colors?: FacetCount[];
  store_id?: FacetCount[];
  price?: { min: number; max: number };
}

interface CategoryNode {
  id: number;
  name: string;
  slug: string;
  children: CategoryNode[];
}

interface FilterSidebarProps {
  facets: FacetsData;
  categoryTree: CategoryNode[];
  params: ItemSearchParams;
  hideStoreFacet?: boolean;
}

export function FilterSidebar({ facets, categoryTree, params, hideStoreFacet = false }: FilterSidebarProps) {
  return (
    <aside className="w-64 shrink-0 space-y-6">
      <CategoryFacet facets={facets.category_path ?? []} tree={categoryTree} params={params} />
      <Separator />
      {facets.brand && facets.brand.length > 0 && (
        <>
          <BrandFacet facets={facets.brand} params={params} />
          <Separator />
        </>
      )}
      {facets.price && (
        <>
          <PriceFacet bounds={facets.price} params={params} />
          <Separator />
        </>
      )}
      {facets.condition && facets.condition.length > 0 && (
        <>
          <ConditionFacet facets={facets.condition} params={params} />
          <Separator />
        </>
      )}
      {facets.size && facets.size.length > 0 && (
        <>
          <SizeFacet facets={facets.size} params={params} />
          <Separator />
        </>
      )}
      {facets.colors && facets.colors.length > 0 && (
        <>
          <ColorFacet facets={facets.colors} params={params} />
          <Separator />
        </>
      )}
      {!hideStoreFacet && facets.store_id && facets.store_id.length > 0 && (
        <StoreFacet facets={facets.store_id} params={params} />
      )}
    </aside>
  );
}