import { notFound } from 'next/navigation';
import { MDXRemote } from 'next-mdx-remote/rsc';
import { getProductBySlug } from '@/lib/mdx';
import ProductTechnicalData from '@/components/ProductTechnicalData';
import Image from 'next/image';

interface ProductPageProps {
  params: {
    locale: string;
    slug: string[];
  };
}

const components = {
  ProductTechnicalData,
  p: (props: any) => <div {...props} className="mb-4" />,
};

export default async function ProductPage({ params }: ProductPageProps) {
  const { locale, slug } = params;
  const productSlug = slug[slug.length - 1]; // Use the last segment as the slug

  const product = await getProductBySlug(productSlug, locale);

  if (!product) {
    notFound();
  }

  return (
    <div className="container mx-auto px-4 py-8">
      <div className="mb-8">
        <h1 className="text-4xl font-bold text-primary mb-4">{product.frontmatter.title}</h1>
        <div className="flex flex-wrap gap-2 mb-4">
          {product.frontmatter.categories.map((cat, idx) => (
            <span key={idx} className="bg-neutral-dark text-text-secondary px-2 py-1 rounded text-sm">
              {cat}
            </span>
          ))}
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <div className="lg:col-span-2">
          <div className="prose max-w-none mb-8">
            <MDXRemote source={product.content} components={components} />
          </div>
        </div>
        
        <div className="lg:col-span-1">
          {product.frontmatter.images && product.frontmatter.images.length > 0 && (
            <div className="sticky top-4">
              <div className="bg-white p-4 rounded-lg shadow-sm border border-neutral-dark">
                <div className="relative aspect-square mb-4">
                  {/* Note: Images from WC might be external URLs. Next/Image requires configuration for external domains. */}
                  {/* For now using standard img tag if domain not configured, or configure domains. */}
                  <img 
                    src={product.frontmatter.images[0]} 
                    alt={product.frontmatter.title}
                    className="w-full h-full object-contain"
                  />
                </div>
                <div className="grid grid-cols-4 gap-2">
                  {product.frontmatter.images.slice(1, 5).map((img, idx) => (
                    <div key={idx} className="relative aspect-square border border-neutral-dark rounded overflow-hidden">
                      <img src={img} alt="" className="w-full h-full object-cover" />
                    </div>
                  ))}
                </div>
              </div>
              
              <div className="mt-6 bg-primary-light p-6 rounded-lg">
                <h3 className="text-lg font-semibold text-primary-dark mb-2">Contact Us</h3>
                <p className="text-text-secondary mb-4">Need more information about {product.frontmatter.title}?</p>
                <button className="w-full bg-primary text-white py-2 px-4 rounded hover:bg-primary-dark transition-colors">
                  Request Quote
                </button>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}