import { FC } from 'react'
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'
import { Category, Brand } from '@/types/products.types'
import CategoryTree from './CategoryTree'
import PriceFilter from './PriceFilter'
import StockFilter from './StockFilter'
import BrandFilter from './BrandFilter'
import WholesaleFilter from './WholesaleFilter'

interface FilterSectionProps {
    categories: Category[]
    brands: Brand[]
    filterState: {
        selectedCategories: string[]
        priceRange: [number, number]
        inStockOnly: boolean
        selectedBrand: string
        wholeSale: boolean
    }
    onCategoryChange: (categoryId: string | null) => void
    onPriceChange: (range: [number, number]) => void
    onStockChange: (inStock: boolean) => void
    onBrandChange: (brandId: string) => void
    onBrandClear: () => void
    onWholesaleChange: (wholesale: boolean) => void
    categoryUrl: string
    priceMinMaxRange: [number, number] // Original min/max from API
}

const FilterSection: FC<FilterSectionProps> = ({
    categories,
    brands,
    filterState,
    onCategoryChange,
    onPriceChange,
    onStockChange,
    onBrandChange,
    onBrandClear,
    onWholesaleChange,
    categoryUrl,
    priceMinMaxRange,
}) => {
    return (
        <div className='mt-3.5'>
            <Accordion type='multiple' className='w-full'>
                <AccordionItem value='category'>
                    <AccordionTrigger className='text-[#333333]'>دسته‌بندی ها</AccordionTrigger>
                    <AccordionContent>
                        <CategoryTree
                            categories={categories}
                            selectedId={filterState.selectedCategories[0] ?? null}
                            onSelect={onCategoryChange}
                            categoryUrl={categoryUrl}
                        />
                    </AccordionContent>
                </AccordionItem>

                <AccordionItem value='price'>
                    <AccordionTrigger className='text-[#333333]'>قیمت</AccordionTrigger>
                    <AccordionContent>
                        <PriceFilter
                            value={filterState.priceRange}
                            onChange={onPriceChange}
                            minMaxRange={priceMinMaxRange}
                        />
                    </AccordionContent>
                </AccordionItem>

                <AccordionItem value='status'>
                    <AccordionTrigger className='text-[#333333]'>وضعیت موجودی</AccordionTrigger>
                    <AccordionContent>
                        <StockFilter
                            checked={filterState.inStockOnly}
                            onChange={onStockChange}
                        />
                    </AccordionContent>
                </AccordionItem>

                <AccordionItem value='brand'>
                    <AccordionTrigger className='text-[#333333]'>برند</AccordionTrigger>
                    <AccordionContent>
                        <BrandFilter
                            brands={brands}
                            selectedBrand={filterState.selectedBrand}
                            onBrandChange={onBrandChange}
                            onBrandClear={onBrandClear}
                        />
                    </AccordionContent>
                </AccordionItem>

                <AccordionItem value='wholesale'>
                    <AccordionTrigger className='text-[#333333]'>عمده‌فروشی</AccordionTrigger>
                    <AccordionContent>
                        <WholesaleFilter
                            checked={filterState.wholeSale}
                            onChange={onWholesaleChange}
                        />
                    </AccordionContent>
                </AccordionItem>
            </Accordion>
        </div>
    )
}

export default FilterSection
