import type { Metadata } from "next";
import Link from "next/link";
import Image from "next/image";
import { ArrowLeft, ArrowRight } from "lucide-react";
import { MDXRemote } from "next-mdx-remote/rsc";
import { SiteFrame } from "@/app/components/SiteFrame/SiteFrame";
import { JsonLd } from "@/app/lib/structured-data";
import { getAllPosts, getPostBySlug, getRelatedPosts, formatDate } from "@/app/lib/blog";
import { mdxComponents } from "@/app/lib/mdx-components";
import { BlogCard } from "@/app/components/BlogCard/BlogCard";
import { AnimatedDiv, AnimatedSection } from "@/app/components/Motion/AnimatedSection";
import proseStyles from "@/app/lib/blog-prose.module.css";
import styles from "./post.module.css";

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 { meta } = getPostBySlug(slug);

  return {
    title: meta.title,
    description: meta.description,
    alternates: { canonical: `/blog/${meta.slug}` },
    openGraph: {
      title: meta.title,
      description: meta.description,
      url: `/blog/${meta.slug}`,
      type: "article",
      publishedTime: meta.date,
      authors: [meta.author],
      ...(meta.image && {
        images: [{ url: meta.image, width: 1200, height: 630 }],
      }),
    },
  };
}

export default async function BlogPostPage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const { meta, content } = getPostBySlug(slug);
  const related = getRelatedPosts(slug, 3);

  return (
    <SiteFrame>
      <JsonLd
        data={{
          "@context": "https://schema.org",
          "@type": "BreadcrumbList",
          itemListElement: [
            { "@type": "ListItem", position: 1, name: "Home", item: "https://meliorate.pro" },
            { "@type": "ListItem", position: 2, name: "Blog", item: "https://meliorate.pro/blog" },
            { "@type": "ListItem", position: 3, name: meta.title, item: `https://meliorate.pro/blog/${meta.slug}` },
          ],
        }}
      />
      <JsonLd
        data={{
          "@context": "https://schema.org",
          "@type": "Article",
          headline: meta.title,
          description: meta.description,
          ...(meta.image && { image: `https://meliorate.pro${meta.image}` }),
          datePublished: meta.date,
          author: {
            "@type": "Organization",
            name: meta.author,
            url: "https://meliorate.pro",
          },
          publisher: {
            "@type": "Organization",
            name: "Meliorate",
            logo: {
              "@type": "ImageObject",
              url: "https://meliorate.pro/img/MeliorateH.svg",
            },
          },
        }}
      />

      <article className={styles.pageSection}>
        <div className={styles.container}>
          <AnimatedDiv immediate>
            <div className={styles.bbWrap}>
              {/*<Link href="/blog" className={styles.backLink}>
                <ArrowLeft size={14} /> Back to Blog
              </Link>*/}
              <span className={styles.categoryBadge}>{meta.category}</span>
            </div>
            <h1 className={styles.postTitle}>{meta.title}</h1>
            <p className={styles.postMeta}>
              {formatDate(meta.date)} · {meta.readingTime}
            </p>
          </AnimatedDiv>

          {meta.image && (
            <AnimatedDiv delay={0.15} variant="fadeIn" immediate>
              <Image
                src={meta.image}
                alt={meta.title}
                width={1000}
                height={520}
                className={styles.heroImage}
                priority
              />
            </AnimatedDiv>
          )}

          <AnimatedDiv delay={0.2} variant="fadeIn" immediate>
            <div className={`${proseStyles.prose} ${styles.content}`}>
              <MDXRemote source={content} components={mdxComponents} />
            </div>
          </AnimatedDiv>

          {related.length > 0 && (
            <AnimatedSection className={styles.relatedSection}>
              <h2 className={styles.relatedTitle}>Related Posts</h2>
              <div className={styles.relatedGrid}>
                {related.map((post) => (
                  <BlogCard key={post.slug} post={post} />
                ))}
              </div>
            </AnimatedSection>
          )}

          <AnimatedSection className={styles.ctaBand}>
            <div>
              <h2>Ready to build something?</h2>
              <p>
                Tell us about your project and we will scope the fastest path forward.
              </p>
            </div>
            <Link href="/contact" className={styles.ctaButton}>
              Contact Us <ArrowRight size={16} />
            </Link>
          </AnimatedSection>
        </div>
      </article>
    </SiteFrame>
  );
}