import type { Metadata } from "next";
import { notFound } from "next/navigation";
import { setRequestLocale } from "next-intl/server";
import Image from "next/image";
import { connectDB } from "@/lib/db";
import { BlogPost } from "@/models/BlogPost";
import { Link } from "@/i18n/navigation";
import { ScrollReveal } from "@/components/ScrollReveal";
import { buildPageMetadata } from "@/lib/seo";
import { SAMPLE_BLOG_POSTS, type BlogPostLike } from "@/lib/blogSampleData";

export const dynamic = "force-dynamic";

// Feste Lesespalte statt rk-shell (vw-Gutter) — reference/subpage-header-spec.
const COL = "mx-auto w-full max-w-[720px] px-5 sm:px-8";

const usePreviewSamples = () => process.env.PREVIEW_SAMPLE_DATA === "1";

async function loadPost(slug: string): Promise<BlogPostLike | null> {
  await connectDB();
  // publishedAt in der Zukunft => noch nicht öffentlich (geplanter Beitrag).
  const dbPost = await BlogPost.findOne({
    slug,
    visible: true,
    publishedAt: { $not: { $gt: new Date() } },
  }).lean();
  if (dbPost) return dbPost as unknown as BlogPostLike;
  if (usePreviewSamples()) {
    const dbCount = await BlogPost.countDocuments({ visible: true });
    if (dbCount === 0) return SAMPLE_BLOG_POSTS.find((p) => p.slug === slug) ?? null;
  }
  return null;
}

export async function generateMetadata({
  params,
}: {
  params: Promise<{ locale: string; slug: string }>;
}): Promise<Metadata> {
  const { locale, slug } = await params;
  const post = await loadPost(slug);
  if (!post) return buildPageMetadata({ locale, path: `/blog/${slug}`, title: "Blog", description: "", noindex: true });

  const isEn = locale === "en";
  const title = (isEn && post.titleEn) || post.title;
  const excerpt = (isEn && post.excerptEn) || post.excerpt || post.content.slice(0, 160);
  return buildPageMetadata({ locale, path: `/blog/${slug}`, title, description: excerpt });
}

export default async function BlogPostPage({
  params,
}: {
  params: Promise<{ locale: string; slug: string }>;
}) {
  const { locale, slug } = await params;
  setRequestLocale(locale);
  const isEn = locale === "en";

  const post = await loadPost(slug);
  if (!post) notFound();

  const title = (isEn && post.titleEn) || post.title;
  const content = (isEn && post.contentEn) || post.content;
  const fmtDate = (d: Date) =>
    new Date(d).toLocaleDateString(isEn ? "en-GB" : "de-DE", { day: "2-digit", month: "long", year: "numeric" });

  // Ähnliche Beiträge: mindestens ein gemeinsames Tag, sonst gar nichts.
  const postTags = post.tags || [];
  let relatedPosts: BlogPostLike[] = [];
  if (postTags.length) {
    const dbRelated = await BlogPost.find({
      visible: true,
      publishedAt: { $not: { $gt: new Date() } },
      slug: { $ne: slug },
      tags: { $in: postTags },
    })
      .sort({ publishedAt: -1 })
      .limit(3)
      .lean();
    relatedPosts = dbRelated as unknown as BlogPostLike[];
    if (relatedPosts.length === 0 && usePreviewSamples()) {
      relatedPosts = SAMPLE_BLOG_POSTS.filter(
        (p) => p.slug !== slug && p.tags.some((t) => postTags.includes(t))
      ).slice(0, 3);
    }
  }

  return (
    <main className="min-h-screen bg-[var(--rk-bg)] pt-32 pb-24">
      <ScrollReveal className={COL}>
        <Link
          href="/blog"
          className="text-xs uppercase tracking-[0.15em] text-[var(--rk-ink-muted)] transition-colors hover:text-[var(--rk-ink)]"
        >
          {isEn ? "← Back to blog" : "← Zurück zum Blog"}
        </Link>

        {postTags[0] && (
          <p className="mt-6 text-[0.7rem] uppercase tracking-[0.22em] text-[var(--rk-accent)]">{postTags[0]}</p>
        )}
        <p className="mt-2 text-xs uppercase tracking-[0.35em] text-[var(--rk-ink-muted)]">{fmtDate(post.publishedAt)}</p>
        <h1 className="rk-wordmark mt-3 text-2xl sm:text-3xl">{title}</h1>

        {post.coverImage && (
          <div className="relative mt-8 aspect-[16/9] overflow-hidden rounded-xl bg-white/5">
            <Image src={post.coverImage} alt="" fill sizes="720px" className="object-cover" />
          </div>
        )}

        <div className="mt-8 flex flex-col gap-4 text-[15px] leading-relaxed text-[var(--rk-ink-muted)]">
          {content.split(/\n{2,}/).map((paragraph, i) => (
            <p key={i}>{paragraph}</p>
          ))}
        </div>

        {postTags.length > 0 && (
          <div className="mt-8 flex flex-wrap gap-2">
            {postTags.map((t) => (
              <Link
                key={t}
                href={`/blog?tag=${encodeURIComponent(t)}`}
                className="rounded-full border border-white/15 px-3 py-1.5 text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)] transition-colors hover:border-white/40 hover:text-[var(--rk-ink)]"
              >
                {t}
              </Link>
            ))}
          </div>
        )}
      </ScrollReveal>

      {relatedPosts.length > 0 && (
        <div className={`${COL} mt-16`}>
          <div className="rk-accent-rule" />
          <p className="mt-4 text-xs uppercase tracking-[0.2em] text-[var(--rk-ink-muted)]">
            {isEn ? "Related posts" : "Ähnliche Beiträge"}
          </p>
          <div className="mt-5 grid grid-cols-1 gap-4 sm:grid-cols-3">
            {relatedPosts.map((rp) => (
              <Link
                key={String(rp._id)}
                href={`/blog/${rp.slug}`}
                className="group block overflow-hidden rounded-xl border border-white/10 bg-[var(--rk-surface)] transition-colors hover:border-white/30"
              >
                {rp.coverImage ? (
                  <div className="relative aspect-[16/9] bg-white/5">
                    <Image src={rp.coverImage} alt="" fill sizes="220px" className="object-cover" />
                  </div>
                ) : (
                  <div className="aspect-[16/9] bg-white/5" />
                )}
                <div className="p-3">
                  <p className="line-clamp-2 text-xs text-[var(--rk-ink)] group-hover:underline">
                    {(isEn && rp.titleEn) || rp.title}
                  </p>
                </div>
              </Link>
            ))}
          </div>
        </div>
      )}
    </main>
  );
}