'use client';

import BaseButton from '@/components/ui-kit/BaseButton';
import BaseInput from '@/components/ui-kit/BaseInput';
import { party_requests } from '@/data/party/party.requests';
import { pageLinks } from '@/helpers/constants';
import { notifyError, notifyUnknownError } from '@/services/notification';
import { Box, Divider, FormHelperText, Grid, Stack, Typography, styled } from '@mui/material';
import { useParams, useRouter, useSearchParams } from 'next/navigation';
import React, { useEffect, useMemo, useRef, useState } from 'react';
import { useLocale } from 'use-intl';
import { Controller, useFieldArray, useForm } from 'react-hook-form';
import BaseIconButton from '@/components/ui-kit/BaseIconButton';
import { AddCircleRounded, Close } from '@mui/icons-material';
import { box_requests } from '@/data/box/box.requests';
import useRequest from '@/hooks/useRequest';
import { useMyTranslation } from '@/hooks/useMyTranslation';
import { BoxStatus, CreateBoxBodyType, UpdateBoxBodyType } from '@/data/box/box.model';
import BaseReactSelect, { selectDefaultStyles } from '@/components/ui-kit/BaseReactSelect';
import { customer_requests } from '@/data/customers/customer.requests';
import { useAuthContext } from '@/context/auth-context';
import { useMyNavigation } from '@/hooks/useMyNavigation';
import AsyncSelect from 'react-select/async';
import { Party } from '@/data/party/party.model';
import cloneDeep from 'lodash.clonedeep';
import { item_requests } from '@/data/item/item.requests';
import get from 'lodash.get';
import Loader from '@/components/common/Loader';
import { Customer } from '@/data/customers/customer.model';
import { Passport } from '@/data/passport/passport.model';
import { passport_requests } from '@/data/passport/passport.request';

const StyledCreateBox = styled(Box)`
    .item-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }

    .item-row-field {
    }

    & > * {
        flex: 1 1 1;
    }
`;

type Props = {
    partiesData?: { value: number; label: string }[];
    initialValues?: {
        id: number;
        box_name: string;
        net_weight: number;
        box_weight: number;
        box_type: string;
        box_size: string;
        status: BoxStatus;
        packetId: string;

        passportName: string;
        passportId: number;
        partyId: number;
        partyName: string;

        clientId: number;
        client_id: string;
        clientName: string;

        products_list: {
            id: number;
            price: number | string;

            cargoId: string;
            trekId: string;
            name: string;
            nameRu: string;
            amount: number;
            weight: number;
        }[];
    };
};

