import type { Metadata } from "next";
import { notFound } from "next/navigation";
import {
  ServiceMenuList,
  ServicesHeading,
  ServicesLeftColumn,
  ServicesRightColumn,
  ServicesShell,
  serviceSubtitle,
  serviceText,
} from "@/components/services/ServicesShell";
import { getService, services, servicesMenu } from "@/data/services";

import { env } from "@/config/env";
import { siteConfig } from "@/config/site";

export function generateStaticParams() {
  return services.map((service) => ({ slug: service.slug }));
}

export async function generateMetadata({
  params,
}: PageProps<"/services/[slug]">): Promise<Metadata> {
  const { slug } = await params;
  const service = getService(slug);
  if (!service) return {};
  return {
    title: service.metaTitle,
    description: service.metaDescription,
    alternates: {
      canonical: `/services/${slug}`,
    },
    openGraph: {
      title: service.metaTitle,
      description: service.metaDescription,
      url: `/services/${slug}`,
      siteName: siteConfig.name,
      type: "website",
    },
    twitter: {
      card: "summary_large_image",
      title: service.metaTitle,
      description: service.metaDescription,
    },
  };
}

export default async function ServicePage({ params }: PageProps<"/services/[slug]">) {
  const { slug } = await params;
  const service = getService(slug);
  if (!service) notFound();

  const serviceSchema = {
    "@context": "https://schema.org",
    "@type": "Service",
    name: service.heading,
    description: service.metaDescription,
    provider: {
      "@type": "Organization",
      name: siteConfig.name,
      url: env.siteUrl,
    },
    url: `${env.siteUrl}/services/${service.slug}`,
  };

  const scriptTag = (
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(serviceSchema) }}
    />
  );

  if (service.layout === "menu") {
    return (
      <ServicesShell>
        {scriptTag}
        <ServicesLeftColumn>
          <ServicesHeading />
          <ServiceMenuList items={servicesMenu} activeSlug={service.slug} />
        </ServicesLeftColumn>

        <ServicesRightColumn>
          <h3 className={serviceSubtitle}>{service.heading}</h3>
          {service.sections.flatMap((section) =>
            section.paragraphs.map((paragraph) => (
              <p key={paragraph} className={serviceText}>
                {paragraph}
              </p>
            )),
          )}
        </ServicesRightColumn>
      </ServicesShell>
    );
  }

  return (
    <ServicesShell variant="detail">
      {scriptTag}
      <ServicesLeftColumn variant="detail">
        <ServicesHeading breadcrumb />
      </ServicesLeftColumn>

      <ServicesRightColumn variant="detail">
        <h2 className="mb-[clamp(24px,3.5vh,45px)] text-[44px] leading-[1.2] font-extralight tracking-[0.5px] text-white/75 max-[901px]:mb-[clamp(16px,2.5vh,30px)] max-[901px]:text-[clamp(1.6rem,5vw,2.2rem)]">
          {service.heading}
        </h2>
        {service.sections.map((section, i) => (
          <div
            key={section.title ?? i}
            className={section.title ? "mb-[clamp(20px,3vh,32px)]" : undefined}
          >
            {section.title && <h3 className={serviceSubtitle}>{section.title}</h3>}
            {section.paragraphs.map((paragraph) => (
              <p key={paragraph} className={serviceText}>
                {paragraph}
              </p>
            ))}
          </div>
        ))}
      </ServicesRightColumn>
    </ServicesShell>
  );
}