
import { ArrowRight, Award, Boxes, CheckCircle2, ChevronRight, Link as LinkIcon, MessageSquare, ShieldCheck, Ship } from "lucide-react";
import { getLocale, getMessages } from "next-intl/server";
import Image from "next/image";
import Link from "next/link";
import { notFound } from "next/navigation";
import BackgroundColor from "src/components/BackgroundColor";
import { ProductGallery } from "src/components/Gallery";
import ProductProperties from "src/components/Product/ProductProperties";
import ProductRelated from "src/components/Product/ProductRelated";
import graphql from "src/utils/graphql";

const gql = `
query Products($locale: I18NLocaleCode, $slug: String!) {
    products(filters: { slug: { eqi: $slug } }, locale: $locale) {
        documentId
        title
        price
        summery
        qt
        images {
            documentId
            alternativeText
            url
        }
        category {
            documentId
            title
            slug
        }
        description
        brand {
            documentId
            title
            image {
                alternativeText
                documentId
                url
            }
            slug
            subcategories {
                title
                documentId
                slug
            }
        }
        slug
        discount
        showPrice
        properties {
            id
            key
            value
        }
        subcategories {
            title
            documentId
            slug
        }
        seo {
            id
            metaTitle
            metaDescription
            keywords
            metaRobots
            metaViewport
            canonicalURL
            structuredData
            metaImage {
                documentId
                alternativeText
                url
            }
            openGraph {
                id
                ogTitle
                ogDescription
                ogUrl
                ogType
                ogImage {
                    documentId
                    alternativeText
                    url
                }
            }
        }

    }
}



`;
const gql_static = `
query Products($locale:I18NLocaleCode,$start:Int,$limit:Int) {
    products(locale: $locale, pagination: { start: $start, limit: $limit }) {
        slug
    }

}
`

const gql_metadata = `
query Products($locale:I18NLocaleCode,$slug:String!) {
    products(filters: { slug: { eqi: $slug } }, locale: $locale) {
        title
        seo {
            id
            metaTitle
            metaDescription
            metaRobots
            canonicalURL
            metaImage {
                documentId
                alternativeText
                url
            }
            openGraph {
                id
                ogTitle
                ogDescription
                ogUrl
                ogType
                ogImage {
                    documentId
                    alternativeText
                    url
                }
            }
            structuredData
        }
    }
}
`


export async function generateMetadata({ params }) {
    const { locale, slug } = await params;

    // Fetch product SEO data from Strapi GraphQL API
    const data = await graphql(gql_metadata, {
        locale,
        slug,
    });

    const productSEO = data?.products?.[0]?.seo;
    if (productSEO) {
        return {
            title: productSEO.metaTitle,
            description: productSEO.metaDescription,
            robots: productSEO.metaRobots || 'index, follow',
            // canonical: productSEO.canonicalURL || `https://adhorizonintl.com/product/${slug}`,
            alternates: {
                canonical: productSEO.canonicalURL || `https://adhorizonintl.com/product/${slug}`,
                languages: {
                    'en': `https://adhorizonintl.com/product/${slug}`,
                    'ar-OM': `https://adhorizonintl.com/ar-OM/product/${slug}`,
                },
            },
            openGraph: {
                title: productSEO.openGraph.ogTitle || productSEO.metaTitle,
                description: productSEO.openGraph.ogDescription || productSEO.metaDescription,
                url: productSEO.openGraph.ogUrl || `https://adhorizonintl.com/product/${slug}`,
                type: productSEO.openGraph.ogType || 'website',
                images: [
                    {
                        url: productSEO.openGraph.ogImage.url,
                        alt: productSEO.openGraph.ogImage.alternativeText || 'Product Image',
                    },
                ],
            },
            twitter: {
                card: 'summary_large_image',
                title: productSEO.metaTitle,
                description: productSEO.metaDescription,
                images: [productSEO.metaImage?.url],
            },
            // structuredData: productSEO.structuredData,
        };
    }
    else {
        return {
            title: data?.products?.[0]?.title,
        }
    }
}


// export async function generateStaticParams() {
//     const { products } = await graphql(gql_static, {
//         "locale": "en",
//         "start": 0,
//         "limit": 1500
//     })

//     return products.map((product) =>
//         ({ slug: product.slug })
//     );
// }


const getProduct = async (slug) => {
    const { products } = await graphql(gql, {
        locale: "en",
        slug,
    });
    return products[0];
};
const features = [
    {
        icon: Award,
        title: "Certified Product",
        description: "Meets international quality standards"
    },
    {
        icon: Ship,
        title: "Bulk Shipping",
        description: "Efficient worldwide delivery solutions"
    },
    {
        icon: ShieldCheck,
        title: "Quality Assured",
        description: "Rigorous testing at every stage"
    }
];

