import { PublicLayout } from '@/components/layout/public/public-layout';
import { Metadata } from 'next';
import VisionTopBlock from './_components/vision-top-block';
import VisionPopularBlock from './_components/vision-popular-block';
import VisionList from './_components/vision-list';
import { createHelpers } from '@/lib/trpc/server';
import { PostOrderEnum, TopicsEnum } from '@/config/enums';
import { transformPostsToArticleList } from '@/features/posts/_lib/transformers';
import { HydrationBoundary } from '@tanstack/react-query';
import { buildMetadataFromContent, generateMetaTags } from '@/lib/meta-tags/server';

const visionerContent = {
  title: 'Visioner',
  description: 'Visioner for fremtidens København fra fag- og lægfolk. Stem visionerne op og ned.',
  author: 'Magasinet KBH',
  url: 'https://magasinetkbh.dk/visioner',
};

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

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

  const { jsonLd } = await generateMetaTags(visionerContent);

  const [mainVisionsData, yearPopularData, alltimePopularData] =
    await Promise.all([
      helpers.posts.list.fetch({
        with: ['vision'],
        topic: TopicsEnum.VISIONS,
        limit: 5,
        orderBy: PostOrderEnum.PUBLISHED_AT
      }),
      helpers.posts.list.fetch({
        with: ['vision'],
        topic: TopicsEnum.VISIONS,
        limit: 5,
        orderBy: PostOrderEnum.POPULAR_YEAR
      }),
      helpers.posts.list.fetch({
        with: ['vision'],
        topic: TopicsEnum.VISIONS,
        limit: 5,
        orderBy: PostOrderEnum.VIEWS
      }),
      helpers.posts.paginate.prefetchInfinite({
        with: ['vision'],
        topic: TopicsEnum.VISIONS,
        limit: 8,
        orderBy: PostOrderEnum.PUBLISHED_AT
      })
    ]);

  const mainVisions = transformPostsToArticleList(mainVisionsData);
  const yearPopular = transformPostsToArticleList(yearPopularData);
  const alltimePopular = transformPostsToArticleList(alltimePopularData);

  return (
    <PublicLayout>
      {jsonLd && (
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{
            __html: JSON.stringify(jsonLd).replace(/</g, '\\u003c')
          }}
        />
      )}
      <VisionTopBlock data={mainVisions} />
      <VisionPopularBlock
        yearPopular={yearPopular}
        allTimePopular={alltimePopular}
      />
      <HydrationBoundary state={helpers.dehydrate()}>
        <VisionList />
      </HydrationBoundary>
    </PublicLayout>
  );
}