import { notFound } from 'next/navigation';
import Header from "@/components/shared/layout/header/Header";
import ServiceDetailsBanner from "@/components/shared/banners/ServiceDetailsBanner";
import ServiceDetails from "@/components/pages/services/ServiceDetails";
import ServiceFeatures from "@/components/pages/services/ServiceFeatures";
import ServiceDeliverables from "@/components/pages/services/ServiceDeliverables";
import ServiceProcess from "@/components/pages/services/ServiceProcess";
import Transform from "@/components/pages/services/Transform";
import Footer from "@/components/shared/layout/footer/Footer";
import ServicesScrollProgressButton from "@/components/pages/services/ServicesScrollProgressButton";
import ServicesInitAnimations from "@/components/pages/services/ServicesInitAnimations";
import { serviceService, Service } from "@/lib/api/serviceService";

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

// Generate static params for all services (optional - for better performance)
export async function generateStaticParams() {
  try {
    const services = await serviceService.getServices();
    return services.results.map((service: Service) => ({
      slug: service.slug,
    }));
  } catch (error) {
    console.error('Error generating static params:', error);
    return [];
  }
}

// Generate metadata for each service page
export async function generateMetadata({ params }: ServicePageProps) {
  try {
    const { slug } = await params;
    const service = await serviceService.getServiceBySlug(slug);
    
    return {
      title: `${service.title} - GNX Services`,
      description: service.description,
      openGraph: {
        title: service.title,
        description: service.description,
        images: service.image_url ? [service.image_url] : [],
      },
    };
  } catch (error) {
    return {
      title: 'Service Not Found - GNX',
      description: 'The requested service could not be found.',
    };
  }
}

const ServicePage = async ({ params }: ServicePageProps) => {
  let service: Service;
  
  try {
    const { slug } = await params;
    service = await serviceService.getServiceBySlug(slug);
  } catch (error) {
    console.error('Error fetching service:', error);
    notFound();
  }

  return (
    <div className="enterprise-app">
      <Header />
      <main className="enterprise-main">
        <ServiceDetailsBanner service={service} />
        <ServiceDetails service={service} />
        <ServiceFeatures service={service} />
        <ServiceDeliverables service={service} />
        <Transform service={service} />
        <ServiceProcess service={service} />
      </main>
      <Footer />
      <ServicesScrollProgressButton />
      <ServicesInitAnimations />
    </div>
  );
};

export default ServicePage;