import React, { useState, useEffect, useRef } from 'react';
import { useParams, Link, useNavigate } from 'react-router-dom';
import { useQuery } from '@tanstack/react-query';
import { apiClient } from '@/lib/api/client';
import { useCartStore } from '@/lib/cart/store';
import { useProductSettings } from '@/hooks/useAppearanceSettings';
import { useWishlist } from '@/hooks/useWishlist';
import { useModules } from '@/hooks/useModules';
import { Button } from '@/components/ui/button';
import Container from '@/components/Layout/Container';
import { ProductCard } from '@/components/ProductCard';
import { formatPrice } from '@/lib/currency';
import { ShoppingCart, Minus, Plus, ArrowLeft, ChevronLeft, ChevronRight, Heart } from 'lucide-react';
import { toast } from 'sonner';
import SEOHead from '@/components/SEOHead';
import type { Product as ProductType, ProductsResponse } from '@/types/product';

export default function Product() {
  const { slug } = useParams<{ slug: string }>();
  const navigate = useNavigate();
  const { layout, elements, related_products: relatedProductsSettings, reviews: reviewSettings } = useProductSettings();
  const [quantity, setQuantity] = useState(1);
  const [activeTab, setActiveTab] = useState<'description' | 'additional' | 'reviews' | ''>('description');
  const [selectedImage, setSelectedImage] = useState<string | undefined>();
  const [selectedVariation, setSelectedVariation] = useState<any>(null);
  const [selectedAttributes, setSelectedAttributes] = useState<Record<string, string>>({});
  const thumbnailsRef = useRef<HTMLDivElement>(null);
  const { addItem } = useCartStore();
  const { isEnabled: wishlistEnabled, isInWishlist, toggleWishlist, isLoggedIn } = useWishlist();
  const { isEnabled: isModuleEnabled } = useModules();

  // Apply white background to <main> in flat mode so the full viewport width is white
  useEffect(() => {
    const main = document.querySelector('main');
    if (!main) return;
    if (layout.layout_style === 'flat') {
      (main as HTMLElement).style.backgroundColor = '#ffffff';
    } else {
      (main as HTMLElement).style.backgroundColor = '';
    }
    return () => {
      (main as HTMLElement).style.backgroundColor = '';
    };
  }, [layout.layout_style]);

  // Fetch product details by slug
  const { data: product, isLoading, error } = useQuery<ProductType | null>({
    queryKey: ['product', slug],
    queryFn: async () => {
      const response = await apiClient.get<ProductsResponse>(`/shop/products?slug=${slug}`);
      return response.products?.[0] || null;
    },
    enabled: !!slug,
  });

  // Fetch related products
  const { data: relatedProducts } = useQuery<ProductType[]>({
    queryKey: ['related-products', product?.id],
    queryFn: async () => {
      if (!product) return [];

      try {
        if (product.related_ids && product.related_ids.length > 0) {
          const ids = product.related_ids.slice(0, 4).join(',');
          const response = await apiClient.get<ProductsResponse>(`/shop/products?include=${ids}`);
          return response.products || [];
        }

        const categoryId = product.categories?.[0]?.term_id || product.categories?.[0]?.id;
        if (categoryId) {
          const response = await apiClient.get<ProductsResponse>(`/shop/products?category=${categoryId}&per_page=4&exclude=${product.id}`);
          return response.products || [];
        }

        return [];
      } catch (error) {
        console.error('Failed to fetch related products:', error);
        return [];
      }
    },
    enabled: !!product?.id && elements.related_products,
  });

  // Set initial image when product loads
  useEffect(() => {
    if (product && !selectedImage) {
      setSelectedImage(product.image || product.images?.[0]);
    }
  }, [product]);

  // AUTO-SELECT FIRST VARIATION (Issue #2 from report)
  useEffect(() => {
    if (product?.type === 'variable' && product.attributes && Object.keys(selectedAttributes).length === 0) {
      const initialAttributes: Record<string, string> = {};

      product.attributes.forEach((attr: any) => {
        if (attr.variation && attr.options && attr.options.length > 0) {
          initialAttributes[attr.name] = attr.options[0];
        }
      });

      if (Object.keys(initialAttributes).length > 0) {
        setSelectedAttributes(initialAttributes);
      }
    }
  }, [product]);

  // Find matching variation when attributes change
  useEffect(() => {
    if (product?.type === 'variable' && product.variations && Object.keys(selectedAttributes).length > 0) {
      let bestMatch: any = null;
      let highestScore = -1;

      (product.variations as any[]).forEach(v => {
        if (!v.attributes) return;

        let isMatch = true;
        let score = 0;

        const attributesMatch = Object.entries(selectedAttributes).every(([attrName, attrValue]) => {
          const normalizedSelectedValue = attrValue.toLowerCase().trim();
          const attrNameLower = attrName.toLowerCase();

          // Find the attribute definition to get the slug
          const attrDef = product.attributes?.find((a: any) => a.name === attrName);
          const attrSlug = attrDef?.slug || attrNameLower.replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '');

          // Try to find a matching key in the variation attributes
          let variationValue: string | undefined = undefined;

          if (`attribute_${attrSlug}` in v.attributes) {
            variationValue = v.attributes[`attribute_${attrSlug}`];
          } else if (`attribute_pa_${attrSlug}` in v.attributes) {
            variationValue = v.attributes[`attribute_pa_${attrSlug}`];
          } else if (`attribute_${attrNameLower}` in v.attributes) {
            variationValue = v.attributes[`attribute_${attrNameLower}`];
          } else if (`attribute_pa_${attrNameLower}` in v.attributes) {
            variationValue = v.attributes[`attribute_pa_${attrNameLower}`];
          } else if (attrNameLower in v.attributes) {
            variationValue = v.attributes[attrNameLower];
          }

          // If key is undefined/missing in variation, it means "Any" -> Match with score 0
          if (variationValue === undefined || variationValue === null) {
            return true;
          }

          // If empty string, it also means "Any" -> Match with score 0
          const normalizedVarValue = String(variationValue).toLowerCase().trim();
          if (normalizedVarValue === '') {
            return true;
          }

          // Exact match gets a higher score
          if (normalizedVarValue === normalizedSelectedValue) {
            score += 1;
            return true;
          }

          // Value mismatch
          return false;
        });

        if (attributesMatch && score > highestScore) {
          highestScore = score;
          bestMatch = v;
        }
      });

      setSelectedVariation(bestMatch || null);
    } else if (product?.type !== 'variable') {
      setSelectedVariation(null);
    }
  }, [selectedAttributes, product]);

  // Auto-switch image when variation selected
  useEffect(() => {
    if (selectedVariation && selectedVariation.image) {
      setSelectedImage(selectedVariation.image);
    }
  }, [selectedVariation]);

  // Build complete image gallery including variation images (BEFORE early returns)
  const allImages = React.useMemo(() => {
    if (!product) return [];

    const images = [...(product.images || [])];

    // Add variation images if they don't exist in main gallery
    if (product.type === 'variable' && product.variations) {
      (product.variations as any[]).forEach(variation => {
        if (variation.image && !images.includes(variation.image)) {
          images.push(variation.image);
        }
      });
    }

    // Filter out any falsy values (false, null, undefined, empty strings)
    return images.filter(img => img && typeof img === 'string' && img.trim() !== '');
  }, [product]);

  // Scroll thumbnails
  const scrollThumbnails = (direction: 'left' | 'right') => {
    if (thumbnailsRef.current) {
      const scrollAmount = 200;
      thumbnailsRef.current.scrollBy({
        left: direction === 'left' ? -scrollAmount : scrollAmount,
        behavior: 'smooth'
      });
    }
  };

  const handleAttributeChange = (attributeName: string, value: string) => {
    setSelectedAttributes(prev => ({
      ...prev,
      [attributeName]: value
    }));
  };

  const handleAddToCart = async () => {
    if (!product) return;

    // Validate variation selection for variable products
    if (product.type === 'variable') {
      if (!selectedVariation) {
        toast.error('Please select all product options');
        return;
      }
    }

    // Construct variation params using keys from the matched variation
    // but filling in values from user selection (handles "Any" variations with empty values)
    let variation_params: Record<string, string> = {};
    if (product.type === 'variable' && selectedVariation?.attributes) {
      // Get keys from the variation's attributes (these are the correct WooCommerce keys)
      Object.keys(selectedVariation.attributes).forEach(key => {
        // Key format is like "attribute_7-days-auto-closing-variation-plan"
        // Extract the slug part after "attribute_"
        const slug = key.replace(/^attribute_/, '');

        // Find the matching user-selected value by attribute name
        const attrDef = product.attributes?.find((a: any) =>
          a.slug === slug || a.name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '') === slug
        );

        if (attrDef && selectedAttributes[attrDef.name]) {
          variation_params[key] = selectedAttributes[attrDef.name];
        } else {
          // Fallback to stored value if no user selection
          variation_params[key] = selectedVariation.attributes[key];
        }
      });
    }

    try {
      await apiClient.post(apiClient.endpoints.cart.add, {
        product_id: product.id,
        quantity,
        variation_id: selectedVariation?.id || 0,
        variation: variation_params,
      });

      addItem({
        key: `${product.id}${selectedVariation ? `-${selectedVariation.id}` : ''}`,
        product_id: product.id,
        variation_id: selectedVariation?.id,
        name: product.name,
        price: parseFloat(selectedVariation?.price || product.price),
        quantity,
        image: selectedImage || product.image,
        virtual: product.virtual,
        downloadable: product.downloadable,
        // Use selectedAttributes from state (user's selections) for variable products
        attributes: product.type === 'variable' && Object.keys(selectedAttributes).length > 0
          ? selectedAttributes
          : undefined,
      });

      toast.success(`${product.name} added to cart!`, {
        action: {
          label: 'View Cart',
          onClick: () => navigate('/cart'),
        },
      });
    } catch (error) {
      toast.error('Failed to add to cart');
      console.error(error);
    }
  };

  if (isLoading) {
    return (
      <Container>
        <div className="animate-pulse max-w-6xl mx-auto py-8">
          <div className="h-8 bg-gray-200 rounded w-1/4 mb-4"></div>
          <div className="grid md:grid-cols-2 gap-8">
            <div className="aspect-square bg-gray-200 rounded"></div>
            <div className="space-y-4">
              <div className="h-8 bg-gray-200 rounded w-3/4"></div>
              <div className="h-6 bg-gray-200 rounded w-1/4"></div>
              <div className="h-24 bg-gray-200 rounded"></div>
              <div className="h-12 bg-gray-200 rounded w-1/2"></div>
            </div>
          </div>
        </div>
      </Container>
    );
  }

  if (error || !product) {
    return (
      <Container>
        <div className="text-center max-w-2xl mx-auto py-12">
          <h2 className="text-2xl font-bold mb-4">Product Not Found</h2>
          <p className="text-gray-600 mb-6">The product you're looking for doesn't exist.</p>
          <Button onClick={() => navigate('/shop')}>
            <ArrowLeft className="mr-2 h-4 w-4" />
            Back to Shop
          </Button>
        </div>
      </Container>
    );
  }

  // Price calculation - FIXED
  const currentPrice = selectedVariation?.price || product.price;
  const regularPrice = selectedVariation?.regular_price || product.regular_price;
  const isOnSale = regularPrice && currentPrice && parseFloat(currentPrice) < parseFloat(regularPrice);
  const stockStatus = selectedVariation?.in_stock !== undefined ? (selectedVariation.in_stock ? 'instock' : 'outofstock') : product.stock_status;

  return (
    <Container>
      {/* SEO Meta Tags for Social Sharing */}
      <SEOHead
        title={product.name}
        description={product.short_description?.replace(/<[^>]+>/g, '').slice(0, 160) || product.description?.replace(/<[^>]+>/g, '').slice(0, 160)}
        image={product.image || product.images?.[0]}
        type="product"
        product={{
          price: currentPrice,
          currency: (window as any).woonoowCustomer?.currency?.code || 'USD',
          availability: stockStatus === 'instock' ? 'in stock' : 'out of stock',
        }}
      />
      {/* Flat: entire Container is bg-white. Card: per-section white cards on gray. */}
      <div className="max-w-6xl mx-auto">
        {/* Top section: flat = no card wrapper, card = white card */}
        <div className={layout.layout_style === 'card' ? 'bg-white rounded-2xl shadow-sm border border-gray-100 p-6 lg:p-8 xl:p-10 mb-8' : 'mb-8'}>
          {/* Breadcrumb */}
          {elements.breadcrumbs && (
            <nav className="mb-6 text-sm">
              <Link to="/shop" className="text-gray-600 hover:text-gray-900">
                Shop
              </Link>
              <span className="mx-2 text-gray-400">/</span>
              <span className="text-gray-900">{product.name}</span>
            </nav>
          )}

          <div className={`grid gap-6 lg:gap-8 ${layout.image_position === 'right' ? 'lg:grid-cols-[5fr_7fr]' : 'lg:grid-cols-[7fr_5fr]'}`}>
            {/* Product Images */}
            <div className={`lg:sticky lg:top-8 lg:self-start ${layout.image_position === 'right' ? 'lg:order-2' : ''}`}>
              {/* Main Image - ENHANCED */}
              <div className="relative w-full aspect-square rounded-2xl overflow-hidden bg-gray-50 mb-6">
                {selectedImage ? (
                  <img
                    src={selectedImage}
                    alt={product.name}
                    className="w-full !h-full object-contain p-8"
                  />
                ) : (
                  <div className="!h-full flex items-center justify-center text-gray-400">
                    <div className="text-center">
                      <svg className="w-24 h-24 mx-auto mb-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                      </svg>
                      <p className="text-sm">No image available</p>
                    </div>
                  </div>
                )}
                {/* Sale Badge on Image */}
                {isOnSale && (
                  <div className="absolute top-6 left-6 bg-red-500 text-white px-4 py-2 rounded-full font-bold text-xs uppercase tracking-wider shadow-xl">
                    Sale
                  </div>
                )}
              </div>

              {/* Dots Navigation - Show based on gallery_style */}
              {allImages && allImages.length > 1 && layout.gallery_style === 'dots' && (
                <div className="flex justify-center gap-2 mt-4">
                  <div className="flex gap-2">
                    {allImages.map((img, index) => (
                      <button
                        key={index}
                        onClick={() => setSelectedImage(img)}
                        className={`w-2 h-2 rounded-full transition-all ${selectedImage === img
                          ? 'bg-primary w-6'
                          : 'bg-gray-300 hover:bg-gray-400'
                          }`}
                        aria-label={`View image ${index + 1}`}
                      />
                    ))}
                  </div>
                </div>
              )}

              {/* Thumbnail Slider - Show based on gallery_style */}
              {allImages && allImages.length > 1 && layout.gallery_style === 'thumbnails' && (
                <div className="relative w-full overflow-hidden">
                  {/* Left Arrow */}
                  {allImages.length > 4 && (
                    <button
                      onClick={() => scrollThumbnails('left')}
                      className="absolute left-0 top-1/2 -translate-y-1/2 z-10 bg-white shadow-xl rounded-full p-2.5 hover:bg-gray-50 transition-all border-2 border-gray-200"
                    >
                      <ChevronLeft className="h-5 w-5" />
                    </button>
                  )}

                  {/* Scrollable Thumbnails */}
                  <div
                    ref={thumbnailsRef}
                    className="flex gap-3 overflow-x-auto scroll-smooth scrollbar-hide px-10"
                    style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
                  >
                    {allImages.map((img, index) => (
                      <button
                        key={index}
                        onClick={() => setSelectedImage(img)}
                        className={`flex-shrink-0 w-24 h-24 md:w-28 md:h-28 rounded-lg overflow-hidden border-2 transition-all shadow-md hover:shadow-lg ${selectedImage === img
                          ? 'border-primary ring-4 ring-primary ring-offset-2'
                          : 'border-gray-300 hover:border-gray-400'
                          }`}
                      >
                        <img
                          src={img}
                          alt={`${product.name} ${index + 1}`}
                          className="w-full !h-full object-cover"
                        />
                      </button>
                    ))}
                  </div>

                  {/* Right Arrow */}
                  {allImages.length > 4 && (
                    <button
                      onClick={() => scrollThumbnails('right')}
                      className="absolute right-0 top-1/2 -translate-y-1/2 z-10 bg-white shadow-xl rounded-full p-2.5 hover:bg-gray-50 transition-all border-2 border-gray-200"
                    >
                      <ChevronRight className="h-5 w-5" />
                    </button>
                  )}
                </div>
              )}
            </div>

            {/* Product Info */}
            <div>
              {/* Product Title - PRIMARY HIERARCHY - SERIF FONT */}
              <h1 className="text-2xl md:text-3xl lg:text-4xl font-serif font-light mb-4 leading-tight text-gray-900">{product.name}</h1>

              {/* Price - SECONDARY (per UI/UX Guide) */}
              <div className="mb-6">
                {isOnSale && regularPrice ? (
                  <div className="flex items-center gap-3 flex-wrap">
                    <span className="text-3xl font-bold text-gray-900">
                      {formatPrice(currentPrice)}
                    </span>
                    <span className="text-xl text-gray-400 line-through ml-3">
                      {formatPrice(regularPrice)}
                    </span>
                    <span className="inline-block bg-red-50 text-red-600 px-3 py-1 rounded-md text-sm font-semibold ml-3">
                      Save {Math.round((1 - parseFloat(currentPrice) / parseFloat(regularPrice)) * 100)}%
                    </span>
                  </div>
                ) : (
                  <span className="text-3xl font-bold text-gray-900">{formatPrice(currentPrice)}</span>
                )}
              </div>

              {/* Stock Status Badge */}
              <div className="mb-6">
                {stockStatus === 'instock' ? (
                  <div className="inline-flex items-center gap-2 text-green-700 text-sm font-medium">
                    <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                      <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                    </svg>
                    <span>In Stock • Ships Today</span>
                  </div>
                ) : (
                  <div className="inline-flex items-center gap-2 text-red-700 text-sm font-medium">
                    <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                      <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
                    </svg>
                    <span>Out of Stock</span>
                  </div>
                )}
              </div>

              {/* Short Description */}
              {product.short_description && (
                <div
                  className="prose prose-sm text-gray-600 leading-relaxed mb-6 border-l-4 border-gray-200 pl-4"
                  dangerouslySetInnerHTML={{ __html: product.short_description }}
                />
              )}

              {/* Variation Selector - PILLS (per UI/UX Guide) */}
              {product.type === 'variable' && product.attributes && product.attributes.length > 0 && (
                <div className="mb-6 space-y-4">
                  {product.attributes.map((attr: any, index: number) => (
                    attr.variation && (
                      <div key={index}>
                        <label className="block font-medium mb-3 text-sm text-gray-700 uppercase tracking-wider">{attr.name}</label>
                        <div className="flex flex-wrap gap-2">
                          {attr.options && attr.options.map((option: string, optIndex: number) => {
                            const isSelected = selectedAttributes[attr.name] === option;
                            return (
                              <button
                                key={optIndex}
                                onClick={() => handleAttributeChange(attr.name, option)}
                                className={`min-w-[48px] min-h-[48px] px-5 py-3 rounded-xl border-2 font-medium transition-all ${isSelected
                                  ? 'bg-gray-900 text-white border-gray-900 shadow-lg'
                                  : 'bg-white text-gray-700 border-gray-200 hover:border-gray-400 hover:shadow-md'
                                  }`}
                              >
                                {option}
                              </button>
                            );
                          })}
                        </div>
                      </div>
                    )
                  ))}
                </div>
              )}

              {/* Quantity & Add to Cart */}
              {stockStatus === 'instock' && (
                <div className="space-y-4 mb-6">
                  {/* Quantity Selector */}
                  <div className="flex items-center gap-3">
                    <span className="text-sm font-medium text-gray-700 uppercase tracking-wider">Quantity</span>
                    <div className="flex items-center border-2 border-gray-200 rounded-xl">
                      <button
                        onClick={() => setQuantity(Math.max(1, quantity - 1))}
                        className="p-2.5 hover:bg-gray-100 transition-colors rounded-l-md"
                      >
                        <Minus className="h-4 w-4" />
                      </button>
                      <input
                        type="number"
                        min="1"
                        value={quantity}
                        onChange={(e) => setQuantity(Math.max(1, parseInt(e.target.value) || 1))}
                        className="w-14 text-center border-x-2 border-gray-200 focus:outline-none font-semibold"
                      />
                      <button
                        onClick={() => setQuantity(quantity + 1)}
                        className="p-2.5 hover:bg-gray-100 transition-colors rounded-r-md"
                      >
                        <Plus className="h-4 w-4" />
                      </button>
                    </div>
                  </div>

                  {/* Action Buttons - PROMINENT */}
                  {/* Add to Cart Button */}
                  <button
                    onClick={handleAddToCart}
                    className="w-full h-14 flex items-center justify-center gap-2 bg-gray-900 text-white rounded-xl font-semibold text-base hover:bg-gray-800 transition-all shadow-lg hover:shadow-xl"
                  >
                    <ShoppingCart className="h-5 w-5" />
                    Add to Cart
                  </button>
                  {isModuleEnabled('wishlist') && wishlistEnabled && (
                    <button
                      onClick={() => product && toggleWishlist(product.id)}
                      className={`w-full h-14 flex items-center justify-center gap-2 rounded-xl font-semibold text-base border-2 transition-all ${product && isInWishlist(product.id)
                        ? 'bg-red-50 text-red-600 border-red-200 hover:border-red-400'
                        : 'bg-white text-gray-900 border-gray-200 hover:border-gray-400'
                        }`}
                    >
                      <Heart className={`h-5 w-5 ${product && isInWishlist(product.id) ? 'fill-red-500' : ''
                        }`} />
                      {product && isInWishlist(product.id) ? 'Remove from Wishlist' : 'Add to Wishlist'}
                    </button>
                  )}
                </div>
              )}

              {/* Trust Badges - REDESIGNED */}
              <div className="grid grid-cols-3 gap-4 py-6 border-y border-gray-200">
                {/* Free Shipping */}
                <div className="flex flex-col items-center text-center">
                  <div className="w-12 h-12 rounded-full bg-green-50 flex items-center justify-center mb-2">
                    <svg className="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
                    </svg>
                  </div>
                  <p className="font-medium text-sm text-gray-900">Free Shipping</p>
                  <p className="text-xs text-gray-500 mt-1">On orders over $50</p>
                </div>

                {/* Returns */}
                <div className="flex flex-col items-center text-center">
                  <div className="w-12 h-12 rounded-full bg-blue-50 flex items-center justify-center mb-2">
                    <svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                    </svg>
                  </div>
                  <p className="font-medium text-sm text-gray-900">Easy Returns</p>
                  <p className="text-xs text-gray-500 mt-1">30-day guarantee</p>
                </div>

                {/* Secure */}
                <div className="flex flex-col items-center text-center">
                  <div className="w-12 h-12 rounded-full bg-purple-50 flex items-center justify-center mb-2">
                    <svg className="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                    </svg>
                  </div>
                  <p className="font-medium text-sm text-gray-900">Secure Payment</p>
                  <p className="text-xs text-gray-500 mt-1">SSL encrypted</p>
                </div>
              </div>

              {/* Product Meta */}
              {elements.product_meta && (
                <div className="space-y-2 text-sm border-t pt-4 border-gray-200">
                  {product.sku && (
                    <div className="flex gap-2">
                      <span className="text-gray-600">SKU:</span>
                      <span className="font-medium">{product.sku}</span>
                    </div>
                  )}
                  {product.categories && product.categories.length > 0 && (
                    <div className="flex gap-2">
                      <span className="text-gray-600">Categories:</span>
                      <span className="font-medium">
                        {product.categories.map((cat: any) => cat.name).join(', ')}
                      </span>
                    </div>
                  )}
                </div>
              )}

              {/* Share Buttons */}
              {elements.share_buttons && (
                <div className="flex items-center gap-3 pt-4 border-t border-gray-200">
                  <span className="text-sm text-gray-600 font-medium">Share:</span>
                  <div className="flex gap-2">
                    <button
                      onClick={() => {
                        const url = encodeURIComponent(window.location.href);
                        window.open(`https://www.facebook.com/sharer/sharer.php?u=${url}`, '_blank', 'width=600,height=400');
                      }}
                      className="w-9 h-9 rounded-full bg-blue-600 hover:bg-blue-700 text-white flex items-center justify-center transition-colors"
                      title="Share on Facebook"
                    >
                      <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" /></svg>
                    </button>
                    <button
                      onClick={() => {
                        const url = encodeURIComponent(window.location.href);
                        const text = encodeURIComponent(product.name);
                        window.open(`https://twitter.com/intent/tweet?url=${url}&text=${text}`, '_blank', 'width=600,height=400');
                      }}
                      className="w-9 h-9 rounded-full bg-sky-500 hover:bg-sky-600 text-white flex items-center justify-center transition-colors"
                      title="Share on Twitter"
                    >
                      <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z" /></svg>
                    </button>
                    <button
                      onClick={() => {
                        const url = encodeURIComponent(window.location.href);
                        const text = encodeURIComponent(product.name);
                        window.open(`https://wa.me/?text=${text}%20${url}`, '_blank');
                      }}
                      className="w-9 h-9 rounded-full bg-green-600 hover:bg-green-700 text-white flex items-center justify-center transition-colors"
                      title="Share on WhatsApp"
                    >
                      <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z" /></svg>
                    </button>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>

        {/* Product Information - VERTICAL SECTIONS (Research: 27% overlook tabs) */}
        <div className="space-y-6">
          {/* Description Section */}
          <div className={layout.layout_style === 'card'
            ? 'bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden'
            : 'border-t border-gray-200 overflow-hidden'
          }>
            <button
              onClick={() => setActiveTab(activeTab === 'description' ? '' : 'description')}
              className="w-full flex items-center justify-between p-5 hover:bg-gray-50 transition-colors bg-transparent"
            >
              <h2 className="text-xl font-bold text-gray-900">Product Description</h2>
              <svg
                className={`w-6 h-6 transition-transform ${activeTab === 'description' ? 'rotate-180' : ''}`}
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
              </svg>
            </button>
            {activeTab === 'description' && (
              <div className="p-6 bg-white">
                {product.description ? (
                  <div
                    className="prose prose-sm max-w-none"
                    dangerouslySetInnerHTML={{ __html: product.description }}
                  />
                ) : (
                  <p className="text-gray-600">No description available.</p>
                )}
              </div>
            )}
          </div>

          {/* Specifications Section - SCANNABLE TABLE */}
          <div className={layout.layout_style === 'card'
            ? 'bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden'
            : 'border-t border-gray-200 overflow-hidden'
          }>
            <button
              onClick={() => setActiveTab(activeTab === 'additional' ? '' : 'additional')}
              className="w-full flex items-center justify-between p-5 hover:bg-gray-50 transition-colors bg-transparent"
            >
              <h2 className="text-xl font-bold text-gray-900">Specifications</h2>
              <svg
                className={`w-6 h-6 transition-transform ${activeTab === 'additional' ? 'rotate-180' : ''}`}
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
              </svg>
            </button>
            {activeTab === 'additional' && (
              <div className="bg-white">
                {product.attributes && product.attributes.length > 0 ? (
                  <table className="w-full">
                    <tbody>
                      {product.attributes.map((attr: any, index: number) => (
                        <tr key={index} className="border-b border-gray-200 last:border-0">
                          <td className="py-4 px-6 font-semibold text-gray-900 bg-gray-50 w-1/3">
                            {attr.name}
                          </td>
                          <td className="py-4 px-6 text-gray-700">
                            {Array.isArray(attr.options) ? attr.options.join(', ') : attr.options}
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                ) : (
                  <p className="p-6 text-gray-600">No specifications available.</p>
                )}
              </div>
            )}
          </div>

          {/* Reviews Section - HYBRID APPROACH */}
          {elements.reviews && reviewSettings.placement === 'product_page' && (
            // Show reviews only if: 1) not hiding when empty, OR 2) has reviews
            (!reviewSettings.hide_if_empty || (product.review_count && product.review_count > 0)) && (
              <div className="border border-gray-200 rounded-lg overflow-hidden">
                <button
                  onClick={() => setActiveTab(activeTab === 'reviews' ? '' : 'reviews')}
                  className="w-full flex items-center justify-between p-5 bg-white hover:bg-gray-50 transition-colors"
                >
                  <div className="flex items-center gap-4">
                    <h2 className="text-xl font-bold text-gray-900">Customer Reviews</h2>
                    <div className="flex items-center gap-2">
                      <div className="flex">
                        {[1, 2, 3, 4, 5].map((star) => (
                          <svg key={star} className={`w-5 h-5 ${star <= Number(product.average_rating || 0) ? 'text-yellow-400' : 'text-gray-300'} fill-current`} viewBox="0 0 20 20">
                            <path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" />
                          </svg>
                        ))}
                      </div>
                      <span className="text-sm text-gray-600 font-medium">
                        {product.average_rating || 0} ({product.review_count || 0} reviews)
                      </span>
                    </div>
                  </div>
                  <svg
                    className={`w-6 h-6 transition-transform ${activeTab === 'reviews' ? 'rotate-180' : ''}`}
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                  </svg>
                </button>
                {activeTab === 'reviews' && (
                  <div className="p-6 bg-white space-y-6">
                    {/* Review Summary */}
                    <div className="flex items-start gap-8 pb-6 border-b">
                      <div className="text-center">
                        <div className="text-5xl font-bold text-gray-900 mb-2">5.0</div>
                        <div className="flex mb-2">
                          {[1, 2, 3, 4, 5].map((star) => (
                            <svg key={star} className="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 20 20">
                              <path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" />
                            </svg>
                          ))}
                        </div>
                        <div className="text-sm text-gray-600">Based on 128 reviews</div>
                      </div>
                      <div className="flex-1 space-y-2">
                        {[5, 4, 3, 2, 1].map((rating) => (
                          <div key={rating} className="flex items-center gap-3">
                            <span className="text-sm text-gray-600 w-8">{rating} ★</span>
                            <div className="flex-1 h-2 bg-gray-200 rounded-full overflow-hidden">
                              <div
                                className="h-full bg-yellow-400"
                                style={{ width: rating === 5 ? '95%' : rating === 4 ? '4%' : '1%' }}
                              />
                            </div>
                            <span className="text-sm text-gray-600 w-12">{rating === 5 ? '122' : rating === 4 ? '5' : '1'}</span>
                          </div>
                        ))}
                      </div>
                    </div>

                    {/* Sample Reviews */}
                    <div className="space-y-6">
                      {/* Review 1 */}
                      <div className="border-b pb-6">
                        <div className="flex items-start gap-4">
                          <div className="w-12 h-12 rounded-full bg-gray-200 flex items-center justify-center text-gray-600 font-semibold">
                            JD
                          </div>
                          <div className="flex-1">
                            <div className="flex items-center gap-2 mb-2">
                              <span className="font-semibold text-gray-900">John Doe</span>
                              <span className="text-sm text-gray-500">• 2 days ago</span>
                              <span className="text-xs bg-green-100 text-green-700 px-2 py-1 rounded">Verified Purchase</span>
                            </div>
                            <div className="flex mb-2">
                              {[1, 2, 3, 4, 5].map((star) => (
                                <svg key={star} className="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 20 20">
                                  <path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" />
                                </svg>
                              ))}
                            </div>
                            <p className="text-gray-700 leading-relaxed mb-3">
                              Absolutely love this product! The quality exceeded my expectations and it arrived quickly.
                              The packaging was also very professional. Highly recommend!
                            </p>
                            <button className="text-sm text-gray-600 hover:text-gray-900">Helpful (24)</button>
                          </div>
                        </div>
                      </div>

                      {/* Review 2 */}
                      <div className="border-b pb-6">
                        <div className="flex items-start gap-4">
                          <div className="w-12 h-12 rounded-full bg-gray-200 flex items-center justify-center text-gray-600 font-semibold">
                            SM
                          </div>
                          <div className="flex-1">
                            <div className="flex items-center gap-2 mb-2">
                              <span className="font-semibold text-gray-900">Sarah Miller</span>
                              <span className="text-sm text-gray-500">• 1 week ago</span>
                              <span className="text-xs bg-green-100 text-green-700 px-2 py-1 rounded">Verified Purchase</span>
                            </div>
                            <div className="flex mb-2">
                              {[1, 2, 3, 4, 5].map((star) => (
                                <svg key={star} className="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 20 20">
                                  <path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" />
                                </svg>
                              ))}
                            </div>
                            <p className="text-gray-700 leading-relaxed mb-3">
                              Great value for money. Works exactly as described. Customer service was also very responsive
                              when I had questions before purchasing.
                            </p>
                            <button className="text-sm text-gray-600 hover:text-gray-900">Helpful (18)</button>
                          </div>
                        </div>
                      </div>

                      {/* Review 3 */}
                      <div>
                        <div className="flex items-start gap-4">
                          <div className="w-12 h-12 rounded-full bg-gray-200 flex items-center justify-center text-gray-600 font-semibold">
                            MJ
                          </div>
                          <div className="flex-1">
                            <div className="flex items-center gap-2 mb-2">
                              <span className="font-semibold text-gray-900">Michael Johnson</span>
                              <span className="text-sm text-gray-500">• 2 weeks ago</span>
                              <span className="text-xs bg-green-100 text-green-700 px-2 py-1 rounded">Verified Purchase</span>
                            </div>
                            <div className="flex mb-2">
                              {[1, 2, 3, 4, 5].map((star) => (
                                <svg key={star} className="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 20 20">
                                  <path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" />
                                </svg>
                              ))}
                            </div>
                            <p className="text-gray-700 leading-relaxed mb-3">
                              Perfect! This is my third purchase and I keep coming back. The consistency in quality is impressive.
                              Will definitely buy again.
                            </p>
                            <button className="text-sm text-gray-600 hover:text-gray-900">Helpful (32)</button>
                          </div>
                        </div>
                      </div>
                    </div>

                    <button className="w-full py-3 border-2 border-gray-200 rounded-xl font-semibold text-gray-900 hover:border-gray-400 transition-all">
                      Load More Reviews
                    </button>
                  </div>
                )}
              </div>
            ))}
        </div>

        {/* Related Products */}
        {elements.related_products && relatedProducts && relatedProducts.length > 0 && (
          <div className="mt-12">
            <h2 className="text-2xl font-bold mb-6">{relatedProductsSettings.title}</h2>
            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
              {relatedProducts.map((relatedProduct) => (
                <ProductCard key={relatedProduct.id} product={relatedProduct} />
              ))}
            </div>
          </div>
        )}
      </div>

      {/* Sticky CTA Bar */}
      {layout.sticky_add_to_cart && stockStatus === 'instock' && (
        <div className="fixed bottom-0 left-0 right-0 bg-white border-t-2 border-gray-200 p-3 shadow-2xl z-50">
          <div className="max-w-6xl mx-auto flex items-center justify-between gap-3 px-2">
            <div className="flex-1 flex flex-col justify-center min-w-0">
              {/* Show selected variation for variable products */}
              {product.type === 'variable' && Object.keys(selectedAttributes).length > 0 && (
                <div className="text-xs text-gray-600 mb-1 flex items-center gap-1 flex-wrap">
                  {Object.entries(selectedAttributes).map(([key, value], index) => (
                    <span key={key} className="inline-flex items-center">
                      <span className="font-medium">{value}</span>
                      {index < Object.keys(selectedAttributes).length - 1 && <span className="mx-1">•</span>}
                    </span>
                  ))}
                </div>
              )}
              <div className="text-xl font-bold text-gray-900">{formatPrice(currentPrice)}</div>
            </div>
            <button
              onClick={handleAddToCart}
              className="flex-shrink-0 h-12 px-6 flex items-center justify-center gap-2 bg-gray-900 text-white rounded-xl font-semibold hover:bg-gray-800 transition-all shadow-lg"
            >
              <ShoppingCart className="h-5 w-5" />
              <span className="hidden xs:inline">Add to Cart</span>
              <span className="xs:hidden">Add</span>
            </button>
          </div>
        </div>
      )}
    </Container>
  );
}