import { getDictionary } from "@/get-dictionary";
import type { Locale } from "@/i18n-config";
import WorkClient from "@/components/WorkClient";
import { getProjects } from "@/app/actions";
import { slugify } from "@/lib/utils";
import { notFound } from "next/navigation";

export async function generateMetadata({ params }: { params: Promise<{ lang: Locale, slug: string }> }) {
  const { lang, slug } = await params;
  const dict = await getDictionary(lang);
  const projects = await getProjects();
  
  const filteredProjects = projects.filter((p: any) => slugify(p.tag) === slug);
  if (filteredProjects.length === 0) return { title: "Not Found" };
  
  const tagName = filteredProjects[0].tag;
  const titleStr = lang === "tr" ? `${tagName} Ajansı` : `${tagName} Agency`;

  return {
    title: `${titleStr} | ${dict.nav.brandName}`,
    description: `${titleStr} - ${dict.work.desc}`,
  };
}

export default async function ExpertisePage({ params }: { params: Promise<{ lang: Locale, slug: string }> }) {
  const { lang, slug } = await params;
  const dict = await getDictionary(lang);
  const projects = await getProjects();

  const filteredProjects = projects.filter((p: any) => slugify(p.tag) === slug);
  
  if (filteredProjects.length === 0) {
    notFound();
  }

  const tagName = filteredProjects[0].tag;
  const titleStr = lang === "tr" ? `${tagName} Ajansı` : `${tagName} Agency`;

  // Clone dict to overwrite the work title specifically for this page
  const customDict = {
    ...dict,
    work: {
      ...dict.work,
      title: titleStr
    }
  };

  return <WorkClient lang={lang} dict={customDict} initialProjects={filteredProjects} />;
}
