import { pb } from "@/lib/pb";
import Link from "next/link";
import { Badge } from "@/components/ui/badge";
import { getDictionary } from "@/lib/dictionaries";

interface PBPost {
  id: string;
  title: string;
  slug: string;
  excerpt: string;
  lang: string;
  created: string;
  published: boolean;
}

interface Props {
  params: Promise<{ lang: string }>;
}

export default async function BlogIndexPage({ params }: Props) {
  const { lang } = await params;
  const dict = await getDictionary(lang); // Подключаем словарь

  let records: PBPost[] = [];

  try {
    records = await pb.collection(`posts_${lang}`).getFullList<PBPost>({
      filter: "published = true",
      sort: "-created",
      fetch: (url, config) =>
        fetch(url, { ...config, next: { revalidate: 3600 } }),
    });
  } catch (err) {
    console.error("Failed to fetch blog posts:", err);
  }

  return (
    <main className="min-h-screen pt-32 pb-20 container mx-auto max-w-5xl px-4">
      <Badge
        variant="outline"
        className="mb-6 border-primary/30 text-primary uppercase tracking-widest"
      >
        {dict.blog.archive}
      </Badge>

      <h1 className="text-5xl md:text-6xl font-extrabold tracking-tighter mb-12">
        {dict.blog.systemLogs}
      </h1>

      {records.length === 0 ? (
        <div className="p-20 border border-dashed border-border/50 rounded-3xl text-center bg-card/10">
          <p className="text-muted-foreground font-mono italic">
            {dict.blog.emptySector}
          </p>
        </div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
          {records.map((post) => (
            <Link
              href={`/${lang}/blog/${post.slug}`}
              key={post.id}
              className="group block"
            >
              <article className="p-8 border border-border/50 rounded-2xl bg-card/20 hover:bg-card/40 hover:border-primary/50 transition-all duration-300 h-full flex flex-col">
                <div className="text-xs text-primary font-mono mb-4 flex items-center gap-2">
                  <span className="w-1.5 h-1.5 bg-primary rounded-full animate-pulse" />
                  {new Date(post.created).toLocaleDateString(
                    lang === "ru" ? "ru-RU" : "en-US",
                  )}
                </div>

                <h2 className="text-2xl font-bold mb-3 group-hover:text-primary transition-colors duration-300">
                  {post.title}
                </h2>

                <p className="text-muted-foreground text-sm leading-relaxed line-clamp-3">
                  {post.excerpt}
                </p>

                <div className="mt-8 pt-4 border-t border-border/30 text-xs font-bold uppercase tracking-widest text-primary/50 group-hover:text-primary transition-colors">
                  {dict.blog.decrypt}
                </div>
              </article>
            </Link>
          ))}
        </div>
      )}
    </main>
  );
}