'use client'
import FormFilterSection from '@/components/pages/add-product/FormFilterSection'
import RegisterFormSection from '@/components/pages/add-product/RegisterFormSection'
import Alert from '@/components/ui/alert'
import Breadcrumb from '@/components/ui/breadcrumb'
import Button from '@/components/ui/button'
import Container from '@/components/ui/container'
import { FormGroup, FormSelect, FormText } from '@/components/ui/form'
import FormPhotoUpload from '@/components/ui/form/FormPhotoUpload'
import { useContextGlobal } from '@/context/GlobalContext'
import { useFetchCategoryLimit, useFetchCategoryRole, useFetchSearchFilters } from '@/hooks/useFetchReferances'
import { useForm } from '@/hooks/useForm'
import { useRouter } from '@/i18n/routing'
import { authService } from '@/services/authService'
import { commonService } from '@/services/commonService'
import { productService } from '@/services/productService'
import { searchService } from '@/services/searchService'
import { createProductFilterFormElements, getAuth, getNonEmptyProperties, redirectUrl } from '@/utils/helpersUtils'
import { translate } from '@/utils/i18nUtils'
import { notificationSuccess } from '@/utils/notificationUtils'
import { replaceAll } from '@/utils/stringUtils'
import ProductFormValidation from '@/validations/productFormValidation'
import { Checkbox } from 'antd'
import React, { useEffect, useMemo, useState } from 'react'
import { isMobile } from 'react-device-detect'
import { FiInfo } from 'react-icons/fi'

// Product Name Preview Component
const ProductNamePreview = ({ searchFilters, values, templates }) => {
    const generateProductName = useMemo(() => {
        const nameParts = [];

        // Create a helper function to get options for a filter
        const getFilterOptions = (filterCode) => {
            // First try to get from the original filters
            const originalFilter = searchFilters?.filters?.find(f => f.code === filterCode);
            if (originalFilter?.content) {
                return originalFilter.content;
            }

            // If not found or empty, try to get from templates (for dependent filters)
            const templateFilter = templates?.find(t => t.code === filterCode);
            if (templateFilter?.options) {
                return templateFilter.options;
            }

            return null;
        };

        // Process filters that have in_name = 1
        if (searchFilters?.filters && values.filters) {
            searchFilters.filters.forEach(filter => {
                if (filter.in_name === 1 && values.filters[filter.code]) {
                    const selectedValue = values.filters[filter.code];

                    if (filter.type === 1) {
                        // Select type - find the selected option name
                        const options = getFilterOptions(filter.code);
                        if (options) {
                            const selectedOption = options.find(option => option.id == selectedValue);
                            if (selectedOption) {
                                let namePart = selectedOption.name;
                                if (filter.in_name_text) {
                                    namePart += filter.in_name_text;
                                }
                                nameParts.push(namePart);
                            }
                        }
                    } else if (filter.type === 2) {
                        // Number/text type - use the value directly
                        let namePart = selectedValue.toString();
                        if (filter.in_name_text) {
                            namePart += filter.in_name_text;
                        }
                        nameParts.push(namePart);
                    }
                }
            });
        }

        return nameParts.length > 0 ? nameParts.join(' ').replace(/,\s*$/, '') : '';
    }, [searchFilters, values, templates]);

    if (!generateProductName) {
        return null;
    }

    return (
        <div className="mt-[10px] p-[10px] bg-gray-50 rounded-[4px] border-l-4 border-primary">
            <div className="text-[12px] text-gray-600 mb-[5px]">
                {translate('pages.productAdd.form.namePreview')}:
            </div>
            <div className="text-[14px] font-medium italic text-gray-800">
                {generateProductName}
            </div>
        </div>
    );
};

