import { notFound } from "next/navigation";
import Image from "next/image";
import newsApi from "@/shared/services/news";
import { News } from "@/shared/types/news";
import { getFileUrl } from "@/shared/utils/file";
import type { Metadata } from "next";

import NewsContent from "./news-content";

export async function generateMetadata({
  params,
}: {
  params: Promise<{ id: string }>;
}): Promise<Metadata> {
  const { id } = await params;
  try {
    const newsItem = await newsApi.getNewsById(id, { skipAuth: true });
    if (!newsItem || !newsItem.is_active) return {};
    const base = process.env.NEXT_PUBLIC_SITE_URL || "https://example.com";
    const og = newsItem.thumbnail
      ? getFileUrl(newsItem.thumbnail)
      : "/og-image.png";
    return {
      title: newsItem.name,
      description: newsItem.description?.replace(/<[^>]*>/g, " ").slice(0, 160),
      alternates: { canonical: `/news/${id}` },
      openGraph: {
        type: "article",
        url: `${base}/news/${id}`,
        title: newsItem.name,
        description: newsItem.description
          ?.replace(/<[^>]*>/g, " ")
          .slice(0, 200),
        images: [og],
      },
      twitter: {
        card: "summary_large_image",
        title: newsItem.name,
        description: newsItem.description
          ?.replace(/<[^>]*>/g, " ")
          .slice(0, 200),
        images: [og],
      },
    };
  } catch {
    return {};
  }
}

// eslint-disable-next-line @typescript-eslint/no-explicit-any
export default async function NewsPage({ params }: { params: any }) {
  let newsItem: News | null = null;

  try {
    newsItem = await newsApi.getNewsById(params.id);
  } catch (error) {
    console.error("Gagal mengambil data berita:", error);
  }

  if (!newsItem || !newsItem.is_active) {
    notFound();
  }

  return (
    <article className="min-h-screen bg-white px-4 py-12 text-gray-800 sm:px-6 lg:px-8">
      <div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        {/* Judul Halaman */}
        <div className="text-primary mb-6 text-sm font-semibold tracking-wide uppercase">
          Berita dan Pengumuman
        </div>

        {/* Judul Berita */}
        <h1 className="border-primary/30 mb-6 border-b pb-2 text-4xl text-slate-700">
          {newsItem.name}
        </h1>

        {/* Gambar Thumbnail */}
        {newsItem.thumbnail && (
          <div className="mb-8 flex justify-center overflow-hidden rounded-xl">
            <Image
              src={getFileUrl(newsItem.thumbnail)}
              alt={newsItem.name}
              width={600}
              height={600}
              className="h-auto w-full object-cover transition-all duration-300 hover:scale-105"
            />
          </div>
        )}

        {/* Konten */}
        <NewsContent description={newsItem.description} />
      </div>
    </article>
  );
}