import { Suspense } from "react";
import BlogsPage from "@/components/blogs";
import Layout from "@/components/layout/StLayout";
import { getStateInfo } from "@/lib/getStateInfo";

export async function generateMetadata() {
  const { matchedCity } = await getStateInfo();
  const siteName = matchedCity?.site_name || "نوبت 724";
  const title = `مقالات و اخبار پزشکی | ${siteName}`;
  const description = `جدیدترین مقالات، اخبار و راهنماهای پزشکی. اطلاعات تخصصی در حوزه سلامت و پزشکی از متخصصان ${siteName}.`;
  const image = "/assets/images/og-image.png";
  // کلیدواژه‌های شهر از city.json (رشته یا آرایه).
  const rawKeywords = matchedCity?.keywords;
  const keywords = Array.isArray(rawKeywords)
    ? rawKeywords
    : typeof rawKeywords === "string" && rawKeywords.trim()
      ? rawKeywords.split(",").map((k) => k.trim()).filter(Boolean)
      : undefined;
  return {
    title,
    description,
    ...(keywords?.length && { keywords }),
    // C1-a — لیست بلاگ per-domain است (پست‌های همان شهر + سراسری)؛
    // canonical لایهٔ layout (self روی همان دامنه) درست است.
    openGraph: { title, description, images: [image] },
    twitter: { card: "summary_large_image", title, description, images: [image] },
  };
}

export default async function Blogs() {
  const { matchedCity, isRoot } = await getStateInfo();

  // روی دامنهٔ شهری: پست‌های همان شهر + سراسری. روی دامنهٔ ریشه: همهٔ پست‌ها.
  // تشخیص شهر سمت سرور انجام می‌شود (همان الگوی app/specialties/page.js).
  return (
    <Layout name="/blogs">
      {/* BlogsPage تگ انتخابی را از useSearchParams می‌خواند؛ Next 15 برای آن
          مرز Suspense لازم دارد وگرنه prerender صفحه می‌شکند. */}
      <Suspense fallback={null}>
        <BlogsPage cityId={isRoot ? null : (matchedCity?.id ?? null)} />
      </Suspense>
    </Layout>
  );
}