import LocalShippingIcon from '@mui/icons-material/LocalShipping';
import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
import {
    Alert,
    Box,
    Button,
    Card,
    Container,
    Divider,
    Grid,
    Rating,
    Stack,
    TextField,
    Typography,
} from '@mui/material';
import { useState } from 'react';
import Item from '../components/Item';
import { useLocation } from 'react-router-dom';
import { useBasket } from '../helper/BasketProvider';


export default function Product() {
    const [quantity, setQuantity] = useState(1);
    const location = useLocation();
    const item = location.state?.item as Item;
    const { addToBasket } = useBasket();

    if (!item) {
        return <div>Item not found</div>;
    }
    

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

    const discountedPrice = item.price * (1 - item.discount / 100);

    return (
        <Container maxWidth="lg" sx={{ py: 4 }}>
            <Grid container spacing={4}>
                {/* Left Column - Image */}
               
                    <Card elevation={2} sx={{ width: '100%', maxWidth: 400 }}>
                        <Box
                            component="img"
                            src="/src/assets/HTW.jpg"
                            alt={item.name}
                            sx={{ width: '100%', height: 'auto' }}
                        />
                    </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} precision={0.5} readOnly />
                            <Typography variant="body2" color="text.secondary">
                                ({item.rating} / 5)
                            </Typography>
                        </Box>

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

                        <Divider />

                        <Typography variant="body1">
                            {item.description}
                        </Typography>

                        <Box>
                            {item.stock > 0 ? (
                                <Alert severity="success">
                                    In Stock ({item.stock} available)
                                </Alert>
                            ) : (
                                <Alert severity="error">Out of Stock</Alert>
                            )}
                        </Box>

                        <Stack direction="row" spacing={2} alignItems="center">
                            <TextField
                                type="number"
                                label="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={<ShoppingCartIcon />}
                                onClick={handleAddToCart}
                                disabled={item.stock === 0}
                                fullWidth
                            >
                                Add to Cart
                            </Button>
                        </Stack>

                        <Box sx={{ mt: 2 }}>
                            <Typography variant="body2" color="text.secondary">
                                <LocalShippingIcon sx={{ mr: 1, verticalAlign: 'middle' }} />
                                Free shipping on orders over $50
                            </Typography>
                        </Box>
                    </Stack>
                
            </Grid>
        </Container>
    );
};