import { type FC } from 'react'
import { useParams } from 'react-router-dom'
import TitleLine from '../../components/TitleLine'
import Button from '../../components/Button'
import { AttributesModal } from './components'
import { useAttributesLogic } from './hooks/useAttributesLogic'
import { useGetCategoryAttributes } from './hooks/useCategoryData'
import { type CategoryAttributeType } from './types/Types'
import { Add, Edit, Trash } from 'iconsax-react'

const Attributes: FC = () => {
    const { id } = useParams()
    const { data: attributesData, isLoading: attributesLoading } = useGetCategoryAttributes(id!)
    const {
        category,
        isLoading,
        isModalOpen,
        newAttribute,
        openModal,
        closeModal,
        setNewAttribute,
        addAttribute,
        addValueToAttribute,
        removeValueFromAttribute,
        isAddingLoading
    } = useAttributesLogic({ id })

    const attributes = attributesData?.results?.data?.category?.attributes || []

    if (isLoading) {
        return <div>در حال بارگذاری...</div>
    }

    if (!category) {
        return (
            <div className="min-h-screen bg-gray-50">
                <div className="max-w-6xl mx-auto p-6">
                    <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6">
                        <TitleLine title="مدیریت ویژگی‌های دسته‌بندی" />
                        <div className="mt-4 space-y-2">
                            <h1 className="text-2xl font-bold text-gray-900">
                                دسته‌بندی یافت نشد
                            </h1>
                        </div>
                    </div>
                </div>
            </div>
        )
    }

    if (!category.leaf) {
        return (
            <div className="min-h-screen bg-gray-50">
                <div className="max-w-6xl mx-auto p-6">
                    <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6">
                        <TitleLine title="مدیریت ویژگی‌های دسته‌بندی" />
                        <div className="mt-4 space-y-2">
                            <h1 className="text-2xl font-bold text-gray-900">
                                {category.title_fa}
                            </h1>
                            <p className="text-gray-600">
                                این دسته‌بندی امکان داشتن ویژگی ندارد
                            </p>
                        </div>
                    </div>

                    <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
                        <div className="flex flex-col items-center justify-center py-12 px-6 border-2 border-dashed border-gray-300 rounded-lg bg-gray-50">
                            <div className="text-center space-y-4">
                                <div className="w-16 h-16 mx-auto bg-gray-200 rounded-full flex items-center justify-center">
                                    <svg className="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.732-.833-2.5 0L4.268 16.5c-.77.833.192 2.5 1.732 2.5z" />
                                    </svg>
                                </div>
                                <div>
                                    <h3 className="text-lg font-medium text-gray-900 mb-1">امکان ساخت ویژگی وجود ندارد</h3>
                                    <p className="text-gray-500">ویژگی‌ها فقط برای دسته‌بندی‌های نهایی (leaf) قابل تعریف هستند</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }

    return (
        <div className="min-h-screen bg-gray-50">
            <div className="max-w-6xl mx-auto p-6">
                <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6">
                    <TitleLine title="مدیریت ویژگی‌های دسته‌بندی" />
                    <div className="mt-4 space-y-2">
                        <h1 className="text-2xl font-bold text-gray-900">
                            {category.title_fa}
                        </h1>
                        <p className="text-gray-600">
                            مدیریت ویژگی‌های دسته‌بندی
                        </p>
                    </div>
                </div>

                <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
                    <div className="flex items-center justify-between mb-6">
                        <h3 className="text-lg font-semibold text-gray-900">
                            ویژگی‌ها ({attributes.length})
                        </h3>
                        <Button
                            onClick={openModal}
                            className="flex w-fit items-center gap-2"
                        >
                            <Add color='#fff' size={16} />
                            اضافه کردن ویژگی
                        </Button>
                    </div>

                    {attributesLoading ? (
                        <div className="text-center py-12">
                            <div className="text-gray-500">در حال بارگذاری ویژگی‌ها...</div>
                        </div>
                    ) : attributes.length === 0 ? (
                        <div className="text-center py-12">
                            <div className="w-16 h-16 mx-auto bg-gray-200 rounded-full flex items-center justify-center mb-4">
                                <svg className="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                                </svg>
                            </div>
                            <h3 className="text-lg font-medium text-gray-900 mb-1">هنوز ویژگی‌ای اضافه نشده</h3>
                            <p className="text-gray-500 mb-4">ویژگی‌های دسته‌بندی به شما کمک می‌کنند محصولات را بهتر توصیف کنید</p>
                            <Button
                                onClick={openModal}
                                variant="outline"
                                className="flex items-center gap-2 mx-auto"
                            >
                                <Add size={16} />
                                اضافه کردن اولین ویژگی
                            </Button>
                        </div>
                    ) : (
                        <div className="space-y-4">
                            {attributes.map((attribute: CategoryAttributeType) => (
                                <div key={attribute._id} className="border border-gray-200 rounded-lg p-4">
                                    <div className="flex items-center justify-between mb-3">
                                        <div className="flex items-center gap-3">
                                            <h4 className="font-medium text-gray-900">{attribute.title}</h4>
                                            <span className={`px-2 py-1 text-xs rounded-full ${attribute.type === 'text' ? 'bg-blue-100 text-blue-800' :
                                                attribute.type === 'number' ? 'bg-green-100 text-green-800' :
                                                    attribute.type === 'select' ? 'bg-purple-100 text-purple-800' :
                                                        'bg-gray-100 text-gray-800'
                                                }`}>
                                                {attribute.type === 'text' ? 'متن' :
                                                    attribute.type === 'number' ? 'عدد' :
                                                        attribute.type === 'select' ? 'انتخابی' :
                                                            attribute.type === 'boolean' ? 'بله/خیر' : attribute.type}
                                            </span>
                                            {attribute.required && (
                                                <span className="px-2 py-1 text-xs bg-red-100 text-red-800 rounded-full">
                                                    اجباری
                                                </span>
                                            )}
                                        </div>
                                        <div className="flex items-center gap-2">
                                            <Button
                                                variant="ghost"
                                                size="sm"
                                                className="text-blue-500 hover:text-blue-700"
                                            >
                                                <Edit size={16} />
                                            </Button>
                                            <Button
                                                variant="ghost"
                                                size="sm"
                                                className="text-red-500 hover:text-red-700"
                                            >
                                                <Trash size={16} />
                                            </Button>
                                        </div>
                                    </div>
                                    {attribute.hint && (
                                        <p className="text-sm text-gray-600 mb-2">{attribute.hint}</p>
                                    )}
                                    {attribute.type === 'select' && attribute.values.length > 0 && (
                                        <div className="flex flex-wrap gap-1">
                                            {attribute.values.map((value, index) => (
                                                <span
                                                    key={index}
                                                    className="px-2 py-1 bg-gray-100 text-gray-700 text-xs rounded"
                                                >
                                                    {value.text}
                                                </span>
                                            ))}
                                        </div>
                                    )}
                                </div>
                            ))}
                        </div>
                    )}
                </div>
            </div>

            <AttributesModal
                isOpen={isModalOpen}
                onClose={closeModal}
                newAttribute={newAttribute}
                onAttributeChange={setNewAttribute}
                onAdd={addAttribute}
                onAddValue={addValueToAttribute}
                onRemoveValue={removeValueFromAttribute}
                isLoading={isAddingLoading}
            />
        </div>
    )
}

export default Attributes