const ActionAddPage = ({ searchParams }) => {

    const productId = searchParams?.id || false;
    const { filters } = useContextGlobal();
    const translateKey = 'pages.productAdd'
    const router = useRouter()
    const { systemTranslate, locale } = useContextGlobal();
    const user = getAuth()
    const [prefix, setPrefix] = useState({})
    const [address, setAddress] = useState(false)
    const [order, setOrder] = useState(false)
    const [prefixItems, setPrefixItems] = useState([]);
    const [loadDom, setLoadDom] = useState(true)
    const [errorFields, setErrorFields] = useState([])
    const { values, setField, setValues, handleSubmit, handleBlur, loading, setFieldError, setFieldTouched, errors } = useForm({
        initialValues: {
            category: 98,
            subcategory: 98,
            folder: Math.floor(100000000 + Math.random() * 900000000),
            filters: {
                e_f_1: ''
            },
            fullname: '',
            email: '',
            phone: '',
            whatsapp: '',
            password: '',
            passwordag: '',
            photos: [],
            terms: ''
        },
        validationSchema: ProductFormValidation(errorFields, productId),
        onSubmit: async (values) => {
            let userId = user.UserID;

            if (!userId) {
                const registerForm = {
                    fullname: values.fullname,
                    email: values.email,
                    phone: values.phone ? prefix.phone + ' ' + values.phone : '',
                    whatsapp_pre: prefix.whatsapp || '',
                    whatsapp: values.whatsapp || '',
                    password: values.password,
                    passwordag: values.passwordag,
                    agreeToPolicy: true,
                    type: 2,
                }
                const res = await authService.register(registerForm);

                if (res.responseStatus.messageId === 1000 && res?.user_details?.UserID) {
                    userId = res?.user_details?.UserID
                }
            }

            const files = values.photos.map(i => i.file)
            delete values.fullname
            delete values.email
            delete values.phone
            delete values.whatsapp
            delete values.password
            delete values.passwordag
            delete values.terms
            delete values.photos

            const productForm = {
                data: {
                    ...values,
                    filters: Object.keys(values.filters).reduce((acc, key) => {
                        acc.push({
                            key,
                            values: values.filters[key]
                        })
                        return acc
                    }, []),
                    user_id: userId,
                    type: 2
                },
                __files: files
            }

            let res = '';

            if (values.product) {
                res = await productService.editAction(productForm)
            }
            else {
                res = await productService.addAction(productForm)
            }

            if (res.responseStatus.messageId === 1000) {

                if (res?.LimitStatus?.link) {
                    setOrder(res?.LimitStatus)
                    window.scrollTo({
                        top: 0,
                        behavior: 'smooth'
                    });
                }
                else if (res.uniqueCode) {
                    router.push(`/product/temp?uuid=${res.uniqueCode}`)
                }

                notificationSuccess()

            }
        }
    })
    const [searchFilters, fetchSearchFilters] = useFetchSearchFilters()
    const [photos, setPhotos] = useState([])
    const [state, setState] = useState({
        categories: [],
        subCategories: [],
        filters: [],
        templates: []
    })

    const handleState = (name, value) => {
        setState({
            ...state,
            [name]: value
        })
    }

    const breadcrumbItems = [
        { label: productId ? translate('components.breadcrumb.actionEdit') : translate('components.breadcrumb.actionAdd') }
    ]

    const [categoryRole, fetchCategoryRole] = useFetchCategoryRole()
    const [categoryLimit, fetchCategoryLimit] = useFetchCategoryLimit()

    const fetchPrefix = async () => {
        const res = await commonService.fetchMobilePrefix();
        if (res?.PrefixFilter) {
            setPrefixItems(res.PrefixFilter.content)

            setPrefix({
                phone: res.PrefixFilter.content[0].id,
                whatsapp: res.PrefixFilter.content[0].id
            })
        }
    }

    const templates = useMemo(() => {
        const filters = searchFilters?.filters?.filter(i => i.code !== 'e_f_1')
        if (filters?.length > 0) {
            return createProductFilterFormElements(filters, {
                onRequire: filter => setErrorFields(prev => [...prev, filter.code])
            })
        }
        return []
    }, [searchFilters])

    const findLocation = async (location) => {
        const res = await commonService.fetchGoogleMapByLocation(location)
        if (res) {
            setAddress({
                lat: res.lat,
                lng: res.lng
            })

            if (res?.lat && res?.lng) {
                setValues(d => {
                    return {
                        ...d,
                        filters: {
                            ...d.filters,
                            'gmaplat': res?.lat,
                            'gmaplng': res?.lng
                        }
                    }
                })
            }
        }
        else {
            setAddress(false)
        }
    }

    const handleChangeCity = async (val) => {

        const city = filters?.cities?.find(i => i.id === val)

        setField('filters', { e_f_1: val })
        const res = await searchService.fetchSearchContentByFilter({
            filter_id: 2,
            main_filter_value: val
        })

        if (city) {

            if (res.responseStatus.messageId === 1000) {
                const findIndex = templates.findIndex(i => parseInt(i.f_main_id) === 2);

                if (findIndex > -1) {
                    templates[findIndex].options = res.content
                }
            }

            findLocation(city?.name)

            handleState('templates', templates)
        }


    }

    const fetchData = async () => {
        const res = await productService.fetchProductById(productId);
        if (res?.responseStatus?.messageId === 1000 && res?.AuthorDetails?.id === user?.UserID) {
            const product = res.ProductDetails;
            
            const filters = product.filter_data.map(i => {
                let value = i.value;
                if (!isNaN(Number(value))) {
                    value = Number(value)
                }
                return {
                    key: i.code,
                    value
                }
            })
            let filtersObject = {
                ...values.filters,
            }
            filters.forEach((filter) => {
                filtersObject = { ...filtersObject, [filter.key]: filter.value };
            })
            
            // Added dates of the event in filtersObject
            if (product.auction_start_date) {
                filtersObject['e_auc_date'] = product.auction_start_date;
            }
            if (product.auction_end_date) {
                filtersObject['e_auc_end_date'] = product.auction_end_date;
            }
            
            setField('product', product?.id)
            setField('filters', filtersObject)
            setPhotos(product?.images_small.map(i => ({ path: i })))
        }
    }

    useEffect(() => {
        if (productId) {
            fetchData();
        }
    }, [productId]);

    useEffect(() => {
        fetchPrefix()
        fetchCategoryRole(1)
        fetchCategoryLimit({ category_id: 98 })
        fetchSearchFilters(getNonEmptyProperties({
            category: 98,
            subcategory: 98,
            type: 5
        }))
    }, [])

    useEffect(() => {
        setLoadDom(false)
    }, [user])

    if (loadDom) return null;


    return (
        <>
            <Breadcrumb
                items={breadcrumbItems}
            />

            <Container>
                <div className="grid grid-cols-1 lg:grid-cols-[1fr_300px] lg:gap-[48px] gap-[20px] py-[40px]">

                    {(order) && (
                        <div>
                            <Alert type="warning">
                                <div className="text-xl text-center p-[20px] lg:p-[60px]">
                                    <div>
                                        {categoryLimit?.message || translate(translateKey + '.amountAlert', { ':amount': '' })}
                                    </div>
                                    <div className="mt-[24px]">
                                        <Button onClick={() => redirectUrl(order.link)}>
                                            {translate('button.pay')}
                                        </Button>
                                    </div>
                                </div>
                            </Alert>
                        </div>
                    )}

                    {!order && (
                        <form onSubmit={handleSubmit}>
                            <div>

                                <div className="relative lg:p-[68px] p-[10px] lg:border border-color lg:mt-[14px] rounded-[8px]">
                                    <h4 className="lg:absolute h-[35px] flex justify-center mb-[30px] lg:mb-0 items-center text-[24px] font-semibold text-center lg:text-left px-[28px] bg-white text-primary -top-[20px] left-[30px]">{productId ? translate(`${translateKey}.editAction`) : translate(`${translateKey}.newAction`)}</h4>

                                    <div className="space-y-[20px]">
                                        {!productId && categoryLimit?.message && (
                                            <Alert type="warning">
                                                <div className="text-xl text-center">
                                                    {categoryLimit.message}
                                                </div>
                                            </Alert>
                                        )}

                                        <div>
                                            <FormGroup
                                                vertical={!isMobile}
                                                label={translate(`${translateKey}.form.city`)}
                                                error={errors => errors.filters?.e_f_1}
                                                required={true}
                                                size='lg'
                                            >
                                                <FormSelect
                                                    name="e_f_1"
                                                    showSearch={true}
                                                    value={values.filters?.e_f_1}
                                                    onChange={val => handleChangeCity(val)}
                                                    onBlur={handleBlur}
                                                    options={filters?.cities || []}
                                                    placeholder={translate('filter.selectList')}
                                                />
                                            </FormGroup>
                                        </div>

                                        <FormFilterSection
                                            templates={templates}
                                            values={values}
                                            setField={setField}
                                            handleState={handleState}
                                            address={address}
                                            handleBlur={handleBlur}
                                            findLocation={findLocation}
                                        />

                                        <div>
                                            <FormGroup
                                                vertical={!isMobile}
                                                label={translate(`${translateKey}.form.photo`)}
                                                noBorder={true}
                                                elementClass="!h-auto"
                                                error={errors => errors.photos}
                                                required={true}
                                                size='lg'
                                            >
                                                <FormPhotoUpload
                                                    items={photos}
                                                    onChange={val => {
                                                        setField('photos', val)
                                                        if (val.length) {
                                                            setFieldTouched('photos', false)
                                                            setFieldError('photos', '')
                                                        }
                                                    }}
                                                    translateKey={translateKey}
                                                />
                                                <div className="flex items-center text-mute gap-x-[5px] mt-[5px] text-[10px]">
                                                    <span>
                                                        <FiInfo />
                                                    </span>
                                                    <span>{translate(`${translateKey}.form.photoInfo`)}</span>
                                                </div>

                                                {/* Product Name Preview */}
                                                <ProductNamePreview
                                                    searchFilters={searchFilters}
                                                    values={values}
                                                    templates={templates}
                                                />
                                            </FormGroup>
                                        </div>

                                        {user?.UserID && (

                                            <>
                                                {!productId && (
                                                    <div>
                                                        <FormGroup
                                                            label={'&nbsp;'}
                                                            vertical={!isMobile}
                                                            noBorder={true}
                                                            elementClass="!rounded-none !overflow-visible"
                                                            error={'terms'}
                                                            size='lg'
                                                        >
                                                            <Checkbox onBlur={handleBlur} name="terms" checked={values.terms} onChange={e => setField('terms', e.target.checked || '')}
                                                                prefixCls="self-start">
                                                                <div className="text-[13px] relative -top-1.5" dangerouslySetInnerHTML={{
                                                                    __html: replaceAll(systemTranslate('AUCTIONS_RULES'), {
                                                                        '{%SITE_UPPER%}': '<b>MOJO.AZ</b>',
                                                                        '{%SITE_LANG%}': locale
                                                                    })
                                                                }} />
                                                            </Checkbox>
                                                        </FormGroup>
                                                    </div>
                                                )}
                                                <div>
                                                    <FormGroup vertical label="&nbsp;" noBorder={true} elementClass="!rounded-none !overflow-visible">
                                                        <Button block type="submit" loading={loading}>
                                                            {translate('button.send')}
                                                        </Button>
                                                    </FormGroup>
                                                </div>
                                            </>

                                        )}

                                    </div>

                                </div>

                                <div>
                                    {!user?.UserID && (
                                        <div className="lg:mt-[60px] mt-[20px]">
                                            <RegisterFormSection
                                                isAction={true}
                                                translateKey={translateKey}
                                                filters={filters}
                                                values={values}
                                                setField={setField}
                                                handleBlur={handleBlur}
                                                prefix={prefix}
                                                setPrefix={setPrefix}
                                                prefixItems={prefixItems}
                                                loading={loading}
                                            />
                                        </div>
                                    )}
                                </div>
                            </div>
                        </form>
                    )}

                    <div className="px-[20px] lg:px-0">
                        <h3 className="text-[20px] font-bold">{categoryRole?.rule?.title}</h3>
                        <div className="prose text-[13px]" dangerouslySetInnerHTML={{ __html: categoryRole?.rule?.text }} />
                    </div>
                </div>
            </Container>
        </>
    )
}

export default ActionAddPage