import { notFound } from "next/navigation"
import { Navbar } from "@/components/navbar"
import { Footer } from "@/components/footer"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { ArrowLeft, Calendar, Clock } from "lucide-react"
import Image from "next/image"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import type { Metadata } from "next"
import { MDXRemote } from "next-mdx-remote/rsc"
import rehypePrism from "rehype-prism-plus"
import projects from "@/data/portfolio"

interface BlogPostPageProps {
  params: {
    slug: string
  }
}

export async function generateMetadata({ params }: BlogPostPageProps): Promise<Metadata> {
  const p = await params;
  const post = projects.find((post) => post._meta.path === p.slug)

  if (!post) {
    return {
      title: "Progetto non trovato",
    }
  }

  return {
    title: `${post.title} | TECHTONIC FAULT Blog`,
    description: post.description,
  }
}

export default async function BlogPostPage({ params }: BlogPostPageProps) {
  const p = await params;
  const post = projects.find((post) => post._meta.path === p.slug)

  if (!post) {
    notFound()
  }

  return (
    <div className="flex min-h-screen flex-col">
      <Navbar />

      <main className="flex-1">
        {/* Hero Section */}
        <section className="w-full py-12 md:py-24 lg:py-32 bg-primary-50 dark:bg-gray-900">
          <div className="container px-4 md:px-6 mx-auto">
            <div className="flex flex-col items-center text-center space-y-4 max-w-3xl mx-auto">
              <h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl text-primary-900 dark:text-primary-300">
                {post.title}
              </h1>
              <div className="flex items-center justify-center gap-4 text-gray-500 dark:text-gray-400">
                <div className="flex items-center">
                  <Calendar className="h-4 w-4 mr-2" />
                  {post.year}
                </div>
              </div>
              <div className="flex flex-wrap gap-2 max-w-3xl mx-auto mt-12 mb-12">
                {post.tags.map((tag, index) => (
                  <Badge
                    key={index}
                    variant="secondary"
                    className="bg-primary-100 text-primary-900 dark:bg-primary-900 dark:text-primary-100"
                  >
                    {tag}
                  </Badge>
                ))}
              </div>
              <p className="text-gray-500 dark:text-gray-400 mb-4">
                {post.description}
              </p>
            </div>
          </div>
        </section>

        {/* Featured Image */}
        <div className="relative w-full h-[300px] md:h-[500px] lg:h-[600px]">
          <Image src={post.image || "/placeholder.svg"} alt={post.title} fill className="object-cover" priority />
        </div>

        {/* Content */}
        <article className="container px-4 md:px-6 mx-auto py-12 md:py-24">
          <div className="prose prose-purple dark:prose-invert max-w-3xl mx-auto">
            <MDXRemote
              source={post.content}
              options={{
                mdxOptions: {
                  rehypePlugins: [rehypePrism],
                },
              }}
            />
            {!!post.links && Object.values(post.links).some(v => !!v) && <div>
              <h2>Scarica ora</h2>
              <div className="flex flex-col sm:flex-row items-center gap-8">
                {!!post.links.apple && <a href={post.links.apple} className="my-auto" target="_blank">
                  <Image alt="Download on the App Store" className="block dark:hidden h-16 w-auto" width={200} height={200} src="/appstore-light.svg" />
                  <Image alt="Download on the App Store" className="hidden dark:block h-16 w-auto" width={200} height={200} src="/appstore-dark.svg" />
                </a>}
                {!!post.links.play && <a href={post.links.play} className="my-auto" target="_blank"><Image alt="Download on Google Play Store" className="h-16 w-auto" width={200} height={200} src="/playstore.svg" /></a>}
              </div>
            </div>}
          </div>


          <div className="max-w-3xl mx-auto mt-12 pt-12 border-t border-gray-200 dark:border-gray-800">
            <div className="flex flex-col md:flex-row items-center justify-between gap-6">
              <Link href="/portfolio">
                <Button
                  variant="outline"
                  className="border-primary-200 text-primary-900 dark:border-primary-800 dark:text-primary-300"
                >
                  <ArrowLeft />
                  Portfolio
                </Button>
              </Link>
            </div>
          </div>
        </article>
      </main>

      <Footer />
    </div>
  )
}