"use client";

import { useState, use } from "react";
import Image from "next/image";
import Link from "next/link";
import { ArrowLeft, ExternalLink, ChevronRight, Check, X, Download, ArrowRight } from "lucide-react";
import WhyIRoof from "@/components/sections/WhyIRoof";
import Breadcrumbs from "@/components/Breadcrumbs";
import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";
import { products, availableLengths } from "@/lib/products";
import { cn } from "@/lib/utils";

const lengthBasePrices: Record<string, number> = {
    "5 Feet 9 Inches": 7992,
    "7 Feet 11 Inches": 11004,
    "10 Feet 1 Inches": 14015,
    "12 Feet 3 Inches": 17027,
    "13 Feet 8 Inches": 18996,
    "15 Feet 1 Inches": 20965,
    "16 Feet 6 Inches": 22935,
    "18 Feet": 25020,
    "19 Feet 5 Inches": 26989,
    "20 Feet 10 Inches": 28958,
    "22 Feet 3 Inches": 30927,
    "24 Feet 5 Inches": 33939
};

const ZoomImage = ({ src, alt }: { src: string; alt: string }) => {
    const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
    const [isHovering, setIsHovering] = useState(false);

    return (
        <div
            className="w-full h-full relative overflow-hidden group cursor-zoom-in rounded-2xl bg-zinc-50 border border-zinc-100"
            onMouseMove={(e) => {
                const { left, top, width, height } = e.currentTarget.getBoundingClientRect();
                const x = Math.max(0, Math.min(((e.clientX - left) / width) * 100, 100));
                const y = Math.max(0, Math.min(((e.clientY - top) / height) * 100, 100));
                setMousePos({ x, y });
            }}
            onMouseEnter={() => setIsHovering(true)}
            onMouseLeave={() => setIsHovering(false)}
        >
            <Image
                src={src}
                alt={alt}
                fill
                className={cn(
                    "object-contain p-8 transition-opacity duration-300",
                    isHovering ? "opacity-0" : "opacity-100"
                )}
            />
            {isHovering && (
                <div
                    className="absolute inset-0 z-10 w-full h-full bg-no-repeat bg-zinc-50"
                    style={{
                        backgroundImage: `url('${src}')`,
                        backgroundPosition: `${mousePos.x}% ${mousePos.y}%`,
                        backgroundSize: '250%',
                    }}
                />
            )}
        </div>
    );
};