const DashboardCreateBoxPage = ({ initialValues, partiesData }: Props) => {
    const [cargoIdValue, setCargoIdValue] = useState<string>('');
    const { user, isAdmin: isAdminUser } = useAuthContext();
    const editMode = !!initialValues && !!initialValues.id;
    const isAdmin = isAdminUser && editMode;
    const t = useMyTranslation();
    const params = useSearchParams();
    const navigation = useMyNavigation();
    const helperRef = useRef<{
        finished: boolean;
        partyFinished: boolean;
        clientFinished: boolean;
        settedDefaultParty: Party | null;
        settedDefaultClient: Customer | null;
        // settedDefaultPartyValue: { value: number; label: string }[] | null;
    }>({
        settedDefaultParty: null,
        settedDefaultClient: null,
        partyFinished: false,
        clientFinished: false,
        finished: false,
        // settedDefaultPartyValue: partiesData?.[0] || null,
    });
    const {
        register,
        control,
        handleSubmit,
        watch,
        setValue,
        formState: { errors },
    } = useForm<any>({
        defaultValues: {
            partyId: params.get('party_id') ? +params.get('party_id')! : '',
            box_weight: 0.9,
            box_type: 'KG',
            box_size: '50x40x40',
            status: 'READY_TO_INVOICE',
            cargoId: initialValues?.client_id,
            // passportId: {value: initialValues?.passportId},
            ...(editMode
                ? {}
                : {
                      products_list: [
                          {
                              id: '',
                              cargoId: '',
                              trekId: '',
                              name: '',
                              nameRu: '',
                              amount: '',
                              weight: '',
                              price: '',
                          },
                      ],
                  }),
            ...initialValues,
        },
    });

    const [loading, setLoading] = useState(false);
    const products = useFieldArray({
        control,
        name: 'products_list',
        keyName: 'key',
    });
    const controlledProductFields = watch('products_list');
    const partyIdValue = watch('partyId');
    const clientIdValue = watch('client_id');
    const cargoId = watch('cargoId');
    const requiredText = t('required');
    const [selectedPassport, setSelectedPassport] = useState<Passport | null>(null); // Tanlangan passportni saqlash uchun state (tipi Passport yoki null)

    const passportOptionsInitial = initialValues?.passportId &&
        initialValues?.passportName && [
            {
                value: initialValues?.passportId,
                label: initialValues?.passportName,
            },
        ];
    const n = "123ds"
    n.toUpperCase()
    const { data: passportOptions } = useRequest(() => passport_requests.getAll({ cargoId: cargoId?.toUpperCase() }), {
        enabled: !!cargoId,
        selectData: data => {
            // Ma'lumotlarni BaseReactSelect uchun mos formatga o'tkazish
            const passportOptions = data.data.data.map((passport: Passport) => ({
                // data.data endi Passport[]
                value: passport.id, // passport id sini value sifatida
                label: passport.fullName, // fullName ni label sifatida
            }));

            const passportId = watch('passportId');

            if (!passportId && initialValues?.passportId && cargoId === initialValues?.client_id) {
                const currentOption = passportOptions?.find((item: { value: number }) => item.value === initialValues?.passportId);
                setValue('passportId', currentOption);
            }

            return passportOptions;
        },
        dependencies: [cargoId],
        placeholderData: [], // Kerak emas, chunki server PageAble qaytarmayapti
        onSuccess(data) {
            // if (data?.data.data?.[0]?.id) {
            // setValue("passportId", initialValues?.passportId)
            // setValue('passport_id', data.data.data[0].id);
            // setSelectedPassport(data.data.data[0]); // Birinchi elementni tanlash
            // }
        },
    });

    useEffect(() => {
        setValue('passportId', '');
    }, [cargoId]);

    const { data: defaultParties, status: defaultPartiesStatus } = useRequest(() => party_requests.getAll({ status: 'COLLECTING' }), {
        enabled: true,
        selectData(data) {
            return data.data.data.data.map(p => ({ value: p.id, label: p.name }));
        },
        onSuccess(data) {
            if (!editMode && data?.data?.data?.data?.[0]) {
                helperRef.current.settedDefaultParty = data.data.data.data[0];
                setValue('partyId', data.data.data.data[0].id);
            }
            helperRef.current.partyFinished = true;
            if (helperRef.current.clientFinished) {
                helperRef.current.finished = true;
            }
        },
        placeholderData: [],
    });

    const { data: defaultClients } = useRequest(
        () =>
            customer_requests.getAll({
                page: 1,
            }),
        {
            enabled: !!partyIdValue,
            selectData(data) {
                return data.data.data.data.map(p => ({ value: p.aviaCargoId, label: p.fullName }));
                // return data.data.data.map(p => ({ value: p.id, label: p.fullName }));
            },
            dependencies: [partyIdValue],
            onSuccess(data) {
                if (!editMode && !clientIdValue && data?.data?.data?.data?.[0]) {
                    helperRef.current.settedDefaultClient = data.data.data?.data?.[0];
                    setValue('client_id', data.data.data.data[0].aviaCargoId);
                }
                helperRef.current.clientFinished = true;
                if (helperRef.current.partyFinished) {
                    helperRef.current.finished = true;
                }
            },
            placeholderData: [],
        }
    );

    const onPassportChange = (newValue: Passport | null) => {
        // Tipi Passport | null
        setSelectedPassport(newValue);
        if (newValue) {
            setValue('passport_id', newValue.id || null);
        } else {
            setValue('passport_id', null);
        }
    };

    const onSubmit = handleSubmit(async values => {

        try {
            setLoading(true);

            if (editMode) {
                const updateBody: UpdateBoxBodyType = {
                    cargoId: values.client_id,
                    passportId: values.passportId.value,
                    status: values.status,
                    packetId: initialValues?.packetId,

                    items: values.products_list.map((item: any) => {
                        const _price = +item.price ? +item.price : 0;
                        const _amount = +item.amount ? +item.amount : 0;
                        const _total_price = _price ? _price * _amount : 0;

                        return {
                            id: item.id,
                            // cargoId: item.cargoId,
                            trekId: item.trekId,
                            // name: item.name + (item.nameRu ? ` / ${item.nameRu}` : ''),
                            name: item.name,
                            nameRu: item?.nameRu,
                            weight: +item.weight,
                            amount: +item.amount,
                            price: _price,
                            totalPrice: _total_price,
                        };
                    }),
                };

                const item_delete_promises = initialValues.products_list
                    .filter(item => {
                        if (!updateBody.items.find(i => String(i.id) === String(item.id))) {
                            return true;
                        } else {
                            return false;
                        }
                    })
                    .map(item => {
                        return item_requests.delete({ itemId: item.id });
                    });

                await box_requests.update(updateBody);
                await Promise.all(item_delete_promises);
            } else {
                const createBody: CreateBoxBodyType = {
                    status: values.status,
                    cargoId: values.cargoId,
                    passportId: values.passportId.value,
                    partyId: values.partyId,
                    items: values.products_list.map((item: any) => {
                        return {
                            trekId: item.trekId,
                            name: item.name,
                            weight: +item.weight,
                            amount: +item.amount,
                        };
                    }),
                };
                await box_requests.create(createBody);
            }

            navigation.push(pageLinks.dashboard.boxes.index);
        } catch (error) {
            notifyUnknownError(error);
        } finally {
            setLoading(false);
        }
    });

    const partyOptions = (inputValue: string) => {
        return party_requests.getAll({ status: 'COLLECTING', partyName: inputValue }).then(res => {
            return res.data.data.data.map(p => ({ label: p.name, value: p.id }));
        });
    };

    // const clientOptions = (inputValue: string) => {
    //     return customer_requests.getAll({ clientName: inputValue, page: 1 }).then(res => {
    //         return res.data.data.data.map(p => ({ label: p.fullName, value: p.id }));
    //     });
    // };

    const appendProduct = () => {
        products.append({
            id: '',
            cargoId: '',
            trekId: '',
            name: '',
            amount: '',
            weight: '',
            price: '',
            totalPrice: '',
        });
    };

    const removeProduct = (index: number) => {
        products.remove(index);
    };

    const translateAndUpdateRussianName = async (text: string, index: number) => {
        if (!text) return;

        try {
            // const responseText = await box_requests.translateWithGoogleApi({ text });
            const responseText = await box_requests.translateWithMemoryApi({ text });
            setValue(`products_list.${index}.nameRu`, responseText || '');
        } catch (error) {
            console.error(error);
            notifyError('Translation api error');
        }
    };

    const boxTypes = [
        {
            label: 'KG',
            value: 'KG',
        },
        {
            label: 'GABARIT',
            value: 'GABARIT',
        },
    ];

    const boxStatuses = useMemo(() => {
        const p: {
            label: string;
            value: BoxStatus;
        }[] = [
            {
                label: t('READY_TO_INVOICE'),
                value: 'READY_TO_INVOICE',
            },
        ];

        if (isAdmin) {
            p.push({
                label: t('READY'),
                value: 'READY',
            });
        }

        return p;
    }, [isAdmin]);

    return (
        <StyledCreateBox
            width={1}
            mb={3}
            sx={{
                padding: '28px',
                borderRadius: '16px',
                backgroundColor: '#fff',
            }}
        >
            <Box component={'form'} onSubmit={onSubmit}>
                <Typography variant='h5' mb={3.5}>
                    {editMode ? t('update_packet') : t('create_packet')}
                </Typography>

                <Grid container columnSpacing={2.5} rowSpacing={3} mb={3.5}>
                    <Grid item xs={5}>
                        <Typography fontSize={'18px'} fontWeight={500} color='#5D5850' mb={2}>
                            {t('party_name')}
                        </Typography>
                        <Controller
                            name='partyId'
                            control={control}
                            rules={{ required: requiredText }}
                            render={({ field, fieldState, formState }) => {
                                return (
                                    <AsyncSelect
                                        onChange={(newValue: any) => {
                                            field.onChange(newValue.value);
                                        }}
                                        defaultValue={
                                            editMode
                                                ? {
                                                      value: initialValues.partyId,
                                                      label: initialValues.partyName,
                                                  }
                                                : partiesData?.length
                                                  ? {
                                                        value: partiesData[0].value,
                                                        label: partiesData[0].label,
                                                    }
                                                  : null
                                        }
                                        styles={selectDefaultStyles}
                                        noOptionsMessage={() => t('not_found')}
                                        loadingMessage={() => t('loading')}
                                        onBlur={field.onBlur}
                                        name={field.name}
                                        defaultOptions={defaultParties!}
                                        loadOptions={partyOptions}
                                        placeholder={t('enter_party_name_to_find')}
                                    />
                                );
                            }}
                        />
                        {/* @ts-expect-error */}
                        {!!errors.partyId?.message && <FormHelperText sx={{ color: 'red' }}>{errors.partyId?.message}</FormHelperText>}
                    </Grid>

                    <Grid item xs={5}>
                        <Typography fontSize={'18px'} fontWeight={500} color='#5D5850' mb={2}>
                            {t('status')}
                        </Typography>
                        <Controller
                            name='status'
                            control={control}
                            rules={{ required: requiredText }}
                            render={({ field, fieldState, formState }) => {
                                return (
                                    <BaseReactSelect
                                        value={boxStatuses?.find(p => p.value === field.value)}
                                        onChange={(newValue: any) => {
                                            field.onChange(newValue.value);
                                        }}
                                        onBlur={field.onBlur}
                                        name={field.name}
                                        options={boxStatuses}
                                    />
                                );
                            }}
                        />
                        {/* @ts-expect-error */}
                        {!!errors.box_type?.message && <FormHelperText sx={{ color: 'red' }}>{errors.box_type?.message}</FormHelperText>}
                    </Grid>

                    <Grid item xs={5}>
                        <Typography fontSize={'18px'} fontWeight={500} color='#5D5850' mb={2}>
                            {t('cargo_id')}
                        </Typography>
                        <BaseInput
                            disabled={!!initialValues}
                            type='text'
                            fullWidth
                            inputProps={{
                                step: 0.1,
                            }}
                            mainBorderColor='#D8D8D8'
                            placeholder={t('cargo_id')}
                            {...register('cargoId')}
                        />
                        {!!errors.net_weight?.message && (
                            // @ts-expect-error
                            <FormHelperText sx={{ color: 'red' }}>{errors.net_weight?.message}</FormHelperText>
                        )}
                    </Grid>
                    <Grid item xs={5}>
                        <Typography fontSize={'18px'} fontWeight={500} color='#5D5850' mb={2}>
                            {t('passport')}
                        </Typography>

                        <Controller
                            name='passportId'
                            control={control}
                            rules={{ required: requiredText }}
                            render={({ field, fieldState, formState }) => {
                                return (
                                    <BaseReactSelect
                                        // value={selectedPassport}
                                        // onChange={onPassportChange}

                                        // value={field.value}
                                        {...field}
                                        onChange={(newValue: any) => {
                                            onPassportChange(newValue);
                                            field.onChange(newValue);
                                        }}
                                        // options={passportOptions || passportOptionsInitial || []}
                                        options={passportOptions || passportOptionsInitial || []}
                                        // isLoading={passportLoading}
                                        placeholder={t('passport')}
                                        isDisabled={!clientIdValue || !!initialValues}
                                        noOptionsMessage={() => t('not_found')}
                                        loadingMessage={() => t('loading')}
                                    />
                                );
                            }}
                        />
                    </Grid>

                    <Grid item xs={12}>
                        <Stack
                            sx={{
                                borderRadius: '8px',
                                border: '2px solid #3489E4',
                                background: '#FFF',
                                padding: '24px',
                            }}
                        >
                            {controlledProductFields.map((product: any, index: number) => {
                                //

                                //
                                let totalPrice = 0;

                                try {
                                    const p = +product.price * +product.amount;
                                    if (!Number.isNaN(p)) {
                                        totalPrice = p;
                                    }
                                } catch (error) {}

                                return (
                                    <Box key={product.key} mb={1.5}>
                                        <Box className='item-row' mb={1.5}>
                                            <Box className='item-row-field'>
                                                <Typography fontSize={'18px'} fontWeight={500} color='#5D5850' mb={2}>
                                                    {t('track_id')}
                                                </Typography>
                                                <BaseInput
                                                    InputProps={{
                                                        startAdornment: (
                                                            <Box
                                                                sx={{
                                                                    backgroundColor: '#EBEFF5',
                                                                    color: '#929191',
                                                                    alignSelf: 'stretch',
                                                                    height: 'auto',
                                                                    display: 'flex',
                                                                    alignItems: 'center',
                                                                    pl: '10px',
                                                                    pr: '10px',
                                                                    borderRadius: '8px 0 0 8px',
                                                                }}
                                                            >
                                                                <span>ID</span>
                                                            </Box>
                                                        ),
                                                    }}
                                                    fullWidth
                                                    placeholder={t('id')}
                                                    sx={{
                                                        '.MuiInputBase-root': {
                                                            paddingLeft: 0,
                                                        },
                                                    }}
                                                    {...register(`products_list.${index}.trekId`, { required: requiredText })}
                                                />
                                                {!!get(errors, `products_list.${index}.trekId`) && (
                                                    <FormHelperText sx={{ color: 'red' }}>{requiredText}</FormHelperText>
                                                )}
                                            </Box>
                                            <Box className='item-row-field'>
                                                <Typography fontSize={'18px'} fontWeight={500} color='#5D5850' mb={2}>
                                                    {t('name')}
                                                </Typography>
                                                <BaseInput
                                                    fullWidth
                                                    mainBorderColor='#D8D8D8'
                                                    placeholder={t('name')}
                                                    {...register(`products_list.${index}.name`, { required: requiredText })}
                                                    onBlur={event => {
                                                        translateAndUpdateRussianName(event.target.value, index);
                                                    }}
                                                />
                                                {!!get(errors, `products_list.${index}.name`) && (
                                                    <FormHelperText sx={{ color: 'red' }}>{requiredText}</FormHelperText>
                                                )}
                                            </Box>
                                            <Box className='item-row-field'>
                                                <Typography fontSize={'18px'} fontWeight={500} color='#5D5850' mb={2}>
                                                    {'NAME_RU'}
                                                </Typography>
                                                <BaseInput
                                                    // disabled
                                                    fullWidth
                                                    mainBorderColor='#D8D8D8'
                                                    placeholder={t('name')}
                                                    {...register(`products_list.${index}.nameRu`)}
                                                />
                                                {!!get(errors, `products_list.${index}.name`) && (
                                                    <FormHelperText sx={{ color: 'red' }}>{requiredText}</FormHelperText>
                                                )}
                                            </Box>
                                            <Box className='item-row-field'>
                                                <Typography fontSize={'18px'} fontWeight={500} color='#5D5850' mb={2}>
                                                    {t('quantity')}
                                                </Typography>
                                                <BaseInput
                                                    fullWidth
                                                    type='number'
                                                    mainBorderColor='#D8D8D8'
                                                    placeholder={t('quantity')}
                                                    {...register(`products_list.${index}.amount`, { required: requiredText })}
                                                />
                                                {!!get(errors, `products_list.${index}.amount`) && (
                                                    <FormHelperText sx={{ color: 'red' }}>{requiredText}</FormHelperText>
                                                )}
                                            </Box>
                                            <Box className='item-row-field'>
                                                <Typography fontSize={'18px'} fontWeight={500} color='#5D5850' mb={2}>
                                                    {t('weight')}
                                                </Typography>
                                                <BaseInput
                                                    fullWidth
                                                    type='number'
                                                    inputProps={{ step: 'any', min: 0, type: 'number' }}
                                                    mainBorderColor='#D8D8D8'
                                                    placeholder={t('weight')}
                                                    {...register(`products_list.${index}.weight`, { required: requiredText })}
                                                />
                                                {!!get(errors, `products_list.${index}.amount`) && (
                                                    <FormHelperText sx={{ color: 'red' }}>{requiredText}</FormHelperText>
                                                )}
                                            </Box>
                                            {isAdmin && (
                                                <React.Fragment>
                                                    <Box className='item-row-field'>
                                                        <Typography fontSize={'18px'} fontWeight={500} color='#5D5850' mb={2}>
                                                            {t('weight')}
                                                        </Typography>
                                                        <Stack direction={'row'} alignItems={'center'} spacing={2.5}>
                                                            <BaseInput
                                                                fullWidth
                                                                type='text'
                                                                inputProps={{
                                                                    step: 0.1,
                                                                }}
                                                                mainBorderColor='#D8D8D8'
                                                                placeholder={t('weight')}
                                                                {...register(`products_list.${index}.weight`)}
                                                            />
                                                        </Stack>
                                                    </Box>
                                                    <Box className='item-row-field'>
                                                        <Typography fontSize={'18px'} fontWeight={500} color='#5D5850' mb={2}>
                                                            {t('price')}
                                                        </Typography>
                                                        <BaseInput
                                                            fullWidth
                                                            type='text'
                                                            inputProps={{
                                                                step: 0.1,
                                                            }}
                                                            mainBorderColor='#D8D8D8'
                                                            placeholder={t('price')}
                                                            {...register(`products_list.${index}.price`, { required: requiredText })}
                                                        />
                                                        {!!get(errors, `products_list.${index}.price`) && (
                                                            <FormHelperText sx={{ color: 'red' }}>{requiredText}</FormHelperText>
                                                        )}
                                                    </Box>
                                                    <Box className='item-row-field'>
                                                        <Typography fontSize={'18px'} fontWeight={500} color='#5D5850' mb={2}>
                                                            {t('total_price')}
                                                        </Typography>
                                                        <BaseInput
                                                            fullWidth
                                                            type='number'
                                                            inputProps={{
                                                                step: 0.001,
                                                            }}
                                                            value={totalPrice}
                                                            mainBorderColor='#D8D8D8'
                                                            placeholder={t('total_price')}
                                                            // {...register(`products_list.${index}.totalPrice`, { required: requiredText })}
                                                        />
                                                    </Box>
                                                </React.Fragment>
                                            )}

                                            <Box className='item-row-field'>
                                                <BaseIconButton
                                                    size='small'
                                                    colorVariant='icon-error'
                                                    sx={{ flexShrink: 0, height: 'auto', marginTop: 4.5 }}
                                                    onClick={() => removeProduct(index)}
                                                >
                                                    <Close />
                                                </BaseIconButton>
                                            </Box>
                                        </Box>
                                        <Divider color='#EBEFF6' />
                                    </Box>
                                );
                            })}

                            <Stack alignItems={'center'}>
                                <BaseButton sx={{ backgroundColor: '#239D5F' }} startIcon={<AddCircleRounded />} onClick={appendProduct}>
                                    {t('add_more')}
                                </BaseButton>
                            </Stack>
                        </Stack>
                    </Grid>
                </Grid>

                <BaseButton type='submit' colorVariant='blue' loading={loading}>
                    {editMode ? t('update') : t('create')}
                </BaseButton>
            </Box>
        </StyledCreateBox>
    );
};

export default DashboardCreateBoxPage;