import {
    Box,
    Button,
    Container,
    Divider,
    Typography
} from '@mui/material';
import { useLocation, useNavigate } from 'react-router-dom';
import Item from '../components/Item';
import ProductInfo from '../helper/productpage/ProductInfo';
import Ratings from '../helper/productpage/Ratings';
import { useTranslation } from "react-i18next";
import { useTheme } from '@mui/material/styles';

export default function Product() {
    const { t } = useTranslation();
    const location = useLocation();
    const item = location.state?.item as Item;
    const navigate = useNavigate();
    const theme = useTheme(); // Zugriff auf das aktive Theme

    const handleGoHome = () => {
        navigate("/");
    };

    // Wenn kein Produkt vorhanden ist
    if (!item) {
        return (
            <Box
                sx={{
                    display: 'flex',
                    flexDirection: 'column',
                    alignItems: 'center',
                    justifyContent: 'center',
                    height: '100vh',
                    textAlign: 'center',
                    backgroundColor: theme.palette.background.default,
                    color: theme.palette.text.primary,
                    gap: '2rem',
                    px: 2,
                }}
            >
                <Typography variant="h1">
                    {t('productNotFound')}
                </Typography>
                <Typography variant="h5">
                    {t('productDoesNotExist')}
                </Typography>
                <Button
                    variant="contained"
                    color="primary"
                    size="large"
                    onClick={handleGoHome}
                >
                    {t('backToHome')}
                </Button>
            </Box>
        );
    }

    return (
        <Box
            sx={{
                backgroundColor: theme.palette.background.default,
                color: theme.palette.text.primary,
                minHeight: '100vh',
                py: 4,
            }}
        >
            <Container maxWidth="lg">
                <ProductInfo item={item} />

                <Box sx={{ my: 4 }}>
                    <Divider sx={{ backgroundColor: theme.palette.text.secondary }} />
                </Box>

                <Typography
                    variant="body2"
                    sx={{ color: theme.palette.text.secondary, mb: 1 }}
                >
                    {t('articleNumber')}: {item.uuid}
                </Typography>

                <Typography
                    variant="body1"
                    sx={{ color: theme.palette.text.primary, mb: 3 }}
                >
                    {item.description}
                </Typography>

                <Ratings itemId={item.uuid} />
            </Container>
        </Box>
    );
};
