import { Metadata } from "next";
import Image from "next/image";
import FadeIn from "@/components/animations/FadeIn";
import { RegionDetail } from "@/components/regions";
import CallToAction from "@/components/CallToAction";
import {
  getPublicRegions,
  getRegionCountries,
  getRegionServices,
  getRegionProjects,
} from "@/services/regions";

export const revalidate = 1800;
export const dynamic = "force-dynamic";
export const dynamicParams = true;

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

function normalizeSlug(value: string) {
  return value
    .trim()
    .toLowerCase()
    .replace(/&/g, "and")
    .replace(/[^a-z0-9]+/g, "-")
    .replace(/^-+|-+$/g, "");
}

function getRegionSlug(value: unknown, fallbackName?: string): string {
  if (typeof value === "string") return normalizeSlug(value);

  if (value && typeof value === "object") {
    const obj = value as Record<string, unknown>;
    const nested = obj.slug ?? obj.current ?? obj.value ?? obj.name;
    if (typeof nested === "string") return normalizeSlug(nested);
  }

  if (typeof fallbackName === "string") return normalizeSlug(fallbackName);
  return "";
}

export async function generateStaticParams() {
  try {
    const regions = await getPublicRegions();
    console.log("Generating static params for regions:", regions.map(r => r.slug));
    const uniqueSlugs = Array.from(
      new Set(
        regions
          .map((region) => getRegionSlug((region as { slug?: unknown }).slug, region.name))
          .filter(Boolean)
      )
    );
    return uniqueSlugs.map((slug) => ({ slug }));
  } catch {
    // API unavailable at build time; dynamic routing handles pages at request time
    return [];
  }
}

export async function generateMetadata(
  props: RegionPageProps
): Promise<Metadata> {
  const params = await props.params;
  const regions = await getPublicRegions();
  const regionSlug = normalizeSlug(params.slug);
  const region = regions.find(
    (r) => normalizeSlug(r.slug) === regionSlug || normalizeSlug(r.name) === regionSlug
  );

  const titleBase = region?.name ?? params.slug.replace(/-/g, " ");

  return {
    title: `${titleBase} | Petro-Base Group`,
    description: `Explore our services and projects in ${titleBase}.`,
  };
}

export default async function RegionPage(props: RegionPageProps) {
  const params = await props.params;
  const regionSlug = normalizeSlug(params.slug);

  const regions = await getPublicRegions();
  const region = regions.find(
    (r) => normalizeSlug(r.slug) === regionSlug || normalizeSlug(r.name) === regionSlug
  );

  const displayName = region?.name ?? params.slug.replace(/-/g, " ");

  // Fetch region-specific data in parallel
  const [countries, services, projects] = await Promise.all([
    region ? getRegionCountries(region.slug) : Promise.resolve([]),
    region ? getRegionServices(region.slug) : Promise.resolve([]),
    region ? getRegionProjects(region.slug) : Promise.resolve([]),
  ]);

  return (
    <main className="min-h-screen">
      {/* Hero Banner */}
      <section className="relative h-[60vh] min-h-[400px] flex items-center justify-center overflow-hidden">
        <Image
          src="/pb-regions.png"
          width={1920}
          height={1080}
          priority
          alt={displayName}
          className="absolute inset-0 w-full h-full object-cover"
        />
        <div className="absolute inset-0 bg-primary/80" />
        <FadeIn y={30} className="relative z-10 text-center px-6">
          <div className="flex items-center justify-center gap-3 mb-6">
            <div className="w-12 h-[2px] bg-accent" />
            <span className="petro-section-label-light">{displayName}</span>
            <div className="w-12 h-[2px] bg-accent" />
          </div>
          <h1 className="text-4xl md:text-6xl font-bold text-primary-foreground mb-4 tracking-tight">
            {displayName}
          </h1>
          <p className="text-primary-foreground/70 text-lg md:text-xl max-w-2xl mx-auto">
            Discover our services, expertise, and completed projects in {displayName}
          </p>
        </FadeIn>
      </section>

      {region ? (
        <RegionDetail
          region={{ ...region, countries }}
          services={services}
          projects={projects}
        />
      ) : (
        <section className="petro-section">
          <div className="petro-container">
            <div className="max-w-3xl mx-auto text-center">
              <h2 className="text-2xl md:text-3xl font-bold text-foreground mb-4">
                Region details are coming soon
              </h2>
              <p className="text-muted-foreground text-lg leading-relaxed">
                We could not load full region data for this page yet, but the route is active and ready for content.
              </p>
            </div>
          </div>
        </section>
      )}
      <CallToAction />
    </main>
  );
}