import { notFound } from 'next/navigation';
import Image from 'next/image';
import Link from 'next/link';
import { productCategories, portfolioProjects } from '@/data/site-config';


interface Props {
  params: { slug: string[] };
}

// Generate all possible paths from product categories and portfolio projects
export async function generateStaticParams() {
  const paths: { slug: string[] }[] = [];
  
  // Add product category paths
  productCategories.forEach((product) => {
    // Remove leading slash and split the href
    const pathParts = product.href.replace(/^\//, '').replace(/\/$/, '').split('/');
    paths.push({ slug: pathParts });
  });
  
  // Add portfolio project paths
  portfolioProjects.forEach((project) => {
    const pathParts = project.href.replace(/^\//, '').replace(/\/$/, '').split('/');
    paths.push({ slug: pathParts });
  });
  
  return paths;
}

type ContentType = 'product' | 'portfolio';

function findContentBySlug(slug: string[]): { type: ContentType; data: typeof productCategories[0] | typeof portfolioProjects[0] } | null {
  // Decode URL-encoded slug parts
  const decodedSlug = slug.map(part => decodeURIComponent(part));
  const fullPath = '/' + decodedSlug.join('/') + '/';
  
  // Check products first
  const product = productCategories.find((p) => p.href === fullPath);
  if (product) {
    return { type: 'product', data: product };
  }
  
  // Check portfolio projects
  const portfolio = portfolioProjects.find((p) => p.href === fullPath);
  if (portfolio) {
    return { type: 'portfolio', data: portfolio };
  }
  
  return null;
}

export async function generateMetadata({ params }: Props) {
  const content = findContentBySlug(params.slug);
  
  if (!content) {
    return { title: 'ไม่พบหน้า' };
  }
  
  const { type, data } = content;
  
  if (type === 'product') {
    const product = data as typeof productCategories[0];
    return {
      title: `${product.name} - ${product.nameEn}`,
      description: product.description,
      keywords: product.keywords,
    };
  }
  
  return {
    title: data.name,
    description: data.description,
  };
}

export default function DynamicPage({ params }: Props) {
  const content = findContentBySlug(params.slug);
  
  if (!content) {
    notFound();
  }
  
  const { type, data } = content;
  
  // Render portfolio project page
  if (type === 'portfolio') {
    return <PortfolioPage project={data as typeof portfolioProjects[0]} />;
  }
  
  // Render product page
  return <ProductPage product={data as typeof productCategories[0]} />;
}

// Product Page Component
function ProductPage({ product }: { product: typeof productCategories[0] }) {
  // Find related products in same category
  const relatedProducts = productCategories
    .filter((p) => p.slug === product.slug && p.id !== product.id)
    .slice(0, 4);

  return (
    <div className="pt-32 pb-16">
      <div className="container mx-auto px-4">
        {/* Breadcrumb */}
        <nav className="mb-6">
          <ol className="flex items-center gap-2 text-sm">
            <li>
              <Link href="/" className="text-secondary-500 hover:text-primary-600">
                หน้าแรก
              </Link>
            </li>
            <li className="text-secondary-400">/</li>
            <li>
              <Link href="/product" className="text-secondary-500 hover:text-primary-600">
                สินค้า
              </Link>
            </li>
            <li className="text-secondary-400">/</li>
            <li className="text-primary-600 font-medium">{product.name}</li>
          </ol>
        </nav>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
          {/* Product Image */}
          <div className="relative aspect-video bg-secondary-100 rounded-xl overflow-hidden">
            <Image
              src={product.image}
              alt={product.name}
              fill
              className="object-cover"
              priority
            />
          </div>

          {/* Product Info */}
          <div>
            <span className="text-primary-600 font-semibold">{product.nameEn}</span>
            <h1 className="text-3xl md:text-4xl font-bold text-secondary-900 mt-2 mb-4">
              {product.name}
            </h1>
            <p className="text-secondary-600 text-lg mb-6">
              {product.description}
            </p>
            
            {/* CTA */}
            <div className="flex flex-wrap gap-4">
              <Link href="/contact-us" className="btn-primary">
                ขอใบเสนอราคา
              </Link>
              <a
                href="tel:090-555-1415"
                className="btn-outline"
              >
                โทรสอบถาม
              </a>
            </div>
          </div>
        </div>

        {/* Related Products */}
        {relatedProducts.length > 0 && (
          <div className="mt-16">
            <h2 className="text-2xl font-bold text-secondary-900 mb-6">
              สินค้าที่เกี่ยวข้อง
            </h2>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
              {relatedProducts.map((related) => (
                <Link
                  key={related.id}
                  href={related.href}
                  className="card group"
                >
                  <div className="relative aspect-video bg-secondary-100">
                    <Image
                      src={related.image}
                      alt={related.name}
                      fill
                      className="object-cover group-hover:scale-105 transition-transform duration-300"
                    />
                  </div>
                  <div className="p-4">
                    <span className="text-xs text-primary-600 font-semibold">
                      {related.nameEn}
                    </span>
                    <h3 className="text-lg font-bold text-secondary-900 mt-1 group-hover:text-primary-600 transition-colors">
                      {related.name}
                    </h3>
                  </div>
                </Link>
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

// Portfolio Page Component
function PortfolioPage({ project }: { project: typeof portfolioProjects[0] }) {
  return (
    <div className="pt-32 pb-16">
      <div className="container mx-auto px-4">
        {/* Breadcrumb */}
        <nav className="mb-6">
          <ol className="flex items-center gap-2 text-sm">
            <li>
              <Link href="/" className="text-secondary-500 hover:text-primary-600">
                หน้าแรก
              </Link>
            </li>
            <li className="text-secondary-400">/</li>
            <li>
              <Link href="/portfolio" className="text-secondary-500 hover:text-primary-600">
                ผลงาน
              </Link>
            </li>
            <li className="text-secondary-400">/</li>
            <li className="text-primary-600 font-medium">{project.name}</li>
          </ol>
        </nav>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
          {/* Project Image */}
          <div className="relative aspect-video bg-secondary-100 rounded-xl overflow-hidden">
            <Image
              src={project.image}
              alt={project.name}
              fill
              className="object-cover"
              priority
            />
          </div>

          {/* Project Info */}
          <div>
            <h1 className="text-3xl md:text-4xl font-bold text-secondary-900 mb-4">
              {project.name}
            </h1>
            <p className="text-secondary-600 text-lg mb-6">
              {project.description}
            </p>
            
            {/* CTA */}
            <div className="flex flex-wrap gap-4">
              <Link href="/contact-us" className="btn-primary">
                ติดต่อเรา
              </Link>
              <Link href="/portfolio" className="btn-outline">
                ดูผลงานอื่นๆ
              </Link>
            </div>
          </div>
        </div>

        {/* Other Projects */}
        <div className="mt-16">
          <h2 className="text-2xl font-bold text-secondary-900 mb-6">
            ผลงานอื่นๆ
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {portfolioProjects.filter(p => p.id !== project.id).slice(0, 4).map((other) => (
              <Link
                key={other.id}
                href={other.href}
                className="card group"
              >
                <div className="relative aspect-video bg-secondary-100">
                  <Image
                    src={other.image}
                    alt={other.name}
                    fill
                    className="object-cover group-hover:scale-105 transition-transform duration-300"
                  />
                </div>
                <div className="p-4">
                  <h3 className="text-lg font-bold text-secondary-900 group-hover:text-primary-600 transition-colors">
                    {other.name}
                  </h3>
                </div>
              </Link>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}
