import React, { Component } from "react";
import { Box, Typography, CardMedia, Stack, Chip, Button, Collapse } from "@mui/material";
import { Link } from "react-router-dom";
import parse from "html-react-parser";
import AddToCartButton from "./AddToCartButton.js";
import Images from "./Images.js";
import { withI18n } from "../i18n/withTranslation.js";
import ArticleQuestionForm from "./ArticleQuestionForm.js";
import ArticleRatingForm from "./ArticleRatingForm.js";
import ArticleAvailabilityForm from "./ArticleAvailabilityForm.js";

// Utility function to clean product names by removing trailing number in parentheses
const cleanProductName = (name) => {
  if (!name) return "";
  // Remove patterns like " (1)", " (3)", " (10)" at the end of the string
  return name.replace(/\s*\(\d+\)\s*$/, "").trim();
};

// Product detail page with image loading
class ProductDetailPage extends Component {
  constructor(props) {
    super(props);

    if (
      window.productDetailCache &&
      window.productDetailCache[this.props.seoName]
    ) {
      this.state = {
        product: window.productDetailCache[this.props.seoName],
        loading: false,
        error: null,
        attributeImages: {},
        attributes: [],
        isSteckling: false,
        imageDialogOpen: false,
        komponenten: [],
        komponentenLoaded: false,
        komponentenData: {}, // Store individual komponent data with loading states
        komponentenImages: {}, // Store tiny pictures for komponenten
        totalKomponentenPrice: 0,
        totalSavings: 0,
        // Collapsible sections state
        showQuestionForm: false,
        showRatingForm: false,
        showAvailabilityForm: false
      };
    } else {
      this.state = {
        product: null,
        loading: true,
        error: null,
        attributeImages: {},
        attributes: [],
        isSteckling: false,
        imageDialogOpen: false,
        komponenten: [],
        komponentenLoaded: false,
        komponentenData: {}, // Store individual komponent data with loading states
        komponentenImages: {}, // Store tiny pictures for komponenten
        totalKomponentenPrice: 0,
        totalSavings: 0,
        // Collapsible sections state
        showQuestionForm: false,
        showRatingForm: false,
        showAvailabilityForm: false
      };
    }
  }

  componentDidMount() {
    this.loadProductData();
  }

  componentDidUpdate(prevProps) {
    if (prevProps.seoName !== this.props.seoName)
      this.setState(
        { product: null, loading: true, error: null, imageDialogOpen: false },
        this.loadProductData
      );
    
    // Handle socket connection changes
    const wasConnected = prevProps.socket && prevProps.socket.connected;
    const isNowConnected = this.props.socket && this.props.socket.connected;
    
    if (!wasConnected && isNowConnected && this.state.loading) {
      // Socket just connected and we're still loading, retry loading data
      this.loadProductData();
    }
  }

  loadKomponentImage = (komponentId, pictureList) => {
    // Initialize cache if it doesn't exist
    if (!window.smallPicCache) {
      window.smallPicCache = {};
    }

    // Skip if no pictureList
    if (!pictureList || pictureList.length === 0) {
      return;
    }

    // Get the first image ID from pictureList
    const bildId = pictureList.split(',')[0];
    
    // Check if already cached
    if (window.smallPicCache[bildId]) {
      this.setState(prevState => ({
        komponentenImages: {
          ...prevState.komponentenImages,
          [komponentId]: window.smallPicCache[bildId]
        }
      }));
      return;
    }

    // Check if socketB is available
    if (!this.props.socketB || !this.props.socketB.connected) {
      console.log("SocketB not connected yet, skipping image load for komponent:", komponentId);
      return;
    }

    // Fetch image from server
    this.props.socketB.emit('getPic', { bildId, size: 'small' }, (res) => {
      if (res.success) {
        // Cache the image
        window.smallPicCache[bildId] = URL.createObjectURL(new Blob([res.imageBuffer], { type: 'image/jpeg' }));
        
        // Update state
        this.setState(prevState => ({
          komponentenImages: {
            ...prevState.komponentenImages,
            [komponentId]: window.smallPicCache[bildId]
          }
        }));
      } else {
        console.log('Error loading komponent image:', res);
      }
    });
  }

