'use client';

import { useEffect, useState } from 'react';
import { Box, TextField, Typography, Grid, Button, Card, CardMedia, CardContent } from '@mui/material';
import Layout from '@/components/layout/landing-layout';
import Container from '@/components/common/Container';
import { useMyNavigation } from '@/hooks/useMyNavigation';

export default function UserEditForm() {
    const { back, replace } = useMyNavigation();
    const [userData, setUserData] = useState({
        fullName: 'Helen Zhou',
        birthDate: '1990-11-11',
        phone: '+998 99 365 48 11',
        serialNumber: 'AB342534',
        pinfl: '12548965451254',
        address: 'Toshkent sh. Uchtepa 12',
        aviaID: 'AT010001',
        cargoID: 'T010001',
        branch: 'Toshkent sh',
    });
    const token = localStorage.getItem('token');

    const [passportFrontImage, setPassportFrontImage] = useState<string | null>(
        'https://a57.foxnews.com/static.foxnews.com/foxnews.com/content/uploads/2018/09/1200/675/Ireland-Plastic-Passports-1.jpg?ve=1&tl=1'
    );
    const [passportBackImage, setPassportBackImage] = useState<string | null>(
        'https://nebula.wsimg.com/08bfbadc8356b6a0ba6fd1a05dbc4987?AccessKeyId=80E5C6BFDBBCCE7AC676&disposition=0&alloworigin=1'
    );
    const [userImage, setUserImage] = useState<string | null>(
        'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8ZmVtYWxlJTIwcHJvZmlsZXxlbnwwfHwwfHx8MA%3D%3D'
    );

    useEffect(() => {
        if (!token) {
            replace('/');
        }
    }, []);

    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setUserData({ ...userData, [e.target.name]: e.target.value });
    };

    const handleImageUpload = (event: React.ChangeEvent<HTMLInputElement>, key?: string) => {
        if (event.target.files && event.target.files[0]) {
            const reader = new FileReader();
            reader.onload = e => {
                if (e.target) {
                    if (key === 'front') setPassportFrontImage(e.target.result as string);
                    else if (key === 'user') setUserImage(e.target.result as string);
                    else setPassportBackImage(e.target.result as string);
                }
            };
            reader.readAsDataURL(event.target.files[0]);
        }
    };

    return (
        <Layout>
            <Container>
                <Box sx={{ p: { xs: 2, sm: 4 }, mx: 'auto' }}>
                    <Typography variant='h6' fontWeight='bold' mb={2}>
                        {"Ma'lumotlarni tahrirlash"}
                    </Typography>

                    <Grid container spacing={2}>
                        <Grid item xs={12} sm={6}>
                            <TextField fullWidth label="To'liq ism" name='fullName' value={userData.fullName} onChange={handleChange} />
                        </Grid>
                        <Grid item xs={12} sm={6}>
                            <TextField
                                fullWidth
                                type='date'
                                label="Tug'ilgan kun"
                                name='birthDate'
                                value={userData.birthDate}
                                onChange={handleChange}
                                InputLabelProps={{ shrink: true }}
                            />
                        </Grid>
                        <Grid item xs={12} sm={6}>
                            <TextField fullWidth label='Telefon raqam' name='phone' value={userData.phone} onChange={handleChange} />
                        </Grid>
                        <Grid item xs={12} sm={6}>
                            <TextField
                                fullWidth
                                label='Seriya raqam'
                                name='serialNumber'
                                value={userData.serialNumber}
                                onChange={handleChange}
                            />
                        </Grid>
                        <Grid item xs={12} sm={6}>
                            <TextField fullWidth label='PINFL' name='pinfl' value={userData.pinfl} onChange={handleChange} />
                        </Grid>
                        <Grid item xs={12} sm={6}>
                            <TextField fullWidth label='Qulay filial' name='branch' value={userData.branch} onChange={handleChange} />
                        </Grid>
                        <Grid item xs={12} sm={6}>
                            <TextField fullWidth label='Adres' name='address' value={userData.address} onChange={handleChange} />
                        </Grid>
                        <Grid item xs={12} sm={6}>
                            <TextField fullWidth label='Avia ID' name='aviaID' value={userData.aviaID} onChange={handleChange} />
                        </Grid>
                        <Grid item xs={12} sm={6}>
                            <TextField fullWidth label='Kargo ID' name='cargoID' value={userData.cargoID} onChange={handleChange} />
                        </Grid>
                    </Grid>

                    <Box mt={3} sx={{ display: 'flex', gap: '50px' }}>
                        <Box>
                            <Typography variant='body1' fontWeight='bold' mb={1}>
                                Rasmingiz
                            </Typography>

                            <input
                                type='file'
                                accept='image/*'
                                onChange={e => handleImageUpload(e, 'user')}
                                style={{ display: 'none' }}
                                id='user-upload'
                            />
                            <label htmlFor='user-upload'>
                                <Card
                                    sx={{
                                        width: '80px',
                                        height: '80px',
                                        borderRadius: '50%',
                                        cursor: 'pointer',
                                        border: '1px dashed gray',
                                        display: 'inline-block',
                                    }}
                                >
                                    {userImage ? (
                                        <CardMedia
                                            component='img'
                                            sx={{
                                                width: '100%',
                                                height: '100%',
                                                objectFit: 'cover',
                                                objectPosition: 'center',
                                            }}
                                            image={userImage}
                                            alt='Passport Image'
                                        />
                                    ) : (
                                        <CardContent sx={{ textAlign: 'center', p: 4 }}>
                                            <Typography variant='body2' color='gray'>
                                                Yuklash uchun bosing
                                            </Typography>
                                        </CardContent>
                                    )}
                                </Card>
                            </label>
                        </Box>

                        <Box>
                            <Typography variant='body1' fontWeight='bold' mb={1}>
                                Passport rasmi
                            </Typography>
                            <input
                                type='file'
                                accept='image/*'
                                onChange={e => handleImageUpload(e, 'front')}
                                style={{ display: 'none' }}
                                id='passport-front-upload'
                            />
                            <input
                                type='file'
                                accept='image/*'
                                onChange={handleImageUpload}
                                style={{ display: 'none' }}
                                id='passport-back-upload'
                            />
                            <Box sx={{ display: 'flex', gap: '15px' }}>
                                <label htmlFor='passport-front-upload'>
                                    <Card
                                        sx={{
                                            maxWidth: 250,
                                            cursor: 'pointer',
                                            border: '1px dashed gray',
                                            display: 'inline-block',
                                        }}
                                    >
                                        {passportFrontImage ? (
                                            <CardMedia
                                                component='img'
                                                height='140'
                                                sx={{
                                                    maxWidth: '200px',
                                                    maxHeight: '200px',
                                                    objectFit: 'contain',
                                                    objectPosition: 'center',
                                                }}
                                                image={passportFrontImage}
                                                alt='Passport Image'
                                            />
                                        ) : (
                                            <CardContent sx={{ textAlign: 'center', p: 4 }}>
                                                <Typography variant='body2' color='gray'>
                                                    Yuklash uchun bosing
                                                </Typography>
                                            </CardContent>
                                        )}
                                    </Card>
                                </label>
                                {(!!passportFrontImage || !!passportBackImage) && (
                                    <label htmlFor='passport-back-upload'>
                                        <Card
                                            sx={{
                                                maxWidth: 250,
                                                cursor: 'pointer',
                                                border: '1px dashed gray',
                                                display: 'inline-block',
                                            }}
                                        >
                                            {!!passportBackImage ? (
                                                <CardMedia
                                                    component='img'
                                                    height='140'
                                                    sx={{
                                                        maxWidth: '200px',
                                                        maxHeight: '200px',
                                                        objectFit: 'contain',
                                                        objectPosition: 'center',
                                                    }}
                                                    image={passportBackImage}
                                                    alt='Passport Image'
                                                />
                                            ) : (
                                                <CardContent sx={{ textAlign: 'center', p: 4 }}>
                                                    <Typography variant='body2' color='gray'>
                                                        Yuklash uchun bosing
                                                    </Typography>
                                                </CardContent>
                                            )}
                                        </Card>
                                    </label>
                                )}
                            </Box>
                        </Box>
                    </Box>

                    <Box mt={3} display='flex' justifyContent='flex-end' gap={2}>
                        <Button onClick={back} variant='outlined' color='primary'>
                            Bekor qilish
                        </Button>
                        <Button variant='contained' color='primary'>
                            Saqlash
                        </Button>
                    </Box>
                </Box>
            </Container>
        </Layout>
    );
}