import { Metadata } from 'next';
import { notFound } from 'next/navigation';
import { HydrationBoundary, dehydrate } from '@tanstack/react-query';
import { PublicLayout } from '@/components/layout/public/public-layout';
import { createCaller, createHelpers } from '@/lib/trpc/server';
import { TopicsEnum } from '@/config/enums';
import ProjectGrid from '../_components/project-grid';
import MemberBlock from '@/components/shared/member-block';
import RelatedArticle from '@/components/shared/post-sections/related-article';
import {
  transformPostsToArticleList,
  transformPostToArticle
} from '@/features/posts/_lib/transformers';
import { Routes } from '@/config/routes';
import { adaptPostToContentData } from '@/lib/meta-tags';
import { buildMetadataFromContent, generateMetaTags } from '@/lib/meta-tags/server';

type Props = {
  params: Promise<{ slug: string }>;
};

const BASE_PATH = 'projekter';

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const slug = (await params).slug;

  const helper = await createHelpers();
  const post = await helper.posts.get.fetch({
    with: ['tags'],
    topic: TopicsEnum.PROJECT,
    slug
  });

  if (!post) {
    return {
      title: 'Post Not Found | Magasinet KBH',
      description: 'The requested post could not be found.'
    };
  }

  const contentData = adaptPostToContentData(post, { basePath: BASE_PATH, slug });
  return await buildMetadataFromContent(contentData);
}

export default async function Page({ params }: Props) {
  const { slug } = await params;

  try {
    const helpers = await createHelpers();
    const caller = await createCaller();

    const post = await helpers.posts.get.fetch({
      with: ['project', 'tags', 'postMedia', 'content', 'author'],
      topic: TopicsEnum.PROJECT,
      slug
    });

    if (!post) {
      notFound();
    }

    void caller.analytic.view({
      postId: post.id
    });

    const postData = transformPostToArticle(post);

    const [lastPosts] = await Promise.all([
      helpers.posts.list.fetch({
        limit: 3,
        topic: TopicsEnum.CITY_SPACES,
        orderBy: 'viewsCount'
      }),
      helpers.posts.list.prefetch({
        baseSlug: slug,
        limit: 3
      }),
      helpers.posts.count.prefetch({
        baseSlug: slug
      })
    ]);

    const lastPostsData = transformPostsToArticleList(lastPosts);

    const contentData = adaptPostToContentData(post, { basePath: BASE_PATH, slug });
    const { jsonLd } = await generateMetaTags(contentData);

    return (
      <>
        <HydrationBoundary state={dehydrate(helpers.queryClient)}>
          <PublicLayout>
            {jsonLd && (
              <script
                type="application/ld+json"
                dangerouslySetInnerHTML={{
                  __html: JSON.stringify(jsonLd).replace(/</g, '\\u003c')
                }}
              />
            )}
            <ProjectGrid post={postData} />
            <MemberBlock />
            <RelatedArticle
              title='seneste byens rum'
              data={lastPostsData}
              type='large'
              link={Routes.HOME}
            />
          </PublicLayout>
        </HydrationBoundary>
      </>
    );
  } catch {
    notFound();
  }
}