'use client';

import { Box, Button, Dialog, Grid, IconButton, Slide, Typography } from '@mui/material';
import { useMyNavigation } from '@/hooks/useMyNavigation';
import useMainFetch from '@/hooks/useMainFetch';
import { IUserData } from '@/app/[locale]/(views)/profile/components/IAboutUser';
import Loader from '@/components/common/Loader';
import { CloseIcon } from 'next/dist/client/components/react-dev-overlay/internal/icons/CloseIcon';
import { useState } from 'react';

interface IPassport {
    active: boolean;
    fullName: string;
    passportBackImage: string;
    passportFrontImage: string;
    passportPin: string;
    passportSeries: string;
}

const branches = [
    { value: 'TASHKENT_CITY', label: 'Toshkent shahri' },
    { value: 'FERGHANA', label: "Farg'ona viloyati" },
    { value: 'SAMARQAND', label: 'Samarqand viloyati' },
];

const Transition = (props: any) => <Slide direction='up' {...props} />;

const get_current_branches = (value: string | undefined) => branches.find(item => item.value === value)?.label || 'Toshkent';

export default function Page() {
    const { push } = useMyNavigation();
    const [selectedImage, setSelectedImage] = useState<string | null>(null);
    const [isModalOpen, setIsModalOpen] = useState(false);

    const handleImageClick = (image: string) => {
        setSelectedImage(image);
        setIsModalOpen(true);
    };

    const handleModalClose = () => {
        setIsModalOpen(false);
        setSelectedImage(null);
    };


    const {data, isLoading} = useMainFetch({
        key: "client-data",
        endpoint: "/me"
    })
    const clientData = data?.data?.data

    const passportsFetchData = useMainFetch({
        key: 'passports',
        endpoint: '/me/passports',
        generateData: res => res.data,
    });

    const passportsData: IPassport[] = passportsFetchData?.data?.data || [];

    const userFetchData = clientData as IUserData;

    const userData = [
        // {
        //     title: "To'liq ism",
        //     value: userFetchData?.name,
        // },
        {
            title: 'Telefon raqam',
            value: userFetchData?.phone,
        },
        {
            title: 'Kargo ID',
            value: userFetchData?.aviaCargoId,
        },
        {
            title: "Tug'ilgan kun",
            value: userFetchData?.dateOfBirth,
        },
        {
            title: 'Adress',
            value: userFetchData?.address,
        },
        {
            title: 'Qulay filial',
            value: get_current_branches(userFetchData?.region),
        },
    ];

    if (isLoading)
        return (
            <Box position={'relative'} sx={{ width: '100%', height: '100%', display: 'flex', justifyContent: 'center' }}>
                <Loader />
            </Box>
        );

    return (
        <Box p={5}>
            <Typography variant='h5' fontWeight='bold' mb={3}>
                {"Shaxsiy ma'lumotlar"}
            </Typography>

            <Grid container spacing={0}>
                {userData.map((item, index) => (
                    <Grid item xs={12} key={index} sx={{ borderBottom: '1px solid #e0e0e0', padding: '16px 0' }}>
                        <Typography variant='subtitle2' sx={{ fontWeight: 600, color: '#333', marginBottom: '4px' }}>
                            {item.title}
                        </Typography>
                        <Typography variant='body1' sx={{ color: '#555', fontSize: '1rem' }}>
                            {item.value || '...'}
                        </Typography>
                    </Grid>
                ))}
            </Grid>

            <Box sx={{ marginTop: '40px' }}>
                {passportsData.length > 0 && (
                    <Box mt={3}>
                        <Typography variant='h5' fontWeight='bold' mb={3}>
                            {"Passport Ma'lumotlari"}
                        </Typography>
                        <Grid container spacing={3}>
                            {passportsData.map((passport, index) => (
                                <Grid item xs={12} sm={6} md={4} key={index}>
                                    <Box
                                        sx={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            p: 3,
                                            borderRadius: 3,
                                            boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
                                            border: '1px solid',
                                            borderColor: 'grey.400',
                                            transition: 'transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out',
                                            '&:hover': {
                                                transform: 'scale(1.03)',
                                                boxShadow: '0 6px 18px rgba(0,0,0,0.25)',
                                            },
                                        }}
                                    >
                                        <Typography variant='h6' fontWeight='600' mb={2} color='text.primary'>
                                            {passport.fullName}
                                        </Typography>

                                        <Grid container spacing={1} alignItems='center'>
                                            <Grid item xs={6}>
                                                <Box
                                                    onClick={() => handleImageClick(passport.passportFrontImage)}
                                                    sx={{
                                                        cursor: 'pointer',
                                                        borderRadius: 2,
                                                        overflow: 'hidden',
                                                        aspectRatio: '4/3',
                                                    }}
                                                >
                                                    <Box
                                                        component='img'
                                                        src={passport.passportFrontImage}
                                                        alt='Passport oldi'
                                                        sx={{ width: '100%', height: '100%', objectFit: 'cover' }}
                                                    />
                                                </Box>
                                            </Grid>
                                            <Grid item xs={6}>
                                                <Box
                                                    onClick={() => handleImageClick(passport.passportBackImage)}
                                                    sx={{
                                                        cursor: 'pointer',
                                                        borderRadius: 2,
                                                        overflow: 'hidden',
                                                        aspectRatio: '4/3',
                                                    }}
                                                >
                                                    <Box
                                                        component='img'
                                                        src={passport.passportBackImage}
                                                        alt='Passport orqa'
                                                        sx={{ width: '100%', height: '100%', objectFit: 'cover' }}
                                                    />
                                                </Box>
                                            </Grid>

                                            <Box
                                                sx={{
                                                    display: 'flex',
                                                    justifyContent: 'space-between',
                                                    alignItems: 'center',
                                                    width: '100%',
                                                    margin: '20px 0 10px',
                                                }}
                                            >
                                                <Typography variant='body2' color='text.secondary'>
                                                    Seriya
                                                </Typography>
                                                <Box
                                                    sx={{
                                                        borderBottom: '2px dotted #99999999',
                                                        width: '100%',
                                                        position: 'relative',
                                                        top: '7px',
                                                        margin: '0 4px',
                                                    }}
                                                ></Box>
                                                <Typography variant='body2' color='text.secondary'>
                                                    {passport.passportSeries}
                                                </Typography>
                                            </Box>

                                            <Box
                                                sx={{
                                                    display: 'flex',
                                                    justifyContent: 'space-between',
                                                    alignItems: 'center',
                                                    width: '100%',
                                                    marginBottom: '10px',
                                                }}
                                            >
                                                <Typography variant='body2' color='text.secondary'>
                                                    PIN:
                                                </Typography>
                                                <Box
                                                    sx={{
                                                        borderBottom: '2px dotted #99999999',
                                                        width: '100%',
                                                        position: 'relative',
                                                        top: '7px',
                                                        margin: '0 4px',
                                                    }}
                                                ></Box>
                                                <Typography variant='body2' color='text.secondary'>
                                                    {passport.passportPin}
                                                </Typography>
                                            </Box>

                                            <Box
                                                sx={{
                                                    display: 'flex',
                                                    justifyContent: 'space-between',
                                                    alignItems: 'center',
                                                    width: '100%',
                                                }}
                                            >
                                                <Typography variant='body2' color='text.secondary'>
                                                    Holati:
                                                </Typography>
                                                <Box
                                                    sx={{
                                                        borderBottom: '2px dotted #99999999',
                                                        width: '100%',
                                                        position: 'relative',
                                                        top: '7px',
                                                        margin: '0 4px',
                                                    }}
                                                ></Box>
                                                <Typography variant='body2' color='text.secondary'>
                                                    {passport.active ? 'Faol' : 'Faolmas'}
                                                </Typography>
                                            </Box>
                                        </Grid>
                                    </Box>
                                </Grid>
                            ))}
                        </Grid>
                    </Box>
                )}
            </Box>
            {/*<Box marginTop={'14px'}>*/}
            {/*    {passportsData.length > 0 && (*/}
            {/*        <Box marginTop={'24px'}>*/}
            {/*            <Typography variant='h6' fontWeight='bold' mb={2}>*/}
            {/*                {"Passport Ma'lumotlari"}*/}
            {/*            </Typography>*/}

            {/*            <Grid container spacing={3}>*/}
            {/*                {passportsData.map((passport, index) => (*/}
            {/*                    <Grid item xs={12} sm={6} md={4} key={index}>*/}
            {/*                        <Box*/}
            {/*                            border={'1px solid #ddd'}*/}
            {/*                            borderRadius={'8px'}*/}
            {/*                            padding={'16px'}*/}
            {/*                            boxShadow={'0 2px 4px rgba(0, 0, 0, 0.1)'}*/}
            {/*                        >*/}
            {/*                            <Typography variant='subtitle1' fontWeight='bold' gutterBottom>*/}
            {/*                                {passport.fullName}*/}
            {/*                            </Typography>*/}
            {/*                            <Typography variant='body2' color='gray'>*/}
            {/*                                Seriya: {passport.passportSeries}*/}
            {/*                            </Typography>*/}
            {/*                            <Typography variant='body2' color='gray'>*/}
            {/*                                PIN: {passport.passportPin}*/}
            {/*                            </Typography>*/}
            {/*                            <Typography variant='body2' color='gray'>*/}
            {/*                                Faol: {passport.active ? 'Ha' : "Yo'q"}*/}
            {/*                            </Typography>*/}
            {/*                            <Box sx={{ display: 'flex', gap: '8px', marginTop: '10px', justifyContent: 'center' }}>*/}
            {/*                                <Box onClick={() => handleImageClick(passport.passportFrontImage)}>*/}
            {/*                                    <Box*/}
            {/*                                        component='img'*/}
            {/*                                        src={passport.passportFrontImage}*/}
            {/*                                        sx={{*/}
            {/*                                            width: '80px',*/}
            {/*                                            height: '80px',*/}
            {/*                                            objectFit: 'contain',*/}
            {/*                                            cursor: 'pointer',*/}
            {/*                                        }}*/}
            {/*                                        alt={'Passport oldi rasmi'}*/}
            {/*                                    />*/}
            {/*                                </Box>*/}
            {/*                                <Box onClick={() => handleImageClick(passport.passportBackImage)}>*/}
            {/*                                    <Box*/}
            {/*                                        component='img'*/}
            {/*                                        src={passport.passportBackImage}*/}
            {/*                                        sx={{*/}
            {/*                                            width: '80px',*/}
            {/*                                            height: '80px',*/}
            {/*                                            objectFit: 'contain',*/}
            {/*                                            cursor: 'pointer',*/}
            {/*                                        }}*/}
            {/*                                        alt={'Passport orqa taraf rasmi'}*/}
            {/*                                    />*/}
            {/*                                </Box>*/}
            {/*                            </Box>*/}
            {/*                        </Box>*/}
            {/*                    </Grid>*/}
            {/*                ))}*/}
            {/*            </Grid>*/}
            {/*        </Box>*/}
            {/*    )}*/}
            {/*</Box>*/}

            <Dialog
                open={isModalOpen}
                TransitionComponent={Transition}
                keepMounted
                onClose={handleModalClose}
                aria-describedby='alert-dialog-slide-description'
                fullWidth
            >
                <IconButton
                    aria-label='close'
                    onClick={handleModalClose}
                    sx={{
                        position: 'absolute',
                        right: 8,
                        top: 8,
                        color: theme => theme.palette.grey[500],
                    }}
                >
                    <CloseIcon />
                </IconButton>
                {selectedImage && (
                    <Box
                        sx={{
                            display: 'flex',
                            justifyContent: 'center',
                            padding: '24px',
                        }}
                    >
                        <Box
                            component='img'
                            src={selectedImage}
                            sx={{
                                maxWidth: '100%',
                                maxHeight: '80vh',
                                objectFit: 'contain',
                            }}
                            alt={'Kattalashtirilgan rasm'}
                        />
                    </Box>
                )}
            </Dialog>
            {/*<Box sx={{ display: 'flex', justifyContent: 'end', marginTop: '8px' }}>*/}
            {/*    <Button onClick={editHandler} sx={{ textTransform: 'capitalize' }}>*/}
            {/*        {'Tahrirlash'}*/}
            {/*    </Button>*/}
            {/*</Box>*/}
        </Box>
    );
}
