import { PublicLayout } from '@/components/layout/public/public-layout';
import { Metadata } from 'next';
import ReviewsList from './_components/review-list';
import MostRead from '@/components/shared/most-read';
import { Separator } from '@/components/ui/separator';
import { createHelpers } from '@/lib/trpc/server';
import { PostOrderEnum, TopicsEnum, ReviewTypeEnum } from '@/config/enums';
import { dehydrate, HydrationBoundary } from '@tanstack/react-query';
import { transformPostsToArticleList } from '@/features/posts/_lib/transformers';
import { buildMetadataFromContent, generateMetaTags } from '@/lib/meta-tags/server';

const anmeldelserContent = {
  title: 'seneste anmeldelser',
  description: 'Magasinet KBHs seneste anmeldelser.',
  author: 'Magasinet KBH',
  url: 'https://magasinetkbh.dk/anmeldelser',
};

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

export default async function ReviewsPage() {
  const helpers = await createHelpers();

  const { jsonLd } = await generateMetaTags(anmeldelserContent);

  const [popularFilms, popularScene] = await Promise.all([
    helpers.posts.list.fetch({
      with: ['review'],
      topic: TopicsEnum.REVIEWS,
      orderBy: PostOrderEnum.VIEWS,
      reviewType: ReviewTypeEnum.FILM,
      limit: 5
    }),
    helpers.posts.list.fetch({
      with: ['review'],
      topic: TopicsEnum.REVIEWS,
      orderBy: PostOrderEnum.VIEWS,
      reviewType: ReviewTypeEnum.SCENE,
      limit: 5
    }),
    helpers.posts.list.prefetch({
      with: ['review'],
      topic: TopicsEnum.REVIEWS,
      reviewType: ReviewTypeEnum.FILM,
      limit: 7
    }),
    helpers.posts.count.prefetch({
      topic: TopicsEnum.REVIEWS,
      reviewType: ReviewTypeEnum.FILM
    }),
    helpers.posts.list.prefetch({
      with: ['review'],
      topic: TopicsEnum.REVIEWS,
      reviewType: ReviewTypeEnum.SCENE,
      limit: 7
    }),
    helpers.posts.count.prefetch({
      topic: TopicsEnum.REVIEWS,
      reviewType: ReviewTypeEnum.SCENE
    })
  ]);

  const popularFilmsData = transformPostsToArticleList(popularFilms);
  const popularSceneData = transformPostsToArticleList(popularScene);

  return (
    <>
      <PublicLayout>
        {jsonLd && (
          <script
            type="application/ld+json"
            dangerouslySetInnerHTML={{
              __html: JSON.stringify(jsonLd).replace(/</g, '\\u003c')
            }}
          />
        )}
        <HydrationBoundary state={dehydrate(helpers.queryClient)}>
          <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'>
                  anmeldelser
                </h2>
              </div>
              <div className='grid w-full grid-cols-1 gap-0.5 sm:grid-cols-2 sm:grid-rows-[auto_auto_auto_auto]'>
                <div className='row-span-4 grid grid-rows-subgrid border-b pb-6 sm:border-r sm:border-b-0 sm:pr-4 sm:pb-0'>
                  <ReviewsList type={ReviewTypeEnum.FILM} />
                </div>
                <div className='row-span-4 grid grid-rows-subgrid border-t pt-6 sm:border-t-0 sm:border-l sm:pt-0 sm:pl-4'>
                  <ReviewsList type={ReviewTypeEnum.SCENE} />
                </div>
              </div>
            </div>
          </section>
        </HydrationBoundary>
        <Separator />
        <section className='relative mx-auto w-full max-w-[1362px] grow p-3 md:p-[30px] md:pt-6 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'>
                mest læst
              </h2>
            </div>
            <div className='md:grid-rows-auto mt-2 grid w-full grid-cols-1 gap-5 md:grid-cols-2 md:gap-y-0'>
              <div>
                <MostRead topics={popularFilmsData} title='film' />
              </div>
              <div>
                <MostRead topics={popularSceneData} title='scene' />
              </div>
            </div>
          </div>
        </section>
      </PublicLayout>
    </>
  );
}