import { notFound } from 'next/navigation';
import type { Metadata } from 'next';
import {
  getAllPosts,
  getPostBySlug,
  getPostsBySlugs,
  generatePostMetadata,
} from '../utils';
import {
  BlogPostHeader,
  BlogTOC,
  BlogSidebar,
  BlogShareButtons,
} from '../_components';
import type { BlogPost } from '../types';

const generateJsonLd = (post: BlogPost) => ({
  '@context': 'https://schema.org',
  '@type': 'Article',
  headline: post.title,
  description: post.description,
  image: `https://banatie.app${post.heroImage}`,
  datePublished: post.date,
  dateModified: post.date,
  author: {
    '@type': 'Person',
    name: post.author.name,
  },
  publisher: {
    '@type': 'Organization',
    name: 'Banatie',
    logo: {
      '@type': 'ImageObject',
      url: 'https://banatie.app/banatie-logo.png',
    },
  },
  mainEntityOfPage: {
    '@type': 'WebPage',
    '@id': `https://banatie.app/blog/${post.slug}/`,
  },
});

interface PageProps {
  params: Promise<{ slug: string }>;
}

export async function generateStaticParams() {
  const posts = getAllPosts();
  return posts.map((post) => ({ slug: post.slug }));
}

export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
  const { slug } = await params;
  const post = getPostBySlug(slug);
  if (!post) return {};
  return generatePostMetadata(post);
}

export default async function BlogPostPage({ params }: PageProps) {
  const { slug } = await params;
  const post = getPostBySlug(slug);

  if (!post) {
    notFound();
  }

  const { Content, tocItems } = await import(`../_posts/${slug}`);
  const relatedArticles = getPostsBySlugs(post.relatedArticles);

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(generateJsonLd(post)) }}
      />
      <main id="main-content">
        <BlogPostHeader post={post} />

      <div className="bg-white border-t-0 -mt-1 pt-12 lg:pt-16 pb-12">
        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
          <div className="lg:grid lg:grid-cols-12 lg:gap-12">
            {/* Share buttons column - hidden on mobile */}
            <aside className="hidden lg:block lg:col-span-1">
              <BlogShareButtons url={`/blog/${post.slug}`} title={post.title} />
            </aside>

            {/* Article content */}
            <div className="lg:col-span-8">
              <article className="max-w-none text-gray-700 leading-relaxed [&>p]:mb-4 [&>ul]:mb-4 [&>ul]:list-disc [&>ul]:pl-6 [&>ul_li]:mb-2 [&>ul]:marker:text-violet-500 [&>ol]:mb-4 [&>ol]:list-decimal [&>ol]:pl-6 [&>a]:text-violet-500 [&>a]:hover:underline [&_strong]:text-gray-900 [&_strong]:font-semibold">
                <Content />
              </article>
            </div>

            {/* Sidebar - hidden on mobile */}
            <aside className="hidden lg:block lg:col-span-3">
              <div className="sticky top-28 space-y-8">
                <BlogTOC items={tocItems} />
                <BlogSidebar
                  relatedArticles={relatedArticles}
                  relatedDocs={post.relatedDocs}
                />
              </div>
            </aside>
          </div>
        </div>
      </div>
      </main>
    </>
  );
}
