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

const kbhplusContent = {
  title: 'KBH+',
  description: 'KBH+',
  author: 'Magasinet KBH',
  url: 'https://magasinetkbh.dk/kbhplus',
};

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

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

  const { jsonLd } = await generateMetaTags(kbhplusContent);

  const [yearlyPosts, mostReadPosts, mostCommentedPosts] = await Promise.all([
    helpers.posts.list.fetch({
      with: ['primaryTag'],
      topic: TopicsEnum.KBHPLUS,
      orderBy: PostOrderEnum.POPULAR_YEAR,
      limit: 4
    }),
    helpers.posts.list.fetch({
      with: ['primaryTag'],
      topic: TopicsEnum.KBHPLUS,
      orderBy: PostOrderEnum.POPULAR,
      limit: 5
    }),
    helpers.posts.list.fetch({
      with: ['primaryTag'],
      topic: TopicsEnum.KBHPLUS,
      orderBy: PostOrderEnum.COMMENTS,
      limit: 5
    }),
    helpers.posts.list.prefetch({
      with: ['primaryTag'],
      topic: TopicsEnum.KBHPLUS,
      limit: 6
    }),
    helpers.posts.count.prefetch({
      topic: TopicsEnum.KBHPLUS
    })
  ]);

  const yearlyPostsData = transformPostsToArticleList(yearlyPosts);
  const mostReadData = transformPostsToArticleList(mostReadPosts);
  const mostCommentedData = transformPostsToArticleList(mostCommentedPosts);

  return (
    <>
      <HydrationBoundary state={dehydrate(helpers.queryClient)}>
        <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'>
                  seneste KBH+
                </h2>
              </div>
              <div className='w-full'>
                <CityList type={TopicsEnum.KBHPLUS} />
              </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={mostReadData} title='mest læst' />
                  <MostRead topics={mostCommentedData} 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'>
                  mest læste seneste år
                </h2>
              </div>
              <div className='w-full'>
                {!!yearlyPostsData?.length ? (
                  <div className='grid gap-x-10 gap-y-5 lg:grid-cols-4'>
                    {yearlyPostsData.map((item, index) => (
                      <div className='border-style' key={index}>
                        <CityItem data={item} type='small' />
                      </div>
                    ))}
                  </div>
                ) : (
                  <div className='my-6'>
                    <p className='text-lg font-medium'>Artikler ikke fundet</p>
                  </div>
                )}
              </div>
            </div>
          </section>
        </PublicLayout>
      </HydrationBoundary>
    </>
  );
}