"use client";
import { useState, useEffect, SetStateAction,useRef } from "react";
import { Header, Footer } from "../../components/common/";
import Link from 'next/link';
import Image from "next/image";
import 'bootstrap/dist/css/bootstrap.min.css';
export interface Product {
  id: number;
  title: string;
  price: number;
  description: string;
  category: string;
  image: string;
}
import { Tab, Tabs } from 'react-bootstrap';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation, Thumbs, FreeMode, Zoom } from 'swiper/modules';
import type { Swiper as SwiperType } from 'swiper';
// Import Swiper styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/thumbs';
import 'swiper/css/free-mode';
import 'swiper/css/zoom';

interface ImageGalleryProps {
  images: {
    id: string;
    src: string;
    alt: string;
    width: number;
    height: number;
  }[];
}
// 2️⃣ Type the props using that interface
interface ProductDetailProps {
  product: Product;
}
 
// 3️⃣ Apply the type in your component
export default function ProductDetail({ product }: ProductDetailProps) {
    const [thumbsSwiper, setThumbsSwiper] = useState<SwiperType | null>(null);
    const [mainSwiper, setMainSwiper] = useState<SwiperType | null>(null);
    const [isZoomed, setIsZoomed] = useState(false);
    const [zoomPosition, setZoomPosition] = useState({ x: 50, y: 50 });
    const mainImageRef = useRef<HTMLDivElement>(null);

    const images = [
        {
            id: '3',
            src: '/img/collection-26.jpg',
            alt: 'Sample Product 3',
            width: 800,
            height: 600,
        },
        {
            id: '4',
            src: '/img/collection-27.jpg',
            alt: 'Sample Product 4',
            width: 800,
            height: 600,
        },
        {
            id: '5',
            src: '/img/collection-28.jpg',
            alt: 'Sample Product 5',
            width: 800,
            height: 600,
        },
    ];

    const handleImageMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
        if (!isZoomed || !mainImageRef.current) return;

        const { left, top, width, height } = mainImageRef.current.getBoundingClientRect();
        const x = ((e.clientX - left) / width) * 100;
        const y = ((e.clientY - top) / height) * 100;

        setZoomPosition({
        x: Math.max(0, Math.min(100, x)),
        y: Math.max(0, Math.min(100, y)),
        });
    };

    const toggleZoom = () => {
        setIsZoomed(!isZoomed);
    };
  return (
    <div className="index-page">
        <Header />
        <main className="main">
            <section id="product-details" className="product-details section">
                <div className="container aos-init aos-animate" data-aos="fade-up" data-aos-delay="100">
                    <div className="row">
                        <div className="col-md-6 mb-4">
                            <div className="max-w-6xl mx-auto p-0">
                                {/* Main Image Slider */}
                                <div className="relative mb-4">
                                    <Swiper
                                    modules={[Navigation, Thumbs, Zoom]}
                                    thumbs={{ swiper: thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null }}
                                    navigation
                                    zoom={true}
                                    onSwiper={setMainSwiper}
                                    className="main-swiper"
                                    >
                                    {images.map((image) => (
                                        <SwiperSlide key={image.id}>
                                        <div 
                                            ref={mainImageRef}
                                            className="swiper-zoom-container relative cursor-zoom-in product-detail-zoom"
                                            onClick={toggleZoom}
                                            onMouseMove={handleImageMouseMove}
                                            style={{ cursor: isZoomed ? 'zoom-out' : 'zoom-in' }}
                                        >
                                            <Image
                                            src={image.src}
                                            alt={image.alt}
                                            width={800}
                                            height={600}
                                            className="w-full h-auto object-contain"
                                            style={{
                                                transform: isZoomed ? 'scale(2)' : 'scale(1)',
                                                transformOrigin: `${zoomPosition.x}% ${zoomPosition.y}%`,
                                                transition: 'transform 0.3s ease',
                                            }} loading="lazy"
                                            />
                                            {isZoomed && (
                                            <div className="absolute top-4 right-4 bg-black bg-opacity-50 text-white px-3 py-1 rounded text-sm">
                                                Click to zoom out
                                            </div>
                                            )}
                                        </div>
                                        </SwiperSlide>
                                    ))}
                                    </Swiper>
                                </div>

                                {/* Thumbnail Slider */}
                                <div className="relative">
                                    <Swiper
                                    modules={[FreeMode, Navigation, Thumbs]}
                                    onSwiper={setThumbsSwiper}
                                    spaceBetween={10}
                                    slidesPerView={5}
                                    freeMode={true}
                                    watchSlidesProgress={true}
                                    breakpoints={{
                                        320: {
                                        slidesPerView: 3,
                                        },
                                        640: {
                                        slidesPerView: 4,
                                        },
                                        1024: {
                                        slidesPerView: 5,
                                        },
                                    }}
                                    className="thumb-swiper"
                                    >
                                    {images.map((image, index) => (
                                        <SwiperSlide id={image.id} key={image.id}>
                                            <div
                                                className={`relative block w-full h-20 border-2 rounded-lg overflow-hidden product-detail-swipe transition-all ${
                                                mainSwiper?.activeIndex === index 
                                                    ? 'border-blue-500 border-2' 
                                                    : 'border-gray-300'
                                                }`}
                                                onClick={() => mainSwiper?.slideTo(index)}
                                            >
                                                <Image
                                                src={image.src}
                                                alt={image.alt}
                                                fill
                                                className="object-cover"
                                                sizes="(max-width: 768px) 80px, 100px" loading="lazy"
                                                />
                                            </div>
                                        </SwiperSlide>
                                    ))}
                                    </Swiper>
                                </div>
                            </div>

                        </div>

        
                        <div className="col-md-6">
                            <h1 className="h2 mb-3">Elegant Watch Classic Edition</h1>
                            <div className="mb-3">
                                <span className="h4 me-2">₹ 299.99</span>
                                <span className="text-muted text-decoration-line-through">₹ 399.99</span>
                                <span className="badge bg-danger ms-2">25% OFF</span>
                            </div>

                            <div className="mb-3">
                                <div className="d-flex align-items-center">
                                    <div className="text-warning me-2">
                                        <i className="fas fa-star"></i>
                                        <i className="fas fa-star"></i>
                                        <i className="fas fa-star"></i>
                                        <i className="fas fa-star"></i>
                                        <i className="fas fa-star-half-alt"></i>
                                    </div>
                                    <span className="text-muted">(128 reviews)</span>
                                </div>
                            </div>

                            <p className="mb-4">Timeless elegance meets modern functionality in this classic timepiece. Features premium materials, water resistance, and sophisticated design.</p>

                
                            <div className="mb-4">
                                <h6 className="mb-2">Color</h6>
                                <div className="btn-group" role="group">
                                    <input type="radio" className="btn-check" name="color" id="silver"/>
                                    <label className="btn btn-outline-secondary" >Silver</label>
                                    <input type="radio" className="btn-check" name="color" id="gold"/>
                                    <label className="btn btn-outline-secondary" >Gold</label>
                                    <input type="radio" className="btn-check" name="color" id="black"/>
                                    <label className="btn btn-outline-secondary" >Black</label>
                                </div>
                            </div>
                            <div className="mb-4">
                                <h6 className="mb-2">Size</h6>
                                <div className="size-options">
                                    <div className="size-option" data-size="S">S</div>
                                    <div className="size-option active" data-size="M">M</div>
                                    <div className="size-option" data-size="L">L</div>
                                </div>
                            </div>

                            <div className="product-quantity mb-4">
                                <h6 className="option-title">Quantity:</h6>
                                <div className="quantity-selector">
                                <button className="quantity-btn decrease">
                                    <i className="bi bi-dash"></i>
                                </button>
                                <input type="number" className="quantity-input" value={1} min="1" max="24"/>
                                <button className="quantity-btn increase" >
                                    <i className="bi bi-plus"></i>
                                </button>
                                </div>
                            </div>

                
                            {/* <div className="detail-cart-btn d-flex gap-2">
                                <button className="btn btn-primary" type="button">
                                    <i className="bi bi-cart mr-2"></i>Add to Cart
                                </button>
                                <button className="btn btn-primary buy-now-btn" type="button">
                                    <i className="bi bi-cart mr-2"></i>Buy Now
                                </button>
                                <button className="btn btn-outline-secondary" type="button">
                                    <i className="bi bi-heart me-2"></i>Add to Wishlist
                                </button>
                            </div> */}

                
                            <div className="mt-4">
                                <div className="d-flex align-items-center mb-2">
                                    <i className="bi bi-truck text-primary me-2"></i>
                                    <span>Free shipping on orders over ₹ 50</span>
                                </div>
                                <div className="d-flex align-items-center mb-2">
                                    <i className="bi bi-arrow-repeat text-primary me-2"></i>
                                    <span>30-day return policy</span>
                                </div>
                                <div className="d-flex align-items-center">
                                    <i className="bi bi-shield text-primary me-2"></i>
                                    <span>2-year warranty</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div className="row mt-4">
                        <Tabs defaultActiveKey="home" id="uncontrolled-tab-example" className="mb-3">
                            <Tab eventKey="home" title="Description">
                                <div className="product-description">
                                    <h4>Product Overview</h4>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at lacus congue, suscipit elit nec, tincidunt orci. Phasellus egestas nisi vitae lectus imperdiet venenatis. Suspendisse vulputate quam diam, et consectetur augue condimentum in. Aenean dapibus urna eget nisi pharetra, in iaculis nulla blandit. Praesent at consectetur sem, sed sollicitudin nibh. Ut interdum risus ac nulla placerat aliquet.</p>

                                    <h4>Key Features</h4>
                                    <ul>
                                        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
                                        <li>Vestibulum at lacus congue, suscipit elit nec, tincidunt orci</li>
                                        <li>Phasellus egestas nisi vitae lectus imperdiet venenatis</li>
                                        <li>Suspendisse vulputate quam diam, et consectetur augue condimentum in</li>
                                        <li>Aenean dapibus urna eget nisi pharetra, in iaculis nulla blandit</li>
                                    </ul>

                                    <h4>What's in the Box</h4>
                                    <ul>
                                        <li>Lorem Ipsum Wireless Headphones</li>
                                        <li>Carrying Case</li>
                                        <li>USB-C Charging Cable</li>
                                        <li>3.5mm Audio Cable</li>
                                        <li>User Manual</li>
                                    </ul>
                                </div>
                            </Tab>
                            <Tab eventKey="profile" title="Specifications">
                                <div className="product-specifications">
                                    <div className="specs-group">
                                    <h4>Technical Specifications</h4>
                                    <div className="specs-table">
                                        <div className="specs-row">
                                            <div className="specs-label">Connectivity</div>
                                            <div className="specs-value">Bluetooth 5.0, 3.5mm jack</div>
                                        </div>
                                        <div className="specs-row">
                                            <div className="specs-label">Battery Life</div>
                                            <div className="specs-value">Up to 30 hours</div>
                                        </div>
                                        <div className="specs-row">
                                            <div className="specs-label">Charging Time</div>
                                            <div className="specs-value">3 hours</div>
                                        </div>
                                        <div className="specs-row">
                                            <div className="specs-label">Driver Size</div>
                                            <div className="specs-value">40mm</div>
                                        </div>
                                        <div className="specs-row">
                                            <div className="specs-label">Frequency Response</div>
                                            <div className="specs-value">20Hz - 20kHz</div>
                                        </div>
                                        <div className="specs-row">
                                            <div className="specs-label">Impedance</div>
                                            <div className="specs-value">32 Ohm</div>
                                        </div>
                                        <div className="specs-row">
                                            <div className="specs-label">Weight</div>
                                            <div className="specs-value">250g</div>
                                        </div>
                                    </div>
                                    </div>

                                    <div className="specs-group">
                                    <h4>Features</h4>
                                    <div className="specs-table">
                                        <div className="specs-row">
                                            <div className="specs-label">Noise Cancellation</div>
                                            <div className="specs-value">Active Noise Cancellation (ANC)</div>
                                        </div>
                                        <div className="specs-row">
                                            <div className="specs-label">Controls</div>
                                            <div className="specs-value">Touch controls, Voice assistant</div>
                                        </div>
                                        <div className="specs-row">
                                            <div className="specs-label">Microphone</div>
                                            <div className="specs-value">Dual beamforming microphones</div>
                                        </div>
                                        <div className="specs-row">
                                            <div className="specs-label">Water Resistance</div>
                                            <div className="specs-value">IPX4 (splash resistant)</div>
                                        </div>
                                    </div>
                                    </div>
                                </div>
                            </Tab>
                        </Tabs>
                    </div>
                </div>
            </section>
        </main>
        <div className="add-to-cart-detail mt-1 text-center">
            <div className="detail-cart-btn">
                <button className="btn btn-primary" type="button">
                    <i className="bi bi-cart mr-2"></i>Add to Cart
                </button>
                {/* <button className="btn btn-primary buy-now-btn" type="button">
                    <i className="bi bi-cart mr-2"></i>Buy Now
                </button>
                <button className="btn btn-outline-secondary" type="button">
                    <i className="bi bi-heart me-2"></i>Add to Wishlist
                </button> */}
            </div>
        </div>
        {/* <Footer /> */}
    </div>
  );
}