'use client';

import BaseButton from '@/components/ui-kit/BaseButton';
import BaseIconButton from '@/components/ui-kit/BaseIconButton';
import { useAuthContext } from '@/context/auth-context';
import { box_requests } from '@/data/box/box.requests';
import { item_requests } from '@/data/item/item.requests';
import { party_requests } from '@/data/party/party.requests';
import { FormValues, RealCreateBoxBodyType, UpdateRealBoxBodyType } from '@/data/real-box/real-box.model';
import { real_box_requests } from '@/data/real-box/real-box.requests';
import { pageLinks } from '@/helpers/constants';
import { useMyNavigation } from '@/hooks/useMyNavigation';
import { useMyTranslation } from '@/hooks/useMyTranslation';
import { notifyUnknownError } from '@/services/notification';
import { AddCircleRounded, Close } from '@mui/icons-material';
import {
    Box,
    Checkbox,
    Chip,
    CircularProgress,
    FormControl,
    FormHelperText,
    Grid,
    InputLabel,
    ListItemText,
    MenuItem,
    Select,
    Stack,
    styled,
    Typography,
} from '@mui/material';
import { useQuery } from '@tanstack/react-query';
import get from 'lodash.get';
import { useSearchParams } from 'next/navigation';
import { useEffect, useState } from 'react';
import { Controller, useFieldArray, useForm } from 'react-hook-form';

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

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

interface Props {
    partiesData?: { value: number; label: string }[];
    initialValues?: {
        id?: number;
        boxId?: string;
        partyId?: number;
        partyName?: string;
        paketIds?: Array<any>;
    };
}

