import type { Metadata } from "next";
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 { PageHeaderBanner } from "@/components/PageHeaderBanner";
import { buildPageMetadata } from "@/lib/seo";
import { SAMPLE_BLOG_POSTS } from "@/lib/blogSampleData";

export const dynamic = "force-dynamic";

// Feste 1120px-Content-Spalte + feste Breakpoints, wie in
// reference/subpage-header-spec festgelegt — kein vw/clamp.
const COL = "mx-auto w-full max-w-[1120px] px-5 sm:px-8";

export async function generateMetadata({ params }: { params: Promise<{ locale: string }> }): Promise<Metadata> {
  const { locale } = await params;
  return buildPageMetadata({
    locale,
    path: "/blog",
    title: "Blog",
    description:
      locale === "en"
        ? "Behind the scenes from recent shoots and conventions with Rakku Photography."
        : "Behind the Scenes von aktuellen Shootings und Conventions mit Rakku Photography.",
  });
}

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

  await connectDB();
  // Öffentlich nur Beiträge, die sichtbar UND deren Veröffentlichungs-
  // zeitpunkt erreicht ist. Ein publishedAt in der Zukunft = geplanter
  // Beitrag (erscheint automatisch ab dem Zeitpunkt). `$not: { $gt }` deckt
  // auch Alt-Dokumente ohne publishedAt mit ab.
  const now = new Date();
  let allPosts = await BlogPost.find({ visible: true, publishedAt: { $not: { $gt: now } } })
    .sort({ publishedAt: -1 })
    .lean();
  // Preview-only Startbestand, solange die blogposts-Collection leer ist (env
  // nur im Preview-Worktree, .env* ist gitignored → nie auf der Live-Seite).
  if (allPosts.length === 0 && process.env.PREVIEW_SAMPLE_DATA === "1") {
    allPosts = SAMPLE_BLOG_POSTS as unknown as typeof allPosts;
  }
  const allTags = [...new Set(allPosts.flatMap((p) => p.tags || []))].sort();
  const posts = tag ? allPosts.filter((p) => (p.tags || []).includes(tag)) : allPosts;

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

  // Ungefiltert und mit >1 Beitrag: der neueste bekommt die große Lead-Karte,
  // der Rest ein Zweispalten-Raster (wie im bestätigten Mockup). Gefiltert
  // oder mit nur einem Beitrag: alles gleichwertig ins Raster.
  const useLead = !tag && posts.length > 1;
  const lead = useLead ? posts[0] : null;
  const rest = useLead ? posts.slice(1) : posts;

  return (
    // Opake --rk-bg-Fläche blockt den weißen Radial-Schimmer des body-Hintergrunds.
    // Header/Nav/Banner: geteilte Behandlung — siehe reference/subpage-header-spec.
    <main className="min-h-screen bg-[var(--rk-bg)] pb-24">
      <PageHeaderBanner
        image="/img/blog-banner-ente.jpg"
        eyebrow={isEn ? "Behind the scenes" : "Hinter den Kulissen"}
        title="Blog"
        subtitle={
          isEn
            ? "Behind the scenes from recent shoots and conventions."
            : "Behind the Scenes von aktuellen Shootings und Conventions."
        }
        focalPoint="52% 26%"
        tall
      />

      <section className="-mt-8">
        <div className={`${COL} pt-14 sm:pt-20`}>
          <div className="text-center">
            <a
              href="/blog/rss.xml"
              className="text-xs uppercase tracking-[0.2em] text-[var(--rk-ink-muted)] underline underline-offset-4 transition-colors hover:text-[var(--rk-ink)]"
            >
              RSS
            </a>
          </div>

          {allTags.length > 0 && (
            <div className="mt-10 flex flex-wrap justify-center gap-2">
              <Link
                href="/blog"
                className={`rounded-full border px-4 py-2 text-xs uppercase tracking-[0.15em] transition-colors ${
                  !tag
                    ? "border-white text-[var(--rk-ink)]"
                    : "border-white/15 text-[var(--rk-ink-muted)] hover:border-white/40"
                }`}
              >
                {isEn ? "All" : "Alle"}
              </Link>
              {allTags.map((t) => (
                <Link
                  key={t}
                  href={`/blog?tag=${encodeURIComponent(t)}`}
                  className={`rounded-full border px-4 py-2 text-xs uppercase tracking-[0.15em] transition-colors ${
                    tag === t
                      ? "border-white text-[var(--rk-ink)]"
                      : "border-white/15 text-[var(--rk-ink-muted)] hover:border-white/40"
                  }`}
                >
                  {t}
                </Link>
              ))}
            </div>
          )}

          {posts.length === 0 ? (
            <div className="mt-16 text-center">
              <div className="rk-accent-rule rk-accent-rule--center" />
              <h2 className="rk-wordmark mt-4 text-xl sm:text-2xl">
                {isEn ? "No posts yet" : "Noch keine Beiträge"}
              </h2>
              <p className="mx-auto mt-3 max-w-md text-sm leading-relaxed text-[var(--rk-ink-muted)]">
                {isEn
                  ? "Nothing published here yet — check back soon or follow me on Instagram."
                  : "Hier ist noch nichts veröffentlicht — schau bald wieder vorbei oder folge mir auf Instagram."}
              </p>
            </div>
          ) : (
            <div className="mt-12 flex flex-col gap-6">
              {lead && (
                <ScrollReveal>
                  <Link
                    href={`/blog/${lead.slug}`}
                    className="group relative block overflow-hidden rounded-2xl border border-white/10 shadow-[0_24px_60px_-20px_rgba(0,0,0,0.55)]"
                  >
                    <div className="relative aspect-[16/9] sm:aspect-[21/9]">
                      {lead.coverImage && (
                        <Image
                          src={lead.coverImage}
                          alt=""
                          fill
                          sizes="1120px"
                          className="object-cover transition-transform duration-500 group-hover:scale-[1.03]"
                        />
                      )}
                      <div className="absolute inset-0 [background:linear-gradient(180deg,transparent_35%,rgba(16,16,18,0.55)_68%,rgba(16,16,18,0.92))]" />
                    </div>
                    <div className="absolute inset-x-0 bottom-0 p-7 sm:p-10">
                      {(lead.tags?.[0] || "") && (
                        <p className="text-[0.7rem] uppercase tracking-[0.22em] text-[var(--rk-accent)]">
                          {lead.tags?.[0]}
                        </p>
                      )}
                      <p className="mt-2 text-xs text-[var(--rk-ink-muted)]">{fmtDate(lead.publishedAt)}</p>
                      <h2 className="rk-wordmark mt-2 text-2xl sm:text-3xl">{(isEn && lead.titleEn) || lead.title}</h2>
                      {((isEn && lead.excerptEn) || lead.excerpt) && (
                        <p className="mt-3 max-w-2xl text-sm leading-relaxed text-[var(--rk-ink-muted)]">
                          {(isEn && lead.excerptEn) || lead.excerpt}
                        </p>
                      )}
                    </div>
                  </Link>
                </ScrollReveal>
              )}

              {rest.length > 0 && (
                <div className={`grid gap-6 sm:grid-cols-2 ${tag ? "lg:grid-cols-3" : ""}`}>
                  {rest.map((post, i) => (
                    <ScrollReveal key={String(post._id)} delayMs={(i % 3) * 70}>
                      <Link
                        href={`/blog/${post.slug}`}
                        className="group flex h-full flex-col overflow-hidden rounded-xl border border-white/10 bg-[var(--rk-surface)] shadow-[0_24px_60px_-20px_rgba(0,0,0,0.55)] transition-colors hover:border-white/25"
                      >
                        <div className="relative aspect-[16/10] bg-white/5">
                          {post.coverImage && (
                            <Image
                              src={post.coverImage}
                              alt=""
                              fill
                              sizes="(min-width: 640px) 540px, 100vw"
                              className="object-cover transition-transform duration-500 group-hover:scale-[1.03]"
                            />
                          )}
                        </div>
                        <div className="flex flex-1 flex-col p-6">
                          {(post.tags?.[0] || "") && (
                            <p className="text-[0.7rem] uppercase tracking-[0.22em] text-[var(--rk-accent)]">
                              {post.tags?.[0]}
                            </p>
                          )}
                          <p className="mt-1.5 text-xs text-[var(--rk-ink-muted)]">{fmtDate(post.publishedAt)}</p>
                          <h3 className="rk-wordmark mt-2 text-lg">{(isEn && post.titleEn) || post.title}</h3>
                          {((isEn && post.excerptEn) || post.excerpt) && (
                            <p className="mt-2 line-clamp-3 text-sm leading-relaxed text-[var(--rk-ink-muted)]">
                              {(isEn && post.excerptEn) || post.excerpt}
                            </p>
                          )}
                        </div>
                      </Link>
                    </ScrollReveal>
                  ))}
                </div>
              )}
            </div>
          )}
        </div>
      </section>
    </main>
  );
}