import { getPost } from "@/lib/wordpress";
import Image from "next/image";
import Link from "next/link";

export default async function PostPage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const post = await getPost(slug);

  if (!post) {
    return (
      <div className="min-h-screen flex items-center justify-center" style={{ backgroundColor: "#1a1a1a" }}>
        <div className="text-center">
          <h1 className="text-4xl font-bold text-red-600 mb-4">404</h1>
          <p className="text-gray-400 mb-6">Post não encontrado.</p>
          <Link href="/" className="text-red-500 hover:underline">Voltar para o início</Link>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen text-gray-100" style={{ backgroundColor: "#1a1a1a" }}>
      <header style={{ backgroundColor: "#111111" }} className="border-b border-gray-800 sticky top-0 z-50">
        <div className="max-w-6xl mx-auto px-4 py-3 flex items-center justify-between">
          <Link href="/">
            <Image src="/msfv.webp" alt="Minha Série Favorita" width={180} height={50} className="h-12 w-auto" priority />
          </Link>
          <nav className="hidden md:flex items-center gap-6 text-sm font-medium text-gray-300">
            <Link href="/" className="hover:text-red-500 transition-colors uppercase tracking-wide text-xs">Notícias</Link>
            <Link href="/categoria/filmes" className="hover:text-red-500 transition-colors uppercase tracking-wide text-xs">Filmes</Link>
            <Link href="/categoria/series" className="hover:text-red-500 transition-colors uppercase tracking-wide text-xs">Séries</Link>
            <Link href="/categoria/reality-show" className="hover:text-red-500 transition-colors uppercase tracking-wide text-xs">Reality Show</Link>
            <Link href="/categoria/streaming" className="hover:text-red-500 transition-colors uppercase tracking-wide text-xs">Streaming</Link>
            <Link href="/categoria/tv" className="hover:text-red-500 transition-colors uppercase tracking-wide text-xs">TV</Link>
          </nav>
          <Link href="/" className="text-sm text-gray-400 hover:text-red-500 transition-colors md:hidden">← Voltar</Link>
        </div>
      </header>

      <main className="max-w-3xl mx-auto px-4 py-10">
        {post.featuredImage?.node?.sourceUrl && (
          <div className="relative aspect-video overflow-hidden rounded-xl mb-8">
            <Image
              src={post.featuredImage.node.sourceUrl}
              alt={post.title}
              fill
              className="object-cover"
              priority
              sizes="(max-width: 768px) 100vw, 800px"
            />
          </div>
        )}

        <h1 className="text-2xl md:text-3xl font-bold text-white mb-3 leading-tight">
          {post.title}
        </h1>

        <div className="flex items-center gap-3 mb-8 border-b border-gray-800 pb-6">
          <span className="w-1 h-4 bg-red-600 rounded inline-block"></span>
          <p className="text-sm text-gray-400">
            {new Date(post.date).toLocaleDateString("pt-BR", {
              day: "2-digit",
              month: "long",
              year: "numeric",
            })}
          </p>
        </div>

        <div
          className="prose prose-invert prose-red max-w-none text-gray-300 leading-relaxed prose-headings:text-white prose-h2:text-xl prose-h2:font-bold prose-h2:mt-8 prose-h2:mb-4 prose-p:text-gray-300 prose-p:leading-relaxed prose-a:text-red-400 prose-a:no-underline hover:prose-a:underline prose-strong:text-white prose-img:rounded-xl"
          dangerouslySetInnerHTML={{ __html: post.content }}
        />

        <div className="mt-10 pt-6 border-t border-gray-800">
          <Link href="/" className="inline-flex items-center gap-2 text-sm text-gray-400 hover:text-red-500 transition-colors">
            ← Voltar para o início
          </Link>
        </div>
      </main>

      <footer className="border-t border-gray-800 mt-10" style={{ backgroundColor: "#111111" }}>
        <div className="max-w-6xl mx-auto px-4 py-8 text-center">
          <Image src="/msfv.webp" alt="Minha Série Favorita" width={120} height={35} className="h-8 w-auto mx-auto mb-4" />
          <p className="text-sm text-gray-500">Fique por dentro das novidades de filmes, séries, streaming e TV!</p>
          <p className="text-xs text-gray-600 mt-2">© {new Date().getFullYear()} Minha Série Favorita. Todos os direitos reservados.</p>
        </div>
      </footer>
    </div>
  );
}