import { Metadata } from 'next';
import { notFound, redirect, unauthorized } from 'next/navigation';
import { z } from 'zod';
import { HydrationBoundary, dehydrate } from '@tanstack/react-query';
import { createHelpers } from '@/lib/trpc/server';
import { PublicLayout } from '@/components/layout/public/public-layout';
import { Routes } from '@/config/routes';
import { MemberRole } from '@/server/modules/organization/types/member-role.enum';
import { PurchaseStoreProvider } from '@/lib/purchase-store';
import { Step1 } from '@/components/payment/business/step-1';
import { Step2 } from '@/components/payment/business/step-2';
import { PurchaseStep } from '@/components/payment/steps/purchase-step';
import { generateMetaTags } from '@/lib/meta-tags/server';

const ParamsSchema = z.object({
  price: z.string().uuid(),
  employees: z.coerce.number().nullable()
});

type Props = {
  searchParams?: Promise<Record<string, string | string[] | undefined>>;
};

export const metadata: Metadata = {
  title: 'Erhvervsabonnement - Kassen | Magasinet KBH',
  description: 'Fuldfør dit erhvervsabonnement'
};

export default async function Page({ searchParams }: Props) {
  const helpers = await createHelpers();
  const params = ParamsSchema.safeParse(await searchParams);

  if (!params.success) {
    unauthorized();
  }

  try {
    const user = await helpers.auth.user.fetch();

    if (!user) {
      redirect(Routes.AUTH.SIGN_IN);
    }
  } catch {
    redirect(Routes.AUTH.SIGN_IN);
  }

  const [plan, price] = await Promise.all([
    helpers.payment.plan.get.fetch({
      priceId: params.data.price
    }),
    helpers.payment.planPrice.get.fetch({
      id: params.data.price
    }),
    helpers.organization.list.prefetch({
      role: MemberRole.OWNER
    })
  ]);

  if (!plan || !price) {
    // redirect(Routes.PAYMENTS.BUSINESS);
    notFound();
  }

  const { jsonLd } = await generateMetaTags({
    title: 'Erhvervsabonnement - Kassen',
    description: 'Fuldfør dit erhvervsabonnement',
    author: 'Magasinet KBH',
    url: 'https://magasinetkbh.dk/payments/business/checkout',
  });

  return (
    <HydrationBoundary state={dehydrate(helpers.queryClient)}>
      <PurchaseStoreProvider
        planId={plan.id}
        priceId={price.id}
        seats={params.data.employees}
      >
        <PublicLayout>
          {jsonLd && (
            <script
              type='application/ld+json'
              dangerouslySetInnerHTML={{
                __html: JSON.stringify(jsonLd).replace(/</g, '\\u003c')
              }}
            />
          )}

          <section className='mx-auto w-full max-w-[1220px] items-center p-3 md:p-[30px]'>
            <div className='my-6 bg-neutral-100 font-bold text-neutral-600'>
              <div className='px-4 py-10 text-center'>
                <h1 className='mb-2 text-2xl md:text-3xl'>
                  Erhvervsabonnement - Kun et skridt tilbage!
                </h1>

                <p className='text-base md:text-lg'>
                  Udfyld venligst nogle nødvendige oplysninger vedrørende din
                  virksomhed
                </p>
              </div>

              <div className='pb-10'>
                <Step1 />
                <Step2 />
                <PurchaseStep step='3/3' />
              </div>
            </div>
          </section>
        </PublicLayout>
      </PurchaseStoreProvider>
    </HydrationBoundary>
  );
}