import { getAllPosts, getPostBySlug, renderMarkdown } from '@/lib/blog';
import { notFound } from 'next/navigation';
import type { Metadata } from 'next';

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

export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
  const { slug } = await params;
  const post = getPostBySlug(slug);
  if (!post) return {};
  return {
    title: `${post.title} — VYNDR Blog`,
    description: post.description,
    openGraph: {
      title: post.title,
      description: post.description,
      type: 'article',
      publishedTime: post.date,
    },
  };
}

export default async function BlogPost({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const post = getPostBySlug(slug);
  if (!post) notFound();

  return (
    <article className="py-16 px-4">
      <div className="max-w-3xl mx-auto">
        <a href="/blog" className="text-sm text-[var(--text-muted)] hover:text-white transition mb-8 inline-block">
          &larr; Back to Blog
        </a>
        <div className="flex items-center gap-3 text-xs text-[var(--text-muted)] mb-4">
          <time>{post.date}</time>
          <span>{post.readingTime} min read</span>
        </div>
        <h1 className="text-4xl font-bold mb-6">{post.title}</h1>
        {post.tags.length > 0 && (
          <div className="flex gap-2 mb-8">
            {post.tags.map((tag) => (
              <span key={tag} className="px-2 py-0.5 text-xs rounded-full bg-[var(--border)] text-[var(--text-muted)]">
                {tag}
              </span>
            ))}
          </div>
        )}
        <div
          className="prose prose-invert max-w-none text-[var(--text)] leading-relaxed"
          dangerouslySetInnerHTML={{ __html: renderMarkdown(post.content) }}
        />
      </div>

      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify({
            '@context': 'https://schema.org',
            '@type': 'BlogPosting',
            headline: post.title,
            description: post.description,
            datePublished: post.date,
            author: { '@type': 'Organization', name: 'VYNDR' },
          }),
        }}
      />
    </article>
  );
}
