import { notFound } from 'next/navigation';
import { Container, Badge, Heading } from '@/components/ui';
import { setRequestLocale, getTranslations } from 'next-intl/server';
import { Metadata } from 'next';
import { getReferenceBySlug, getAllReferences } from '@/lib/references';
import { MDXRemote } from 'next-mdx-remote/rsc';
import { SITE_URL } from '@/lib/schema';
import TrackedLink from '@/components/analytics/TrackedLink';
import { getButtonClasses, ButtonOverlay } from '@/components/ui/Button';
import { MapPin, Calendar, Briefcase, ChevronLeft } from 'lucide-react';
import Image from 'next/image';

interface PageProps {
  params: Promise<{
    locale: string;
    slug: string;
  }>;
}

export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
  const { locale, slug } = await params;
  if (locale !== 'de' && locale !== 'en') return {};

  const reference = await getReferenceBySlug(slug, locale);
  if (!reference) return {};

  return {
    title: `${reference.frontmatter.title} | Referenzen | E-TIB Gruppe`,
    description: `Details zum Projekt ${reference.frontmatter.title} in ${reference.frontmatter.location}.`,
    alternates: {
      canonical: `${SITE_URL}/${locale}/referenzen/${slug}`,
    },
    openGraph: {
      title: `${reference.frontmatter.title} | E-TIB`,
      description: `Details zum Projekt ${reference.frontmatter.title} in ${reference.frontmatter.location}.`,
      url: `${SITE_URL}/${locale}/referenzen/${slug}`,
    },
  };
}

export async function generateStaticParams(props: any) {
  const params = await props.params;
  const locale = params?.locale || 'de'; // fallback to 'de' if undefined
  const references = await getAllReferences(locale);
  return references.map((ref) => ({
    slug: ref.slug,
    locale
  }));
}

