import React, { useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import {
  Box,
  Typography,
  Grid,
  Card,
  CardMedia,
  Button,
  Chip,
  Divider,
  TextField,
  IconButton,
  CircularProgress,
  Paper,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableRow,
  Breadcrumbs,
  Link,
  useTheme
} from '@mui/material';
import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
import AddIcon from '@mui/icons-material/Add';
import RemoveIcon from '@mui/icons-material/Remove';
import NavigateNextIcon from '@mui/icons-material/NavigateNext';
import { Rating } from '@mui/material';
import ProductReviews from '@components/ProductReviews';
import { Link as RouterLink } from 'react-router-dom';
import { useProduct, useAddToCart } from '@hooks/apiHooks';
import { useAuth } from '@hooks/reduxHooks';
import imageUtils from '@utils/imageUtils';

const ProductDetailPage = () => {
  const { id } = useParams();
  const navigate = useNavigate();
  const theme = useTheme();
  const { isAuthenticated, user } = useAuth();
  const [quantity, setQuantity] = useState(1);
  const [selectedImage, setSelectedImage] = useState(0);
  
  // Fetch product data
  const { data: products, isLoading, error } = useProduct(id);
  const addToCart = useAddToCart();
  let product = products?.length > 0 ? products[0] : null
  // Handle quantity changes
  const increaseQuantity = () => {
    if (product && quantity < product.stock_quantity) {
      setQuantity(quantity + 1);
    }
  };
  
  const decreaseQuantity = () => {
    if (quantity > 1) {
      setQuantity(quantity - 1);
    }
  };
  
  const handleQuantityChange = (e) => {
    const value = parseInt(e.target.value, 10);
    if (isNaN(value) || value < 1) {
      setQuantity(1);
    } else if (product && value > product.stock_quantity) {
      setQuantity(product.stock_quantity);
    } else {
      setQuantity(value);
    }
  };
  
  // Handle add to cart
  const handleAddToCart = () => {
    if (!isAuthenticated) {
      navigate('/auth/login', { state: { from: `/products/${id}` } });
      return;
    }
    
    addToCart.mutate({
      userId: user,
      productId: id,
      quantity
    });
  };
  
  // Format properties for display
  const getProductProperties = () => {
    if (!product) return [];
    
    const properties = [];
    
    if (product.category_name) {
      properties.push({ name: 'Category', value: product.category_name });
    }
    
    if (product.material_type) {
      properties.push({ name: 'Material', value: product.material_type });
    }
    
    if (product.color) {
      properties.push({ name: 'Color', value: product.color });
    }
    
    if (product.origin) {
      properties.push({ name: 'Origin', value: product.origin });
    }
    
    if (product.weight_grams) {
      properties.push({ name: 'Weight', value: `${product.weight_grams}g` });
    }
    
    if (product.length_cm) {
      properties.push({ name: 'Length', value: `${product.length_cm}cm` });
    }
    
    if (product.width_cm) {
      properties.push({ name: 'Width', value: `${product.width_cm}cm` });
    }
    
    if (product.height_cm) {
      properties.push({ name: 'Height', value: `${product.height_cm}cm` });
    }
    
    if (product.age) {
      properties.push({ name: 'Age', value: product.age });
    }
    
    return properties;
  };
  
  if (isLoading) {
    return (
      <Box sx={{ display: 'flex', justifyContent: 'center', my: 8 }}>
        <CircularProgress />
      </Box>
    );
  }
  
  if (error || !product) {
    return (
      <Box sx={{ my: 4 }}>
        <Typography variant="h5" color="error" gutterBottom>
          Error loading product details
        </Typography>
        <Button 
          variant="contained"
          component={RouterLink}
          to="/products"
        >
          Back to Products
        </Button>
      </Box>
    );
  }
  
  return (
    <Box>
      {/* Breadcrumbs navigation */}
      <Breadcrumbs 
        separator={<NavigateNextIcon fontSize="small" />}
        aria-label="breadcrumb"
        sx={{ mb: 3 }}
      >
        <Link component={RouterLink} to="/" color="inherit">
          Home
        </Link>
        <Link component={RouterLink} to="/products" color="inherit">
          Products
        </Link>
        <Link 
          component={RouterLink} 
          to={`/products?category=${product.category_name}`} 
          color="inherit"
        >
          {product.category_name}
        </Link>
        <Typography color="text.primary">{product.name}</Typography>
        {product.average_rating && (
          <Box sx={{ display: 'flex', alignItems: 'center', mt: 1, mb: 2 }}>
            <Rating 
              value={product.average_rating} 
              readOnly 
              precision={0.5}
            />
            <Typography variant="body1" color="text.secondary" sx={{ ml: 1 }}>
              {product.average_rating} ({product.review_count} {product.review_count === 1 ? 'review' : 'reviews'})
            </Typography>
          </Box>
        )}

        {!product.average_rating && (
          <Box sx={{ mt: 1, mb: 2 }}>
            <Typography variant="body2" color="text.secondary">
              No reviews yet
            </Typography>
          </Box>
        )}
      </Breadcrumbs>
      
      <Grid container spacing={4}>
        {/* Product Images */}
        <Grid item xs={12} md={6}>
          <Box sx={{ mb: 2 }}>
            <Card>
              <CardMedia
                component="img"
                image={
                  imageUtils.getImageUrl(product.images && product.images.length > 0
                    ? product.images[selectedImage]?.path
                    : '/images/placeholder.jpg')
                }
                alt={product.name}
                sx={{ 
                  height: 400, 
                  objectFit: 'contain',
                  bgcolor: 'background.paper'
                }}
              />
            </Card>
          </Box>
          
          {/* Thumbnail images */}
          {product.images && product.images.length > 1 && (
            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
              {product.images.map((image, index) => (
                <Box
                  key={image.id}
                  onClick={() => setSelectedImage(index)}
                  sx={{
                    width: 80,
                    height: 80,
                    cursor: 'pointer',
                    border: index === selectedImage ? `2px solid ${theme.palette.primary.main}` : '2px solid transparent',
                    borderRadius: 1,
                    overflow: 'hidden',
                  }}
                >
                  <img
                    src={image.path}
                    alt={`${product.name} thumbnail ${index + 1}`}
                    style={{ width: '100%', height: '100%', objectFit: 'cover' }}
                  />
                </Box>
              ))}
            </Box>
          )}
        </Grid>
        
        {/* Product Details */}
        <Grid item xs={12} md={6}>
          <Typography variant="h4" component="h1" gutterBottom>
            {product.name}
          </Typography>
          
          <Typography variant="h5" color="primary" gutterBottom>
            ${parseFloat(product.price).toFixed(2)}
          </Typography>
          
          {/* Tags */}
          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, my: 2 }}>
            {product.tags && product.tags.map((tag, index) => (
              <Chip 
                key={index}
                label={tag}
                component={RouterLink}
                to={`/products?tag=${tag}`}
                clickable
              />
            ))}
          </Box>
          
          <Typography variant="body1" paragraph sx={{ mt: 2 }}>
            {product.description}
          </Typography>
          
          <Divider sx={{ my: 3 }} />
          
          {/* Stock information */}
          <Box sx={{ mb: 3 }}>
            <Typography variant="subtitle1" gutterBottom>
              Availability: 
              <Chip 
                label={product.stock_quantity > 0 ? 'In Stock' : 'Out of Stock'} 
                color={product.stock_quantity > 0 ? 'success' : 'error'}
                size="small"
                sx={{ ml: 1 }}
              />
            </Typography>
            
            {product.stock_quantity > 0 && (
              <Typography variant="body2" color="text.secondary">
                {product.stock_quantity} items available
              </Typography>
            )}
          </Box>
          
          {/* Add to cart section */}
          {product.stock_quantity > 0 ? (
            <Box sx={{ display: 'flex', alignItems: 'center', mb: 3 }}>
              <Box sx={{ display: 'flex', alignItems: 'center', mr: 2 }}>
                <IconButton 
                  onClick={decreaseQuantity}
                  disabled={quantity <= 1}
                  size="small"
                >
                  <RemoveIcon />
                </IconButton>
                
                <TextField
                  value={quantity}
                  onChange={handleQuantityChange}
                  inputProps={{ min: 1, max: product.stock_quantity }}
                  sx={{ width: 60, mx: 1 }}
                  size="small"
                />
                
                <IconButton 
                  onClick={increaseQuantity}
                  disabled={quantity >= product.stock_quantity}
                  size="small"
                >
                  <AddIcon />
                </IconButton>
              </Box>
              
              <Button
                variant="contained"
                startIcon={<ShoppingCartIcon />}
                onClick={handleAddToCart}
                disabled={addToCart.isLoading}
                sx={{ flexGrow: 1 }}
              >
                {addToCart.isLoading ? 'Adding...' : 'Add to Cart'}
              </Button>
            </Box>
          ) : (
            <Button
              variant="outlined"
              color="error"
              disabled
              fullWidth
              sx={{ mb: 3 }}
            >
              Out of Stock
            </Button>
          )}
          
          {/* Product properties table */}
          <Typography variant="h6" gutterBottom>
            Product Details
          </Typography>
          
          <TableContainer component={Paper} variant="outlined" sx={{ mb: 3 }}>
            <Table aria-label="product specifications">
              <TableBody>
                {getProductProperties().map((prop) => (
                  <TableRow key={prop.name}>
                    <TableCell 
                      component="th" 
                      scope="row"
                      sx={{ 
                        width: '40%', 
                        bgcolor: 'background.paper', 
                        fontWeight: 'medium' 
                      }}
                    >
                      {prop.name}
                    </TableCell>
                    <TableCell>{prop.value}</TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
            <Grid item xs={12}>
              <Divider sx={{ my: 4 }} />
              <ProductReviews productId={id} />
            </Grid>
          </TableContainer>
        </Grid>
      </Grid>
    </Box>
  );
};

export default ProductDetailPage;