import type { Metadata } from "next";
import { notFound } from "next/navigation";
import LegacyBody from "@/components/LegacyBody";
import { buildMetadata, jsonLdScripts } from "@/lib/buildMetadata";
import type { PageContent } from "@/types/content";
import { cities } from "@/data/cities";
import { localities } from "@/data/localities";
import { blogPosts } from "@/data/blog";

// Next.js App Router route segments can't mix a literal prefix with a
// dynamic part (e.g. a folder named `dry-cleaning-[city]` is NOT
// supported — that's a Pages Router-only trick). To keep the site's exact
// existing flat URLs (/dry-cleaning-mumbai, /laundry-ballygunge,
// /blog-silk-saree-care) this single catch-all `[slug]` route dispatches
// by prefix instead. Literal folders (app/about, app/dry-cleaning-meaning,
// etc.) still win over this route for an exact match — Next.js always
// prefers a static segment over a sibling dynamic one.
function resolve(slug: string): PageContent | undefined {
  if (slug.startsWith("dry-cleaning-")) {
    return cities[slug.slice("dry-cleaning-".length)];
  }
  if (slug.startsWith("laundry-")) {
    return localities[slug.slice("laundry-".length)];
  }
  if (slug.startsWith("blog-")) {
    return blogPosts[slug.slice("blog-".length)];
  }
  return undefined;
}

export function generateStaticParams() {
  return [
    ...Object.keys(cities).map((city) => ({ slug: `dry-cleaning-${city}` })),
    ...Object.keys(localities).map((locality) => ({ slug: `laundry-${locality}` })),
    ...Object.keys(blogPosts).map((post) => ({ slug: `blog-${post}` })),
  ];
}

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

export async function generateMetadata({ params }: Params): Promise<Metadata> {
  const { slug } = await params;
  const content = resolve(slug);
  if (!content) return {};
  return buildMetadata(content);
}

export default async function TemplatedSlugPage({ params }: Params) {
  const { slug } = await params;
  const content = resolve(slug);
  if (!content) notFound();

  return (
    <>
      {jsonLdScripts(content.jsonLd).map(({ key, __html }) => (
        <script key={key} type="application/ld+json" dangerouslySetInnerHTML={{ __html }} />
      ))}
      <LegacyBody
        styleCss={content.styleCss}
        bodyHtml={content.bodyHtml}
        scriptJs={content.scriptJs}
      />
    </>
  );
}