import { Metadata } from 'next';
import { HydrationBoundary, dehydrate } from '@tanstack/react-query';
import { z } from 'zod';
import { PublicLayout } from '@/components/layout/public/public-layout';
import { createHelpers } from '@/lib/trpc/server';
import { PurchaseStep } from '@/components/payment/steps/purchase-step';
import { PlanType } from '@/server/modules/payment/types/plan-type.enum';
import { PurchaseStoreProvider } from '@/lib/purchase-store';
import Step_1 from '@/components/payment/personal/step-1';
import Step_2 from '@/components/payment/personal/step-2';
import { buildMetadataFromContent, generateMetaTags } from '@/lib/meta-tags/server';

const checkoutContent = {
  title: 'Medlem Kassen',
  description: 'Bliv medlem af Magasinet KBH og følg Københavns udvikling',
  author: 'Magasinet KBH',
  url: 'https://magasinetkbh.dk/payments/personal/checkout',
};

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

const ParamsSchema = z.object({
  plan: z.string().uuid().optional()
});

export default async function Checkout({
  searchParams
}: {
  searchParams?: Promise<Record<string, string | string[] | undefined>>;
}) {
  const rawParams = (await searchParams) ?? {};
  const params = ParamsSchema.parse(rawParams);
  const helpers = await createHelpers();

  await Promise.all([
    helpers.payment.plan.get.prefetch({
      id: params.plan
    }),
    helpers.payment.plan.list.prefetch({
      type: PlanType.PERSONAL
    }),
    helpers.payment.planPrice.list.prefetch({
      planId: params.plan
    })
  ]);

  const { jsonLd } = await generateMetaTags(checkoutContent);

  return (
    <PublicLayout>
      {jsonLd && (
        <script
          type='application/ld+json'
          dangerouslySetInnerHTML={{
            __html: JSON.stringify(jsonLd).replace(/</g, '\\u003c')
          }}
        />
      )}
      <HydrationBoundary state={dehydrate(helpers.queryClient)}>
        <PurchaseStoreProvider planId={params.plan}>
          <section className='mx-auto w-full max-w-[1220px] items-center'>
            <div className='my-6 bg-neutral-100 text-center font-bold text-neutral-600'>
              <div className='px-4 py-10'>
                <h1 className='mb-2'>Her bliver du medlem af Magasinet KBH</h1>
                <p>Det tager kun et øjeblik</p>
              </div>
              <Step_1 />
              <Step_2 plan={params?.plan} />
              <PurchaseStep step='3/3' />
            </div>
          </section>
        </PurchaseStoreProvider>
      </HydrationBoundary>
    </PublicLayout>
  );
}