const DashboardCreateRealBoxPage = ({ initialValues, partiesData }: Props) => {
    const { user } = useAuthContext();
    const editMode = !!initialValues?.id;
    const [keyword, setKeyword] = useState('');
    const t = useMyTranslation();
    const params = useSearchParams();
    const { push } = useMyNavigation();
    const [partyId, setPartyId] = useState<number | string>('');
    const [loading, setLoading] = useState(false);
    console.log(initialValues);
    const {
        register,
        control,
        handleSubmit,
        setValue,
        reset,
        watch,
        formState: { errors },
    } = useForm<FormValues>({
        defaultValues: {
            partyName: initialValues?.partyName || '',
            packetItemDtos: initialValues?.paketIds
                ? initialValues.paketIds.map(paket => ({
                      packetId: paket.id,
                      itemDtos: paket.items ? paket.items.map((item: any) => item.id) : [],
                  }))
                : params.get('party_id')
                  ? [{ packetId: +params.get('party_id')!, itemDtos: [] }]
                  : [{ packetId: 0, itemDtos: [] }],
            id: initialValues?.id,
            boxId: initialValues?.boxId,
            partyId: initialValues?.partyId,
        },
    });

    useEffect(() => {
        if (initialValues) {
            reset({
                partyName: initialValues.partyName || '',
                packetItemDtos: initialValues.paketIds
                    ? initialValues.paketIds.map(paket => ({
                          packetId: paket.id,
                          itemDtos: paket.items ? paket.items.map((item: any) => item.id) : [],
                      }))
                    : [{ packetId: 0, itemDtos: [] }],
                id: initialValues.id,
                boxId: initialValues.boxId,
                partyId: initialValues.partyId,
            });
            if (initialValues.partyId) {
                setPartyId(initialValues.partyId);
            }
        }
    }, [initialValues, reset]);

    const { fields, append, remove } = useFieldArray({
        control,
        name: 'packetItemDtos',
        keyName: 'key',
    });

    const requiredText = t('required');

    // Fetch parties data
    const { data: parties = [], isLoading: isLoadingParties } = useQuery({
        queryKey: ['parties-list', 'COLLECTING'],
        queryFn: () => party_requests.getAll({ status: 'COLLECTING' }),
        select: data =>
            data.data.data.data.map((p: any) => ({
                id: p.id,
                name: p.name,
            })),
    });

    // Fetch packets data
    const { data: packets = [], isLoading: isLoadingPackets } = useQuery({
        queryKey: ['packets-list', partyId, keyword],
        queryFn: () =>
            box_requests.getAll({
                partyId: partyId,
                cargoId: keyword,
            }),
        select: data => data?.data?.data?.data.filter((box: any) => box.status === 'READY_TO_INVOICE') ?? [],
        enabled: !!partyId,
    });

    const onSubmit = handleSubmit(async values => {
        try {
            setLoading(true);

            if (editMode) {
                const updateBody: UpdateRealBoxBodyType = {
                    boxId: initialValues!.boxId!,
                    partyName: values.partyName,
                    packetItemDtos: values.packetItemDtos.map(packet => ({
                        packetId: packet.packetId,
                        itemDtos: packet.itemDtos,
                    })),
                };
                await real_box_requests.update(updateBody);
            } else {
                const createBody: RealCreateBoxBodyType = {
                    partyName: values.partyName,
                    packetItemDtos: values.packetItemDtos.map(packet => ({
                        packetId: packet.packetId,
                        itemDtos: packet.itemDtos,
                    })),
                };
                await real_box_requests.create(createBody);
            }

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

    const handlePartyChange = (event: any) => {
        const selectedParty = parties.find(p => p.id === event.target.value);
        if (selectedParty) {
            setValue('partyName', selectedParty.name);
            setPartyId(selectedParty.id);
            setKeyword('');
            setValue('packetItemDtos', [{ packetId: 0, itemDtos: [] }]);
        }
    };

    const handlePacketChange = (index: number, value: number) => {
        setValue(`packetItemDtos.${index}.packetId`, value);
        setValue(`packetItemDtos.${index}.itemDtos`, []);
    };

    const appendPacket = () => {
        append({ packetId: 0, itemDtos: [] });
    };

    const removePacket = (index: number) => {
        remove(index);
    };

    // Component for each packet row to isolate product selection
    const PacketRow = ({ index, field }: { index: number; field: any }) => {
        const packetId = watch(`packetItemDtos.${index}.packetId`);

        // Fetch products specific to this packet
        const { data: products, isLoading: isLoadingProducts } = useQuery({
            queryKey: ['product-list', packetId],
            queryFn: () => item_requests.list({ packetId }),
            select: data => data?.data?.data.data ?? [],
            enabled: !!packetId,
        });

        return (
            <Box className='item-row' mb={2} display={'flex'} flexDirection={'column'}>
                <div style={{ width: '100%' }}>
                    <Typography fontSize='18px' sx={{ textAlign: 'start' }} fontWeight={500} color='#5D5850'>
                        {t('packet')}
                    </Typography>
                </div>
                <Box
                    className='item-row-field'
                    sx={{ width: '100%' }}
                    flex={1}
                    display={'flex'}
                    gap={2}
                    justifyContent={'space-between'}
                    alignItems={'center'}
                >
                    <div style={{ width: '100%' }}>
                        <FormControl fullWidth>
                            <InputLabel id={`packet-select-label-${index}`}>{t('packet')}</InputLabel>
                            <Controller
                                name={`packetItemDtos.${index}.packetId`}
                                control={control}
                                rules={{ required: requiredText }}
                                render={({ field }) => (
                                    <Select
                                        {...field}
                                        labelId={`packet-select-label-${index}`}
                                        label={t('packet')}
                                        onChange={e => {
                                            field.onChange(e);
                                            handlePacketChange(index, e.target.value as number);
                                        }}
                                        value={field.value || ''}
                                        disabled={isLoadingPackets}
                                    >
                                        {isLoadingPackets ? (
                                            <MenuItem disabled>
                                                <CircularProgress size={24} />
                                            </MenuItem>
                                        ) : (
                                            packets.map(packet => (
                                                <MenuItem key={packet.id} value={packet.id}>
                                                    {packet.name || packet.name || `Box ${packet.id}`}
                                                </MenuItem>
                                            ))
                                        )}
                                    </Select>
                                )}
                            />
                            {!!get(errors, `packetItemDtos.${index}.packetId`) && (
                                <FormHelperText sx={{ color: 'red' }}>{requiredText}</FormHelperText>
                            )}
                        </FormControl>
                    </div>
                    <div>
                        {fields.length > 1 && (
                            <BaseIconButton
                                size='small'
                                colorVariant='icon-error'
                                sx={{ flexShrink: 0, height: 'auto', marginTop: 1 }}
                                onClick={() => removePacket(index)}
                            >
                                <Close />
                            </BaseIconButton>
                        )}
                    </div>
                </Box>

                {packetId && (
                    <Box mt={2} sx={{ width: '100%' }}>
                        <Typography fontSize='18px' sx={{ textAlign: 'start' }} fontWeight={500} color='#5D5850' mb={2}>
                            {t('products')}
                        </Typography>
                        {isLoadingProducts ? (
                            <CircularProgress />
                        ) : (
                            <FormControl fullWidth>
                                <Box display='flex' alignItems='center' mb={1}>
                                    <Controller
                                        name={`packetItemDtos.${index}.itemDtos`}
                                        control={control}
                                        render={({ field: { onChange } }) => (
                                            <Checkbox
                                                checked={watch(`packetItemDtos.${index}.itemDtos`)?.length === products?.length}
                                                onChange={e => {
                                                    if (e.target.checked) {
                                                        setValue(`packetItemDtos.${index}.itemDtos`, products?.map(p => p.id) || []);
                                                    } else {
                                                        setValue(`packetItemDtos.${index}.itemDtos`, []);
                                                    }
                                                }}
                                                indeterminate={
                                                    watch(`packetItemDtos.${index}.itemDtos`)?.length > 0 &&
                                                    watch(`packetItemDtos.${index}.itemDtos`)?.length < products?.length!
                                                }
                                            />
                                        )}
                                    />
                                    <Typography variant='body2'>{t('select_all')}</Typography>
                                </Box>
                                <Controller
                                    name={`packetItemDtos.${index}.itemDtos`}
                                    control={control}
                                    render={({ field }) => (
                                        <Select
                                            {...field}
                                            labelId={`product-select-label-${index}`}
                                            multiple
                                            value={field.value || []}
                                            onChange={e => field.onChange(e.target.value)}
                                            renderValue={selected => (
                                                <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
                                                    {(selected as any[]).map(value => (
                                                        <Chip
                                                            key={value}
                                                            label={products?.find(p => p.id === value)?.name}
                                                            onDelete={() => {
                                                                const newValue = (field.value || []).filter(id => id !== value);
                                                                field.onChange(newValue);
                                                            }}
                                                        />
                                                    ))}
                                                </Box>
                                            )}
                                        >
                                            {products?.map(product => (
                                                <MenuItem key={product.id} value={product.id}>
                                                    <Checkbox checked={(field.value || []).includes(product.id)} />
                                                    <ListItemText primary={product.name} />
                                                </MenuItem>
                                            ))}
                                        </Select>
                                    )}
                                />
                            </FormControl>
                        )}
                    </Box>
                )}
            </Box>
        );
    };

    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_box') : t('create_box')}
                </Typography>

                <Grid container columnSpacing={2.5} rowSpacing={3} mb={3.5}>
                    <Grid item xs={12}>
                        <Typography fontSize='18px' fontWeight={500} color='#5D5850' mb={2}>
                            {t('party_name')}
                        </Typography>
                        <FormControl fullWidth>
                            <InputLabel id='party-select-label'>{t('party_name')}</InputLabel>
                            <Controller
                                name='partyId'
                                control={control}
                                rules={{ required: requiredText }}
                                render={({ field }) => (
                                    <Select
                                        {...field}
                                        labelId='party-select-label'
                                        label={t('party_name')}
                                        onChange={e => {
                                            field.onChange(e);
                                            handlePartyChange(e);
                                        }}
                                        value={field.value || ''}
                                        disabled={isLoadingParties}
                                    >
                                        {isLoadingParties ? (
                                            <MenuItem disabled>
                                                <CircularProgress size={24} />
                                            </MenuItem>
                                        ) : (
                                            parties.map(party => (
                                                <MenuItem key={party.id} value={party.id}>
                                                    {party.name}
                                                </MenuItem>
                                            ))
                                        )}
                                    </Select>
                                )}
                            />
                            {!!errors.partyId && <FormHelperText sx={{ color: 'red' }}>{requiredText}</FormHelperText>}
                        </FormControl>
                    </Grid>

                    <Grid item xs={12}>
                        <Stack
                            sx={{
                                borderRadius: '8px',
                                border: '2px solid #3489E4',
                                background: '#FFF',
                                padding: '24px',
                                gap: '12px',
                                display: 'flex',
                                flexDirection: 'column',
                            }}
                        >
                            <div>
                                {fields.map((field, index) => (
                                    <PacketRow key={field.key} index={index} field={field} />
                                ))}
                                <BaseButton variant='outlined' onClick={appendPacket} startIcon={<AddCircleRounded />} sx={{ mt: 2 }}>
                                    {t('add_packet')}
                                </BaseButton>
                            </div>
                        </Stack>
                    </Grid>
                </Grid>

                <BaseButton variant='contained' type='submit' disabled={loading} fullWidth sx={{ py: 1.5 }}>
                    {loading ? <CircularProgress size={24} color='inherit' /> : editMode ? t('update_box') : t('create_box')}
                </BaseButton>
            </Box>
        </StyledCreateBox>
    );
};

export default DashboardCreateRealBoxPage;