import { Close, LocalShipping, ShoppingCart } from "@mui/icons-material";
import { Alert, Box, Button, Card, Divider, Grid, IconButton, Rating, Snackbar, SnackbarCloseReason, Stack, TextField, Typography } from "@mui/material";
import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import Item from "../../components/Item";
import { useBasket } from "../BasketProvider";

export default function ProductInfo({ item }: { item: Item }) {

    const { t } = useTranslation();
    const [quantity, setQuantity] = useState<number>(1);
    const [open, setOpen] = useState<boolean>(false);
    const [imageDimensions, setImageDimensions] = useState({ width: 0, height: 0 });


    const { addToBasket } = useBasket();

    const handleClose = (
        _: React.SyntheticEvent | Event,
        reason?: SnackbarCloseReason,
    ) => {
        if (reason === 'clickaway') {
            return;
        }

        setOpen(false);
    };

    const action = (
        <React.Fragment>
            <IconButton
                size="small"
                aria-label={t('close')}
                color="inherit"
                onClick={handleClose}
            >
                <Close fontSize="small" />
            </IconButton>
        </React.Fragment>
    );


    const handleAddToCart = () => {
        addToBasket(item, quantity);
        setOpen(true);
        console.log(`Added {quantity} of €{item.name} to basket`);
    };

    const discountedPrice = item.price100 * (1 - item.discount100 / 100);

    const handleImageLoad = (event: React.SyntheticEvent<HTMLImageElement>) => {
        const { naturalWidth, naturalHeight } = event.currentTarget;
        setImageDimensions({ width: naturalWidth, height: naturalHeight });
    };

    const [imageUrl, setImageUrl] = useState<string>("/src/assets/default.jpg"); // Fallback-Bild

    useEffect(() => {
        const fetchImage = async () => {
            try {
                const response = await fetch(`http://localhost:8085/image?uuid=${item.uuid}`);
                const data = await response.text();
                if(data.length == 0) {
                    console.error("Got emtpy picture for article ", item.uuid);
                }
                setImageUrl("data:image/jpeg;base64," + data);
            } catch (error) {
                console.error("Fehler beim Laden des Bildes:", error);
            }
        };

        fetchImage();
    }, [item.uuid]);

    return (
        <Grid container spacing={4}>
            {/* Left Column - Image */}

            <Card elevation={2} sx={{ width: '100%', maxWidth: 400 }}>
                <Box
                    component="img"
                    src={imageUrl}
                    alt={item.name}
                    onLoad={handleImageLoad} // Event-Handler zum Ermitteln der Bildgröße
                    onError={(event) => {
                        event.currentTarget.src = "/src/assets/default.jpg"; // Standardbild setzen
                    }}
                    sx={{
                        maxWidth: imageDimensions.width > imageDimensions.height ? "100%" : "auto",
                        maxHeight: imageDimensions.height >= imageDimensions.width ? 400 : "auto",
                        width: "auto",
                        height: "auto",
                        objectFit: "contain",
                    }}
                />
            </Card>


            {/* Right Column - Product Details */}

            <Stack spacing={3}>
                <Typography variant="h4" component="h1">
                    {item.name}
                </Typography>

                <Box display="flex" alignItems="center" gap={1}>
                    <Rating value={item.rating /2} precision={0.01} readOnly />
                    <Typography variant="body2" color="text.secondary">
                        {item.rating > 0 ? `(${item.rating / 2} / 5)` : t('noRatingsYet')}

                    </Typography>
                </Box>

                <Stack direction="row" alignItems="center" spacing={2}>
                    {item.discount100 > 0 ? (
                        <>
                            <Typography variant="h4" color="green">
                                {(discountedPrice / 100).toFixed(2)} €
                            </Typography>
                            <Typography
                                variant="h6"
                                color="text.secondary"
                                sx={{ textDecoration: 'line-through' }}
                            >
                                {(item.price100 / 100).toFixed(2)} €
                            </Typography>
                            <Typography variant="h6" color="error">
                                -{item.discount100} %
                            </Typography>
                        </>
                    ) : (
                        <Typography variant="h4" color="green">
                            {(item.price100 / 100).toFixed(2)} €
                        </Typography>
                    )}
                </Stack>

                <Divider />

                <Box>
                    {item.stock > 10 ? (
                        <Alert severity="success" variant='outlined'>
                            {t('inStock')} ({item.stock} {t('available')})
                        </Alert>
                    ) : item.stock > 0 ? (
                        <Alert severity="warning" variant='outlined'>{t('almostSoldOut')} ({item.stock} {t('available')})</Alert>
                    ) : (
                        <Alert severity="error" variant='filled'>{t('outOfStock')}</Alert>
                    )}
                </Box>

                <Stack direction="row" spacing={2} alignItems="center">
                    <TextField
                        type="number"
                        label={t('quantity')}
                        value={quantity}
                        onChange={(e) => setQuantity(Math.max(1, parseInt(e.target.value)))}
                        InputProps={{ inputProps: { min: 1, max: item.stock } }}
                        sx={{ width: 100 }}
                    />
                    <Button
                        variant="contained"
                        size="large"
                        startIcon={<ShoppingCart />}
                        onClick={handleAddToCart}
                        disabled={item.stock <= 0}
                        fullWidth
                    >
                        {t('addToCart')}
                    </Button>
                </Stack>

                <Box sx={{ mt: 2 }}>
                    <Typography variant="body2" color="text.secondary">
                        <LocalShipping sx={{ mr: 1, verticalAlign: 'middle' }} />
                        {t('freeShipping')}
                    </Typography>
                </Box>

            </Stack>
            <Snackbar
                open={open}
                autoHideDuration={3000}
                onClose={handleClose}
                message={t('addedToCart')}
                action={action}
            />

        </Grid>
    );
}