export default function ProductDetailPage({ params }: { params: Promise<{ id: string }> }) {
    const lineArtMap: Record<string, string> = {
        "iroof-max-brick": "/images/Line art  I - ROOF MAX _ Brick Red.jpg",
        "iroof-max-green": "/images/Line art  I - ROOF MAX _ Dark Green.jpg",
        "iroof-max-chocolate-brown": "/images/Line art  I - ROOF MAX _ Chocolate Brown.jpg",
        "iroof-max-white": "/images/Line art  I - ROOF MAX _ White.jpg",
    };

    const resolvedParams = use(params);
    const product = products.find((p) => p.id === resolvedParams.id);
    const [activeImage, setActiveImage] = useState(0);
    const [zoomedImage, setZoomedImage] = useState<string | null>(null);
    const [selectedLength, setSelectedLength] = useState<string>(availableLengths[0]);
    const [quantity, setQuantity] = useState<number>(1);

    if (!product) {
        return (
            <div className="min-h-screen flex items-center justify-center">
                <h1>Product not found</h1>
            </div>
        );
    }

    const similarProducts = products.filter((p) => p.id !== product.id).slice(0, 4);

    const techImageMap: Record<string, string> = {
        "iroof-max-white": "/images/iroof.lk-white-new.png",
        "iroof-max-chocolate-brown": "/images/iroof.lk-chocolate-brown.png",
        "iroof-max-brick": "/images/iroof.lk-red.webp",
        "iroof-max-green": "/images/iroof.lk-green.webp",
    };
    const techImage = techImageMap[product.id] || "/images/iroof.lk-red.webp";

    return (
        <main className="min-h-screen bg-white">
            <Navbar />

            {/* PRODUCT HERO - Banner */}
            <section className="relative pt-24 pb-8 md:pt-40 md:pb-16 min-h-[20vh] w-full flex items-center justify-center overflow-hidden mb-12">
                <Image
                    src="/images/pexels9.webp"
                    alt={`${product.name} Background`}
                    fill
                    className="object-cover"
                    priority
                />
                <div className="absolute inset-0 bg-brand-dark/70" />
                <div className="relative z-10 text-center px-6 reveal-up">
                    <h1 className="text-4xl md:text-6xl lg:text-7xl font-medium text-white tracking-tight mt-6">
                        {product.name}
                    </h1>
                </div>
            </section>

            <div className="pb-20 px-4 md:px-16 lg:px-24 mx-auto max-w-[1600px] block mt-[-2rem]">
                <Breadcrumbs items={[{ label: "Products", href: "/products" }, { label: product.name }]} className="mb-12" />
                {/* Back Link */}
                {/* <Link href="/products" className="inline-flex items-center gap-2 text-[11px] font-black uppercase tracking-[0.2em] text-brand-dark/40 hover:text-brand-accent transition-colors mb-12">
                    <ArrowLeft size={16} />
                    Back to Catalog
                </Link> */}

                <div className="grid grid-cols-1 xl:grid-cols-12 gap-16 xl:gap-24">
                    {/* LEFT GALLERY */}
                    <div className="xl:col-span-7 flex flex-col-reverse xl:flex-row gap-6">
                        {/* Thumbnails */}
                        <div className="flex xl:flex-col gap-4 overflow-x-auto xl:w-24 shrink-0 pb-2 xl:pb-0 scrollbar-hide">
                            {product.gallery.map((img, idx) => (
                                <button
                                    key={idx}
                                    onClick={() => setActiveImage(idx)}
                                    className={cn(
                                        "relative aspect-square w-20 md:w-full rounded-xl overflow-hidden border-2 transition-all duration-300 shrink-0",
                                        activeImage === idx ? "border-brand-accent shadow-lg" : "border-transparent opacity-60 hover:opacity-100 bg-zinc-50"
                                    )}
                                >
                                    <Image src={img} alt={`${product.name} shadow ${idx}`} fill className="object-cover" />
                                </button>
                            ))}
                        </div>

                        {/* Main Image */}
                        <div className="w-full aspect-square xl:aspect-auto xl:h-[700px]">
                            <ZoomImage src={product.gallery[activeImage]} alt={product.name} />
                        </div>
                    </div>

                    {/* RIGHT DETAILS */}
                    <div className="xl:col-span-5 flex flex-col h-full">
                        <div className="mb-8">
                            <div className="flex items-center gap-3 mb-6">
                                <span className="px-3 py-1 bg-brand-dark/5 text-brand-dark rounded-full text-[10px] font-semibold uppercase tracking-[0.2em]">{product.category}</span>
                                {product.tags.map((tag, i) => (
                                    <span key={i} className="text-[10px] font-semibold uppercase tracking-widest text-brand-accent">{tag}</span>
                                ))}
                            </div>
                            <h1 className="text-4xl md:text-4xl font-black text-brand-dark tracking-tighter mb-6 leading-tight">
                                {product.name.split(' ').slice(0, 2).join(' ')}&nbsp;
                                <span className="text-brand-accent">{product.name.split(' ').slice(2).join(' ')}</span>
                            </h1>
                            <div className="mb-6 flex flex-col justify-center">
                                <span className="text-[10px] font-black uppercase tracking-[0.3em] text-brand-dark/30 mb-1">
                                    Total Price
                                </span>
                                <span className="text-2xl font-semibold text-brand-accent">
                                    රු{(lengthBasePrices[selectedLength] * quantity).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
                                </span>
                            </div>
                            <p className="text-md text-brand-dark/60 leading-relaxed max-w-lg mb-4">
                                {product.longDesc}
                            </p>

                        </div>

                        {/* Custom Available Lengths Tag System */}
                        <div className="mb-8">
                            <h3 className="text-[10px] font-black uppercase tracking-[0.3em] text-brand-dark/30 mb-6">Available Lengths</h3>
                            <div className="flex flex-wrap gap-2">
                                {availableLengths.map((length, i) => (
                                    <button
                                        key={i}
                                        onClick={() => setSelectedLength(length)}
                                        className={cn(
                                            "px-4 py-2 border rounded-full text-[12px] font-semibold transition-all duration-300 cursor-pointer shadow-sm active:scale-95",
                                            selectedLength === length
                                                ? "border-brand-accent text-white bg-brand-accent shadow-[0_4px_12px_rgba(177,32,40,0.2)]"
                                                : "border-zinc-200 text-brand-dark bg-white hover:border-brand-accent hover:text-brand-accent"
                                        )}
                                    >
                                        {length}
                                    </button>
                                ))}
                            </div>
                        </div>

                        {/* Quantity Selector */}
                        <div className="mb-8 flex flex-col gap-2">
                            <span className="text-[10px] font-black uppercase tracking-[0.3em] text-brand-dark/30">
                                Quantity
                            </span>
                            <div className="flex items-center gap-4">
                                <button
                                    onClick={() => setQuantity(Math.max(1, quantity - 1))}
                                    className="w-10 h-10 rounded-full border border-zinc-200 bg-white text-brand-dark flex items-center justify-center hover:border-brand-accent hover:text-brand-accent disabled:opacity-50 disabled:cursor-not-allowed active:scale-95 transition-all duration-300 font-bold"
                                    disabled={quantity <= 1}
                                >
                                    -
                                </button>
                                <span className="text-lg font-bold w-8 text-center font-mono">
                                    {quantity}
                                </span>
                                <button
                                    onClick={() => setQuantity(quantity + 1)}
                                    className="w-10 h-10 rounded-full border border-zinc-200 bg-white text-brand-dark flex items-center justify-center hover:border-brand-accent hover:text-brand-accent active:scale-95 transition-all duration-300 font-bold"
                                >
                                    +
                                </button>
                            </div>
                        </div>

                        {/* <div className="mb-10">
                            <h3 className="text-[11px] font-black uppercase tracking-[0.3em] text-brand-dark/30 mb-6">Colors</h3>
                            <div className="flex gap-4">
                                {product.colors.map((c, i) => (
                                    <div key={i} className="w-10 h-10 rounded-full shadow-md border-4 border-white" style={{ backgroundColor: c }} />
                                ))}
                            </div>
                        </div> */}



                        {/* CTAs */}
                        <div className="mt-auto flex flex-col sm:flex-row gap-4 w-full border-t border-zinc-100 pt-8">
                            <a
                                href={product.sivilimaLink}
                                target="_blank"
                                rel="noopener noreferrer"
                                className="flex-1 bg-brand-accent text-white py-5 rounded-2xl font-semibold text-[11px] uppercase tracking-[0.2em] flex items-center justify-center gap-3 shadow-xl hover:bg-brand-dark transition-all duration-300"
                            >
                                Purchase on Sivilima
                                <ExternalLink size={16} />
                            </a>
                            <Link
                                href="/contact"
                                className="flex-1 bg-zinc-50 border border-zinc-200 text-brand-dark py-5 rounded-2xl font-semibold text-[11px] uppercase tracking-[0.2em] flex items-center justify-center gap-3 hover:border-brand-dark transition-all duration-300"
                            >
                                Order a Sample
                                <ChevronRight size={16} />
                            </Link>
                        </div>
                    </div>
                </div>
            </div>

            {/* ENGINEERING DATASHEET SECTION */}
            <section className="bg-white    border-t border-zinc-100 py-12">
                <div className="container max-w-[1400px] mx-auto px-8 md:px-16 lg:px-32 xl:px-40">
                    <div className="space-y-10 lg:space-y-12">

                        {/* Top: Specs Left + Large Image Right */}
                        <div className="grid grid-cols-1 xl:grid-cols-12 gap-8 items-stretch">
                            {/* Technical Specs */}
                            <div className="xl:col-span-5 reveal-up">
                                <div className="h-full flex flex-col justify-center">
                                    <h3 className="text-[12px] font-black text-brand-accent uppercase tracking-[0.4em] mb-10 flex items-center gap-3">
                                        <div className="w-8 h-[1px] bg-brand-accent" />
                                        Technical Specs
                                    </h3>

                                    <div className="grid grid-cols-2 gap-y-10 gap-x-6">
                                        {Object.entries(product.specs)
                                            .filter(([key]) => key !== "length")
                                            .map(([key, val], i) => (
                                                <div key={i} className="flex flex-col gap-2">
                                                    <span className="text-[10px] font-black uppercase tracking-[0.2em] text-brand-dark/40">
                                                        {key}
                                                    </span>
                                                    <span className="text-[15px] font-bold text-brand-dark">
                                                        {val}
                                                    </span>
                                                </div>
                                            ))}
                                    </div>
                                </div>
                            </div>

                            {/* Large Image Box */}
                            <div className="xl:col-span-7 reveal-up">
                                <div className="relative w-full flex items-center justify-end overflow-visible">
                                    <Image
                                        src={techImage}
                                        alt="Technical Detail"
                                        width={800}
                                        height={600}
                                        sizes="(max-width: 1024px) 100vw, 65vw"
                                        className="w-full max-w-none h-auto object-contain transition-transform duration-1000 hover:scale-[1.05]"
                                    />
                                </div>
                            </div>
                        </div>

                        {/* Bottom: Engineering Advantages */}
                        <div className="reveal-up">
                            <div className="p-8 md:p-12 lg:p-16 rounded-[2rem] border border-zinc-200/60 shadow-[0_2px_10px_-4px_rgba(0,0,0,0.05)] relative overflow-hidden">
                                <h2 className="text-3xl md:text-[2.5rem] font-black text-brand-dark tracking-tighter leading-tight mb-10">
                                    Engineering <br className="hidden md:block" />
                                    <span className="text-brand-accent">Advantages</span>
                                </h2>

                                <div className="grid grid-cols-1 xl:grid-cols-2 gap-x-12 gap-y-2">
                                    {[
                                        "Minimum noise generation during heavy rainfall.",
                                        "Reduced framework costs.",
                                        "100% free of carcinogenic and harmful materials.",
                                        "Beautiful interior aesthetic due to the White Bottom layer.",
                                        "Completely rust-free and corrosion-resistant.",
                                        "Significant heat reduction for a cooler interior.",
                                        "Available in 41-inch width and 10 convenient lengths.",
                                        "Long-lasting color retention that prevents fading.",
                                        "Superior strength achieved through a 4-layer structure.",
                                        "Exceptional durability thanks to the LG ASA outer layer."
                                    ].map((item, i) => (
                                        <div
                                            key={i}
                                            className="flex items-start gap-4 p-4 rounded-xl hover:bg-zinc-50 border border-transparent hover:border-zinc-100 transition-colors group"
                                        >
                                            <div className="w-8 h-8 rounded-full bg-brand-accent/10 flex items-center justify-center text-brand-accent shrink-0 group-hover:bg-brand-accent group-hover:text-white transition-all">
                                                <ChevronRight size={14} />
                                            </div>

                                            <span className="text-[14px] md:text-[14px] font-normal text-brand-dark/80 leading-relaxed mt-1 group-hover:text-brand-dark transition-colors">
                                                {item}
                                            </span>
                                        </div>
                                    ))}
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </section>

            {/* HOMEPAGE WHY i-ROOF FEATURE CARDS */}
            <WhyIRoof />

            {/* Technical Diagrams */}
            <section className="py-16 bg-white">
                <div className="max-w-[1400px] mx-auto px-6">
                    <div className="space-y-8 reveal-up">
                        <div className="grid grid-cols-1 xl:grid-cols-2 gap-12">
                            <div className="space-y-6">
                                <h4 className="text-sm font-black text-brand-dark tracking-tight uppercase">Layers</h4>
                                <div className="relative aspect-[4/3]  overflow-hidden border border-zinc-100 bg-zinc-50 group cursor-pointer" onClick={() => setZoomedImage("/images/i-roof-xtra-layers (1)1.webp")}>
                                    <Image src="/images/i-roof-xtra-layers (1)1.webp" alt="iRoof Layers" fill className="object-contain p-8 group-hover:scale-110 transition-transform duration-700" />
                                </div>
                            </div>
                            <div className="space-y-6">
                                <h4 className="text-sm font-black text-brand-dark tracking-tight uppercase">Side Lap Details</h4>
                                <div className="relative aspect-[4/3]  overflow-hidden border border-zinc-100 bg-zinc-50 group cursor-pointer" onClick={() => setZoomedImage("/images/i-roof-xtra-side-lap (1)1.webp")}>
                                    <Image src="/images/i-roof-xtra-side-lap (1)1.webp" alt="Side Lap Details" fill className="object-contain p-8 group-hover:scale-110 transition-transform duration-700" />
                                </div>
                            </div>
                        </div>

                        <div className="grid grid-cols-1 xl:grid-cols-2 gap-12">
                            <div className="space-y-6">
                                <h4 className="text-sm font-black text-brand-dark tracking-tight uppercase">Comparison</h4>
                                <div className="relative aspect-[4/3]  overflow-hidden border border-zinc-100 group cursor-pointer" onClick={() => setZoomedImage("/images/i-roof-xtra-comparison (1)1.webp")}>
                                    <Image src="/images/i-roof-xtra-comparison (1)1.webp" alt="Product Comparison" fill className="object-contain p-8 group-hover:scale-[1.02] transition-transform duration-1000" />
                                </div>
                            </div>
                            <div className="space-y-6">
                                <h4 className="text-sm font-black text-brand-dark tracking-tight uppercase">Installation Instructions</h4>
                                <div className="relative aspect-[4/3] overflow-hidden border border-zinc-100 bg-zinc-50 group cursor-pointer" onClick={() => setZoomedImage("/images/i-roof-installation1.webp")}>
                                    <Image src="/images/i-roof-installation1.webp" alt="Installation Instructions" fill className="object-contain p-8 group-hover:scale-[1.01] transition-transform duration-1000" />
                                </div>
                            </div>
                        </div>

                        <div className="flex flex-col xl:flex-row items-center justify-between p-8 md:p-12 rounded-[1.5rem] bg-brand-dark text-white gap-8 mt-12">
                            <div className="max-w-md">
                                <p className="text-lg font-bold leading-tight mb-2">Ready to install your iRoof?</p>
                                <p className="text-white/50 text-xs font-medium uppercase tracking-widest">Download current technical instructions (PDF)</p>
                            </div>
                            <a
                                href="/images/downloads/iRoof-Installation-Instructions.pdf"
                                target="_blank"
                                className="px-12 py-5 rounded-full bg-brand-accent text-white text-[10px] font-semibold uppercase tracking-[0.3em] flex items-center gap-4 hover:bg-white hover:text-brand-dark transition-all shadow-2xl"
                            >
                                Download Now
                                <Download size={18} />
                            </a>
                        </div>
                    </div>
                </div>
            </section>

            {/* LIGHTBOX MODAL */}
            {zoomedImage && (
                <div className="fixed inset-0 z-[200] flex items-center justify-center p-4 md:p-10 bg-brand-dark/95 backdrop-blur-xl animate-in fade-in duration-300" onClick={() => setZoomedImage(null)}>
                    <button
                        onClick={() => setZoomedImage(null)}
                        className="fixed top-6 right-6 md:top-8 md:right-8 z-50 w-12 h-12 rounded-full bg-white/10 text-white flex items-center justify-center hover:bg-red-600 transition-colors"
                    >
                        <X size={24} />
                    </button>
                    <div className="relative w-full max-w-5xl h-full max-h-[85vh]">
                        <Image src={zoomedImage} alt="Zoomed" fill className="object-contain" />
                    </div>
                </div>
            )}

            {/* SIMILAR PRODUCTS */}
            {similarProducts.length > 0 && (
                <section className="py-24 bg-zinc-50 border-t border-zinc-100 mt-20">
                    <div className="max-w-[1600px] mx-auto px-8 md:px-16 lg:px-24">
                        <div className="flex flex-col items-center text-center mb-16">
                            <span className="text-[10px] font-black text-brand-accent uppercase tracking-[0.5em] mb-4">Explore More</span>
                            <h2 className="text-3xl md:text-5xl font-black text-brand-dark tracking-tighter">Similar Products</h2>
                        </div>

                        <div className="grid grid-cols-1 xl:grid-cols-4 gap-8">
                            {similarProducts.map((p) => (
                                <Link
                                    href={`/products/${p.id}`}
                                    key={p.id}
                                    className="product-card-definitive flex flex-col h-full group bg-white border border-brand-dark/5 shadow-sm hover:shadow-2xl hover:border-brand-accent/20 transition-all duration-500 overflow-hidden cursor-pointer"
                                >
                                    <div className="relative w-full aspect-square overflow-hidden bg-brand-dark/[0.02]">
                                        <Image
                                            src={p.image}
                                            alt={p.name}
                                            fill
                                            className="object-cover transition-opacity duration-700 group-hover:opacity-0"
                                        />
                                        <Image
                                            src={lineArtMap[p.id] || "/images/template-image-for-iroof1.webp"}
                                            alt={`${p.name} Details hover`}
                                            fill
                                            className="object-cover opacity-0 transition-all duration-700 group-hover:opacity-100 scale-105 group-hover:scale-100"
                                        />
                                    </div>
                                    <div className="flex flex-col flex-grow p-6 text-left bg-white">
                                        <h4 className="text-[10px] sm:text-[11px] font-black uppercase tracking-[0.2em] text-brand-accent mb-2 transition-colors duration-300">
                                            iRoof Max
                                        </h4>
                                        <h3 className="text-lg lg:text-xl font-bold tracking-tight text-brand-dark group-hover:text-brand-accent transition-colors duration-500 line-clamp-2">
                                            {p.name.split(' ').slice(1).join(' ')} Roofing Sheet
                                        </h3>
                                        <div className="flex flex-wrap gap-2 mb-6 mt-3 flex-grow">
                                            {p.tags?.slice(0, 3).map((tag, i) => (
                                                <span key={i} className="text-[9px] font-bold uppercase tracking-widest text-brand-dark/60 bg-brand-dark/5 px-2 py-1 flex items-center justify-center rounded-[4px]">
                                                    {tag}
                                                </span>
                                            ))}
                                        </div>
                                        <div className="border-t border-brand-dark/5 pt-5 group-hover:border-brand-accent/20 transition-colors duration-500">
                                            <div className="inline-flex items-center w-full justify-between gap-2 text-brand-dark text-[11px] font-black uppercase tracking-[0.2em] group-hover:text-brand-accent transition-all duration-300">
                                                View Details
                                                <ArrowRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" />
                                            </div>
                                        </div>
                                    </div>
                                </Link>
                            ))}
                        </div>
                    </div>
                </section>
            )}

            <Footer />
        </main>
    );
}