import type { Metadata } from "next";
import Image from "next/image";
import Link from "next/link";
import { notFound } from "next/navigation";

import { RichContent } from "@/components/rich-content";
import { getAllPages, getAllPortfolio, getPageBySlug, getPrimaryDescription } from "@/lib/site-data";

const reserved = new Set(["blog", "category", "tag", "portfolio"]);
const projectSlugs = new Set(["works", "works-list"]);

export function generateStaticParams() {
  return getAllPages()
    .filter((page) => page.slug && page.slug !== "home" && !reserved.has(page.slug))
    .map((page) => ({ slug: page.slug }));
}

export function generateMetadata({ params }: { params: { slug: string } }): Metadata {
  const page = getPageBySlug(params.slug);
  return page ? { title: page.seo.rank_math_title || page.title, description: page.seo.rank_math_description || getPrimaryDescription(page) } : {};
}

function ProjectsPage({ listMode = false }: { listMode?: boolean }) {
  const projects = getAllPortfolio();

  return (
    <div className="page-enter space-y-8 pb-10">
      <section className="surface rounded-[2.5rem] px-6 py-10 sm:px-8 sm:py-12">
        <p className="text-sm font-medium uppercase tracking-[0.3em] text-[var(--muted)]">{listMode ? "Archive" : "Projects"}</p>
        <h1 className="mt-4 text-4xl font-semibold tracking-tight text-[var(--foreground)] sm:text-5xl">
          {listMode ? "A clean archive of current releases and active products." : "The tools, experiments, and creative releases driving the site."}
        </h1>
        <p className="mt-4 max-w-3xl text-sm leading-7 text-[var(--muted)]">
          {listMode
            ? "This format keeps the work easy to scan while preserving the context around each release."
            : "Each item is presented as a product with a purpose, whether it is a utility, a platform, or a creative launch."}
        </p>
      </section>

      <section className={listMode ? "grid gap-4" : "grid gap-4 md:grid-cols-2 xl:grid-cols-3"}>
        {projects.map((project) => (
          <Link key={project.id} href={`/portfolio/item/${project.slug}`} className="group surface rounded-[2rem] p-4 transition hover:-translate-y-1">
            <div className={listMode ? "grid gap-5 md:grid-cols-[220px_1fr] md:items-center" : "space-y-4"}>
              <div className="overflow-hidden rounded-[1.4rem] bg-[var(--background-soft)]">
                {project.featuredImage ? (
                  <Image src={project.featuredImage.url} alt={project.featuredImage.alt || project.title} width={720} height={520} className="aspect-[4/3] w-full object-cover transition duration-500 group-hover:scale-[1.03]" />
                ) : (
                  <div className="flex aspect-[4/3] items-center justify-center text-sm text-[var(--muted)]">Preview unavailable</div>
                )}
              </div>
              <div>
                <h2 className="text-xl font-semibold tracking-tight text-[var(--foreground)]">{project.title}</h2>
                <p className="mt-2 text-sm leading-7 text-[var(--muted)]">{project.excerpt}</p>
              </div>
            </div>
          </Link>
        ))}
      </section>
    </div>
  );
}

export default function StaticPage({ params }: { params: { slug: string } }) {
  if (projectSlugs.has(params.slug)) {
    return <ProjectsPage listMode={params.slug === "works-list"} />;
  }

  const page = getPageBySlug(params.slug);
  if (!page || reserved.has(params.slug)) notFound();

  return (
    <article className="page-enter mx-auto flex w-full max-w-4xl flex-col gap-8 pb-10">
      <header className="surface rounded-[2.5rem] px-6 py-10 sm:px-10 sm:py-12">
        <p className="text-sm font-medium uppercase tracking-[0.3em] text-[var(--muted)]">Page</p>
        <h1 className="mt-4 text-4xl font-semibold tracking-tight text-[var(--foreground)] sm:text-5xl">{page.title}</h1>
      </header>
      <section className="surface rounded-[2.5rem] px-6 py-8 sm:px-10 sm:py-10">
        <RichContent html={page.content} />
      </section>
    </article>
  );
}