import { type FC } from 'react'
import { useParams } from 'react-router-dom'
import { CategoryThemeEnum } from './enum/Enum'
import TitleLine from '../../components/TitleLine'
import { VariantSizesList, VariantColorsList, VariantMeteragesList, VariantModal } from './components'
import { useVariantLogic } from './hooks/useVariantLogic'

const Variant: FC = () => {
    const { id } = useParams()
    const {
        category,
        theme,
        categoryVariants,
        isLoading,
        isModalOpen,
        newVariant,
        openModal,
        closeModal,
        setNewVariant,
        addVariant,
        deleteVariant,
        isAddingLoading,
        isUpdatingLoading
    } = useVariantLogic({ id })

    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="مدیریت Variant دسته‌بندی" />
                        <div className="mt-4 space-y-2">
                            <h1 className="text-2xl font-bold text-gray-900">
                                دسته‌بندی یافت نشد
                            </h1>
                        </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 hover:bg-gray-100 transition-colors">
                            <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 mb-4">امکان ساخت variant جدید وجود ندارد</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }

    const renderVariants = () => {
        switch (theme) {
            case CategoryThemeEnum.Sized:
                return (
                    <VariantSizesList
                        sizes={categoryVariants.sizes || []}
                        onAddClick={openModal}
                        onDelete={(index) => deleteVariant('sizes', index)}
                        isLoading={isUpdatingLoading}
                    />
                )

            case CategoryThemeEnum.Colored:
                return (
                    <VariantColorsList
                        colors={categoryVariants.colors || []}
                        onAddClick={openModal}
                        onDelete={(index) => deleteVariant('colors', index)}
                        isLoading={isUpdatingLoading}
                    />
                )

            case CategoryThemeEnum.Meterage:
                return (
                    <VariantMeteragesList
                        meterages={categoryVariants.meterages || []}
                        onAddClick={openModal}
                        onDelete={(index) => deleteVariant('meterages', index)}
                        isLoading={isUpdatingLoading}
                    />
                )

            case CategoryThemeEnum.No_color_No_sized:
                return (
                    <div className="p-4 border border-gray-200 rounded-lg bg-gray-50 text-center">
                        <span className="text-gray-600">این دسته‌بندی variant ندارد</span>
                    </div>
                )

            default:
                return (
                    <div className="p-4 border border-yellow-200 rounded-lg bg-yellow-50 text-center">
                        <span className="text-yellow-800">تم ناشناخته: {theme}</span>
                    </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="مدیریت Variant دسته‌بندی" />
                    <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">
                            تم: <span className="font-medium">{category.theme}</span>
                        </p>
                    </div>
                </div>

                <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
                    {renderVariants()}
                </div>
            </div>

            {theme && (
                <VariantModal
                    isOpen={isModalOpen}
                    onClose={closeModal}
                    theme={theme}
                    newVariant={newVariant}
                    onVariantChange={setNewVariant}
                    onAdd={addVariant}
                    isLoading={isAddingLoading || isUpdatingLoading}
                />
            )}
        </div>
    )
}

export default Variant