'use client';

import Loader from '@/components/common/Loader';
import BaseInput from '@/components/ui-kit/BaseInput';
import { useAuthContext } from '@/context/auth-context';
import { BoxStatus } from '@/data/box/box.model';
import { box_requests } from '@/data/box/box.requests';
import { useMyTranslation } from '@/hooks/useMyTranslation';
import useRequest from '@/hooks/useRequest';
import { Box, Divider, Grid, Stack, Typography, styled } from '@mui/material';
import { useParams } from 'next/navigation';
import { useMemo } from 'react';

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

    .item-row-field {
        flex: 1;
    }

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

const DashboardBoxesOnePage = () => {
    const params = useParams();
    const box_id = params.box_id as string;
    const { isAdmin: isAdminUser } = useAuthContext();
    const t = useMyTranslation();

    const { data: boxData, loading } = useRequest(() => box_requests.find({ packetId: box_id }), {
        selectData(data) {
            const boxData = data.data.data;

            return {
                id: +box_id,
                box_name: boxData.packet.name,
                net_weight: +boxData.packet.brutto,
                box_weight: +boxData.packet.boxWeight,
                box_type: boxData.packet.boxType,
                box_size: boxData.packet.volume,
                passportName: boxData.packet.passportName,
                status: boxData.packet.status,
                packetId: box_id,
                partyId: +boxData.packet.partyId,
                partyName: boxData.packet.partyName,
                passportId: boxData.client?.passportId,
                client_id: boxData.packet?.cargoId,
                clientName: boxData.client?.passportName,
                products_list: boxData.items.map(item => ({
                    id: item.id,
                    price: item.price,
                    cargoId: item.cargoId,
                    trekId: item.trekId,
                    name: item.name,
                    nameRu: item.nameRu,
                    amount: +item.amount,
                    acceptedNumber: item.acceptedNumber,
                    weight: +item.weight,
                })),
            };
        },
    });

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

        if (isAdminUser) {
            statuses.push({
                label: t('READY'),
                value: 'READY',
            });
        }

        return statuses;
    }, [isAdminUser, t]);

    if (loading || !boxData) {
        return <Loader p={8} size={96} />;
    }

    return (
        <StyledViewBox
            width={1}
            mb={3}
            sx={{
                padding: '28px',
                borderRadius: '16px',
                backgroundColor: '#fff',
            }}
        >
            <Box>
                <Typography variant='h5' mb={3.5}>
                    {t('view_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>
                        <Typography sx={{ width: '100%', border: '1px solid gray', padding: '8px', borderRadius: '12px' }}>
                            {boxData.partyName || '-'}
                        </Typography>
                    </Grid>

                    <Grid item xs={5}>
                        <Typography fontSize='18px' fontWeight={500} color='#5D5850' mb={2}>
                            {t('cargo_id')}
                        </Typography>
                        <Typography sx={{ width: '100%', border: '1px solid gray', padding: '8px', borderRadius: '12px' }}>
                            {boxData.client_id || '-'}
                        </Typography>
                    </Grid>

                    <Grid item xs={5}>
                        <Typography fontSize='18px' fontWeight={500} color='#5D5850' mb={2}>
                            {t('passport')}
                        </Typography>
                        <Typography sx={{ width: '100%', border: '1px solid gray', padding: '8px', borderRadius: '12px' }}>
                            {boxData.passportName || '-'}
                        </Typography>
                    </Grid>

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

                                //
                                let totalPrice = 0;

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

                                return (
                                    <Box key={index} 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')}
                                                    disabled
                                                    defaultValue={product.trekId}
                                                    sx={{
                                                        '.MuiInputBase-root': {
                                                            paddingLeft: 0,
                                                        },
                                                    }}
                                                />
                                            </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')}
                                                    defaultValue={product.name}
                                                    disabled
                                                />
                                            </Box>
                                            <Box className='item-row-field'>
                                                <Typography fontSize={'18px'} fontWeight={500} color='#5D5850' mb={2}>
                                                    {'NAME_RU'}
                                                </Typography>
                                                <BaseInput
                                                    defaultValue={product.nameRu}
                                                    disabled
                                                    fullWidth
                                                    mainBorderColor='#D8D8D8'
                                                    placeholder={t('name')}
                                                    InputProps={{
                                                        sx: {
                                                            '&.Mui-disabled': {
                                                                color: '!important',
                                                            },
                                                            '& input.Mui-disabled': {
                                                                color: 'black !important',
                                                            },
                                                        },
                                                    }}
                                                />
                                            </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')}
                                                    defaultValue={product.amount}
                                                    disabled
                                                />
                                            </Box>
                                            <Box className='item-row-field'>
                                                <Typography fontSize={'18px'} fontWeight={500} color='#5D5850' mb={2}>
                                                    {t('accepted_number')}
                                                </Typography>
                                                <BaseInput
                                                    fullWidth
                                                    type='number'
                                                    inputProps={{ step: 'any', min: 0, type: 'number' }}
                                                    mainBorderColor='#D8D8D8'
                                                    placeholder={t('accepted_number')}
                                                    defaultValue={product.acceptedNumber === null ? 0 : product.acceptedNumber}
                                                    disabled
                                                />
                                            </Box>
                                            <>
                                                <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')}
                                                            defaultValue={product.weight}
                                                            disabled
                                                        />
                                                    </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,
                                                        }}
                                                        defaultValue={product.price}
                                                        disabled
                                                        mainBorderColor='#D8D8D8'
                                                        placeholder={t('price')}
                                                    />
                                                </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,
                                                        }}
                                                        disabled
                                                        value={totalPrice}
                                                        mainBorderColor='#D8D8D8'
                                                        placeholder={t('total_price')}
                                                    />
                                                </Box>
                                            </>
                                        </Box>
                                        <Divider color='#EBEFF6' />
                                    </Box>
                                );
                            })}
                        </Stack>
                    </Grid>
                </Grid>
            </Box>
        </StyledViewBox>
    );
};

export default DashboardBoxesOnePage;
