import { Metadata } from 'next';
import { HydrationBoundary, dehydrate } from '@tanstack/react-query';
import { PublicLayout } from '@/components/layout/public/public-layout';
import {
  DistrictsEnum,
  TopicsEnum,
  ProjectStatusEnum,
  ProjectTypeEnum,
  PostOrderEnum
} from '@/config/enums';
import { createHelpers } from '@/lib/trpc/server';
import { parseEnum } from '@/lib/utils/parse-enum';
import ProjectMap from './_components/project-map';
import ProjectList from './_components/project-list';
import ProjectForm from './_components/project-form';
import { buildMetadataFromContent, generateMetaTags } from '@/lib/meta-tags/server';

const projekterContent = {
  title: 'Projekter',
  description: 'Magasinet KBHs projektdatabase. Få overblik over byens arkitektur og byrum ― og abonnér på information om projekter du er særligt interesseret i.',
  author: 'Magasinet KBH',
  url: 'https://magasinetkbh.dk/projekter',
};

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

export default async function Page({
  searchParams
}: {
  searchParams?: Promise<Record<string, string | string[] | undefined>>;
}) {
  const params = await searchParams;

  const helpers = await createHelpers();

  const { jsonLd } = await generateMetaTags(projekterContent);

  await Promise.all([
    helpers.posts.list.prefetch({
      with: ['project'],
      topic: TopicsEnum.PROJECT,
      location: parseEnum(DistrictsEnum, params?.city),
      projectType: parseEnum(ProjectTypeEnum, params?.type),
      projectStatus: parseEnum(ProjectStatusEnum, params?.status),
      orderBy: parseEnum(PostOrderEnum, params?.sort),
      limit: 25
    }),
    helpers.posts.getGeolocations.prefetch({
      topic: TopicsEnum.PROJECT
    })
  ]);

  return (
    <>
      <HydrationBoundary state={dehydrate(helpers.queryClient)}>
        <PublicLayout>
          {jsonLd && (
            <script
              type="application/ld+json"
              dangerouslySetInnerHTML={{
                __html: JSON.stringify(jsonLd).replace(/</g, '\\u003c')
              }}
            />
          )}
          <section className='relative mx-auto w-full max-w-[1362px] grow p-3 md:p-[30px] xl:border-x'>
            <div className='flex flex-col xl:flex-row'>
              <div className='shrink-0 xl:w-68'>
                <h2 className='text-xl leading-none font-bold text-[#CBCBCB] md:text-3xl'>
                  projekter
                </h2>
              </div>
              <div className='flex w-full flex-col gap-6 lg:flex-row'>
                <div className='grow'>
                  <ProjectForm />
                  <ProjectList />
                </div>
                <div className='w-full shrink-0 lg:w-76'>
                  <div className='mb-5 h-[520px] lg:sticky lg:top-2'>
                    <ProjectMap />
                  </div>
                </div>
              </div>
            </div>
          </section>
        </PublicLayout>
      </HydrationBoundary>
    </>
  );
}