import type { Metadata } from "next";
import Link from "next/link";
import { ArrowLeft, ArrowRight, Search } from "lucide-react";
import { ApiBlogCard } from "@/components/api-blog-card";
import { PageHero } from "@/components/sections";
import { getBlogs, getCategories } from "@/lib/meshkee";

type BlogSearchParams = {
  page?: string;
  q?: string;
  category?: string;
};

export async function generateMetadata({
  searchParams,
}: {
  searchParams: Promise<BlogSearchParams>;
}): Promise<Metadata> {
  const params = await searchParams;
  const page = Math.max(1, Number.parseInt(params.page || "1", 10) || 1);
  const q = (params.q || "").trim();
  const category = (params.category || "").trim();
  const baseDescription =
    "مقالات گلسموند درباره آینه هوشمند، آینه دکوراتیو، نورپردازی و کاربرد آینه در دکوراسیون داخلی.";

  if (q || category) {
    const title = q ? `نتایج جست‌وجوی «${q}»` : "مقالات دسته‌بندی انتخاب‌شده";
    return {
      title,
      description: `${title} در مجله تخصصی گلسموند.`,
      alternates: { canonical: "/blog" },
      robots: { index: false, follow: true },
    };
  }

  const canonical = page > 1 ? `/blog?page=${page}` : "/blog";
  const title = page > 1 ? `مجله گلسموند – صفحه ${page}` : "مجله گلسموند";

  return {
    title,
    description: page > 1 ? `${baseDescription} صفحه ${page}.` : baseDescription,
    alternates: { canonical },
    openGraph: {
      title,
      description: "مقالات تخصصی درباره آینه هوشمند، نورپردازی و دکوراسیون داخلی.",
      url: canonical,
      images: ["/images/articles/decorative-mirrors.jpg"],
    },
  };
}

function pageHref(page: number, q: string, category: string) {
  const query = new URLSearchParams();
  if (page > 1) query.set("page", String(page));
  if (q) query.set("q", q);
  if (category) query.set("category", category);
  const value = query.toString();
  return value ? `/blog?${value}` : "/blog";
}

export default async function BlogPage({
  searchParams,
}: {
  searchParams: Promise<BlogSearchParams>;
}) {
  const params = await searchParams;
  const page = Math.max(1, Number.parseInt(params.page || "1", 10) || 1);
  const q = (params.q || "").trim();
  const category = (params.category || "").trim();

  const [blogs, categories] = await Promise.all([
    getBlogs({ page, pageSize: 9, title: q, categoryId: category }).catch(() => ({
      items: [],
      total: 0,
      page,
      pageSize: 9,
    })),
    getCategories("blog").catch(() => ({ items: [] })),
  ]);
  const totalPages = Math.max(1, Math.ceil(blogs.total / blogs.pageSize));

  return (
    <>
      <PageHero englishTitle="JOURNAL" title="مجله گلسموند" />

      <section className="blog-list-section">
        <div className="container">
          <form className="catalog-filters blog-filters" action="/blog" method="get">
            <label>
              <span>جست‌وجوی مقاله</span>
              <div>
                <input type="search" name="q" defaultValue={q} placeholder="عنوان مقاله..." />
                <Search />
              </div>
            </label>
            <label>
              <span>دسته‌بندی</span>
              <select name="category" defaultValue={category}>
                <option value="">همه مقالات</option>
                {categories.items.map((item) => (
                  <option key={item.id} value={item.id}>{item.nameFa || item.name}</option>
                ))}
              </select>
            </label>
            <button className="primary-button" type="submit">جست‌وجو</button>
          </form>

          {blogs.items.length > 0 ? (
            <div className="blog-list-grid">
              {blogs.items.map((blog) => <ApiBlogCard key={blog.id} blog={blog} />)}
            </div>
          ) : (
            <div className="empty-state">
              <h2>مقاله‌ای پیدا نشد</h2>
              <p>عبارت جست‌وجو را تغییر دهید یا فیلترها را حذف کنید.</p>
              <Link href="/blog">نمایش همه مقالات</Link>
            </div>
          )}

          {totalPages > 1 && (
            <nav className="pagination" aria-label="صفحه‌بندی مقالات">
              {page > 1 && (
                <Link href={pageHref(page - 1, q, category)}><ArrowRight />قبلی</Link>
              )}
              <span>صفحه {page.toLocaleString("fa-IR")} از {totalPages.toLocaleString("fa-IR")}</span>
              {page < totalPages && (
                <Link href={pageHref(page + 1, q, category)}>بعدی<ArrowLeft /></Link>
              )}
            </nav>
          )}
        </div>
      </section>
    </>
  );
}