import { notFound } from 'next/navigation';
import { ContentRenderer } from '@/components/content/ContentRenderer';
import { FeaturedImage } from '@/components/content/FeaturedImage';
import { ResponsiveWrapper, ResponsiveSection } from '@/components/layout/ResponsiveWrapper';
import { LocaleSwitcher } from '@/components/LocaleSwitcher';
import { SEO } from '@/components/SEO';
import { Container } from '@/components/ui/Container';
import { getAllPages, getMediaById, getPageBySlug } from '@/lib/data';
import { Metadata } from 'next';

interface PageProps {
  params: {
    locale: string;
    slug?: string;
  };
}

export async function generateStaticParams() {
  const pages = await getAllPages();
  const params = pages.map((page) => ({
    locale: page.locale,
    slug: page.slug,
  }));
  return params;
}

export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
  const { locale, slug = 'home' } = params;
  
  // Map root path to actual home page slugs
  const homeSlugs: Record<string, string> = {
    'en': 'corporate-3-landing-2',
    'de': 'start'
  };
  
  const actualSlug = slug === 'home' ? homeSlugs[locale] || 'home' : slug;
  const page = await getPageBySlug(actualSlug, locale);

  if (!page) {
    return {
      title: 'Page Not Found',
    };
  }

  return {
    title: page.title,
    description: page.excerptHtml || '',
    alternates: {
      languages: {
        de: slug === 'home' ? '/de' : `/de/${slug}`,
        en: slug === 'home' ? '/en' : `/en/${slug}`,
      },
    },
  };
}

export default async function Page({ params }: PageProps) {
  const { locale, slug = 'home' } = params;
  
  // Map root path to actual home page slugs
  const homeSlugs: Record<string, string> = {
    'en': 'corporate-3-landing-2',
    'de': 'start'
  };
  
  const actualSlug = slug === 'home' ? homeSlugs[locale] || 'home' : slug;
  const page = await getPageBySlug(actualSlug, locale);

  if (!page) {
    notFound();
  }

  // Special handling for home page vs other pages
  const isHomePage = slug === 'home' || actualSlug === 'corporate-3-landing-2' || actualSlug === 'start';
  
  if (isHomePage) {
    // HOME PAGE: Render content directly without additional wrappers
    // The content already contains full vc_row structures with backgrounds
    return (
      <>
        <SEO
          title={page.title}
          description={page.excerptHtml || ''}
        />
        
        {/* Main content - full width, no containers */}
        <div className="w-full">
          <ContentRenderer
            content={page.contentHtml || page.excerptHtml || ''}
            className=""
            parsePatterns={true}
          />
        </div>

        {/* Locale switcher at bottom */}
        <ResponsiveSection padding="responsive" className="bg-gray-50">
          <Container maxWidth="6xl" centered={true} padding="none">
            <LocaleSwitcher />
          </Container>
        </ResponsiveSection>
      </>
    );
  }

  // STANDARD PAGES: Use the existing layout with hero and containers
  const contentToDisplay = page.contentHtml || page.excerptHtml;
  const featuredImage = page.featuredImage ? getMediaById(page.featuredImage) : null;

  return (
    <>
      <SEO
        title={page.title}
        description={page.excerptHtml || ''}
      />
      
      {/* Hero Section with Featured Image */}
      {featuredImage && (
        <ResponsiveWrapper className="relative bg-gray-200" padding="none">
          <FeaturedImage
            src={featuredImage.localPath}
            alt={page.title}
            size="full"
            aspectRatio="16:9"
            priority={true}
            className="opacity-90"
          />
          <div className="absolute inset-0 bg-black bg-opacity-40"></div>
          <div className="absolute inset-0 flex items-center justify-center text-center">
            <h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold text-white drop-shadow-lg px-4">
              {page.title}
            </h1>
          </div>
        </ResponsiveWrapper>
      )}

      {/* Main Content */}
      <ResponsiveSection padding="responsive" maxWidth="4xl">
        {/* Title - only show if no featured image */}
        {!featuredImage && (
          <ResponsiveWrapper stackOnMobile={true} centerOnMobile={true} className="mb-8">
            <h1 className="text-3xl sm:text-4xl font-bold text-gray-900 mb-4">
              {page.title}
            </h1>
          </ResponsiveWrapper>
        )}

        {/* Content with pattern parsing */}
        {contentToDisplay && (
          <ResponsiveWrapper className="bg-white rounded-lg shadow-sm p-6 sm:p-8" container={true} maxWidth="full">
            <ContentRenderer
              content={contentToDisplay}
              className="prose prose-lg max-w-none"
              parsePatterns={true}
            />
          </ResponsiveWrapper>
        )}
      </ResponsiveSection>

      {/* Locale Switcher */}
      <ResponsiveSection padding="responsive" className="bg-gray-50">
        <Container maxWidth="6xl" centered={true} padding="none">
          <LocaleSwitcher />
        </Container>
      </ResponsiveSection>
    </>
  );
}