import { use } from 'react';

import Link from 'next/link';

import { createI18nServerInstance } from '@/lib/i18n/i18n.server';
import { PageBody, PageHeader } from '@/packages/ui/src/makerkit/page';

import { toArray } from '@kit/shared/utils';
import { Button } from '@kit/ui/button';
import { Alert, AlertDescription } from '@kit/ui/shadcn/alert';
import { AlertTitle } from '@kit/ui/shadcn/alert';
import { Trans } from '@kit/ui/trans';

export async function generateMetadata() {
  const { t } = await createI18nServerInstance();

  return {
    title: t('cart:montonioCallback.title'),
  };
}

export default async function MontonioCheckoutCallbackErrorPage({
  searchParams,
}: {
  searchParams: Promise<{ reasonFailed: string }>;
}) {
  const params = await searchParams;

  const failedBookingData: string[] = toArray(params.reasonFailed?.split(','));

  return (
    <div className={'flex h-full flex-1 flex-col'}>
      <PageHeader title={<Trans i18nKey="cart:montonioCallback.title" />} />
      <PageBody>
        <div className={'flex flex-col space-y-4'}>
          <Alert variant={'destructive'}>
            <AlertTitle>
              <Trans i18nKey={'checkout.error.title'} />
            </AlertTitle>

            <AlertDescription>
              {failedBookingData.length ? (
                failedBookingData.map((failureReason, index) => (
                  <p key={index}>
                    <Trans i18nKey={`checkout.error.${failureReason}`} />
                  </p>
                ))
              ) : (
                <Trans i18nKey={'checkout.error.description'} />
              )}
            </AlertDescription>
          </Alert>

          <div className={'flex'}>
            <Button asChild>
              <Link href={'/home'}>
                <Trans i18nKey={'checkout.goToDashboard'} />
              </Link>
            </Button>
          </div>
        </div>
      </PageBody>
    </div>
  );
}
