import { Metadata } from 'next';
import { setRequestLocale } from 'next-intl/server';
import { notFound } from 'next/navigation';
import { getMdxContent } from '@/lib/mdx';
import { MDXRemote } from 'next-mdx-remote/rsc';


import nextDynamic from 'next/dynamic';

import { HeroVideo as HomeHero } from '@/components/blocks/HeroVideo';
const HomeSubCompanyTiles = nextDynamic(() => import('@/components/blocks/SubCompanyTiles').then(mod => mod.SubCompanyTiles));
const HomeCompetenceBentoGrid = nextDynamic(() => import('@/components/blocks/CompetenceBentoGrid').then(mod => mod.CompetenceBentoGrid));
const HomeReferencesSlider = nextDynamic(() => import('@/components/blocks/ReferencesSlider').then(mod => mod.ReferencesSlider));
const FaqBlock = nextDynamic(() => import('@/components/blocks/FaqBlock').then(mod => mod.FaqBlock));
const CertificatesBlock = nextDynamic(() => import('@/components/blocks/CertificatesBlock').then(mod => mod.CertificatesBlock));
import { HeroSection } from '@/components/blocks/HeroSection';
import JsonLd from '@/components/JsonLd';

import { Button } from '@/components/ui/Button';
import { Heading } from '@/components/ui/Heading';
const AnimatedCounter = nextDynamic(() => import('@/components/ui').then(mod => mod.AnimatedCounter));
const InteractiveGermanyMap = nextDynamic(() => import('@/components/blocks/InteractiveGermanyMap').then(mod => mod.InteractiveGermanyMap));
const ScaleOfImpact = nextDynamic(() => import('@/components/blocks/ScaleOfImpact').then(mod => mod.ScaleOfImpact));
import { getAllReferences } from '@/lib/references';

const mdxComponents = (references: any[]) => ({
  HomeHero,
  HomeSubCompanyTiles,
  HomeCompetenceBentoGrid,
  HomeReferencesSlider: (props: any) => <HomeReferencesSlider {...props} references={props.references || references} />,
  FaqBlock,
  CertificatesBlock,
  HeroSection,
  JsonLd,
  Button,
  Heading,
  AnimatedCounter,
  InteractiveGermanyMap,
  ScaleOfImpact,
  img: (props: any) => {
    // We proxy it through Next.js image optimizer
    return <img {...props} src={`/_next/image?url=${encodeURIComponent(props.src)}&w=1920&q=75`} loading="lazy" decoding="async" />;
  }
});

export async function generateMetadata(props: any): Promise<Metadata> {
  const { locale } = await props.params;
  if (locale !== 'de' && locale !== 'en') return {};
  
  const mdx = await getMdxContent(locale, 'home');
  
  return {
    title: mdx?.frontmatter?.title || (locale === 'de' ? 'Startseite' : 'Home'),
    description: mdx?.frontmatter?.description,
  };
}

export default async function Home(props: any) {
  const { locale } = await props.params;
  
  if (locale !== 'de' && locale !== 'en') {
    notFound();
  }
  
  setRequestLocale(locale);

  const mdx = await getMdxContent(locale, 'home');
  const allReferences = await getAllReferences(locale);
  
  // Transform ReferenceData to the format expected by ReferencesSlider
  const sliderReferences = allReferences.map(ref => ({
    id: ref.slug,
    title: ref.frontmatter.title,
    slug: ref.slug,
    category: ref.frontmatter.location, // Using location as category if not specified
    image: ref.frontmatter.featuredImage
  })).slice(0, 6);

  if (!mdx) {
    notFound();
  }

  return (
    <main>
      <MDXRemote source={mdx.content} components={mdxComponents(sliderReferences)} />
    </main>
  );
}