import { Metadata } from 'next';
import { HydrationBoundary } from '@tanstack/react-query';
import { PublicLayout } from '@/components/layout/public/public-layout';
import { createHelpers } from '@/lib/trpc/server';
import SearchList from './_components/search-list';
import SearchHeaderField from './_components/search-header-field';
import { PostOrderEnum } from '@/config/enums';
import { buildMetadataFromContent, generateMetaTags } from '@/lib/meta-tags/server';

const searchContent = {
  title: 'Søg',
  description: 'Search articles on Magasinet KBH',
  author: 'Magasinet KBH',
  url: 'https://magasinetkbh.dk/search',
};

export async function generateMetadata(): Promise<Metadata> {
  return await buildMetadataFromContent(searchContent);
}

export default async function SearchPage({
  searchParams
}: {
  searchParams: Promise<{ s?: string }>;
}) {
  const { s } = await searchParams;

  const helpers = await createHelpers();

  const { jsonLd } = await generateMetaTags(searchContent);

  const [postCount] = await Promise.all([
    helpers.posts.count.fetch({
      search: s
    }),
    helpers.posts.paginate.prefetchInfinite({
      with: ['project', 'tags', 'review', 'primaryTag', 'author', 'vision'],
      search: s,
      limit: 12,
      orderBy: PostOrderEnum.PUBLISHED_AT
    })
  ]);

  return (
    <PublicLayout>
      {jsonLd && (
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{
            __html: JSON.stringify(jsonLd).replace(/</g, '\\u003c')
          }}
        />
      )}
      <section className='border-b border-b-neutral-200 bg-[#F4F2ED]'>
        <div className='mx-auto w-full max-w-[1362px] grow p-3 md:p-[30px] xl:border-x'>
          <div className='sm:ml-0 xl:ml-68'>
            <SearchHeaderField initialSearch={s} />
            <p className='mt-4 w-fit min-w-1/2 border-b border-b-neutral-200 pb-1 text-5xl font-bold text-neutral-600'>
              {s}
            </p>
            <p className='mt-1 text-xl'>{postCount} artikler</p>
          </div>
        </div>
      </section>

      <HydrationBoundary state={helpers.dehydrate()}>
        <SearchList />
      </HydrationBoundary>
    </PublicLayout>
  );
}