import { type FC } from 'react'
import { useGetProductVariants, useGetProductById } from './hooks/useProductData'
import { useParams } from 'react-router-dom'
import PageLoading from '@/components/PageLoading'
import type { ProductVariantDetailType } from './types/Types'
import Td from '@/components/Td'
import StatusWithText from '@/components/StatusWithText'
import CreateVariant from './components/CreateVariant'
import UpdateVariant from './components/UpdateVariant'

const ProductVariant: FC = () => {

    const { id } = useParams()
    const { data, isLoading, refetch } = useGetProductVariants(id!)
    const { data: productData } = useGetProductById(id!)

    const categoryTheme = productData?.results?.product?.category?.theme

    const getVariantColumnHeader = () => {
        switch (categoryTheme) {
            case 'Size': return 'سایز'
            case 'Color': return 'رنگ'
            case 'Meterage': return 'متریاژ'
            default: return 'تنوع'
        }
    }

    const getVariantValue = (variant: ProductVariantDetailType) => {
        switch (categoryTheme) {
            case 'Size': return variant.size?.value || '-'
            case 'Color': return 'رنگ' // TODO: باید نام رنگ را نمایش دهیم
            case 'Meterage': return '-' // TODO: باید فیلد meterage اضافه شود
            default: return '-'
        }
    }

    const getMarketStatusVariant = (status: string) => {
        switch (status) {
            case 'Marketable': return 'success';
            case 'out_of_stock': return 'error';
            case 'stopProduction': return 'warning';
            default: return 'warning';
        }
    };

    const getMarketStatusText = (status: string) => {
        switch (status) {
            case 'Marketable': return 'قابل فروش';
            case 'out_of_stock': return 'ناموجود';
            case 'stopProduction': return 'توقف تولید';
            default: return status;
        }
    };

    const renderVariantRow = (variant: ProductVariantDetailType) => (
        <tr key={variant._id} className='tr'>
            <Td text="">
                <div>
                    <div className="font-medium text-gray-900">
                        {variant.title_fa}
                    </div>
                    <div className="text-gray-500 text-xs">
                        {variant.title_en}
                    </div>
                </div>
            </Td>
            <Td text={variant.productCode} />
            <Td text="">
                <StatusWithText
                    variant={getMarketStatusVariant(variant.market_status)}
                    text={getMarketStatusText(variant.market_status)}
                />
            </Td>
            <Td text={variant.stock.toString()} />
            <Td text={`${variant.price.selling_price.toLocaleString('fa-IR')} تومان`} />
            <Td text={getVariantValue(variant)} />
            <Td text="">
                <span className={`inline-block px-2 py-1 text-xs rounded-full ${variant.is_variant_active ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
                    }`}>
                    {variant.is_variant_active ? 'فعال' : 'غیرفعال'}
                </span>
            </Td>
            <Td text="">
                <span className={`inline-block px-2 py-1 text-xs rounded-full ${variant.isFreeShip ? 'bg-blue-100 text-blue-800' : 'bg-gray-100 text-gray-800'
                    }`}>
                    {variant.isFreeShip ? 'بله' : 'خیر'}
                </span>
            </Td>
            <Td text="">
                <UpdateVariant variant={variant} onUpdate={refetch} />
            </Td>
        </tr>
    )

    return (
        <div>
            <CreateVariant />
            <div className='relative overflow-x-auto rounded-3xl mt-5 w-full'>
                <table className='w-full text-sm'>
                    <thead className='thead'>
                        <tr>
                            <Td text={'عنوان'} />
                            <Td text={'کد محصول'} />
                            <Td text={'وضعیت بازار'} />
                            <Td text={'موجودی'} />
                            <Td text={'قیمت فروش'} />
                            <Td text={getVariantColumnHeader()} />
                            <Td text={'وضعیت'} />
                            <Td text={'ارسال رایگان'} />
                            <Td text={'اکشن'} />
                        </tr>
                    </thead>
                    <tbody>
                        {isLoading ? (
                            <tr className='tr'>
                                <td colSpan={9} className="text-center py-8">
                                    <PageLoading />
                                </td>
                            </tr>
                        ) : data?.results?.productVariants && data.results.productVariants.length > 0 ? (
                            data.results.productVariants.map((variant) => renderVariantRow(variant))
                        ) : (
                            <tr className='tr'>
                                <td colSpan={9} className="text-center py-8 text-gray-500">
                                    هیچ variant ای یافت نشد
                                </td>
                            </tr>
                        )}
                    </tbody>
                </table>
            </div>
        </div>
    )
}

export default ProductVariant