import { type FC, useState } from 'react'
import Button from '@/components/Button'
import Switch from '@/components/Switch'
import Input from '@/components/Input'
import { Checkbox } from '@/components/ui/checkbox'
import { TickCircle } from 'iconsax-react'

const CommentsDetails: FC = () => {
    const [isActive, setIsActive] = useState(true)
    const [foodSearch, setFoodSearch] = useState('')
    const [categorySearch, setCategorySearch] = useState('')
    const [selectedFoods, setSelectedFoods] = useState<string[]>([])
    const [selectedCategories, setSelectedCategories] = useState<string[]>([])

    const allFoods = ['پیتزا پپرونی', 'سالاد سزار', 'پاستا', 'همبرگر', 'سوشی']
    const allCategories = ['پیش غذا', 'غذای اصلی', 'دسر', 'نوشیدنی', 'سالاد']

    const foods = ['همه', ...allFoods]
    const categories = ['همه', ...allCategories]

    const filteredFoods = foods.filter(food => {
        if (food === 'همه') return true
        if (!foodSearch.trim()) return true
        return food.includes(foodSearch)
    })

    const filteredCategories = categories.filter(category => {
        if (category === 'همه') return true
        if (!categorySearch.trim()) return true
        return category.includes(categorySearch)
    })

    const handleFoodToggle = (food: string) => {
        if (food === 'همه') {
            setSelectedFoods(allFoods.length === selectedFoods.length ? [] : allFoods)
        } else {
            setSelectedFoods(prev =>
                prev.includes(food) ? prev.filter(f => f !== food) : [...prev, food]
            )
        }
    }

    const handleCategoryToggle = (category: string) => {
        if (category === 'همه') {
            setSelectedCategories(allCategories.length === selectedCategories.length ? [] : allCategories)
        } else {
            setSelectedCategories(prev =>
                prev.includes(category) ? prev.filter(c => c !== category) : [...prev, category]
            )
        }
    }

    const commentNumber = '۱۲۳۴۵'

    return (
        <div className='mt-5'>

            <div className='flex justify-between items-center mb-8'>
                <h1 className='text-lg font-light'>نظر {commentNumber}#</h1>
                <Button
                    className='w-fit px-5'
                    onClick={() => console.log('تایید نظر')}
                >
                    <div className='flex items-center gap-2'>
                        <TickCircle color='white' size={20} />
                        <span>تایید نظر</span>
                    </div>
                </Button>
            </div>
            <div className='flex gap-7'>
                {/* Main Content */}
                <div className='flex-1 bg-white rounded-4xl p-8'>


                    <div className='space-y-6'>
                        <div className='rowTwoInput'>
                            <Input
                                label='نام و نام خانوادگی'
                                value='حمید ضرغامی'
                                readOnly
                            />

                            <Input
                                label='ایمیل'
                                value='info@example.com'
                                readOnly
                            />
                        </div>

                        <Input
                            label='غذا ها'
                            value='پیتزا پپرونی ، سالاد سزار'
                            readOnly
                        />

                        <div className='flex gap-4'>
                            <button className='px-4 py-2 border border-red-500 text-red-500 rounded-xl text-sm bg-white whitespace-nowrap'>
                                تنوع کم و محدود
                            </button>
                            <button className='px-4 py-2 border border-green-500 text-green-500 rounded-xl text-sm bg-white whitespace-nowrap'>
                                کیفیت خوب منو
                            </button>
                        </div>

                        <p className='text-xs font-light leading-6'>
                            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می‌باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می‌طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه‌ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می‌توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد
                        </p>
                    </div>
                </div>

                {/* Sidebar */}
                <div className='w-[330px] h-fit bg-white rounded-4xl p-8 flex flex-col gap-6'>

                    <div className='flex items-center justify-between'>
                        <span className='text-sm'>فعال</span>
                        <Switch
                            active={isActive}
                            onChange={setIsActive}
                        />
                    </div>

                    <div>
                        <div className='text-sm mb-4'>وضعیت نمایش</div>

                        <div className='mb-6 border border-border rounded-xl p-4'>
                            <div className='text-xs mb-3'>نمایش در غذاهای</div>
                            <Input
                                // variant='search'
                                placeholder='جستجو'
                                value={foodSearch}
                                onChange={(e) => setFoodSearch(e.target.value)}
                                className='mb-3'
                            />
                            <div className='flex flex-col gap-3'>
                                {filteredFoods.map((food, index) => (
                                    <div key={index} className='flex items-center gap-2'>
                                        <Checkbox
                                            checked={food === 'همه' ? selectedFoods.length === allFoods.length : selectedFoods.includes(food)}
                                            onCheckedChange={() => handleFoodToggle(food)}
                                        />
                                        <label className='text-xs cursor-pointer'>{food}</label>
                                    </div>
                                ))}
                            </div>
                        </div>

                        <div className='border border-border rounded-xl p-4'>
                            <div className='text-xs mb-3'>نمایش در دسته بندی های</div>
                            <Input
                                // variant='search'
                                placeholder='جستجو'
                                value={categorySearch}
                                onChange={(e) => setCategorySearch(e.target.value)}
                                className='mb-3'
                            />
                            <div className='flex flex-col gap-3'>
                                {filteredCategories.map((category, index) => (
                                    <div key={index} className='flex items-center gap-2'>
                                        <Checkbox
                                            checked={category === 'همه' ? selectedCategories.length === allCategories.length : selectedCategories.includes(category)}
                                            onCheckedChange={() => handleCategoryToggle(category)}
                                        />
                                        <label className='text-xs cursor-pointer'>{category}</label>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default CommentsDetails