import { notFound } from "next/navigation";
import { AdSlot } from "@/components/AdSlot";
import { ArticleCard } from "@/components/ArticleCard";
import { JsonLd } from "@/components/JsonLd";
import {
  findAuthor,
  findCategory,
  getAuthors,
  getCategories,
  getPostBySlug,
  getRelatedPosts,
  getSiteConfig
} from "@/lib/cms";
import { newsArticleSchema, postMetadata } from "@/lib/seo";

type PageProps = {
  params: Promise<{ slug: string }>;
};

export async function generateMetadata({ params }: PageProps) {
  const { slug } = await params;
  const [site, post] = await Promise.all([getSiteConfig(), getPostBySlug(slug)]);
  if (!post) return {};
  return postMetadata(site, post);
}

export default async function ArticlePage({ params }: PageProps) {
  const { slug } = await params;
  const [site, categories, authors, post] = await Promise.all([
    getSiteConfig(),
    getCategories(),
    getAuthors(),
    getPostBySlug(slug)
  ]);

  if (!post || post.status !== "published") notFound();

  const category = findCategory(categories, post.category);
  const author = findAuthor(authors, post.authorId);
  const related = await getRelatedPosts(post);

  return (
    <main className="container">
      <JsonLd data={newsArticleSchema(site, post, category, author)} />
      <article className="article-layout">
        <div>
          <header className="article-header">
            <span className="kicker">{post.sponsored ? "Contenido patrocinado" : category?.name}</span>
            <h1>{post.title}</h1>
            <p className="lead" style={{ color: "var(--muted)" }}>
              {post.excerpt}
            </p>
            <p className="article-meta">
              Por {author?.name || "Redaccion"} |{" "}
              {new Intl.DateTimeFormat("es-PY", { dateStyle: "long", timeStyle: "short" }).format(new Date(post.publishedAt))}
            </p>
          </header>
          <img src={post.image} alt={post.imageAlt} style={{ width: "100%", margin: "22px 0" }} />
          <AdSlot label="Banner dentro de nota" variant="small" />
          <div className="article-body">
            {post.body.split("\n\n").map((paragraph) => (
              <p key={paragraph}>{paragraph}</p>
            ))}
          </div>
          <section>
            <div className="section-head">
              <h2>Noticias relacionadas</h2>
            </div>
            <div className="news-grid">
              {related.map((item) => (
                <ArticleCard key={item.id} post={item} category={findCategory(categories, item.category)} />
              ))}
            </div>
          </section>
        </div>
        <aside className="sidebar">
          <AdSlot label="Banner lateral dentro de nota" variant="tall" />
          <section className="panel">
            <h2>Etiquetas</h2>
            <p>{post.tags.join(" | ")}</p>
          </section>
          <section className="panel">
            <h2>Redes sociales</h2>
            <p>Preparado para compartir con Open Graph y Twitter Cards.</p>
          </section>
        </aside>
      </article>
    </main>
  );
}