import { notFound } from "next/navigation";
import type { Metadata } from "next";
import AmenitiesSection from "@/sections/property-details/amenities";
import PropertyHeroWrapper from "@/sections/property-details/animatedHero/PropertyHeroWrapper";
import PropertyLocationMap from "@/sections/property-details/locationMap";
import ProjectsWithin from "@/sections/property-details/projectsWithin";
import ProjectFeatures from "@/sections/property-details/projectFeatures";
import VideoShowcase from "@/sections/property-details/videoShowcase";
import PropertyPortfolioGallery from "@/sections/property-details/portfolioGallery";
import {
  fetchPropertyBySlug,
  fetchListingPropertyPageBySlug,
  fetchPublishedListingPropertyPageSlugs,
} from "@/utils/strapi";
import { getStrapiImageUrl } from "@/utils/getStrapiUrl";

interface PropertyDetailsPageProps {
  params: Promise<{
    type: string;
    slug: string;
  }>;
}

const BASE_URL =
  process.env.NEXT_PUBLIC_BASE_URL ||
  process.env.NEXT_PUBLIC_SITE_URL ||
  (process.env.NODE_ENV === "production"
    ? "https://navana-realestate.com"
    : "http://localhost:3000");

export async function generateMetadata({
  params,
}: PropertyDetailsPageProps): Promise<Metadata> {
  const { type, slug } = await params;
  const typeLower = type.toLowerCase();
  const publishedSlugs = await fetchPublishedListingPropertyPageSlugs();
  if (
    publishedSlugs.length > 0 &&
    !publishedSlugs.includes(typeLower)
  ) {
    return { title: "Property Not Found" };
  }

  const listingPage = await fetchListingPropertyPageBySlug(typeLower);

  const property = await fetchPropertyBySlug(typeLower, slug);

  if (!property) {
    return {
      title: "Property Not Found",
    };
  }

  const propertyTypeLabel =
    listingPage?.name ||
    type.charAt(0).toUpperCase() + type.slice(1).replace(/-/g, " ");
  const title = `${property.title} | ${propertyTypeLabel} Property | Navana Real Estate`;
  const description =
    property.description ||
    `Explore ${property.title}, a ${propertyTypeLabel.toLowerCase()} property${property.location ? ` in ${property.location.name}` : ""}${property.address ? ` located at ${property.address}` : ""}. ${property.unitSize ? `Unit size: ${property.unitSize} sq ft.` : ""}`;

  // Get image URL for Open Graph
  const imageUrl = property.cardImage?.url
    ? getStrapiImageUrl(property.cardImage.url)
    : undefined;

  return {
    title,
    description,
    openGraph: {
      title,
      description,
      url: `${BASE_URL}/properties/${typeLower}/${slug}`,
      type: "website",
      ...(imageUrl && {
        images: [
          {
            url: imageUrl,
            width: 1200,
            height: 630,
            alt: property.title,
          },
        ],
      }),
    },
    twitter: {
      card: "summary_large_image",
      title,
      description,
      ...(imageUrl && {
        images: [imageUrl],
      }),
    },
    alternates: {
      canonical: `${BASE_URL}/properties/${typeLower}/${slug}`,
    },
  };
}

const PropertyDetailsPage = async ({ params }: PropertyDetailsPageProps) => {
  const { type, slug } = await params;
  const typeLower = type.toLowerCase();
  const publishedSlugs = await fetchPublishedListingPropertyPageSlugs();
  if (
    publishedSlugs.length > 0 &&
    !publishedSlugs.includes(typeLower)
  ) {
    notFound();
  }

  const property = await fetchPropertyBySlug(typeLower, slug);

  if (!property) {
    notFound();
  }

  const projectsWithin = property?.projectsWithin ?? [];

  return (
    <div>
      <PropertyHeroWrapper propertyData={property} />
      <ProjectFeatures propertyData={property} />
      <VideoShowcase propertyData={property} />
      <AmenitiesSection propertyData={property} />
      <PropertyPortfolioGallery propertyData={property} />
      <PropertyLocationMap propertyData={property} />
      <ProjectsWithin projects={projectsWithin} />
    </div>
  );
};

export default PropertyDetailsPage;