import { notFound } from 'next/navigation';
import { getPageBySlug, getAllPages, getMediaById } from '@/lib/data';
import { Metadata } from 'next';
import { SEO } from '@/components/SEO';
import { processHTML } from '@/lib/html-compat';
import { LocaleSwitcher } from '@/components/LocaleSwitcher';
import Link from 'next/link';
import { ResponsiveSection, ResponsiveWrapper, ResponsiveGrid } from '@/components/layout/ResponsiveWrapper';
import { FeaturedImage } from '@/components/content/FeaturedImage';
import { Container } from '@/components/ui/Container';
import { Button } from '@/components/ui/Button';

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();
  }

  // Use contentHtml if available, otherwise use excerptHtml
  const contentToDisplay = page.contentHtml && page.contentHtml.trim() !== '' 
    ? page.contentHtml 
    : page.excerptHtml;
  
  const processedContent = processHTML(contentToDisplay || '');

  // Get featured image if available
  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">
        {!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 && (
              <div
                className="text-lg sm:text-xl text-gray-600 leading-relaxed"
                dangerouslySetInnerHTML={{ __html: processHTML(page.excerptHtml) }}
              />
            )}
          </ResponsiveWrapper>
        )}

        {processedContent && (
          <ResponsiveWrapper className="bg-white rounded-lg shadow-sm p-6 sm:p-8" container={true} maxWidth="full">
            <div
              className="prose prose-lg max-w-none"
              dangerouslySetInnerHTML={{ __html: processedContent }}
            />
          </ResponsiveWrapper>
        )}

        {/* Navigation Links */}
        <ResponsiveWrapper className="mt-12" container={true} maxWidth="full">
          <ResponsiveGrid
            columns={{ mobile: 1, tablet: 2, desktop: 4 }}
            gap="responsive"
            stackMobile={true}
          >
            <Link
              href={`/${locale}/blog`}
              className="p-4 bg-blue-50 hover:bg-blue-100 active:bg-blue-200 rounded-lg text-center transition-colors touch-target-md"
            >
              <div className="font-semibold text-blue-900 text-lg">Blog</div>
              <div className="text-sm text-blue-700 mt-1">Read our latest posts</div>
            </Link>
            <Link
              href={`/${locale}/products`}
              className="p-4 bg-green-50 hover:bg-green-100 active:bg-green-200 rounded-lg text-center transition-colors touch-target-md"
            >
              <div className="font-semibold text-green-900 text-lg">Products</div>
              <div className="text-sm text-green-700 mt-1">Browse our catalog</div>
            </Link>
            <Link
              href={`/${locale}/contact`}
              className="p-4 bg-orange-50 hover:bg-orange-100 active:bg-orange-200 rounded-lg text-center transition-colors touch-target-md"
            >
              <div className="font-semibold text-orange-900 text-lg">Contact</div>
              <div className="text-sm text-orange-700 mt-1">Get in touch</div>
            </Link>
            <Link
              href={`/${locale}/blog`}
              className="p-4 bg-purple-50 hover:bg-purple-100 active:bg-purple-200 rounded-lg text-center transition-colors touch-target-md"
            >
              <div className="font-semibold text-purple-900 text-lg">News</div>
              <div className="text-sm text-purple-700 mt-1">Latest updates</div>
            </Link>
          </ResponsiveGrid>
        </ResponsiveWrapper>
      </ResponsiveSection>

      {/* Tailwind CSS Test Section */}
      <ResponsiveSection padding="responsive" className="bg-gradient-to-r from-blue-50 to-indigo-50">
        <Container maxWidth="6xl" centered={true} padding="none">
          <div className="text-center mb-8">
            <h2 className="text-3xl font-bold text-gray-900 mb-4">Tailwind CSS Test</h2>
            <p className="text-lg text-gray-600">If you can see styled components below, Tailwind CSS is working correctly!</p>
          </div>
          
          <div className="flex flex-wrap gap-4 justify-center items-center">
            <Button variant="primary" size="lg">
              Primary Button
            </Button>
            <Button variant="secondary" size="lg">
              Secondary Button
            </Button>
            <Button variant="outline" size="lg">
              Outline Button
            </Button>
            <Button variant="ghost" size="lg">
              Ghost Button
            </Button>
          </div>

          <div className="mt-8 grid grid-cols-1 md:grid-cols-3 gap-4">
            <div className="bg-white p-6 rounded-lg shadow-md border-2 border-blue-200">
              <h3 className="text-xl font-bold text-blue-900 mb-2">Card 1</h3>
              <p className="text-gray-600">This card uses Tailwind shadow, rounded, and border utilities.</p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-lg border-2 border-green-200">
              <h3 className="text-xl font-bold text-green-900 mb-2">Card 2</h3>
              <p className="text-gray-600">Different shadow intensity and border color.</p>
            </div>
            <div className="bg-white p-6 rounded-xl shadow-xl border-2 border-purple-200">
              <h3 className="text-xl font-bold text-purple-900 mb-2">Card 3</h3>
              <p className="text-gray-600">Rounded-xl and shadow-xl for emphasis.</p>
            </div>
          </div>

          <div className="mt-8 p-4 bg-yellow-100 border-l-4 border-yellow-500 text-yellow-800">
            <p className="font-bold">Success!</p>
            <p>If you see this styled alert box with proper colors, spacing, and borders, Tailwind CSS is processing correctly.</p>
          </div>
        </Container>
      </ResponsiveSection>

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