import { notFound } from "next/navigation";
import { Footer } from "@/components/Footer";
import { Header } from "@/components/Header";
import { PageHero } from "@/components/PageShared";
import { PortfolioDetailView } from "@/components/PortfolioDetail";
import { portfoliosFallback } from "@/data/portfolios";
import { getPortfolio } from "@/lib/meshkee";

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

export async function generateStaticParams() {
  return portfoliosFallback.map((item) => ({ slug: item.slug }));
}

export async function generateMetadata({ params }: PageProps) {
  const { slug } = await params;
  const { item } = await getPortfolio(slug);
  if (!item) {
    return {
      title: "پروژه",
      robots: { index: false, follow: true },
    };
  }

  const description =
    item.description || `نمونه کار ${item.title} — شرکت رسام تجارت هواران`;
  const image = item.coverImage || item.image || "/images/brand/logo.png";

  return {
    title: item.title,
    description,
    alternates: {
      canonical: `/portfolios/${item.slug}`,
    },
    openGraph: {
      type: "website",
      locale: "fa_IR",
      url: `/portfolios/${item.slug}`,
      siteName: "رسام تجارت هواران",
      title: item.title,
      description,
      images: [{ url: image, alt: item.title }],
    },
    twitter: {
      card: "summary_large_image",
      title: item.title,
      description,
      images: [image],
    },
  };
}

export default async function PortfolioDetailPage({ params }: PageProps) {
  const { slug } = await params;
  const { item } = await getPortfolio(slug);
  if (!item) notFound();

  return (
    <>
      <Header />
      <main>
        <PageHero
          title={item.title}
          titleEn={item.titleEn || "PROJECT DETAILS"}
          breadcrumb={[
            { label: "صفحه اصلی", href: "/" },
            { label: "پروژه ها", href: "/portfolios" },
            { label: "جزئیات نمونه کار", href: `/portfolios/${item.slug}` },
          ]}
        />
        <PortfolioDetailView item={item} />
      </main>
      <Footer />
    </>
  );
}