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

const opinionContent = {
  title: 'Opinion',
  description: 'Opinion',
  author: 'Magasinet KBH',
  url: 'https://magasinetkbh.dk/opinion',
};

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

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

  const { jsonLd } = await generateMetaTags(opinionContent);

  const [mainOpinionsData, mostReadData, mostCommentedData] = await Promise.all(
    [
      helpers.posts.list.fetch({
        with: ['author'],
        topic: TopicsEnum.OPINION,
        limit: 8,
        orderBy: PostOrderEnum.PUBLISHED_AT
      }),
      helpers.posts.list.fetch({
        topic: TopicsEnum.OPINION,
        limit: 5,
        orderBy: PostOrderEnum.VIEWS
      }),
      helpers.posts.list.fetch({
        topic: TopicsEnum.OPINION,
        limit: 5,
        orderBy: PostOrderEnum.COMMENTS
      }),
      helpers.posts.paginate.prefetchInfinite({
        with: ['author'],
        topic: TopicsEnum.OPINION,
        limit: 8,
        orderBy: PostOrderEnum.PUBLISHED_AT
      })
    ]
  );

  const mainOpinions = transformPostsToArticleList(mainOpinionsData);
  const mostRead = transformPostsToArticleList(mostReadData);
  const mostCommented = transformPostsToArticleList(mostCommentedData);

  return (
    <PublicLayout>
      {jsonLd && (
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{
            __html: JSON.stringify(jsonLd).replace(/</g, '\\u003c')
          }}
        />
      )}
      <section className='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'>
              opinion
            </h2>
          </div>
          <div className='w-full'>
            <OpinionTopBlock data={mainOpinions} />
          </div>
        </div>
      </section>
      <Separator />
      <section className='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'>
              populære
            </h2>
          </div>
          <div className='w-full'>
            <div className='md:grid-rows-auto mt-2 grid w-full grid-cols-1 gap-5 md:grid-cols-2 md:gap-y-0'>
              <MostRead
                topics={mostRead}
                themeColor='green'
                title='mest læst'
              />
              <MostRead
                topics={mostCommented}
                themeColor='green'
                title='mest debat'
              />
            </div>
          </div>
        </div>
      </section>
      <Separator />
      <section className='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'>
              mere opinion
            </h2>
          </div>
          <div className='w-full'>
            <HydrationBoundary state={helpers.dehydrate()}>
              <OpinionList />
            </HydrationBoundary>
          </div>
        </div>
      </section>
    </PublicLayout>
  );
}