export const dynamic = 'force-dynamic';
import { pb, type BlogPost } from "@/lib/pb";
import Link from "next/link";

export const metadata = { title: "Blog" };

async function getPosts() {
  try { return pb.collection("blog_posts").getList<BlogPost>(1, 20, { sort: "-created" }); }
  catch { return null; }
}

export default async function BlogPage() {
  const data = await getPosts();
  const posts = data?.items ?? [];
  return (
    <div className="max-w-3xl mx-auto px-6 py-12">
      <div className="mb-12">
        <div className="text-xs font-mono text-[var(--muted)] tracking-widest uppercase mb-2">Notizen</div>
        <h1 style={{ fontFamily:"'Syne',sans-serif", fontWeight:800, fontSize:"2.25rem", letterSpacing:"-0.03em" }} className="text-[var(--ink)]">Blog</h1>
        <p className="text-[var(--muted)] mt-2">Funde, Besonderheiten und Gedanken rund ums Sammeln.</p>
      </div>
      {posts.length === 0 ? (
        <div className="text-center py-24 text-[var(--muted)]">
          <div style={{ fontFamily:"'Syne',sans-serif", fontWeight:700, fontSize:"1.5rem" }} className="mb-2">Noch keine Beiträge</div>
          <p className="text-sm">Schreib den ersten Eintrag über den PocketBase Admin.</p>
        </div>
      ) : (
        <div className="space-y-8">
          {posts.map((post, i) => (
            <article key={post.id} className={i < posts.length-1 ? "pb-8 border-b border-[var(--warm)]" : ""}>
              <Link href={`/blog/${post.slug}`} className="block group">
                <h2 style={{ fontFamily:"'Syne',sans-serif", fontWeight:700, fontSize:"1.35rem" }} className="mt-2 text-[var(--ink)] group-hover:text-[var(--accent)] transition-colors">{post.titel}</h2>
                {post.inhalt && <p className="mt-2 text-[var(--muted)] text-sm leading-relaxed line-clamp-3">{post.inhalt.replace(/[#*`\[\]]/g,"").slice(0,220)}…</p>}
              </Link>
            </article>
          ))}
        </div>
      )}
    </div>
  );
}