import Image from 'next/image'
import Link from 'next/link'
import { notFound } from 'next/navigation'
import { getProductBySlug, getAllProducts } from '@/lib/products'
import OrderForm from '@/components/OrderForm'
import VideoPlayer from '@/components/VideoPlayer'
import ProductGallery from '@/components/ProductGallery'
import type { Metadata } from 'next'

interface ProductPageProps {
  params: {
    slug: string
  }
}

// Dynamic rendering for admin-managed products
export const dynamic = 'force-dynamic'

export async function generateMetadata({ params }: ProductPageProps): Promise<Metadata> {
  const product = await getProductBySlug(params.slug)
  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://modul-construction.com.ua'
  
  if (!product) {
    return {
      title: 'Продукт не знайдено',
    }
  }

  const productImage = product.images && product.images.length > 0 
    ? `${baseUrl}${product.images[0]}`
    : `${baseUrl}/images/default-product.jpg`

  return {
    title: `${product.name} - Modul Construction - МОДУЛЬНІ СПОРУДИ`,
    description: product.description,
    keywords: `${product.name}, будівельні матеріали, ${product.price}`,
    openGraph: {
      title: `${product.name} - Modul Construction - МОДУЛЬНІ СПОРУДИ`,
      description: product.description,
      type: 'website',
      url: `${baseUrl}/products/${product.slug}/`,
      images: [
        {
          url: productImage,
          width: 1200,
          height: 630,
          alt: product.name,
        },
      ],
    },
    twitter: {
      card: 'summary_large_image',
      title: `${product.name} - Modul Construction - МОДУЛЬНІ СПОРУДИ`,
      description: product.description,
      images: [productImage],
    },
  }
}

export default async function ProductPage({ params }: ProductPageProps) {
  const product = await getProductBySlug(params.slug)

  if (!product) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-50">
        <div className="text-center">
          <h1 className="text-6xl font-bold text-gray-900 mb-4">404</h1>
          <h2 className="text-2xl font-semibold text-gray-700 mb-4">Продукт не знайдено</h2>
          <p className="text-gray-600 mb-8">Вибачте, але продукт, який ви шукаєте, не існує.</p>
          <a className="btn-primary inline-block" href="/">Повернутися на головну</a>
        </div>
      </div>
    )
  }

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Breadcrumb */}
      <nav className="bg-white border-b border-gray-200">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center space-x-2 text-sm">
            <Link href="/" className="text-gray-500 hover:text-primary-600">
              Головна
            </Link>
            <span className="text-gray-400">/</span>
            <Link href="/products" className="text-gray-500 hover:text-primary-600">
              Продукція
            </Link>
            <span className="text-gray-400">/</span>
            <span className="text-gray-900 font-medium">{product.name}</span>
          </div>
        </div>
      </nav>

      <div className="container mx-auto px-4 py-8">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
          {/* Left Column - Images and Video */}
          <div className="space-y-4">
            {/* Product Gallery */}
            <ProductGallery images={product.images || []} productName={product.name} />

            {/* Video */}
            {product.videoUrl && (
              <div className="mt-6">
                <h3 className="text-lg font-semibold text-gray-900 mb-3">Відео</h3>
                <VideoPlayer videoUrl={product.videoUrl} title={product.name} />
              </div>
            )}
          </div>

          {/* Right Column - Product Info and Order Form */}
          <div className="space-y-6">
            <div>
              <h1 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
                {product.name}
              </h1>
              {product.featured && (
                <span className="inline-block bg-primary-900 text-white px-3 py-1 rounded text-sm font-semibold mb-4">
                  В наявності
                </span>
              )}
              <div className="text-3xl font-bold text-primary-900 mb-6">
                {product.price}
              </div>
              <div className="prose max-w-none">
                <p className="text-gray-700 text-lg leading-relaxed">
                  {product.description}
                </p>
              </div>
            </div>

            {/* Order Form */}
            <OrderForm productName={product.name} productSlug={product.slug} />
          </div>
        </div>
      </div>
    </div>
  )
}