import Breadcrumb, { BreadcrumbItem } from "@/components/breadcrumb";
import Metadata from "@/components/Metadata";
import { getSingleBlog, getBlogs } from "@/services/public";
import Image from "next/image";
import { notFound } from 'next/navigation';
import Link from "next/link";
import type { Metadata as NextMetadata } from "next";

const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || "https://www.secamuhendislik.com";

const toPlainText = (value?: string | null) =>
  (value || "")
    .replace(/<[^>]*>/g, " ")
    .replace(/\s+/g, " ")
    .trim();

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}): Promise<NextMetadata> {
  const resolvedParams = await params;
  const data = await getSingleBlog(resolvedParams.slug);

  if (!data) {
    return {
      title: "Blog bulunamadi",
      robots: { index: false, follow: false },
    };
  }

  const title = data.seo_title || data.title || "Blog";
  const description = data.seo_desc || toPlainText(data.content).slice(0, 160);
  const canonical = `/blog/${data.slug}`;

  return {
    title,
    description,
    alternates: {
      canonical,
    },
    openGraph: {
      title,
      description,
      url: `${siteUrl}${canonical}`,
      type: "article",
      images: data.image ? [{ url: data.image }] : undefined,
    },
    twitter: {
      card: "summary_large_image",
      title,
      description,
      images: data.image ? [data.image] : undefined,
    },
  };
}

const BlogDetay = async ({ params }: { params: Promise<{ slug: string }> }) => {


    const resolveSlug = await params

    const data = await getSingleBlog(resolveSlug.slug)

    if (!data) {
        notFound(); // 404 durum kodu gönderir ve özel 404 sayfasını gösterir.
    }

    const blog = await getBlogs();

    const bread: BreadcrumbItem[] = [
        {
            href: "/blog",
            label: "Bilgi Bankası ",

        },
        {
            href: "/blog",
            label: data.title as string,
            isCurrent: true,
        },
    ];

    return (
        <>
            <Metadata
                seoTitle={(data.seo_title as string) || data.title}
                seoDescription={data.seo_desc ?? toPlainText(data.content).slice(0, 160)}
                seoKey={data.seo_key}
                canonical={`${siteUrl}/blog/${data.slug}`}
            />
            <Breadcrumb items={bread} />
            <div className="container py-20">

                <div className="grid grid-cols-12 gap-10">

                    <div className="col-span-12 md:col-span-9 lg:pr-32">

                        <h1 className="text-4xl font-bold mb-5"> {data.title}</h1>
                        {
                            data.image &&
                            <div className="relative w-full h-[500px] mb-10">
                                <Image src={data.image} alt="Blog Detay" fill className="rounded-lg mb-10 object-cover" />
                            </div>
                        }


                        <div className="text-lg text-justify mb-10 content"> 
                            <div dangerouslySetInnerHTML={{ __html: data.content ?? '' }} /> 

                        </div>


                    </div>
                    <div className="col-span-12 md:col-span-3 bg-gri px-4 py-4">

                        <h2 className="text-2xl font-bold mb-5"> Diğer Bloglar</h2>
                        <div className="flex flex-col w-full ">
                        {blog && blog.slice(0, 4).map((item: any) => (
                        <Link href={`/blog/${item.slug}`} key={item._id} className="flex flex-col gap-2 mb-10">
                            {item.image && (
                                <Image
                                    src={item.image}
                                    alt="Blog Detay"
                                    width={500}
                                    height={100}
                                    className="rounded-lg"
                                />
                            )}
                            <h3 className="text-sm font-bold">{item.title}</h3>
                            <p className="text-sm text-gray-500">
                                {new Date(item.updatedAt).toLocaleDateString('tr-TR')}
                            </p>
                        </Link>
                    ))}

                        </div>



                    </div>

                </div>


            </div>
        </>
    )


}


export default BlogDetay;