import type { Metadata } from "next";
import Link from "next/link";
import { Calendar, Eye, Clock } from "lucide-react";
import { prisma } from "@/lib/db";
import { BLOG_CATEGORIES, categoryLabel } from "@/lib/blog";

export const dynamic = "force-dynamic";

export const metadata: Metadata = {
  title: "Bài viết · Tử Vi Số",
  description:
    "Bài viết chuyên sâu về Tử Vi, Phong Thủy, Lịch và Mệnh Học — kiến thức truyền thống được trình bày dễ hiểu.",
  openGraph: {
    title: "Bài viết · Tử Vi Số",
    description:
      "Bài viết chuyên sâu về Tử Vi, Phong Thủy, Lịch và Mệnh Học — kiến thức truyền thống được trình bày dễ hiểu.",
    type: "website",
  },
};

type SearchParams = Promise<{ cat?: string; q?: string }>;

export default async function BlogIndex({ searchParams }: { searchParams: SearchParams }) {
  const sp = await searchParams;
  const cat = (sp.cat ?? "").trim();
  const q = (sp.q ?? "").trim();

  const where: Record<string, unknown> = {
    publishedAt: { not: null },
  };
  if (cat) where.category = cat;
  if (q) {
    where.OR = [
      { title: { contains: q, mode: "insensitive" } },
      { excerpt: { contains: q, mode: "insensitive" } },
      { tags: { has: q.toLowerCase() } },
    ];
  }

  const [posts, counts] = await Promise.all([
    prisma.blogPost.findMany({
      where,
      orderBy: { publishedAt: "desc" },
      take: 50,
    }),
    prisma.blogPost.groupBy({
      by: ["category"],
      where: { publishedAt: { not: null } },
      _count: true,
    }),
  ]);

  const countMap = new Map(counts.map((c) => [c.category, c._count as number]));
  const totalCount = counts.reduce((s, c) => s + (c._count as number), 0);

  return (
    <div className="bg-bg-base min-h-screen">
      <div className="mx-auto max-w-[1200px] px-4 py-12 lg:px-6">
        {/* Header */}
        <header className="mb-10">
          <div className="text-ink-muted text-[11px] tracking-[0.25em] uppercase">Tử Vi Số</div>
          <h1 className="font-display text-ink-primary mt-2 text-4xl font-semibold lg:text-5xl">
            Bài viết
          </h1>
          <p className="text-ink-secondary mt-3 max-w-2xl text-base leading-relaxed">
            Kiến thức Tử Vi, Phong Thủy, Lịch và Mệnh Học — trình bày dễ tiếp cận, dựa trên cổ thư
            và được biên tập kỹ.
          </p>
        </header>

        {/* Search + Category filter */}
        <div className="mb-8 flex flex-col gap-4">
          <form method="get" className="flex max-w-md gap-2">
            {cat ? <input type="hidden" name="cat" value={cat} /> : null}
            <input
              type="search"
              name="q"
              defaultValue={q}
              placeholder="Tìm bài theo tiêu đề, tóm tắt, thẻ…"
              className="border-stroke-subtle bg-bg-elevated/40 text-ink-primary placeholder:text-ink-muted focus:border-brand-gold/50 flex-1 rounded-md border px-4 py-2 text-sm transition outline-none"
            />
            <button
              type="submit"
              className="bg-brand-gold/90 hover:bg-brand-gold text-bg-base rounded-md px-4 py-2 text-sm font-medium transition"
            >
              Tìm
            </button>
          </form>

          <nav className="flex flex-wrap gap-2">
            <Link
              href={q ? `/blog?q=${encodeURIComponent(q)}` : "/blog"}
              className={[
                "rounded-full px-4 py-1.5 text-xs transition",
                !cat
                  ? "bg-brand-gold/90 text-bg-base"
                  : "border-stroke-subtle text-ink-secondary hover:text-brand-gold border",
              ].join(" ")}
            >
              Tất cả{totalCount ? ` (${totalCount})` : ""}
            </Link>
            {BLOG_CATEGORIES.map((c) => {
              const n = countMap.get(c.key) ?? 0;
              if (n === 0 && cat !== c.key) return null;
              const href = `/blog?cat=${c.key}` + (q ? `&q=${encodeURIComponent(q)}` : "");
              return (
                <Link
                  key={c.key}
                  href={href}
                  className={[
                    "rounded-full px-4 py-1.5 text-xs transition",
                    cat === c.key
                      ? "bg-brand-gold/90 text-bg-base"
                      : "border-stroke-subtle text-ink-secondary hover:text-brand-gold border",
                  ].join(" ")}
                >
                  {c.label} {n > 0 ? `(${n})` : ""}
                </Link>
              );
            })}
          </nav>

          {q ? (
            <div className="text-ink-muted text-xs">
              {posts.length} kết quả cho <span className="text-ink-primary">&quot;{q}&quot;</span>
              {cat ? ` trong ${categoryLabel(cat)}` : ""}.
              <Link
                href={cat ? `/blog?cat=${cat}` : "/blog"}
                className="text-brand-gold ml-2 hover:underline"
              >
                Xóa tìm kiếm
              </Link>
            </div>
          ) : null}
        </div>

        {/* Grid */}
        {posts.length === 0 ? (
          <div className="border-stroke-subtle bg-bg-elevated/30 rounded-xl border px-8 py-16 text-center">
            <div className="text-ink-muted text-sm">
              {cat
                ? `Chưa có bài nào trong chuyên mục ${categoryLabel(cat)}.`
                : "Chưa có bài viết nào được xuất bản."}
            </div>
          </div>
        ) : (
          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
            {posts.map((p) => (
              <Link
                key={p.id}
                href={`/blog/${p.slug}`}
                className="border-stroke-subtle bg-bg-elevated/40 hover:border-brand-gold/40 group flex flex-col overflow-hidden rounded-xl border transition"
              >
                {p.coverImage ? (
                  // eslint-disable-next-line @next/next/no-img-element
                  <img
                    src={p.coverImage}
                    alt=""
                    className="aspect-[16/9] w-full object-cover transition group-hover:scale-[1.02]"
                    loading="lazy"
                  />
                ) : (
                  <div className="aspect-[16/9] w-full bg-gradient-to-br from-amber-900/20 via-stone-900/30 to-zinc-900/40" />
                )}

                <div className="flex flex-1 flex-col p-5">
                  <div className="text-brand-gold/80 mb-2 text-[11px] tracking-[0.15em] uppercase">
                    {categoryLabel(p.category)}
                  </div>
                  <h2 className="font-display text-ink-primary group-hover:text-brand-gold mb-2 text-lg leading-snug font-semibold transition">
                    {p.title}
                  </h2>
                  <p className="text-ink-secondary mb-4 line-clamp-3 flex-1 text-sm leading-relaxed">
                    {p.excerpt}
                  </p>
                  <div className="text-ink-muted flex items-center gap-3 text-xs">
                    <span className="inline-flex items-center gap-1">
                      <Calendar className="h-3 w-3" />
                      {p.publishedAt?.toLocaleDateString("vi-VN", {
                        day: "2-digit",
                        month: "2-digit",
                        year: "numeric",
                      })}
                    </span>
                    <span className="inline-flex items-center gap-1">
                      <Clock className="h-3 w-3" />
                      {p.readMinutes} phút
                    </span>
                    <span className="inline-flex items-center gap-1">
                      <Eye className="h-3 w-3" />
                      {p.views}
                    </span>
                  </div>
                </div>
              </Link>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}