import { Metadata } from "next";
import Header from "@/components/shared/layout/header/Header";
import CaseSingle from "@/components/pages/case-study/CaseSingle";
import Process from "@/components/pages/case-study/Process";
import RelatedCase from "@/components/pages/case-study/RelatedCase";
import Footer from "@/components/shared/layout/footer/Footer";
import CaseStudyScrollProgressButton from "@/components/pages/case-study/CaseStudyScrollProgressButton";
import CaseStudyInitAnimations from "@/components/pages/case-study/CaseStudyInitAnimations";
import { generateCaseStudyMetadata } from "@/lib/seo/metadata";
import { API_CONFIG } from "@/lib/config/api";

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

export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
  const { slug } = await params;
  
  try {
    const response = await fetch(
      `${API_CONFIG.BASE_URL}/api/case-studies/${slug}/`,
      {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json',
        },
        next: { revalidate: 3600 }, // Revalidate every hour
      }
    );

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const caseStudy = await response.json();
    
    return generateCaseStudyMetadata({
      title: caseStudy.title,
      description: caseStudy.meta_description || caseStudy.excerpt || caseStudy.description,
      excerpt: caseStudy.excerpt,
      slug: caseStudy.slug,
      image: caseStudy.featured_image || caseStudy.poster_image || caseStudy.thumbnail,
      client_name: caseStudy.client?.name || caseStudy.client_name,
    });
  } catch (error) {
    // Return default metadata if case study not found
    return {
      title: 'Case Study | GNX Soft',
      description: 'Enterprise case study and success story',
    };
  }
}

const page = async ({ params }: PageProps) => {
  const { slug } = await params;
  
  return (
    <div className="tp-app">
      <Header />
      <main>
        <CaseSingle slug={slug} />
        <Process slug={slug} />
        <RelatedCase slug={slug} />
      </main>
      <Footer />
      <CaseStudyScrollProgressButton />
      <CaseStudyInitAnimations />
    </div>
  );
};

export default page;