import Container from "@/components/elements/Container";
import { cookies } from "next/headers";
import SearchFilter from "@/components/search/SearchFilter";
import { fetchSearch } from "@/api/fetchSearch";
import InfiniteSearch from "@/components/search/InfiniteSearch";
import { Metadata } from "next";

interface ISearchProps {
  searchParams: Promise<{
    search?: string;
    type?: string;
  }>;
}

// تبدیل متادیتای ثابت به داینامیک
export async function generateMetadata({ searchParams }: ISearchProps): Promise<Metadata> {
  const { search } = await searchParams;
  
  const title = search 
    ? `نتایج جستجو برای "${search}" | مدستاگرام` 
    : "جستجوی بیلبوردها و پروفایل‌ها | مدستاگرام";

  const description = search
    ? `نتایج جستجوی تخصصی برای ${search} در حوزه مد و زیبایی مدستاگرام.`
    : "جستجو و فیلتر بیلبورد، فروشگاه، شهر و دسته‌بندی در پلتفرم مدستاگرام.";

  return {
    title,
    description,
    alternates: {
      canonical: "https://modstagram.com/search",
    },
    openGraph: {
      title,
      description,
      url: "https://modstagram.com/search",
      siteName: "مدستاگرام",
      locale: "fa_IR",
      type: "website",
    }
  };
}

export default async function Search({ searchParams }: ISearchProps) {
  const token = (await cookies()).get("token")?.value || "";
  const filters = await searchParams;

  const initialData =
    filters.search && filters.type
      ? await fetchSearch(1, 10, filters, token)
      : undefined;

  return (
    <Container>
      {/* اضافه کردن H1 مخفی برای بهبود سئو */}
      <h1 className="sr-only">
        {filters.search 
          ? `نتایج جستجوی مدستاگرام برای: ${filters.search}` 
          : "جستجوی تخصصی در پلتفرم مد و زیبایی مدستاگرام"}
      </h1>

      <SearchFilter />
      <InfiniteSearch
        initialData={initialData}
        filters={filters}
        token={token}
      />
    </Container>
  );
}