import React from 'react';
import { useParams, Link } from 'react-router-dom';
import { motion } from 'framer-motion';
import { useStore } from '../src/context/StoreContext';
import SEO, { SITE_URL } from '../components/SEO';

const ProductDetail: React.FC = () => {
    const { slug } = useParams<{ slug: string }>();
    const { products, addToCart } = useStore();
    const product = products.find(item => item.slug === slug);

    if (!product) {
        return (
            <div className="min-h-screen pt-32 flex flex-col items-center justify-center text-text-main dark:text-white">
                <h2 className="text-4xl font-display mb-4">Product Not Found</h2>
                <Link to="/collections" className="underline hover:text-stone-500">Return to Shop</Link>
            </div>
        );
    }

    const productSchema = {
        "@context": "https://schema.org",
        "@type": "Product",
        "name": product.title,
        "description": `${product.description} Handcrafted in Corpus Christi, TX by Claudia Knuth. Made in small batches using stoneware clay inspired by the Texas Gulf Coast.`,
        "image": `${SITE_URL}${product.image}`,
        "url": `${SITE_URL}/collections/${product.slug}`,
        "brand": {
            "@type": "Brand",
            "name": "KNUTH Ceramics"
        },
        "manufacturer": {
            "@type": "LocalBusiness",
            "name": "KNUTH Ceramics",
            "address": {
                "@type": "PostalAddress",
                "addressLocality": "Corpus Christi",
                "addressRegion": "TX",
                "addressCountry": "US"
            }
        },
        "offers": {
            "@type": "Offer",
            "availability": "https://schema.org/InStock",
            "priceCurrency": "USD",
            "seller": {
                "@type": "Organization",
                "name": "KNUTH Ceramics"
            }
        },
        "breadcrumb": {
            "@type": "BreadcrumbList",
            "itemListElement": [
                { "@type": "ListItem", "position": 1, "name": "Home", "item": `${SITE_URL}/` },
                { "@type": "ListItem", "position": 2, "name": "Collections", "item": `${SITE_URL}/collections` },
                { "@type": "ListItem", "position": 3, "name": product.title, "item": `${SITE_URL}/collections/${product.slug}` }
            ]
        }
    };

    return (
        <div className="bg-white dark:bg-stone-950 min-h-screen pt-32 pb-24">
            <SEO
                title={`${product.title} — Handmade Ceramic | KNUTH Ceramics`}
                description={`${product.description} Handcrafted in Corpus Christi, TX. $${product.price} — free shipping on orders over $150.`}
                canonical={`${SITE_URL}/collections/${product.slug}`}
                ogImage={`${SITE_URL}${product.image}`}
                ogType="product"
                schema={productSchema}
            />
            <div className="max-w-[1920px] mx-auto px-6 md:px-12">
                {/* Breadcrumb */}
                <div className="mb-12 text-sm uppercase tracking-widest text-stone-500">
                    <Link to="/collections" className="hover:text-text-main dark:hover:text-white transition-colors">Shop</Link>
                    <span className="mx-2">/</span>
                    <span className="text-text-main dark:text-white">{product.title}</span>
                </div>

                <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 xl:gap-24">
                    {/* Images Column */}
                    <div className="space-y-4">
                        <motion.div
                            initial={{ opacity: 0, y: 20 }}
                            animate={{ opacity: 1, y: 0 }}
                            className="aspect-[4/5] w-full overflow-hidden bg-stone-100 rounded-sm"
                        >
                            <img
                                src={product.image}
                                alt={product.title}
                                className="w-full h-full object-cover"
                            />
                        </motion.div>
                        {/* Additional images grid */}
                        <div className="grid grid-cols-2 gap-4">
                            {product.images?.slice(1).map((img, idx) => (
                                <motion.div
                                    key={idx}
                                    initial={{ opacity: 0, y: 20 }}
                                    animate={{ opacity: 1, y: 0 }}
                                    transition={{ delay: 0.1 * (idx + 1) }}
                                    className="aspect-square w-full overflow-hidden bg-stone-100 rounded-sm"
                                >
                                    <img src={img} alt={`${product.title} detail ${idx + 1}`} className="w-full h-full object-cover" />
                                </motion.div>
                            ))}
                        </div>
                    </div>

                    {/* Info Column */}
                    <div className="lg:sticky lg:top-32 h-fit">
                        <motion.h1
                            initial={{ opacity: 0, x: -20 }}
                            animate={{ opacity: 1, x: 0 }}
                            className="font-display text-5xl md:text-7xl font-light text-text-main dark:text-white mb-6"
                        >
                            {product.title}
                        </motion.h1>

                        <motion.p
                            initial={{ opacity: 0 }}
                            animate={{ opacity: 1 }}
                            transition={{ delay: 0.1 }}
                            className="text-2xl font-light text-stone-600 dark:text-stone-300 mb-8"
                        >
                            ${product.price}
                        </motion.p>

                        <motion.div
                            initial={{ opacity: 0 }}
                            animate={{ opacity: 1 }}
                            transition={{ delay: 0.2 }}
                            className="prose prose-stone dark:prose-invert max-w-none mb-12 font-light leading-relaxed text-lg"
                        >
                            <p>{product.description}</p>
                            <ul>
                                {product.details && product.details.map((detail, i) => (
                                    <li key={i}>{detail}</li>
                                ))}
                                <li>Made in Corpus Christi, TX</li>
                            </ul>
                        </motion.div>

                        {/* 
                        <motion.button
                            initial={{ opacity: 0, y: 10 }}
                            animate={{ opacity: 1, y: 0 }}
                            transition={{ delay: 0.3 }}
                            onClick={() => addToCart(product)}
                            type="button"
                            className="w-full bg-text-main dark:bg-white text-white dark:text-text-main py-4 uppercase tracking-[0.2em] hover:bg-stone-800 dark:hover:bg-stone-200 transition-colors"
                        >
                            Add to Cart
                        </motion.button>
                        */}

                        <div className="mt-12 pt-12 border-t border-stone-200 dark:border-stone-800 text-sm text-stone-500 font-light space-y-2">
                            <p>Free shipping on orders over $150</p>
                            <p>Ships within 3-5 business days</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default ProductDetail;