import { getProjectBySlug } from "@/app/actions";
import WorkDetailClient from "@/components/WorkDetailClient";
import { notFound } from "next/navigation";
import { Metadata } from "next";

export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
    const { slug } = await params;
    const data = await getProjectBySlug(slug);
    if (!data) return {};

    const { project } = data;
    const url = `https://mugladijitalmedya.com/works/${slug}`;

    return {
        title: `${project.title} | Muğla Dijital`,
        description: project.subtitle,
        alternates: {
            canonical: url,
        },
        openGraph: {
            title: `${project.title} | Proje Detayı | Muğla Dijital`,
            description: project.subtitle,
            url: url,
            images: [
                {
                    url: project.hero_image,
                    width: 1200,
                    height: 630,
                    alt: project.title,
                }
            ],
            type: 'article',
        },
        twitter: {
            card: 'summary_large_image',
            title: project.title,
            description: project.subtitle,
            images: [project.hero_image],
        }
    };
}

export default async function ProjectDetailPage({ params }: { params: Promise<{ slug: string }> }) {
    const { slug } = await params;
    const data = await getProjectBySlug(slug);
    if (!data) notFound();

    const breadcrumbLd = {
        "@context": "https://schema.org",
        "@type": "BreadcrumbList",
        "itemListElement": [
            {
                "@type": "ListItem",
                "position": 1,
                "name": "Ana Sayfa",
                "item": "https://mugladijitalmedya.com"
            },
            {
                "@type": "ListItem",
                "position": 2,
                "name": "Çalışmalarımız",
                "item": "https://mugladijitalmedya.com/works"
            },
            {
                "@type": "ListItem",
                "position": 3,
                "name": data.project.title,
                "item": `https://mugladijitalmedya.com/works/${data.project.slug}`
            }
        ]
    };

    const creativeWorkLd = {
        "@context": "https://schema.org",
        "@type": "CreativeWork",
        "name": data.project.title,
        "description": data.project.subtitle,
        "image": data.project.hero_image,
        "author": {
            "@type": "Organization",
            "name": "Muğla Dijital"
        },
        "publisher": {
            "@type": "Organization",
            "name": "Muğla Dijital"
        }
    };

    return (
        <>
            <script
                type="application/ld+json"
                dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbLd) }}
            />
            <script
                type="application/ld+json"
                dangerouslySetInnerHTML={{ __html: JSON.stringify(creativeWorkLd) }}
            />
            <WorkDetailClient project={data.project} nextProject={data.nextProject} />
        </>
    );
}
