'use client'
import { FC, useState } 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'

interface Props {
    categories: CategoryVariant[]
    priceRange: { minPrice: number; maxPrice: number }
    selectedCategories: string[]
    selectedPriceRange: [number, number]
    onCategoryChange: (categoryId: string) => void
    onPriceRangeChange: (range: [number, number]) => void
}

const ProductFilters: FC<Props> = ({
    categories,
    priceRange,
    selectedCategories,
    selectedPriceRange,
    onCategoryChange,
    onPriceRangeChange,
}) => {
    const [priceInputs, setPriceInputs] = useState({
        min: selectedPriceRange[0],
        max: selectedPriceRange[1],
    })

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

        if (field === 'min') {
            onPriceRangeChange([numValue, selectedPriceRange[1]])
        } else {
            onPriceRangeChange([selectedPriceRange[0], numValue])
        }
    }

    return (
        <div className='bg-white rounded-2xl p-6 shadow-sm sticky top-4'>
            <h3 className='text-lg font-bold text-gray-800 mb-6'>فیلترها</h3>

            {/* دسته‌بندی‌ها */}
            <Accordion type='single' collapsible className='w-full'>
                <AccordionItem value='categories'>
                    <AccordionTrigger className='text-sm font-medium'>
                        دسته‌بندی‌ها
                    </AccordionTrigger>
                    <AccordionContent>
                        <div className='space-y-3 mt-4'>
                            {categories.map((category) => (
                                <label
                                    key={category._id}
                                    className='flex items-center gap-3 cursor-pointer hover:bg-gray-50 p-2 rounded-lg transition-colors'
                                >
                                    <input
                                        type='checkbox'
                                        checked={selectedCategories.includes(category._id)}
                                        onChange={() => onCategoryChange(category._id)}
                                        className='w-4 h-4 text-primary border-gray-300 rounded focus:ring-primary'
                                    />
                                    <span className='text-sm text-gray-700 flex-1'>{category.title_fa}</span>
                                    <span className='text-xs text-gray-500'>({category.variants.length})</span>
                                </label>
                            ))}
                        </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'
                                    />
                                </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'
                                    />
                                </div>
                            </div>

                            {/* اسلایدر قیمت */}
                            <div className='px-2'>
                                <Slider
                                    value={selectedPriceRange}
                                    onValueChange={onPriceRangeChange}
                                    min={priceRange.minPrice}
                                    max={priceRange.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 ProductFilters
