import { Metadata } from 'next';
import { notFound } from "next/navigation";
import { PublicLayout } from '@/components/layout/public/public-layout';
import { createHelpers } from '@/lib/trpc/server';
import {
  PostOrderEnum,
  DistrictsHelpers
} from '@/config/enums';
import { HydrationBoundary, dehydrate } from '@tanstack/react-query';
import BydelList from './_components/bydel-list';
import BydelHeader from './_components/bydel-header';
import { buildMetadataFromContent, generateMetaTags } from '@/lib/meta-tags/server';

type PageParams = Promise<{ slug: string; }>;

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

  if (!districtEnum) {
    const title = DistrictsHelpers.getLabelBySlug(slug);
    return { title: `${title} | Magasinet KBH` };
  }

  const title = DistrictsHelpers.getLabel(districtEnum);
  const contentData = {
    title,
    description: title,
    author: 'Magasinet KBH',
    url: `https://magasinetkbh.dk/bydel/${slug}`,
  };

  return await buildMetadataFromContent(contentData);
}

export default async function BydelPage({ params }: { params: PageParams }) {
  const { slug } = await params;
  const helpers = await createHelpers();
  const districtEnum = DistrictsHelpers.getBySlug(slug);

  if(!districtEnum) {
    notFound();
  }

  await Promise.all([
    helpers.posts.list.prefetch({
      with: ['project', 'tags', 'review', 'primaryTag', 'author', 'vision'],
      location: districtEnum,
      limit: 8,
      orderBy: PostOrderEnum.PUBLISHED_AT
    }),
    helpers.posts.count.prefetch({
      location: districtEnum
    })
  ]);

  const { jsonLd } = await generateMetaTags({
    title: DistrictsHelpers.getLabel(districtEnum),
    description: DistrictsHelpers.getLabel(districtEnum),
    author: 'Magasinet KBH',
    created: new Date(),
    url: `https://magasinetkbh.dk/bydel/${slug}`,
  });

  return (
    <PublicLayout>
      {jsonLd && (
        <script
          type='application/ld+json'
          dangerouslySetInnerHTML={{
            __html: JSON.stringify(jsonLd).replace(/</g, '\\u003c')
          }}
        />
      )}
      <HydrationBoundary state={dehydrate(helpers.queryClient)}>
        <BydelHeader
          location={districtEnum!}
          title={DistrictsHelpers.getLabel(districtEnum)}
        />
        <BydelList location={districtEnum!} />
      </HydrationBoundary>
    </PublicLayout>
  );
}