import { notFound } from 'next/navigation';
import { getPageBySlug, getAllPages, getMediaById } from '@/lib/data';
import { Metadata } from 'next';
import { SEO } from '@/components/SEO';
import { ContentRenderer } from '@/components/content/ContentRenderer';
import { Breadcrumbs } from '@/components/content/Breadcrumbs';
import { Hero } from '@/components/content/Hero';
import { ContactForm } from '@/components/ContactForm';
import { ResponsiveSection, ResponsiveWrapper } from '@/components/layout/ResponsiveWrapper';

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

export async function generateStaticParams() {
  const pages = await getAllPages();
  // Filter for contact pages only
  const contactPages = pages.filter(p => p.slug === 'contact' || p.slug === 'kontakt');
  return contactPages.map((page) => ({
    locale: page.locale,
  }));
}

export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
  const { locale } = params;
  const slug = locale === 'de' ? 'kontakt' : 'contact';
  
  const page = await getPageBySlug(slug, locale);

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

  return {
    title: page.title,
    description: page.excerptHtml || '',
    alternates: {
      languages: {
        de: '/de/kontakt',
        en: '/en/contact',
      },
    },
  };
}

export default async function ContactPage({ params }: PageProps) {
  const { locale } = params;
  const slug = locale === 'de' ? 'kontakt' : 'contact';
  
  const page = await getPageBySlug(slug, locale);

  if (!page) {
    notFound();
  }

  // Get featured image if available
  const featuredImage = page.featuredImage ? getMediaById(page.featuredImage) : null;

  // Content is already processed during data export
  const contentToDisplay = page.contentHtml && page.contentHtml.trim() !== ''
    ? page.contentHtml
    : page.excerptHtml;

  // Breadcrumb items
  const breadcrumbItems = [
    { label: locale === 'de' ? 'Kontakt' : 'Contact' }
  ];

  return (
    <>
      <SEO
        title={page.title}
        description={page.excerptHtml || ''}
      />
      
      {/* Breadcrumbs */}
      <Breadcrumbs 
        items={breadcrumbItems}
        homeLabel={locale === 'de' ? 'Startseite' : 'Home'}
        homeHref={`/${locale}`}
      />

      {/* Hero Section with Featured Image */}
      {featuredImage && (
        <Hero
          title={page.title}
          subtitle={page.excerptHtml ? page.excerptHtml.replace(/<[^>]*>/g, '') : undefined}
          backgroundImage={featuredImage.localPath}
          backgroundAlt={page.title}
          height="md"
          variant="dark"
          overlay={true}
          overlayOpacity={0.5}
        />
      )}

      {/* Main Content */}
      <ResponsiveSection padding="responsive" maxWidth="4xl">
        {!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>
            {page.excerptHtml && (
              <ContentRenderer
                content={page.excerptHtml}
                className="text-lg sm:text-xl text-gray-600 leading-relaxed"
              />
            )}
          </ResponsiveWrapper>
        )}

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

        {/* Contact Form */}
        <ResponsiveWrapper className="bg-gray-50 rounded-lg p-6 sm:p-8" container={true} maxWidth="full">
          <ContactForm />
        </ResponsiveWrapper>
      </ResponsiveSection>
    </>
  );
}