import { type FC, useState } from 'react'
import Button from '../../../components/Button'
import DefaulModal from '../../../components/DefaulModal'
import Input from '../../../components/Input'
import Textarea from '../../../components/Textarea'
import RadioGroup from '../../../components/RadioGroup'
import Switch from '../../../components/Switch'
import { type CreateCategoryAttributeType } from '../types/Types'
import { Add, Trash } from 'iconsax-react'

interface AttributesModalProps {
    isOpen: boolean
    onClose: () => void
    newAttribute: CreateCategoryAttributeType
    onAttributeChange: (field: keyof CreateCategoryAttributeType, value: string | boolean | { text: string }[]) => void
    onAdd: () => void
    onAddValue: (text: string) => void
    onRemoveValue: (index: number) => void
    isLoading?: boolean
}

const AttributesModal: FC<AttributesModalProps> = ({
    isOpen,
    onClose,
    newAttribute,
    onAttributeChange,
    onAdd,
    onAddValue,
    onRemoveValue,
    isLoading = false
}) => {
    const [newValue, setNewValue] = useState('')

    const attributeTypes = [
        { value: 'text', label: 'متن' },
        { value: 'number', label: 'عدد' },
        { value: 'select', label: 'انتخابی' },
        { value: 'boolean', label: 'بله/خیر' }
    ]

    const handleAddValue = () => {
        if (newValue.trim()) {
            onAddValue(newValue.trim())
            setNewValue('')
        }
    }

    const isFormValid = () => {
        return !!newAttribute.title.trim() &&
            (newAttribute.type !== 'select' || newAttribute.values.length > 0)
    }

    return (
        <DefaulModal
            open={isOpen}
            close={onClose}
            isHeader={true}
            title_header="اضافه کردن ویژگی جدید"
            width={600}
        >
            <div className="space-y-6">
                <Input
                    label="عنوان ویژگی"
                    placeholder="مثال: وزن, رنگ, سایز"
                    value={newAttribute.title}
                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => onAttributeChange('title', e.target.value)}
                    required
                />

                <div className="space-y-2">
                    <label className="text-sm font-medium">نوع ویژگی</label>
                    <RadioGroup
                        items={attributeTypes}
                        selected={newAttribute.type}
                        onChange={(value) => onAttributeChange('type', value)}
                    />
                </div>

                <Textarea
                    label="راهنما (اختیاری)"
                    placeholder="توضیحات برای کاربر در مورد این ویژگی"
                    value={newAttribute.hint}
                    onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => onAttributeChange('hint', e.target.value)}
                    rows={3}
                />

                <div className="flex items-center justify-between">
                    <div className="space-y-1">
                        <label className="text-sm font-medium">اجباری</label>
                        <p className="text-xs text-gray-500">آیا این ویژگی اجباری است؟</p>
                    </div>
                    <Switch
                        active={newAttribute.required}
                        onChange={(checked) => onAttributeChange('required', checked)}
                    />
                </div>

                {newAttribute.type === 'select' && (
                    <div className="space-y-3">
                        <label className="text-sm font-medium">مقادیر قابل انتخاب</label>
                        <div className="flex gap-2 items-center">
                            <Input
                                placeholder="مقدار جدید اضافه کنید"
                                value={newValue}
                                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setNewValue(e.target.value)}
                                onKeyPress={(e) => e.key === 'Enter' && handleAddValue()}
                            />
                            <Button
                                onClick={handleAddValue}
                                variant="outline"
                                // size="sm"
                                disabled={!newValue.trim()}
                                className='w-fit mt-1'
                            >
                                <Add size={16} color='#000' />
                            </Button>
                        </div>
                        {newAttribute.values.length > 0 && (
                            <div className="space-y-2 flex gap-3 items-center flex-wrap max-h-32 overflow-y-auto">
                                {newAttribute.values.map((value, index) => (
                                    <div key={index} className="flex min-w-[30%] flex-1 items-center justify-between bg-gray-50 p-2 rounded">
                                        <div className="text-sm">{value.text}</div>
                                        <Button
                                            variant="ghost"
                                            size="sm"
                                            onClick={() => onRemoveValue(index)}
                                            className="text-red-500 w-fit hover:text-red-700"
                                        >
                                            <Trash color='red' size={20} />
                                        </Button>
                                    </div>
                                ))}
                                <div className='min-w-[30%] flex-1 px-2'></div>
                                <div className='min-w-[30%] flex-1 px-2'></div>
                            </div>
                        )}
                    </div>
                )}

                <div className="flex gap-3 pt-4 border-t border-border">
                    <Button
                        variant="outline"
                        className="flex-1"
                        onClick={onClose}
                    >
                        انصراف
                    </Button>
                    <Button
                        variant="primary"
                        className="flex-1"
                        onClick={onAdd}
                        disabled={!isFormValid() || isLoading}
                    >
                        {isLoading ? 'در حال اضافه کردن...' : 'اضافه کردن'}
                    </Button>
                </div>
            </div>
        </DefaulModal>
    )
}

export default AttributesModal
