'use client';

import { SortDropdown } from "@/components/products/client/SortDropdown";
import { FilterSidebar } from "@/components/products/FilterSidebar";
import { useProductFilters } from "@/components/products/hooks/useProductFilters";
import { FilterButton } from "@/components/products/ProductComponents/FilterButton";
import { useTranslation } from "@/lib/hooks/useTranslation";
import { Product } from "lib/shopify/types";
import { useState } from "react";
import { ProductGrid } from "../../products/ProductGrid";
import { BuildBoxLayout } from "./BuildBoxLayout";

interface BuildBoxPageContentProps {
  products: Product[];
}

export function BuildBoxPageContent({ products }: BuildBoxPageContentProps) {
  const { t } = useTranslation();
  const [isSidebarOpen, setSidebarOpen] = useState(false);
  const { 
    activeFilters, 
    sortOption, 
    sortedProducts, 
    handleApplyFilters, 
    handleSortChange, 
    removeFilter, 
    clearAllFilters, 
    formatFilterTag 
  } = useProductFilters(products);

  // If no products, display a message
  if (!products || products.length === 0) {
    return (
      <BuildBoxLayout title={t('buildBox.title')} step={1}>
        <div className="text-center py-8">
          <p>{t('buildBox.emptyMessage')}</p>
        </div>
      </BuildBoxLayout>
    );
  }

  return (
    <BuildBoxLayout title={t('buildBox.title')} step={1}>
      <div className="mb-8">
        {/* Filter and Sort Controls */}
        <div className="flex justify-between items-center mb-4">
          <FilterButton onClick={() => setSidebarOpen(true)} />
          <SortDropdown 
            value={sortOption} 
            onChange={handleSortChange}
            label={t('products.sort.title')}
          />
        </div>
      </div>
      
      <ProductGrid 
        products={sortedProducts} 
        title="" 
        showControls={false}
      />
      
      {/* Filter Sidebar */}
      <FilterSidebar
        isOpen={isSidebarOpen}
        onClose={() => setSidebarOpen(false)}
        onApplyFilters={handleApplyFilters}
        activeFilters={activeFilters}
      />
    </BuildBoxLayout>
  );
}