export default async function ProductPage({ params }) {
    const { slug } = await params
    const product = await getProduct(slug);

    if (!product) {
        notFound();
    }
    const locale = await getLocale();
    const t = await getMessages({ locale });

    return (
        // <div className="max-w-screen-xl mx-auto px-4 py-8 ">
        //     {/* <ColorAvg image={product.brand.image.url}/> */}
        //     <div className="flex flex-col lg:flex-row gap-8 items-center lg:items-start">
        //         <ProductGallery images={product.images} />
        //         <div className="flex flex-col gap-4 w-full ">
        //             <div className="flex justify-between w-full">
        //                 <div className={`flex items-center gap-2 mb-6 `}>
        //                     <Link href="/" className=" underline inline-flex gap-2">
        //                         <Home />
        //                     </Link>
        //                     {
        //                         product?.category?.slug &&
        //                         <>
        //                             <ChevronRight className={`size-4 ${locale !== "en" && "rotate-180"} `} />
        //                             <Link href={`/products/${product.category.slug}`} className=" underline">

        //                                 {product.category.title}
        //                             </Link>
        //                         </>
        //                     }
        //                     {
        //                         product?.brand?.slug &&
        //                         <>
        //                             <ChevronRight className={`size-4 ${locale !== "en" && "rotate-180"} `} />
        //                             <Link href={`/products/${product.brand.slug}`} className=" underline">
        //                                 {product.brand.title}
        //                             </Link>
        //                         </>
        //                     }
        //                     <ChevronRight className={`size-4 ${locale !== "en" && "rotate-180"} `} />
        //                     <span>{product.title}</span>
        //                 </div>

        //             </div>
        //             <div className="h-full flex justify-between flex-row  w-full items-start">

        //                 <ProductInfo
        //                     title={product.title}
        //                     price={product.price}
        //                     discount={product.discount}
        //                     showPrice={product.showPrice}
        //                     category={product.category}
        //                     summery={product.summery}
        //                     brand={product.brand}
        //                     subcategories={product.subcategories}
        //                 />

        //             </div>
        //         </div>
        //     </div>
        //     <div className="mt-12">
        //         <ProductProperties properties={product.properties} />
        //     </div>
        //     <div className="mt-12">
        //         <ProductDescription description={product.description} />
        //     </div>
        //     <div className="mt-12">
        //         <ProductRelated brand={product.brand} category={product.category} />
        //     </div>
        // </div>

        <div className="min-h-screen bg-gradient-to-b from-gray-50 to-white">
            {/* Hero Section */}

            <div className="text-white w-full h-full relative" >
                <BackgroundColor image={product?.brand?.image?.url} />
                <div className="max-w-7xl mx-auto px-4 py-28 relative z-10">
                    <div className="flex flex-col md:flex-row gap-8 items-center">
                        <div className="flex-1 space-y-6">
                            <h1 className="text-4xl md:text-5xl font-bold leading-tight">{product.title}</h1>
                            <p className="">
                                {product.summery}
                            </p>
                            <div className="text-base text-gray-50/50 font-semibold">
                                Price upon request
                            </div>
                            <div className="flex flex-wrap items-center gap-3">
                                {product?.brand && (
                                    <Link href={`/products/${product?.brand?.slug}`} className="inline-flex items-center gap-2 px-3 py-1 bg-white/20 rounded-full text-sm hover:bg-white/30 transition-colors">
                                        <div className="relative size-4">
                                            <Image
                                                src={product.brand?.image?.url}
                                                alt={product.brand?.title}
                                                className="aspect-square object-contain"
                                                fill
                                            />
                                        </div>
                                        {product?.brand?.title}
                                    </Link>
                                )}
                                <Link href={`/products/${product.category.slug}`} className="inline-flex items-center gap-2 px-3 py-1 bg-white/20 rounded-full text-sm hover:bg-white/30 transition-colors">
                                    <Boxes className="w-4 h-4" />
                                    {product.category.title}
                                </Link>
                                {product.brand?.subcategories.map(subcat => (
                                    <Link
                                        key={subcat.documentId}
                                        href={`/products/${subcat.slug}`}
                                        className="inline-flex items-center gap-2 px-3 py-1 bg-white/20 rounded-full text-sm hover:bg-white/30 transition-colors"
                                    >
                                        <LinkIcon className="w-4 h-4" />
                                        {subcat.title}
                                    </Link>
                                ))}
                            </div>
                            
                        </div>
                        <div className="flex-1 w-full md:w-auto">
                            <div className="rounded-2xl overflow-hidden shadow-2xl bg-white/10 backdrop-blur-sm">
                                <ProductGallery images={product.images} />
                            </div>
                        </div>
                    </div>
                </div>
            </div>



            {/* Product Description */}
            <div className="py-16 bg-gray-50">
                <div className="max-w-7xl mx-auto px-4">
                    <div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
                        <div className="lg:col-span-2">
                            <h2 className="text-3xl font-bold mb-8">Product Description</h2>
                            <div
                                className="prose max-w-none text-gray-600 text-lg leading-relaxed content text-justify"
                                dangerouslySetInnerHTML={{ __html: product.description }}
                            />
                        </div>
                       
                            <ProductProperties product={product} />
                            
                      
                    </div>
                </div>
                {/* Features */}
                <div className="py-16 ">
                    <hr />
                    <div className="max-w-7xl mx-auto px-4">
                        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                            {features.map((feature, index) => (
                                <div key={index} className="flex items-start gap-4 p-6 rounded-xl bg-gray-50">
                                    <div className="w-12 h-12 rounded-lg bg-gray-900 text-white flex items-center justify-center">
                                        <feature.icon className="w-6 h-6" />
                                    </div>
                                    <div>
                                        <h3 className="text-xl font-semibold mb-2">{feature.title}</h3>
                                        <p className="text-gray-600">{feature.description}</p>
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>
                    <hr />
                </div>
            </div>


            {/* Related Products */}
            <div className="py-16 bg-gray-50">
                <div className="max-w-7xl mx-auto px-4">

                    <ProductRelated category={product?.category} brand={product?.brand} />
                </div>
            </div>


        </div>
    );
}