  loadKomponent = (id, count) => {
    // Initialize cache if it doesn't exist
    if (!window.productDetailCache) {
      window.productDetailCache = {};
    }

    // Check if this komponent is already cached
    if (window.productDetailCache[id]) {
      const cachedProduct = window.productDetailCache[id];
      
      // Load komponent image if available
      if (cachedProduct.pictureList) {
        this.loadKomponentImage(id, cachedProduct.pictureList);
      }
      
      // Update state with cached data
      this.setState(prevState => {
        const newKomponentenData = {
          ...prevState.komponentenData,
          [id]: {
            ...cachedProduct,
            count: parseInt(count),
            loaded: true
          }
        };
        
        // Check if all remaining komponenten are loaded
        const allLoaded = prevState.komponenten.every(k => 
          newKomponentenData[k.id] && newKomponentenData[k.id].loaded
        );
        
        // Calculate totals if all loaded
        let totalKomponentenPrice = 0;
        let totalSavings = 0;
        
        if (allLoaded) {
          totalKomponentenPrice = prevState.komponenten.reduce((sum, k) => {
            const komponentData = newKomponentenData[k.id];
            if (komponentData && komponentData.loaded) {
              return sum + (komponentData.price * parseInt(k.count));
            }
            return sum;
          }, 0);
          
          // Calculate savings (difference between buying individually vs as set)
          const setPrice = prevState.product ? prevState.product.price : 0;
          totalSavings = Math.max(0, totalKomponentenPrice - setPrice);
        }
        
        console.log("Cached komponent loaded:", id, "data:", newKomponentenData[id]);
        console.log("All loaded (cached):", allLoaded);
        
        return {
          komponentenData: newKomponentenData,
          komponentenLoaded: allLoaded,
          totalKomponentenPrice,
          totalSavings
        };
      });
      
      return;
    }

    // If not cached, fetch from server (similar to loadProductData)
    if (!this.props.socket || !this.props.socket.connected) {
      console.log("Socket not connected yet, waiting for connection to load komponent data");
      return;
    }

    // Mark this komponent as loading
    this.setState(prevState => ({
      komponentenData: {
        ...prevState.komponentenData,
        [id]: {
          ...prevState.komponentenData[id],
          loading: true,
          loaded: false,
          count: parseInt(count)
        }
      }
    }));

    this.props.socket.emit(
      "getProductView",
      { articleId: id },
      (res) => {
        if (res.success) {
          // Cache the successful response
          window.productDetailCache[id] = res.product;
          
          // Load komponent image if available
          if (res.product.pictureList) {
            this.loadKomponentImage(id, res.product.pictureList);
          }
          
          // Update state with loaded data
          this.setState(prevState => {
            const newKomponentenData = {
              ...prevState.komponentenData,
              [id]: {
                ...res.product,
                count: parseInt(count),
                loading: false,
                loaded: true
              }
            };
            
                    // Check if all remaining komponenten are loaded
        const allLoaded = prevState.komponenten.every(k => 
          newKomponentenData[k.id] && newKomponentenData[k.id].loaded
        );
            
            // Calculate totals if all loaded
            let totalKomponentenPrice = 0;
            let totalSavings = 0;
            
            if (allLoaded) {
              totalKomponentenPrice = prevState.komponenten.reduce((sum, k) => {
                const komponentData = newKomponentenData[k.id];
                if (komponentData && komponentData.loaded) {
                  return sum + (komponentData.price * parseInt(k.count));
                }
                return sum;
              }, 0);
              
              // Calculate savings (difference between buying individually vs as set)
              const setPrice = prevState.product ? prevState.product.price : 0;
              totalSavings = Math.max(0, totalKomponentenPrice - setPrice);
            }
            
            console.log("Updated komponentenData for", id, ":", newKomponentenData[id]);
            console.log("All loaded:", allLoaded);
            
            return {
              komponentenData: newKomponentenData,
              komponentenLoaded: allLoaded,
              totalKomponentenPrice,
              totalSavings
            };
          });
          
          console.log("getProductView (komponent)", res);
        } else {
          console.error("Error loading komponent:", res.error || "Unknown error", res);
          
          // Remove failed komponent from the list and check if all remaining are loaded
          this.setState(prevState => {
            const newKomponenten = prevState.komponenten.filter(k => k.id !== id);
            const newKomponentenData = { ...prevState.komponentenData };
            
            // Remove failed komponent from data
            delete newKomponentenData[id];
            
            // Check if all remaining komponenten are loaded
            const allLoaded = newKomponenten.length === 0 || newKomponenten.every(k => 
              newKomponentenData[k.id] && newKomponentenData[k.id].loaded
            );
            
            // Calculate totals if all loaded
            let totalKomponentenPrice = 0;
            let totalSavings = 0;
            
            if (allLoaded && newKomponenten.length > 0) {
              totalKomponentenPrice = newKomponenten.reduce((sum, k) => {
                const komponentData = newKomponentenData[k.id];
                if (komponentData && komponentData.loaded) {
                  return sum + (komponentData.price * parseInt(k.count));
                }
                return sum;
              }, 0);
              
              // Calculate savings (difference between buying individually vs as set)
              const setPrice = this.state.product ? this.state.product.price : 0;
              totalSavings = Math.max(0, totalKomponentenPrice - setPrice);
            }
            
            console.log("Removed failed komponent:", id, "remaining:", newKomponenten.length);
            console.log("All loaded after removal:", allLoaded);
            
            return {
              komponenten: newKomponenten,
              komponentenData: newKomponentenData,
              komponentenLoaded: allLoaded,
              totalKomponentenPrice,
              totalSavings
            };
          });
        }
      }
    );
  }