export default async function ReferenceDetail(props: { params: Promise<{ locale: string; slug: string }> }) {
  const { locale, slug } = await props.params;
  
  if (locale !== 'de' && locale !== 'en') {
    notFound();
  }
  
  setRequestLocale(locale);
  const reference = await getReferenceBySlug(slug, locale);
  const t = await getTranslations('ReferenceDetail');

  if (!reference) {
    notFound();
  }

  // MDX components mapping for industrial typography
  const mdxComponents = {
    Heading,
    h1: (props: any) => <Heading level={1} size="2" className="hidden" {...props} />, // Hidden because Hero handles H1
    h2: (props: any) => <Heading level={2} size="3" className="mt-16 mb-6 border-b border-neutral-100 pb-4 text-neutral-dark" {...props} />,
    h3: (props: any) => <Heading level={3} size="4" className="mt-12 mb-4 text-primary" {...props} />,
    h4: (props: any) => <Heading level={4} size="5" className="mt-8 mb-4 uppercase tracking-widest text-neutral-500" {...props} />,
    p: (props: any) => <p className="text-base md:text-lg text-text-secondary leading-[1.8] mb-6 font-medium max-w-3xl" {...props} />,
    ul: (props: any) => <ul className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6 my-12" {...props} />,
    ol: (props: any) => <ol className="list-decimal pl-6 mb-8 space-y-3 text-base md:text-lg text-text-secondary font-medium max-w-3xl" {...props} />,
    li: (props: any) => {
      // Smart Metric Card Logic
      let text = '';
      if (typeof props.children === 'string') {
        text = props.children;
      } else if (Array.isArray(props.children)) {
        text = props.children.map((c: any) => typeof c === 'string' ? c : '').join('');
      }

      const match = text.match(/^([\d.,]+)\s*(m|Satz|Stück|km|kV|Fasern)\b(.*)/);
      
      if (match && typeof props.children === 'string') {
        const [, value, unit, rest] = match;
        return (
          <li className="bg-white p-6 md:p-8 rounded-3xl border border-neutral-100 flex flex-col justify-center hover:shadow-[0_20px_40px_-15px_rgba(0,0,0,0.05)] hover:border-primary/30 transition-all duration-500 group hover:-translate-y-1 relative overflow-hidden">
            <div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-bl from-neutral-50 to-transparent rounded-bl-full -z-10 group-hover:from-primary/5 transition-colors duration-500" />
            <div className="flex items-baseline gap-2 mb-3">
              <span className="text-4xl md:text-5xl font-bold font-heading text-primary tracking-tight">{value}</span>
              <span className="text-lg md:text-xl font-bold text-neutral-400">{unit}</span>
            </div>
            <span className="text-neutral-600 font-semibold text-sm md:text-base leading-snug">{rest.replace(/^[\s-]*\s/, '')}</span>
          </li>
        );
      }

      return (
        <li className="bg-neutral-50 p-6 rounded-3xl border border-neutral-100 flex items-start gap-4 hover:shadow-md transition-all duration-300 group hover:-translate-y-1">
          <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center shrink-0 mt-0.5 group-hover:bg-primary/20 transition-colors">
            <svg className="w-4 h-4 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
              <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
            </svg>
          </div>
          <span className="text-neutral-700 font-semibold leading-relaxed">{props.children}</span>
        </li>
      );
    },
    a: (props: any) => <a className="text-primary hover:text-primary-dark underline decoration-primary/30 underline-offset-4 hover:decoration-primary transition-all font-bold" {...props} />,
    strong: (props: any) => <strong className="font-bold text-neutral-900" {...props} />,
    blockquote: (props: any) => (
      <blockquote className="border-l-4 border-primary pl-6 py-3 my-10 italic bg-neutral-50 rounded-r-2xl text-neutral-700 font-medium max-w-3xl shadow-sm" {...props} />
    ),
    hr: (props: any) => <hr className="my-16 border-t-2 border-neutral-100 max-w-3xl" {...props} />,
    img: (props: any) => <img className="rounded-2xl shadow-2xl my-12 max-w-full h-auto border border-neutral-100" {...props} />,
  };

  return (
    <div className="flex flex-col min-h-screen bg-white">
      {/* Hero Section */}
      <section className="bg-[#050B14] text-white pt-40 pb-16 md:pt-52 md:pb-24 min-h-[45vh] flex flex-col justify-end relative overflow-hidden">
        {reference.frontmatter.featuredImage && (
          <div className="absolute inset-0 z-0">
            <Image
              src={reference.frontmatter.featuredImage}
              alt={reference.frontmatter.title}
              fill
              className="object-cover opacity-30 mix-blend-luminosity scale-105"
              priority
            />
            <div className="absolute inset-0 bg-gradient-to-t from-[#050B14] via-[#050B14]/70 to-transparent" />
            <div className="absolute inset-0 bg-gradient-to-r from-[#050B14] via-[#050B14]/40 to-transparent" />
          </div>
        )}
        <div className="absolute inset-0 opacity-20 z-0 pointer-events-none">
          <div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-primary/30 via-transparent to-transparent" />
        </div>
        <Container className="relative z-10">
          <div className="mb-12">
            <TrackedLink
              href={`/${locale}/referenzen`}
              className="inline-flex items-center gap-2 text-white/60 hover:text-white transition-colors uppercase tracking-widest text-xs font-bold"
              eventProperties={{ location: 'reference_back_btn' }}
            >
              <ChevronLeft className="w-4 h-4" />
              {t('backToOverview')}
            </TrackedLink>
          </div>
          <div className="max-w-5xl">
            <Badge variant="accent" className="mb-6">
              {t('projectReference')}
            </Badge>
            <Heading level={1} variant="white" className="mb-10 leading-[1.1] md:text-6xl lg:text-7xl drop-shadow-lg">
              {reference.frontmatter.title}
            </Heading>
            
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-6 mt-12 md:mt-16">
              <div className="flex items-start gap-4 p-6 md:p-8 bg-white/5 rounded-3xl border border-white/10 backdrop-blur-md transition-all hover:bg-white/10">
                <MapPin className="w-8 h-8 text-primary shrink-0 opacity-80" />
                <div>
                  <p className="text-xs text-white/50 mb-1.5 uppercase tracking-widest font-bold">{t('location')}</p>
                  <p className="font-semibold text-lg md:text-xl text-white/90">{reference.frontmatter.location}</p>
                </div>
              </div>
              <div className="flex items-start gap-4 p-6 md:p-8 bg-white/5 rounded-3xl border border-white/10 backdrop-blur-md transition-all hover:bg-white/10">
                <Briefcase className="w-8 h-8 text-primary shrink-0 opacity-80" />
                <div>
                  <p className="text-xs text-white/50 mb-1.5 uppercase tracking-widest font-bold">{t('client')}</p>
                  <p className="font-semibold text-lg md:text-xl text-white/90 line-clamp-2">{reference.frontmatter.client}</p>
                </div>
              </div>
              <div className="flex items-start gap-4 p-6 md:p-8 bg-white/5 rounded-3xl border border-white/10 backdrop-blur-md transition-all hover:bg-white/10">
                <Calendar className="w-8 h-8 text-primary shrink-0 opacity-80" />
                <div>
                  <p className="text-xs text-white/50 mb-1.5 uppercase tracking-widest font-bold">{t('period')}</p>
                  <p className="font-semibold text-lg md:text-xl text-white/90">{reference.frontmatter.dateString || new Date(reference.frontmatter.date).getFullYear()}</p>
                </div>
              </div>
            </div>
          </div>
        </Container>
      </section>

      {/* Main Content Area */}
      <Container className="py-16 md:py-24">
        <div className="max-w-4xl mx-auto">
          <h2 className="text-3xl font-bold text-neutral-dark mb-8">{t('scopeTitle')}</h2>
          
          <div className="w-full">
            <MDXRemote source={reference.content} components={mdxComponents} />
          </div>

          <div className="mt-20 flex justify-center">
             <TrackedLink
                href={`/${locale}/referenzen`}
                className={getButtonClasses('primary', 'lg')}
                eventProperties={{ location: 'reference_bottom_back_btn' }}
              >
                <span className="relative z-10 flex items-center justify-center gap-2">
                  {t('viewAll')}
                </span>
                <ButtonOverlay variant="primary" />
              </TrackedLink>
          </div>
        </div>
      </Container>
    </div>
  );
}
