'use client'

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, FormPassword, FormPhone, FormSelect, FormText } from '@/components/ui/form'
import FormPhotoUpload from '@/components/ui/form/FormPhotoUpload'
import { useContextGlobal } from '@/context/GlobalContext'
import { useFetchCompanyPackages } from '@/hooks/useFetchReferances'
import { useForm } from '@/hooks/useForm'
import { Link, useRouter } from '@/i18n/routing'
import { commonService } from '@/services/commonService'
import { companyService } from '@/services/companyService'
import { translate } from '@/utils/i18nUtils'
import { replaceAll } from '@/utils/stringUtils'
import StoreCreateValidation from '@/validations/storeCreateValidation'
import { Checkbox, Radio } from 'antd'
import classNames from 'classnames'
import React, { useEffect, useMemo, useState } from 'react'
import { isMobile } from 'react-device-detect'
import { FiInfo, FiLock, FiMail, FiPhone, FiUser } from 'react-icons/fi'

const StoreCreatePage = ({ searchParams }) => {

    const { packageId } = searchParams;
    const { filters: { cities, categories }, systemTranslate, locale } = useContextGlobal()
    const [companyPackages, fetchCompanyPackages] = useFetchCompanyPackages()
    const router = useRouter()
    const selectedPackage = useMemo(() => {
        return companyPackages.find(item => parseInt(item.ID) === parseInt(packageId))
    }, [companyPackages, packageId])

    const [prefixItems, setPrefixItems] = useState([]);
    const [prefix, setPrefix] = useState({})
    const [order, setOrder] = useState(false)

    const translateKey = 'pages.stores.create'

    const { values, setField, handleSubmit, errors, handleBlur, setFieldTouched, setFieldError, loading } = useForm({
        initialValues: {
            city: '',
            contact_person: '',
            email: '',
            fullname: '',
            law_name: '',
            law_type: 1,
            password: '',
            passwordag: '',
            phone: '',
            voen: '',
            terms: '',
            myfiles: []
        },
        validationSchema: StoreCreateValidation,
        onSubmit: async values => {

            const photos = values.myfiles.map(item => item.file)
            const folder = Math.floor(100000000 + Math.random() * 900000000)

            const fileFolder = await companyService.uploadCompany({
                myfiles: photos,
                data: {
                    folder
                }
            })

            delete values.myfiles
            delete values.terms

            if (fileFolder?.responseStatus?.messageId === 1000) {

                const storeForm = {
                    ...values,
                    phone: values.phone ? prefix.phone + values.phone : '',
                    rules: 1,
                    shop_package: selectedPackage.ID,
                    folder,
                }

                const res = await companyService.addCompany(storeForm);

                if (res?.responseStatus?.messageId === 1000) {
                    setOrder(res.order)
                }
            }


        }
    })

    const handleSelectPackage = id => {
        router.push('/stores/create?packageId=' + id)
    }

    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
            })
        }
    }

    useEffect(() => {
        fetchCompanyPackages()
    }, [fetchCompanyPackages])

    useEffect(() => {
        fetchPrefix()
    }, [])

    const breadcrumbItems = useMemo(() => {
        return [
            { label: translate('components.breadcrumb.createStore'), href: '/stores/landing' },
            { label: translate('components.breadcrumb.createStoreCreate') },
        ]
    }, [translate])

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

            <Container className="my-[48px]">
                {order && (
                    <Alert
                        type="gray"
                        className="!text-[16px] !leading-[24px] w-full lg:w-[400px] lg:mx-auto"
                    >
                        <div>
                            {translate(`${translateKey}.orderAlert`, {
                                ':price': order.PRICE
                            })}
                        </div>
                        <div className="mt-[10px]">
                            <Link className="btn btn--primary btn--block" href={order.PAY_URL} target="_blank">
                                {translate('button.pay')}
                            </Link>
                        </div>
                    </Alert>
                )}

                {!order && (
                    <div className="relative lg:w-[680px] lg:mx-auto w-full 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]">{translate(`${translateKey}.pageTitle`)}</h4>
                        <form onSubmit={handleSubmit}>
                            <div className="space-y-[20px]">
                                <div>
                                    {!selectedPackage && (
                                        <FormGroup
                                            label={translate(`${translateKey}.selectPackage`)}
                                            noBorder={true}
                                            elementClass="!h-auto"
                                        >
                                            <div className="grid grid-cols-1 lg:grid-cols-2 gap-[16px]">
                                                {companyPackages.map((item, index) => (
                                                    <div key={index} className={classNames(
                                                        'bg-[#F5F5F5] rounded-[8px] relative p-[16px] border border-transparent',
                                                        {
                                                            '!border-primary': parseInt(item.ID) === parseInt(packageId)
                                                        }
                                                    )}>
                                                        <button type="button" onClick={() => handleSelectPackage(item.ID)} className="absolute inset-0 z-10" />
                                                        <h5 className="text-[16px] font-semibold text-primary">
                                                            {item.NAME}
                                                        </h5>
                                                        <div className="text-[#5A5A5A]">
                                                            <span className="text-[14px] font-bold">{item.PRICE}<sup className="ml-1">azn</sup></span>
                                                            <span className="ml-4">/ {translate('enum.monthly')}</span>
                                                        </div>
                                                    </div>
                                                ))}
                                            </div>
                                        </FormGroup>
                                    )}


                                    {selectedPackage && (
                                        <div className="text-[16px] rounded-[12px] p-[16px] bg-[#F2F2F2] font-semibold text-primary">
                                            <div className="text-muteLight text-[14px]">
                                                {translate(`${translateKey}.selectedPackage`)}
                                            </div>
                                            <div className="text-[#1B8EF2]">
                                                <Radio checked={true} className="!text-[#1B8EF2] text-[20px]" />
                                                <span className="text-[20px]">
                                                    {selectedPackage.NAME}
                                                </span>
                                                <span className="ml-5 text-[20px] font-bold">{selectedPackage.PRICE}<sup className="ml-1">azn</sup></span>
                                            </div>
                                        </div>
                                    )}
                                </div>
                                {selectedPackage && (
                                    <>
                                        <div>
                                            <FormGroup
                                                vertical={!isMobile}
                                                label={translate(`${translateKey}.name`)}
                                                error={'fullname'}
                                                required={true}
                                            >
                                                <FormText
                                                    value={values.fullname}
                                                    onChange={val => setField('fullname', val)}
                                                />
                                            </FormGroup>
                                        </div>

                                        <div>
                                            <FormGroup
                                                vertical={!isMobile}
                                                label={translate(`${translateKey}.city`)}
                                                error={'city'}
                                                required={true}
                                            >
                                                <FormSelect
                                                    options={cities}
                                                    value={values.city}
                                                    onChange={val => setField('city', val)}
                                                    placeholder={translate(`enum.select`)}
                                                />
                                            </FormGroup>
                                        </div>

                                        <div>
                                            <FormGroup
                                                vertical={!isMobile}
                                                label={translate(`${translateKey}.select`)}
                                                error={'law_type'}
                                                required={true}
                                                noBorder
                                                elementClass="!h-auto"
                                            >
                                                <div className="flex items-center h-[40px]">
                                                    <Radio.Group onChange={e => setField('law_type', e.target.value)} value={values.law_type}>
                                                        <Radio value={1}>{translate(`${translateKey}.legalPerson`)}</Radio>
                                                        <Radio value={2}>{translate(`${translateKey}.naturalPerson`)}</Radio>
                                                    </Radio.Group>
                                                </div>
                                            </FormGroup>
                                        </div>

                                        <div>
                                            <FormGroup
                                                vertical={!isMobile}
                                                label={translate(`${translateKey}.fullname`)}
                                                error={'law_name'}
                                                required={true}
                                            >
                                                <FormText
                                                    value={values.law_name}
                                                    onChange={val => setField('law_name', val)}
                                                />
                                            </FormGroup>
                                        </div>

                                        <div>
                                            <FormGroup
                                                vertical={!isMobile}
                                                label={translate(`${translateKey}.vat`)}
                                                error={'voen'}
                                                required={true}
                                            >
                                                <FormText
                                                    value={values.voen}
                                                    onChange={val => {
                                                        const onlyNumbers = val.replace(/[^0-9]/g, '');
                                                        setField('voen', onlyNumbers);
                                                    }}
                                                    inputMode="numeric"
                                                    pattern="[0-9]*"
                                                />
                                            </FormGroup>
                                        </div>

                                        <div>
                                            <FormGroup
                                                label={translate(`${translateKey}.contactPerson`)}
                                                suffix={<FiUser />}
                                                vertical={!isMobile}
                                                error={'contact_person'}
                                                required={true}
                                            >
                                                <FormText
                                                    name="contact_person"
                                                    value={values.contact_person}
                                                    onChange={val => setField('contact_person', val)}
                                                    onBlur={handleBlur}
                                                    placeholder={'Leslie Alexsander'}
                                                />
                                            </FormGroup>
                                        </div>

                                        <div>
                                            <FormGroup
                                                label={translate(`${translateKey}.email`)}
                                                suffix={<FiMail />}
                                                vertical={!isMobile}
                                                error={'email'}
                                                required={true}
                                            >
                                                <FormText
                                                    name="email"
                                                    value={values.email}
                                                    onChange={val => setField('email', val)}
                                                    onBlur={handleBlur}
                                                    placeholder={'example@email.com'}
                                                />
                                            </FormGroup>
                                        </div>

                                        <div>
                                            <FormGroup
                                                vertical={!isMobile}
                                                label={<span>{translate('pages.register.phone')}<span style={{ color: 'red' }}> *</span></span>}
                                                error={"phone"}
                                                suffix={<FiPhone />}
                                            >
                                                <div className="!w-[160px]">
                                                    <FormSelect
                                                        options={prefixItems}
                                                        value={prefix.phone || prefixItems[0]?.id}
                                                        onChange={val => setPrefix(a => ({ ...a, phone: val }))}
                                                    />
                                                </div>
                                                <FormPhone
                                                    name="phone"
                                                    value={values.phone}
                                                    onChange={val => setField('phone', val)}
                                                    onBlur={handleBlur}
                                                    className="pl-0"
                                                />
                                            </FormGroup>
                                        </div>

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

                                        <div>
                                            <FormGroup
                                                label={translate(translateKey + '.password')}
                                                suffix={<FiLock />}
                                                vertical={!isMobile}
                                                error={'password'}
                                                required={true}
                                            >
                                                <FormPassword
                                                    name="password"
                                                    value={values.password}
                                                    onChange={val => setField('password', val)}
                                                    onBlur={handleBlur}
                                                    autoComplete="new-password"
                                                    placeholder={'******************'}
                                                />
                                            </FormGroup>
                                        </div>

                                        <div>
                                            <FormGroup
                                                label={translate(`${translateKey}.rpassword`)}
                                                suffix={<FiLock />}
                                                vertical={!isMobile}
                                                error={'passwordag'}
                                                required={true}
                                            >
                                                <FormPassword
                                                    name="passwordag"
                                                    value={values.passwordag}
                                                    onChange={val => setField('passwordag', val)}
                                                    onBlur={handleBlur}
                                                    placeholder={'******************'}
                                                />
                                            </FormGroup>
                                        </div>

                                        <div>
                                            <FormGroup
                                                label={'&nbsp;'}
                                                vertical={!isMobile}
                                                noBorder={true}
                                                elementClass="!rounded-none !overflow-visible"
                                                error={'terms'}
                                            >
                                                <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('REGISTRATION_RULE_2'), {
                                                            '{%SITE_UPPER%}': '<b>MOJO.AZ</b>',
                                                            '{%SITE_LANG%}': locale
                                                        })
                                                    }} />
                                                </Checkbox>
                                            </FormGroup>
                                        </div>

                                        <div>
                                            <FormGroup vertical={!isMobile} label="&nbsp;" noBorder={true} elementClass="!rounded-none !overflow-visible">
                                                <Button block={true} type="submit" loading={loading}>
                                                    {translate('button.send')}
                                                </Button>
                                            </FormGroup>
                                        </div>
                                    </>
                                )}
                            </div>
                        </form>
                    </div>
                )}
            </Container>
        </>
    )
}

export default StoreCreatePage