  loadProductData = () => {
    if (!this.props.socket || !this.props.socket.connected) {
      // Socket not connected yet, but don't show error immediately on first load
      // The componentDidUpdate will retry when socket connects
      console.log("Socket not connected yet, waiting for connection to load product data");
      return;
    }

    this.props.socket.emit(
      "getProductView",
      { seoName: this.props.seoName },
      (res) => {
        if (res.success) {
          res.product.seoName = this.props.seoName;
          
          // Initialize cache if it doesn't exist
          if (!window.productDetailCache) {
            window.productDetailCache = {};
          }
          
          // Cache the product data
          window.productDetailCache[this.props.seoName] = res.product;
          
          const komponenten = [];
          if(res.product.komponenten) {
            for(const komponent of res.product.komponenten.split(",")) {
              // Handle both "x" and "×" as separators
              const [id, count] = komponent.split(/[x×]/);
              komponenten.push({id: id.trim(), count: count.trim()});
            }
          }
          this.setState({
            product: res.product,
            loading: false,
            error: null,
            imageDialogOpen: false,
            attributes: res.attributes,
            komponenten: komponenten,
            komponentenLoaded: komponenten.length === 0 // If no komponenten, mark as loaded
          }, () => {
              if(komponenten.length > 0) {
                for(const komponent of komponenten) {
                  this.loadKomponent(komponent.id, komponent.count);
                }
              }
          });
          console.log("getProductView", res);

          // Initialize window-level attribute image cache if it doesn't exist
          if (!window.attributeImageCache) {
            window.attributeImageCache = {};
          }

          if (res.attributes && res.attributes.length > 0) {
            const attributeImages = {};

            for (const attribute of res.attributes) {
              const cacheKey = attribute.kMerkmalWert;

              if (attribute.cName == "Anzahl")
                this.setState({ isSteckling: true });

              // Check if we have a cached result (either URL or negative result)
              if (window.attributeImageCache[cacheKey]) {
                const cached = window.attributeImageCache[cacheKey];
                if (cached.url) {
                  // Use cached URL
                  attributeImages[cacheKey] = cached.url;
                }
              } else {
                // Not in cache, fetch from server
                if (this.props.socketB && this.props.socketB.connected) {
                  this.props.socketB.emit(
                    "getAttributePicture",
                    { id: cacheKey },
                    (res) => {
                    console.log("getAttributePicture", res);
                    if (res.success && !res.noPicture) {
                      const blob = new Blob([res.imageBuffer], {
                        type: "image/jpeg",
                      });
                      const url = URL.createObjectURL(blob);

                      // Cache the successful URL
                      window.attributeImageCache[cacheKey] = {
                        url: url,
                        timestamp: Date.now(),
                      };

                      // Update state and force re-render
                      this.setState(prevState => ({
                        attributeImages: {
                          ...prevState.attributeImages,
                          [cacheKey]: url
                        }
                      }));
                    } else {
                      // Cache negative result to avoid future requests
                      // This handles both failure cases and success with noPicture: true
                      window.attributeImageCache[cacheKey] = {
                        noImage: true,
                        timestamp: Date.now(),
                      };
                    }
                  }
                );
                }
              }
            }

            // Set initial state with cached images
            if (Object.keys(attributeImages).length > 0) {
              this.setState({ attributeImages });
            }
          }
        } else {
          console.error(
            "Error loading product:",
            res.error || "Unknown error",
            res
          );
          this.setState({
            product: null,
            loading: false,
            error: "Error loading product",
            imageDialogOpen: false,
          });
        }
      }
    );
  };

  handleOpenDialog = () => {
    this.setState({ imageDialogOpen: true });
  };

  handleCloseDialog = () => {
    this.setState({ imageDialogOpen: false });
  };

  toggleQuestionForm = () => {
    this.setState(prevState => ({ 
      showQuestionForm: !prevState.showQuestionForm,
      showRatingForm: false,
      showAvailabilityForm: false
    }), () => {
      if (this.state.showQuestionForm) {
        setTimeout(() => this.scrollToSection('question-form'), 100);
      }
    });
  };

  toggleRatingForm = () => {
    this.setState(prevState => ({ 
      showRatingForm: !prevState.showRatingForm,
      showQuestionForm: false,
      showAvailabilityForm: false
    }), () => {
      if (this.state.showRatingForm) {
        setTimeout(() => this.scrollToSection('rating-form'), 100);
      }
    });
  };

