import { AWS_CDN_URL } from "@/utils/staticValues";
import Image from "next/image";
import Link from "next/link";
import RichText from "@/app/components/rich-text";
import { notFound } from "next/navigation";
import type { Metadata } from "next";

interface ItemProps {
  id: number;
  title: string;
  slug: string;
  excerpt: string;
  content: string;
  image: string;
}

interface JournalData {
  journal: ItemProps | null;
  blogs: ItemProps[];
}

// Server-side data fetching
async function getJournalData(slug: string): Promise<JournalData> {
  try {
    const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || "http://localhost:3000";
    const response = await fetch(`${baseUrl}/api/blog`, {
      method: "GET",
      headers: { "Content-Type": "application/json" },
      next: { revalidate: 3600 } // Cache for 1 hour
    });

    if (!response.ok) {
      console.error(`API Error: ${response.status} - ${response.statusText}`);
      return { journal: null, blogs: [] };
    }

    const data = await response.json();
    const allBlogs: ItemProps[] = data?.data?.blog || [];
    const journal = allBlogs.find((b) => b.slug === slug) || null;

    return { journal, blogs: allBlogs };
  } catch (error) {
    console.error("Error fetching Journal detail:", error);
    return { journal: null, blogs: [] };
  }
}

// Generate metadata for SEO
export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}): Promise<Metadata> {
  const { slug } = await params;
  const { journal } = await getJournalData(slug);

  if (!journal) {
    return {
      title: "Journal Not Found - Morni",
    };
  }

  return {
    title: `${journal.title} - Morni Journal`,
    description: journal.excerpt,
    openGraph: {
      title: journal.title,
      description: journal.excerpt,
      images: journal.image ? [`${AWS_CDN_URL}/${journal.image}`] : [],
      type: "article",
    },
  };
}

export default async function JournalDetailPage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const { journal, blogs } = await getJournalData(slug);

  if (!journal) {
    notFound();
  }

  // Determine current index and prev/next
  const currentIndex = blogs.findIndex((b) => b.slug === slug);
  const prevPost = currentIndex > 0 ? blogs[currentIndex - 1] : null;
  const nextPost = currentIndex < blogs.length - 1 ? blogs[currentIndex + 1] : null;

  return (
    <div className="relative min-h-screen bg-gray-100">
      <div className="wrapper pt-20 pb-25">
        <div className="sticky top-12 flex w-full py-3">
          <Link
            href="/journal"
            className="bg-gray-100 py-3 text-xs underline underline-offset-6 md:bg-transparent md:py-2"
          >
            Go to Journal
          </Link>
        </div>

        <div className="single-blog-post">
          <div className="mx-auto flex w-full flex-col md:w-[60%]">
            <div className="hairline flex h-1.5 w-full bg-gray-950"></div>
            <div className="top-intro flex w-full flex-col gap-10 py-20">
              <h1 className="text-center">{journal.title}</h1>
              <div className="font-hasiant flex w-full justify-center align-middle text-8xl/12">
                <p>Hardik Tuteja</p>
              </div>
            </div>

            <div className="font-bogart flex flex-col justify-center text-center align-middle text-xl text-gray-950/75">
              {journal.excerpt}
            </div>

            {journal.image && (
              <div className="flex w-full pt-20">
                <div className="w-full border-1">
                  <Image
                    src={`${AWS_CDN_URL}/${journal.image}`}
                    alt={journal.title}
                    width={600}
                    height={400}
                    className="img-responsive"
                  />
                </div>
              </div>
            )}

            <div className="blog-single-post-content flex w-full flex-col py-20">
              <article>
                <RichText initialHtml={journal.content} />
              </article>
            </div>

           <div className="flex w-full flex-col">
                <div className="hairline flex h-1.5 w-full bg-gray-950"></div>
                <div className="mx-auto flex w-full justify-between gap-20 py-10">
                  <div className="flex w-full flex-col justify-start gap-2 text-left">
                    {prevPost ? (
                      <div className="flex w-full flex-col">
                        <span className="text-xs uppercase">
                          ← Previous Post
                        </span>
                        <Link
                          href={`/journal/${prevPost.slug}`}
                          className="font-bogart hover:underline hover:underline-offset-3"
                        >
                          {prevPost.title}
                        </Link>
                      </div>
                    ) : null}
                  </div>

                  <div className="flex w-full flex-col justify-start gap-2 text-left">
                    {nextPost ? (
                      <div className="flex w-full flex-col">
                        <span className="text-xs uppercase">Next Post →</span>
                        <Link
                          href={`/journal/${nextPost.slug}`}
                          className="font-bogart hover:underline hover:underline-offset-3"
                        >
                          {nextPost.title}
                        </Link>
                      </div>
                    ) : null}
                  </div>
                </div>
              </div>
          </div>
        </div>
      </div>
    </div>
  );
}