import { PublicLayout } from '@/components/layout/public/public-layout';
import { Metadata } from 'next';
import { notFound } from 'next/navigation';
import VisionsGrid from '../_components/vision-grid';
import MemberBlock from '@/components/shared/member-block';
import LatestVision from '@/components/shared/post-sections/latest-vision';
import { PostOrderEnum, TopicsEnum } from '@/config/enums';
import { createHelpers, createCaller } from '@/lib/trpc/server';
import {
  transformPostsToArticleList,
  transformPostToArticle
} from '@/features/posts/_lib/transformers';
import RelatedVision from '@/components/shared/post-sections/related-vision';
import GoodVisionsBlock from '../_components/good-visions-block';
import RelatedArticle from '@/components/shared/post-sections/related-article';
import CommentSection from '@/components/shared/comments/comment-section';
import { adaptPostToContentData } from '@/lib/meta-tags';
import { buildMetadataFromContent, generateMetaTags } from '@/lib/meta-tags/server';

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

const BASE_PATH = 'visioner';

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: ['author', 'tags', 'primaryTag'],
    topic: TopicsEnum.VISIONS,
    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 VisionPage({ params }: Props) {
  const { slug } = await params;

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

    const [post, mostRead] = await Promise.all([
      helpers.posts.get.fetch({
        with: ['author', 'tags', 'primaryTag', 'postMedia', 'content'],
        topic: TopicsEnum.VISIONS,
        slug
      }),
      helpers.posts.list.fetch({
        topic: TopicsEnum.CITY_SPACES,
        limit: 5,
        orderBy: PostOrderEnum.VIEWS
      })
    ]);

    if (!post) {
      notFound();
    }

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

    const visionPost = transformPostToArticle(post);
    const mostReadData = transformPostsToArticleList(mostRead);

    const [latestVisionsData, relatedVisionsData, relatedArticlesData] =
      await Promise.all([
        helpers.posts.list.fetch({
          topic: TopicsEnum.VISIONS,
          limit: 4,
          orderBy: PostOrderEnum.PUBLISHED_AT
        }),
        helpers.posts.list.fetch({
          topic: TopicsEnum.VISIONS,
          relateSlug: slug,
          limit: 3,
          orderBy: PostOrderEnum.POPULAR
        }),
        helpers.posts.list.fetch({
          with: ['primaryTag'],
          relateSlug: slug,
          limit: 5,
          orderBy: PostOrderEnum.PUBLISHED_AT
        })
      ]);

    const latestVision = transformPostsToArticleList(latestVisionsData);
    const relatedArticles = transformPostsToArticleList(relatedArticlesData);
    const relatedVision = transformPostsToArticleList(relatedVisionsData);

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

    return (
      <PublicLayout>
        {jsonLd && (
          <script
            type="application/ld+json"
            dangerouslySetInnerHTML={{
              __html: JSON.stringify(jsonLd).replace(/</g, '\\u003c')
            }}
          />
        )}
        <VisionsGrid post={visionPost} mostRead={mostReadData} />
        <CommentSection background='blue' postId={post.id} />
        <MemberBlock />
        <section className='mx-auto w-full max-w-[1362px] grow px-3 md:px-8 xl:border-x'>
          <div className='mt-4 flex flex-col border-t pt-4 xl:flex-row'>
            <div className='shrink-0 xl:w-68'></div>
            <div className='w-full'>
              <GoodVisionsBlock />
            </div>
          </div>
        </section>
        <RelatedVision title='relaterede visioner' data={relatedVision} />
        <RelatedArticle title='relaterede artikler' data={relatedArticles} />
        <LatestVision title='seneste visioner' data={latestVision} />
      </PublicLayout>
    );
  } catch {
    notFound();
  }
}