'use client'
import { FC, useState, useCallback } from 'react'
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'
import { Slider } from '@/components/ui/slider'
import Input from '@/components/Input'
import { CategoryVariant } from '../types/Types'
import { NumberFormat } from '@/config/func'
import CategoryTree from '@/app/products/components/CategoryTree'

interface FilterState {
    categories: string[]
    priceRange: [number, number]
}

interface BrandFilterSectionProps {
    categories: CategoryVariant[]
    filterState: FilterState
    onCategoryChange: (categoryId: string) => void
    onPriceChange: (range: [number, number]) => void
    brandId: string
    priceMinMaxRange: { minPrice: number; maxPrice: number }
}

const BrandFilterSection: FC<BrandFilterSectionProps> = ({
    categories,
    filterState,
    onCategoryChange,
    onPriceChange,
    priceMinMaxRange,
}) => {
    const [priceInputs, setPriceInputs] = useState({
        min: filterState.priceRange?.[0] || priceMinMaxRange.minPrice,
        max: filterState.priceRange?.[1] || priceMinMaxRange.maxPrice,
    })

    const handlePriceInputChange = (field: 'min' | 'max', value: string) => {
        const numValue = parseInt(value.replace(/,/g, '')) || 0
        setPriceInputs(prev => ({ ...prev, [field]: numValue }))

        if (field === 'min') {
            onPriceChange([numValue, priceInputs.max])
        } else {
            onPriceChange([priceInputs.min, numValue])
        }
    }

    return (
        <div className='space-y-6'>
            {/* دسته‌بندی‌ها */}
            <Accordion type='single' collapsible className='w-full'>
                <AccordionItem value='categories'>
                    <AccordionTrigger className='text-sm font-medium'>
                        دسته‌بندی‌ها
                    </AccordionTrigger>
                    <AccordionContent>
                        <div className='mt-4'>
                            <CategoryTree
                                categories={categories}
                                selectedId={filterState.categories[0] || null}
                                onSelect={(id) => id && onCategoryChange(id)}
                            />
                        </div>
                    </AccordionContent>
                </AccordionItem>

                {/* محدوده قیمت */}
                <AccordionItem value='price'>
                    <AccordionTrigger className='text-sm font-medium'>
                        محدوده قیمت
                    </AccordionTrigger>
                    <AccordionContent>
                        <div className='mt-4 space-y-4'>
                            {/* ورودی‌های قیمت */}
                            <div className='grid grid-cols-2 gap-3'>
                                <div>
                                    <label className='block text-xs text-gray-600 mb-1'>از</label>
                                    <Input
                                        type='text'
                                        value={NumberFormat(priceInputs.min)}
                                        onChange={(e) => handlePriceInputChange('min', e.target.value)}
                                        className='text-sm'
                                        placeholder='0'
                                        seprator={true}
                                    />
                                </div>
                                <div>
                                    <label className='block text-xs text-gray-600 mb-1'>تا</label>
                                    <Input
                                        type='text'
                                        value={NumberFormat(priceInputs.max)}
                                        onChange={(e) => handlePriceInputChange('max', e.target.value)}
                                        className='text-sm'
                                        placeholder='8,000,000'
                                        seprator={true}
                                    />
                                </div>
                            </div>

                            {/* اسلایدر قیمت */}
                            <div className='px-2'>
                                <Slider
                                    value={[priceInputs.min, priceInputs.max]}
                                    onValueChange={(value) => {
                                        setPriceInputs({ min: value[0], max: value[1] })
                                        onPriceChange([value[0], value[1]])
                                    }}
                                    min={priceMinMaxRange.minPrice}
                                    max={priceMinMaxRange.maxPrice}
                                    step={100000}
                                    className='w-full'
                                />
                            </div>

                            {/* واحد قیمت */}
                            <div className='text-center'>
                                <span className='text-xs text-gray-500'>تومان</span>
                            </div>
                        </div>
                    </AccordionContent>
                </AccordionItem>
            </Accordion>
        </div>
    )
}


export default BrandFilterSection
