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 { Button } from '@/components/ui/button';
import Container from '@/components/Layout/Container';
import { formatPrice } from '@/lib/currency';
import { ShoppingCart, Minus, Plus, ArrowLeft, ChevronLeft, ChevronRight, Heart } from 'lucide-react';
import { toast } from 'sonner';
import type { Product as ProductType, ProductsResponse } from '@/types/product';

export default function Product() {
  const { slug } = useParams<{ slug: string }>();
  const navigate = useNavigate();
  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();

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

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

  // Find matching variation when attributes change
  useEffect(() => {
    if (product?.type === 'variable' && product.variations && Object.keys(selectedAttributes).length > 0) {
      const variation = (product.variations as any[]).find(v => {
        return Object.entries(selectedAttributes).every(([key, value]) => {
          const attrKey = `attribute_${key.toLowerCase()}`;
          return v.attributes[attrKey] === value.toLowerCase();
        });
      });
      setSelectedVariation(variation || null);
    }
  }, [selectedAttributes, product]);

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

  // 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;
      }
    }

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

      addItem({
        key: `${product.id}${selectedVariation ? `-${selectedVariation.id}` : ''}`,
        product_id: product.id,
        name: product.name,
        price: parseFloat(selectedVariation?.price || product.price),
        quantity,
        image: selectedImage || product.image,
      });

      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>
    );
  }

  const currentPrice = selectedVariation?.price || product.price;
  const regularPrice = selectedVariation?.regular_price || product.regular_price;
  const isOnSale = selectedVariation ? parseFloat(selectedVariation.sale_price || '0') > 0 : product.on_sale;
  const stockStatus = selectedVariation?.in_stock !== undefined ? (selectedVariation.in_stock ? 'instock' : 'outofstock') : product.stock_status;

  return (
    <Container>
      <div className="max-w-6xl mx-auto py-8">
        {/* Breadcrumb */}
        <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 md:grid-cols-2 gap-8 lg:gap-12">
          {/* Product Images */}
          <div>
            {/* Main Image */}
            <div className="relative w-full aspect-square rounded-lg overflow-hidden bg-gray-100 mb-4">
              {selectedImage ? (
                <img
                  src={selectedImage}
                  alt={product.name}
                  className="w-full h-full object-cover"
                />
              ) : (
                <div className="w-full h-full flex items-center justify-center text-gray-400">
                  No image
                </div>
              )}
            </div>
            
            {/* Thumbnail Slider */}
            {product.images && product.images.length > 1 && (
              <div className="relative">
                {/* Left Arrow */}
                {product.images.length > 4 && (
                  <button
                    onClick={() => scrollThumbnails('left')}
                    className="absolute left-0 top-1/2 -translate-y-1/2 z-10 bg-white shadow-lg rounded-full p-2 hover:bg-gray-100 transition-colors"
                  >
                    <ChevronLeft className="h-4 w-4" />
                  </button>
                )}
                
                {/* Scrollable Thumbnails */}
                <div
                  ref={thumbnailsRef}
                  className="flex gap-2 overflow-x-auto scroll-smooth scrollbar-hide px-8"
                  style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
                >
                  {product.images.map((img, index) => (
                    <button
                      key={index}
                      onClick={() => setSelectedImage(img)}
                      className={`flex-shrink-0 w-20 h-20 rounded-lg overflow-hidden border-2 transition-all ${
                        selectedImage === img
                          ? 'border-primary ring-2 ring-primary ring-offset-2'
                          : 'border-gray-200 hover:border-gray-300'
                      }`}
                    >
                      <img
                        src={img}
                        alt={`${product.name} ${index + 1}`}
                        className="w-full h-full object-cover"
                      />
                    </button>
                  ))}
                </div>
                
                {/* Right Arrow */}
                {product.images.length > 4 && (
                  <button
                    onClick={() => scrollThumbnails('right')}
                    className="absolute right-0 top-1/2 -translate-y-1/2 z-10 bg-white shadow-lg rounded-full p-2 hover:bg-gray-100 transition-colors"
                  >
                    <ChevronRight className="h-4 w-4" />
                  </button>
                )}
              </div>
            )}
          </div>

          {/* Product Info */}
          <div>
            <h1 className="text-3xl font-bold mb-4">{product.name}</h1>

            {/* Price */}
            <div className="mb-6">
              {isOnSale && regularPrice ? (
                <div className="flex items-center gap-3">
                  <span className="text-3xl font-bold text-red-600">
                    {formatPrice(currentPrice)}
                  </span>
                  <span className="text-xl text-gray-400 line-through">
                    {formatPrice(regularPrice)}
                  </span>
                  <span className="bg-red-100 text-red-600 px-2 py-1 rounded text-sm font-semibold">
                    SALE
                  </span>
                </div>
              ) : (
                <span className="text-3xl font-bold">{formatPrice(currentPrice)}</span>
              )}
            </div>

            {/* Stock Status */}
            <div className="mb-6">
              {stockStatus === 'instock' ? (
                <span className="text-green-600 font-medium flex items-center gap-2">
                  <span className="w-2 h-2 bg-green-600 rounded-full"></span>
                  In Stock
                </span>
              ) : (
                <span className="text-red-600 font-medium flex items-center gap-2">
                  <span className="w-2 h-2 bg-red-600 rounded-full"></span>
                  Out of Stock
                </span>
              )}
            </div>

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

            {/* Variation Selector */}
            {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-2 text-sm">{attr.name}:</label>
                      <select
                        value={selectedAttributes[attr.name] || ''}
                        onChange={(e) => handleAttributeChange(attr.name, e.target.value)}
                        className="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-primary focus:border-primary"
                      >
                        <option value="">Choose {attr.name}</option>
                        {attr.options && attr.options.map((option: string, optIndex: number) => (
                          <option key={optIndex} value={option}>
                            {option}
                          </option>
                        ))}
                      </select>
                    </div>
                  )
                ))}
              </div>
            )}

            {/* Quantity & Add to Cart */}
            {stockStatus === 'instock' && (
              <div className="space-y-4">
                {/* Quantity Selector */}
                <div className="flex items-center gap-4">
                  <label className="font-medium text-sm">Quantity:</label>
                  <div className="flex items-center border border-gray-300 rounded-lg">
                    <button
                      onClick={() => setQuantity(Math.max(1, quantity - 1))}
                      className="p-2.5 hover:bg-gray-100 transition-colors"
                    >
                      <Minus className="h-4 w-4" />
                    </button>
                    <input
                      type="number"
                      value={quantity}
                      onChange={(e) => setQuantity(Math.max(1, parseInt(e.target.value) || 1))}
                      className="w-16 text-center border-x border-gray-300 py-2 focus:outline-none"
                      min="1"
                    />
                    <button
                      onClick={() => setQuantity(quantity + 1)}
                      className="p-2.5 hover:bg-gray-100 transition-colors"
                    >
                      <Plus className="h-4 w-4" />
                    </button>
                  </div>
                </div>

                {/* Action Buttons */}
                <div className="flex gap-3">
                  <Button
                    onClick={handleAddToCart}
                    size="lg"
                    className="flex-1 h-12 text-base"
                  >
                    <ShoppingCart className="mr-2 h-5 w-5" />
                    Add to Cart
                  </Button>
                  <Button
                    variant="outline"
                    size="lg"
                    className="h-12 px-4"
                  >
                    <Heart className="h-5 w-5" />
                  </Button>
                </div>
              </div>
            )}

            {/* Product Meta */}
            <div className="mt-8 pt-8 border-t border-gray-200 space-y-2 text-sm">
              {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>
          </div>
        </div>

        {/* Product Tabs */}
        <div className="mt-12">
          {/* Tab Headers */}
          <div className="border-b border-gray-200">
            <div className="flex gap-8">
              <button
                onClick={() => setActiveTab('description')}
                className={`pb-4 px-1 border-b-2 font-medium transition-colors ${
                  activeTab === 'description'
                    ? 'border-primary text-primary'
                    : 'border-transparent text-gray-600 hover:text-gray-900'
                }`}
              >
                Description
              </button>
              <button
                onClick={() => setActiveTab('additional')}
                className={`pb-4 px-1 border-b-2 font-medium transition-colors ${
                  activeTab === 'additional'
                    ? 'border-primary text-primary'
                    : 'border-transparent text-gray-600 hover:text-gray-900'
                }`}
              >
                Additional Information
              </button>
              <button
                onClick={() => setActiveTab('reviews')}
                className={`pb-4 px-1 border-b-2 font-medium transition-colors ${
                  activeTab === 'reviews'
                    ? 'border-primary text-primary'
                    : 'border-transparent text-gray-600 hover:text-gray-900'
                }`}
              >
                Reviews
              </button>
            </div>
          </div>

          {/* Tab Content */}
          <div className="py-8">
            {activeTab === 'description' && (
              <div>
                {product.description ? (
                  <div
                    className="prose prose-sm max-w-none"
                    dangerouslySetInnerHTML={{ __html: product.description }}
                  />
                ) : (
                  <p className="text-gray-600">No description available.</p>
                )}
              </div>
            )}

            {activeTab === 'additional' && (
              <div>
                {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">
                          <td className="py-3 pr-4 font-medium text-gray-900 w-1/3">
                            {attr.name}
                          </td>
                          <td className="py-3 text-gray-600">
                            {Array.isArray(attr.options) ? attr.options.join(', ') : attr.options}
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                ) : (
                  <p className="text-gray-600">No additional information available.</p>
                )}
              </div>
            )}

            {activeTab === 'reviews' && (
              <div>
                <p className="text-gray-600">Reviews coming soon...</p>
              </div>
            )}
          </div>
        </div>
      </div>
    </Container>
  );
}