import { Metadata } from 'next';
import { HydrationBoundary, dehydrate } from '@tanstack/react-query';
import { PublicLayout } from '@/components/layout/public/public-layout';
import { Separator } from '@/components/ui/separator';
import { createHelpers } from '@/lib/trpc/server';
import { PlanType } from '@/server/modules/payment/types/plan-type.enum';
import BussinessPlans from './_components/bussiness-plans';
import PostContentRenderer from '@/components/tip-tap/tiptap-renderer/post-content-renderer';
import { buildMetadataFromContent, generateMetaTags } from '@/lib/meta-tags/server';

const businessContent = {
  title: 'Abonnement for erhverv',
  description: 'Abonnement for erhverv af Magasinet KBH og følg Københavns udvikling',
  author: 'Magasinet KBH',
  created: new Date('2019-08-16T14:47:14+02:00'),
  modified: new Date('2024-05-21T15:37:35+02:00'),
  url: 'https://magasinetkbh.dk/payments/business',
};

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

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

  const [data] = await Promise.all([
    helpers.page.get.fetch({
      slug: 'business-subscription'
    }),
    helpers.payment.plan.get.prefetch({
      with: ['prices'],
      type: PlanType.BUSINESS
    })
  ]);

  const { jsonLd } = await generateMetaTags(businessContent);

  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] items-center p-3 md:p-[30px] xl:border-x'>
          <div className='flex w-full flex-col items-center text-center'>
            <h1 className='mb-6 text-3xl font-bold text-neutral-600'>
              {data?.title}
            </h1>
            <Separator className='max-w-[50%] bg-neutral-600' />
            <div className='mx-auto mb-6 max-w-200'>
              <PostContentRenderer nodeContent={data?.content} />
            </div>
            <BussinessPlans />
            <div className='mx-auto mb-6 max-w-300'>
              <PostContentRenderer nodeContent={data?.bottomContent} />
            </div>
          </div>
        </section>
      </PublicLayout>
    </HydrationBoundary>
  );
}