import { notFound } from "next/navigation";
import { Scooter3DViewer } from "@/components/scooters/Scooter3DViewer";
import { ScooterARViewer } from "@/components/scooters/ScooterARViewer";
import { ScooterBranchAvailability } from "@/components/scooters/ScooterBranchAvailability";
import { ScooterCTA } from "@/components/scooters/ScooterCTA";
import { ScooterGallery } from "@/components/scooters/ScooterGallery";
import { ScooterHero } from "@/components/scooters/ScooterHero";
import { ScooterSpecs } from "@/components/scooters/ScooterSpecs";
import { ScooterTestimonials } from "@/components/scooters/ScooterTestimonials";
import { ProductJsonLd } from "@/components/seo/ProductJsonLd";
import { getScooterDetailPageData, getScootersPageData } from "@/lib/db-data";
import { absoluteUrl } from "@/lib/seo";

type ScooterDetailPageProps = {
  params: Promise<{
    slug: string;
  }>;
};

export async function generateStaticParams() {
  const { scooters } = await getScootersPageData();

  return scooters.map((scooter) => ({
    slug: scooter.slug,
  }));
}

export async function generateMetadata({ params }: ScooterDetailPageProps) {
  const { slug } = await params;
  const { scooter, brand } = await getScooterDetailPageData(slug);

  if (!scooter) {
    return {
      title: "Scooter Not Found",
    };
  }

  return {
    title: `${scooter.name}${brand ? ` by ${brand.name}` : ""}`,
    description: scooter.shortDescription,
    alternates: {
      canonical: absoluteUrl(`/scooters/${scooter.slug}`),
    },
    openGraph: {
      title: `${scooter.name}${brand ? ` by ${brand.name}` : ""} | Bashista Auto`,
      description: scooter.shortDescription,
      url: absoluteUrl(`/scooters/${scooter.slug}`),
      type: "website",
      images: [
        {
          url: absoluteUrl(scooter.heroImage),
          alt: scooter.name,
        },
      ],
    },
  };
}

export default async function ScooterDetailPage({ params }: ScooterDetailPageProps) {
  const { slug } = await params;
  const { scooter, brand, availability, testimonials } =
    await getScooterDetailPageData(slug);

  if (!scooter) {
    notFound();
  }

  return (
    <>
      <ProductJsonLd scooter={scooter} brand={brand} />
      <ScooterHero scooter={scooter} brand={brand} />
      <ScooterSpecs scooter={scooter} />
      <Scooter3DViewer
        glbUrl={scooter.model3dGlbUrl}
        posterImage={scooter.posterImage}
        scooterName={scooter.name}
      />
      <ScooterARViewer
        glbUrl={scooter.arEnabled ? scooter.model3dGlbUrl : undefined}
        usdzUrl={scooter.model3dUsdzUrl}
        posterImage={scooter.posterImage}
        scooterName={scooter.name}
      />
      <ScooterBranchAvailability availability={availability} />
      <ScooterGallery scooter={scooter} />
      <ScooterTestimonials testimonials={testimonials} />
      <ScooterCTA scooter={scooter} />
    </>
  );
}