import { pb, getPbImage } from "@/lib/pb";
import { notFound } from "next/navigation";
import Link from "next/link";
import { ArrowLeft, Calendar, Clock, ShieldCheck } from "lucide-react";
import { getDictionary } from "@/lib/dictionaries";

interface PBPost {
  id: string;
  collectionId: string;
  title: string;
  slug: string;
  content: string;
  image: string;
  lang: string;
  created: string;
  published: boolean;
}

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

export default async function BlogPostPage({ params }: Props) {
  const { lang, slug } = await params;
  const dict = await getDictionary(lang);

  let post: PBPost;

  try {
    // cache: "no-store" — в отличие от списка постов (там ISR на час), отдельный
    // пост всегда читается свежим: страница не самая горячая по трафику, а свежесть
    // контента (например, сразу после публикации) важнее экономии на кэше.
    post = await pb
      .collection(`posts_${lang}`)
      .getFirstListItem<PBPost>(`slug = "${slug}" && published = true`, {
        cache: "no-store",
      });
  } catch (error) {
    // getFirstListItem бросает исключение, если запись не найдена (404 от PocketBase)
    // или не опубликована — в обоих случаях просто показываем стандартный notFound().
    notFound();
  }
  return (
    <main className="min-h-screen pt-32 pb-20 bg-background">
      <div className="container mx-auto max-w-3xl px-4">
        <Link
          href={`/${lang}/blog`}
          className="inline-flex items-center gap-2 text-sm font-mono text-muted-foreground hover:text-primary mb-12 transition-colors group"
        >
          <ArrowLeft
            size={16}
            className="group-hover:-translate-x-1 transition-transform"
          />
          <span className="opacity-50">root@netrunner:~#</span>
          <span>{dict.blog.backBtn}</span>
        </Link>

        <article className="relative">
          {post.image && (
            <div className="w-full h-[300px] md:h-[450px] rounded-3xl overflow-hidden mb-12 border border-border/50 shadow-2xl shadow-primary/10 relative">
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src={getPbImage(post, post.image)}
                alt={post.title}
                className="w-full h-full object-cover"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-background via-transparent to-transparent opacity-60" />
            </div>
          )}

          <div className="flex flex-wrap items-center gap-6 text-[10px] font-mono text-primary mb-8 uppercase tracking-[0.2em]">
            <span className="flex items-center gap-2 px-3 py-1 bg-primary/10 rounded-full border border-primary/20">
              <Calendar size={12} />
              {new Date(post.created).toLocaleDateString(
                lang === "ru" ? "ru-RU" : "en-US",
              )}
            </span>
            <span className="flex items-center gap-2 text-muted-foreground">
              <Clock size={12} />
              {dict.blog.readTime}
            </span>
            <span className="flex items-center gap-2 text-green-500/70">
              <ShieldCheck size={12} />
              {dict.blog.verified}
            </span>
          </div>

          <h1 className="text-4xl md:text-6xl font-extrabold tracking-tighter mb-10 leading-[1.1] text-foreground">
            {post.title}
          </h1>

          <div
            className="prose prose-invert prose-p:text-muted-foreground/90 prose-p:leading-relaxed prose-headings:text-foreground prose-headings:tracking-tighter prose-a:text-primary prose-strong:text-foreground prose-code:text-primary max-w-none text-lg selection:bg-primary/30"
            dangerouslySetInnerHTML={{ __html: post.content }}
          />

          <div className="mt-20 pt-10 border-t border-border/30 flex justify-between items-center">
            <div className="text-[10px] font-mono text-muted-foreground/40 uppercase tracking-widest">
              {dict.blog.endTransmission}
            </div>
            <div className="flex gap-4">
              <div className="w-2 h-2 bg-primary rounded-full animate-ping" />
              <div className="w-2 h-2 bg-primary rounded-full opacity-50" />
              <div className="w-2 h-2 bg-primary rounded-full opacity-20" />
            </div>
          </div>
        </article>
      </div>
    </main>
  );
}