  toggleAvailabilityForm = () => {
    this.setState(prevState => ({ 
      showAvailabilityForm: !prevState.showAvailabilityForm,
      showQuestionForm: false,
      showRatingForm: false
    }), () => {
      if (this.state.showAvailabilityForm) {
        setTimeout(() => this.scrollToSection('availability-form'), 100);
      }
    });
  };

  scrollToSection = (sectionId) => {
    const element = document.getElementById(sectionId);
    if (element) {
      element.scrollIntoView({ 
        behavior: 'smooth',
        block: 'start'
      });
    }
  };

  render() {
    const { product, loading, error, attributeImages, isSteckling, attributes, komponentenLoaded, komponentenData, komponentenImages, totalKomponentenPrice, totalSavings } =
      this.state;

    if (loading) {
      return (
        <Box
          sx={{
            p: 4,
            textAlign: "center",
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            minHeight: "60vh",
          }}
        >
          <Typography variant="h5" gutterBottom>
            Produkt wird geladen...
          </Typography>
        </Box>
      );
    }

    if (error) {
      return (
        <Box sx={{ p: 4, textAlign: "center" }}>
          <Typography variant="h5" gutterBottom color="error">
            Fehler
          </Typography>
          <Typography>{error}</Typography>
          <Link to="/" style={{ textDecoration: "none" }}>
            <Typography color="primary" sx={{ mt: 2 }}>
              {this.props.t ? this.props.t('product.backToHome') : 'Zurück zur Startseite'}
            </Typography>
          </Link>
        </Box>
      );
    }

    if (!product) {
      return (
        <Box sx={{ p: 4, textAlign: "center" }}>
          <Typography variant="h5" gutterBottom>
            Produkt nicht gefunden
          </Typography>
          <Typography>
            Das gesuchte Produkt existiert nicht oder wurde entfernt.
          </Typography>
          <Link to="/" style={{ textDecoration: "none" }}>
            <Typography color="primary" sx={{ mt: 2 }}>
              {this.props.t ? this.props.t('product.backToHome') : 'Zurück zur Startseite'}
            </Typography>
          </Link>
        </Box>
      );
    }
    // Format price with tax
    const priceWithTax = new Intl.NumberFormat("de-DE", {
      style: "currency",
      currency: "EUR",
    }).format(product.price);

    return (
      <Box
        sx={{
          p: { xs: 2, md: 2 },
          pb: { xs: 4, md: 8 },
          maxWidth: "1400px",
          mx: "auto",
        }}
      >
        {/* Breadcrumbs */}
        <Box
          sx={{
            mb: 2,
            position: ["-webkit-sticky", "sticky"], // Provide both prefixed and standard
            top: {
              xs: "80px",
              sm: "80px",
              md: "80px",
              lg: "80px",
            } /* Offset to sit below the header 120 mith menu for md and lg*/,
            left: 0,
            width: "100%",
            display: "flex",
            zIndex: (theme) =>
              theme.zIndex.appBar - 1 /* Just below the AppBar */,
            py: 0,
            px: 2,
          }}
        >
          <Box
            sx={{
              ml: { xs: 0, md: 0 },
              display: "inline-flex",
              px: 0,
              py: 1,
              backgroundColor: "#2e7d32", //primary dark green
              borderRadius: 1,
            }}
          >
            <Typography variant="body2" color="text.secondary">
              <Link
                to="/"
                onClick={() => this.props.navigate(-1)}
                style={{
                  paddingLeft: 16,
                  paddingRight: 16,
                  paddingTop: 8,
                  paddingBottom: 8,
                  textDecoration: "none",
                  color: "#fff",
                  fontWeight: "bold",
                }}
              >
                {this.props.t ? this.props.t('common.back') : 'Zurück'}
              </Link>
            </Typography>
          </Box>
        </Box>

        <Box
          sx={{
            display: "flex",
            flexDirection: { xs: "column", md: "row" },
            gap: 4,
            background: "#fff",
            borderRadius: 2,
            boxShadow: "0 2px 8px rgba(0,0,0,0.08)",
          }}
        >
          <Box
            sx={{
              width: { xs: "100%", sm: "555px" },
              maxWidth: "100%",
              minHeight: "400px",
              background: "#f8f8f8",
              display: "flex",
              flexDirection: "column",
              alignItems: "center",
              justifyContent: "center",
            }}
          >
            {!product.pictureList && (
              <CardMedia
                component="img"
                height="400"
                image="/assets/images/nopicture.jpg"
                alt={product.name}
                sx={{ objectFit: "cover" }}
              />
            )}
            {product.pictureList && (
              <Images
                socket={this.props.socket}
                socketB={this.props.socketB}
                pictureList={product.pictureList}
                fullscreenOpen={this.state.imageDialogOpen}
                onOpenFullscreen={this.handleOpenDialog}
                onCloseFullscreen={this.handleCloseDialog}
              />
            )}
          </Box>

          {/* Product Details */}
          <Box
            sx={{
              flex: "1 1 60%",
              p: { xs: 2, md: 4 },
              display: "flex",
              flexDirection: "column",
            }}
          >
            {/* Product identifiers */}
            <Box sx={{ mb: 1 }}>
              <Typography variant="body2" color="text.secondary">
                {this.props.t ? this.props.t('product.articleNumber') : 'Artikelnummer'}: {product.articleNumber} {product.gtin ? ` | GTIN: ${product.gtin}` : ""}
              </Typography>
            </Box>

            {/* Product title */}
            <Typography
              variant="h4"
              component="h1"
              gutterBottom
              sx={{ fontWeight: 600, color: "#333" }}
            >
              {cleanProductName(product.name)}
            </Typography>

            {/* Manufacturer if available */}
            {product.manufacturer && (
              <Box sx={{ display: "flex", alignItems: "center", mb: 2 }}>
                <Typography variant="body2" sx={{ fontStyle: "italic" }}>
                  {this.props.t ? this.props.t('product.manufacturer') : 'Hersteller'}: {product.manufacturer}
                </Typography>
              </Box>
            )}

            {/* Attribute images and chips with action buttons */}
            {(attributes.some(attr => attributeImages[attr.kMerkmalWert]) || attributes.some(attr => !attributeImages[attr.kMerkmalWert])) && (
              <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", mb: 2, gap: 2 }}>
                <Stack direction="row" spacing={2} sx={{ flexWrap: "wrap", gap: 1, flex: 1 }}>
                  {attributes
                    .filter(attribute => attributeImages[attribute.kMerkmalWert])
                    .map((attribute) => {
                      const key = attribute.kMerkmalWert;
                      return (
                        <Box key={key} sx={{ mb: 1,border: "1px solid #e0e0e0", borderRadius: 1 }}>
                          <CardMedia
                            component="img"
                            style={{ width: "72px", height: "98px" }}
                            image={attributeImages[key]}
                            alt={`Attribute ${key}`}
                          />
                        </Box>
                      );
                    })}
                  {attributes
                    .filter(attribute => !attributeImages[attribute.kMerkmalWert])
                    .map((attribute) => (
                      <Chip
                        key={attribute.kMerkmalWert}
                        label={attribute.cWert}
                        disabled
                        sx={{ mb: 1 }}
                      />
                    ))}
                </Stack>
                
                {/* Right-aligned action buttons */}
                <Stack direction="column" spacing={1} sx={{ flexShrink: 0 }}>
                  <Button
                    variant="outlined"
                    size="small"
                    onClick={this.toggleQuestionForm}
                    sx={{ 
                      fontSize: "0.75rem",
                      px: 1.5,
                      py: 0.5,
                      minWidth: "auto",
                      whiteSpace: "nowrap"
                    }}
                  >
                    Frage zum Artikel
                  </Button>
                  <Button
                    variant="outlined"
                    size="small"
                    onClick={this.toggleRatingForm}
                    sx={{ 
                      fontSize: "0.75rem",
                      px: 1.5,
                      py: 0.5,
                      minWidth: "auto",
                      whiteSpace: "nowrap"
                    }}
                  >
                    Artikel Bewerten
                  </Button>
                  {(product.available !== 1 && product.availableSupplier !== 1) && (
                    <Button
                      variant="outlined"
                      size="small"
                      onClick={this.toggleAvailabilityForm}
                      sx={{ 
                        fontSize: "0.75rem",
                        px: 1.5,
                        py: 0.5,
                        minWidth: "auto",
                        whiteSpace: "nowrap",
                        borderColor: "warning.main",
                        color: "warning.main",
                        "&:hover": {
                          borderColor: "warning.dark",
                          backgroundColor: "warning.light"
                        }
                      }}
                    >
                      Verfügbarkeit anfragen
                    </Button>
                  )}
                </Stack>
              </Box>
            )}

            {/* Weight */}
            {product.weight > 0 && (
              <Box sx={{ mb: 2 }}>
                <Typography variant="body2" color="text.secondary">
                  {this.props.t ? this.props.t('product.weight', { weight: product.weight.toFixed(1).replace(".", ",") }) : `Gewicht: ${product.weight.toFixed(1).replace(".", ",")} kg`}
                </Typography>
              </Box>
            )}

            {/* Price and availability section */}
            <Box
              sx={{
                mt: "auto",
                p: 3,
                background: "#f9f9f9",
                borderRadius: 2,
              }}
            >
              <Box
                sx={{
                  display: "flex",
                  flexDirection: { xs: "column", sm: "row" },
                  justifyContent: "space-between",
                  alignItems: { xs: "flex-start", sm: "flex-start" },
                  gap: 2,
                }}
              >
                <Box>
                  <Typography
                    variant="h4"
                    color="primary"
                    sx={{ fontWeight: "bold" }}
                  >
                    {priceWithTax}
                  </Typography>
                  <Typography variant="body2" color="text.secondary">
                    {this.props.t ? this.props.t('product.inclVat', { vat: product.vat }) : `inkl. ${product.vat}% MwSt.`}
                    {product.cGrundEinheit && product.fGrundPreis && (
                      <>; {new Intl.NumberFormat('de-DE', {style: 'currency', currency: 'EUR'}).format(product.fGrundPreis)}/{product.cGrundEinheit}</>
                    )}
                  </Typography>

                  {product.versandklasse &&
                    product.versandklasse != "standard" &&
                    product.versandklasse != "kostenlos" && (
                      <Typography variant="body2" color="text.secondary">
                        {product.versandklasse}
                      </Typography>
                    )}
                </Box>

                {/* Savings comparison - positioned between price and cart button */}
                {product.komponenten && komponentenLoaded && totalKomponentenPrice > product.price && 
                 (totalKomponentenPrice - product.price >= 2 && 
                  (totalKomponentenPrice - product.price) / product.price >= 0.02) && (
                  <Box sx={{ 
                    display: "flex", 
                    alignItems: "center", 
                    justifyContent: "center",
                    minWidth: { xs: "100%", sm: "200px" }
                  }}>
                    <Box sx={{ p: 2, borderRadius: 1, backgroundColor: "#e8f5e8", textAlign: "center" }}>
                      <Typography 
                        variant="body2" 
                        sx={{ 
                          fontWeight: "bold",
                          color: "success.main"
                        }}
                      >
                        {this.props.t ? this.props.t('product.youSave', { 
                          amount: new Intl.NumberFormat("de-DE", {
                            style: "currency",
                            currency: "EUR",
                          }).format(totalKomponentenPrice - product.price)
                        }) : `Sie sparen: ${new Intl.NumberFormat("de-DE", {
                          style: "currency",
                          currency: "EUR",
                        }).format(totalKomponentenPrice - product.price)}`}
                      </Typography>
                      <Typography variant="caption" color="text.secondary">
                        {this.props.t ? this.props.t('product.cheaperThanIndividual') : 'Günstiger als Einzelkauf'}
                      </Typography>
                    </Box>
                  </Box>
                )}

                <Box
                  sx={{
                    display: "flex",
                    flexDirection: { xs: "column", sm: "row" },
                    gap: 2,
                    alignItems: "flex-start",
                  }}
                >
                  {isSteckling && product.available == 1 && (
                    <Box
                      sx={{
                        display: "flex",
                        flexDirection: "column",
                      }}
                    >
                      <AddToCartButton
                        steckling={true}
                        cartButton={true}
                        seoName={product.seoName}
                        pictureList={product.pictureList}
                        available={product.available}
                        id={product.id + "steckling"}
                        price={0}
                        vat={product.vat}
                        weight={product.weight}
                        availableSupplier={product.availableSupplier}
                        komponenten={product.komponenten}
                        name={cleanProductName(product.name) + " Stecklingsvorbestellung 1 Stück"}
                        versandklasse={"nur Abholung"}
                      />
                      <Typography 
                        variant="caption" 
                        sx={{ 
                          fontStyle: "italic",
                          color: "text.secondary",
                          textAlign: "center",
                          mt: 1
                        }}
                      >
                        {this.props.t ? this.props.t('product.pickupPrice') : 'Abholpreis: 19,90 € pro Steckling.'}
                      </Typography>
                    </Box>
                  )}
                  <Box
                    sx={{
                      display: "flex",
                      flexDirection: "column",
                    }}
                  >
                    <AddToCartButton
                      cartButton={true}
                      seoName={product.seoName}
                      pictureList={product.pictureList}
                      available={product.available}
                      id={product.id}
                      availableSupplier={product.availableSupplier}
                      komponenten={product.komponenten}
                      cGrundEinheit={product.cGrundEinheit}
                      fGrundPreis={product.fGrundPreis}
                      price={product.price}
                      vat={product.vat}
                      weight={product.weight}
                      name={cleanProductName(product.name)}
                      versandklasse={product.versandklasse}
                    />

                    <Typography 
                      variant="caption" 
                      sx={{ 
                        fontStyle: "italic",
                        color: "text.secondary",
                        textAlign: "center",
                        mt: 1
                      }}
                    >
                      {product.id.toString().endsWith("steckling") ? 
                        (this.props.t ? this.props.t('delivery.times.cutting14Days') : "Lieferzeit: 14 Tage") :
                        product.available == 1 ? 
                          (this.props.t ? this.props.t('delivery.times.standard2to3Days') : "Lieferzeit: 2-3 Tage") : 
                          product.availableSupplier == 1 ? 
                            (this.props.t ? this.props.t('delivery.times.supplier7to9Days') : "Lieferzeit: 7-9 Tage") : ""}
                    </Typography>
                  </Box>
                </Box>
              </Box>
            </Box>
          </Box>
        </Box>

        {/* Product full description */}
        {product.description && (
          <Box
            sx={{
              mt: 4,
              p: 4,
              background: "#fff",
              borderRadius: 2,
              boxShadow: "0 2px 8px rgba(0,0,0,0.08)",
            }}
          >
            <Box
              sx={{
                mt: 2,
                lineHeight: 1.7,
                "& p": { mt: 0, mb: 2 },
                "& strong": { fontWeight: 600 },
              }}
            >
              {parse(product.description)}
            </Box>
          </Box>
        )}

        {/* Article Question Form */}
        <Collapse in={this.state.showQuestionForm}>
          <div id="question-form">
            <ArticleQuestionForm 
              productId={product.id}
              productName={cleanProductName(product.name)}
              socket={this.props.socket}
            />
          </div>
        </Collapse>

        {/* Article Rating Form */}
        <Collapse in={this.state.showRatingForm}>
          <div id="rating-form">
            <ArticleRatingForm 
              productId={product.id}
              productName={cleanProductName(product.name)}
              socket={this.props.socket}
            />
          </div>
        </Collapse>

        {/* Article Availability Form - only show for out of stock items */}
        {(product.available !== 1 && product.availableSupplier !== 1) && (
          <Collapse in={this.state.showAvailabilityForm}>
            <ArticleAvailabilityForm 
              productId={product.id}
              productName={cleanProductName(product.name)}
              socket={this.props.socket}
            />
          </Collapse>
        )}

        {product.komponenten && product.komponenten.split(",").length > 0 && (
          <Box sx={{ mt: 4, p: 4, background: "#fff", borderRadius: 2, boxShadow: "0 2px 8px rgba(0,0,0,0.08)" }}>
            <Typography variant="h4" gutterBottom>{this.props.t ? this.props.t('product.consistsOf') : 'Bestehend aus:'}</Typography>
            <Box sx={{ maxWidth: 800, mx: "auto" }}>
            
                        {(console.log("komponentenLoaded:", komponentenLoaded), komponentenLoaded) ? (
              <>
                {console.log("Rendering loaded komponenten:", this.state.komponenten.length, "komponentenData:", Object.keys(komponentenData).length)}
                {this.state.komponenten.map((komponent, index) => {
                  const komponentData = komponentenData[komponent.id];
                  console.log(`Rendering komponent ${komponent.id}:`, komponentData);
                  
                  // Don't show border on last item (pricing section has its own top border)
                  const isLastItem = index === this.state.komponenten.length - 1;
                  const showBorder = !isLastItem;
                  
                  if (!komponentData || !komponentData.loaded) {
                    return (
                      <Box key={komponent.id} sx={{ 
                        display: "flex", 
                        justifyContent: "space-between", 
                        alignItems: "center", 
                        py: 1, 
                        borderBottom: showBorder ? "1px solid #eee" : "none",
                        minHeight: "70px" // Consistent height to prevent layout shifts
                      }}>
                        <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
                          <Box sx={{ width: 50, height: 50, flexShrink: 0, backgroundColor: "#f5f5f5", borderRadius: 1, border: "1px solid #e0e0e0" }}>
                            {/* Empty placeholder for image */}
                          </Box>
                          <Box>
                            <Typography variant="body1">
                              {index + 1}. Lädt...
                            </Typography>
                            <Typography variant="body2" color="text.secondary">
                              {komponent.count}x
                            </Typography>
                          </Box>
                        </Box>
                        <Typography variant="body1" sx={{ fontWeight: 500 }}>
                          -
                        </Typography>
                      </Box>
                    );
                  }
                  
                  const itemPrice = komponentData.price * parseInt(komponent.count);
                  const formattedPrice = new Intl.NumberFormat("de-DE", {
                    style: "currency",
                    currency: "EUR",
                  }).format(itemPrice);
                  
                  return (
                    <Box 
                      key={komponent.id} 
                      component={Link}
                      to={`/Artikel/${komponentData.seoName}`}
                      sx={{ 
                        display: "flex", 
                        justifyContent: "space-between", 
                        alignItems: "center", 
                        py: 1, 
                        borderBottom: showBorder ? "1px solid #eee" : "none",
                        textDecoration: "none",
                        color: "inherit",
                        minHeight: "70px", // Consistent height to prevent layout shifts
                        "&:hover": {
                          backgroundColor: "#f5f5f5"
                        }
                      }}
                    >
                      <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
                        <Box sx={{ width: 50, height: 50, flexShrink: 0 }}>
                          {komponentenImages[komponent.id] ? (
                            <CardMedia
                              component="img"
                              height="50"
                              image={komponentenImages[komponent.id]}
                              alt={komponentData.name}
                              sx={{ 
                                objectFit: "contain",
                                borderRadius: 1,
                                border: "1px solid #e0e0e0"
                              }}
                            />
                          ) : (
                            <CardMedia
                              component="img"
                              height="50"
                              image="/assets/images/nopicture.jpg"
                              alt={komponentData.name}
                              sx={{ 
                                objectFit: "contain",
                                borderRadius: 1,
                                border: "1px solid #e0e0e0"
                              }}
                            />
                          )}
                        </Box>
                        <Box>
                          <Typography variant="body1" sx={{ fontWeight: 500 }}>
                            {index + 1}. {cleanProductName(komponentData.name)}
                          </Typography>
                          <Typography variant="body2" color="text.secondary">
                            {komponent.count}x à {new Intl.NumberFormat("de-DE", {
                              style: "currency",
                              currency: "EUR",
                            }).format(komponentData.price)}
                          </Typography>
                        </Box>
                      </Box>
                      <Typography variant="body1" sx={{ fontWeight: 500 }}>
                        {formattedPrice}
                      </Typography>
                    </Box>
                  );
                })}
                
                {/* Total price and savings display - only show when prices differ meaningfully */}
                {totalKomponentenPrice > product.price && 
                 (totalKomponentenPrice - product.price >= 2 && 
                  (totalKomponentenPrice - product.price) / product.price >= 0.02) && (
                  <Box sx={{ mt: 3, pt: 2, borderTop: "2px solid #eee" }}>
                    <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 1 }}>
                      <Typography variant="h6">
                        {this.props.t ? this.props.t('product.individualPriceTotal') : 'Einzelpreis gesamt:'}
                      </Typography>
                      <Typography variant="h6" sx={{ textDecoration: "line-through", color: "text.secondary" }}>
                        {new Intl.NumberFormat("de-DE", {
                          style: "currency",
                          currency: "EUR",
                        }).format(totalKomponentenPrice)}
                      </Typography>
                    </Box>
                    <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 1 }}>
                      <Typography variant="h6">
                        {this.props.t ? this.props.t('product.setPrice') : 'Set-Preis:'}
                      </Typography>
                      <Typography variant="h6" color="primary" sx={{ fontWeight: "bold" }}>
                        {new Intl.NumberFormat("de-DE", {
                          style: "currency",
                          currency: "EUR",
                        }).format(product.price)}
                      </Typography>
                    </Box>
                    {totalSavings > 0 && (
                      <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", mt: 2, p: 2, backgroundColor: "#e8f5e8", borderRadius: 1 }}>
                        <Typography variant="h6" color="success.main" sx={{ fontWeight: "bold" }}>
                          {this.props.t ? this.props.t('product.yourSavings') : 'Ihre Ersparnis:'}
                        </Typography>
                        <Typography variant="h6" color="success.main" sx={{ fontWeight: "bold" }}>
                          {new Intl.NumberFormat("de-DE", {
                            style: "currency",
                            currency: "EUR",
                          }).format(totalSavings)}
                        </Typography>
                      </Box>
                    )}
                  </Box>
                )}
              </>
            ) : (
              // Loading state
              <Box>
                {this.state.komponenten.map((komponent, index) => {
                  // For loading state, we don't know if pricing will be shown, so show all borders
                  return (
                    <Box key={komponent.id} sx={{ 
                      display: "flex", 
                      justifyContent: "space-between", 
                      alignItems: "center", 
                      py: 1, 
                      borderBottom: "1px solid #eee",
                      minHeight: "70px" // Consistent height to prevent layout shifts
                    }}>
                    <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
                      <Box sx={{ width: 50, height: 50, flexShrink: 0, backgroundColor: "#f5f5f5", borderRadius: 1, border: "1px solid #e0e0e0" }}>
                        {/* Empty placeholder for image */}
                      </Box>
                      <Box>
                        <Typography variant="body1">
                          {this.props.t ? this.props.t('product.loadingComponentDetails', { index: index + 1 }) : `${index + 1}. Lädt Komponent-Details...`}
                        </Typography>
                        <Typography variant="body2" color="text.secondary">
                          {komponent.count}x
                        </Typography>
                      </Box>
                    </Box>
                    <Typography variant="body1" sx={{ fontWeight: 500 }}>
                      -
                    </Typography>
                                      </Box>
                  );
                })}
              </Box>
            )}
            </Box>
          </Box>
        )}
      </Box>
    );
  }
}

export default withI18n()(ProductDetailPage);