import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle
} from '@/components/ui/card';
import { Routes } from '@/config/routes';
import Image from 'next/image';
import Link from 'next/link';
import { ArrowLeft } from 'lucide-react';
import { Suspense } from 'react';
import { SuccessPageContent } from './_components/success-page-content';

enum SuccessType {
  DONATION = 'donation',
  BUSINESS = 'business',
  SETUP = 'setup'
}

export default async function SuccessPage({
  searchParams
}: {
  searchParams?: Promise<Record<string, string | string[] | undefined>>;
}) {
  const param = await searchParams;

  if (param?.type === SuccessType.DONATION) {
    return (
      <div className='flex h-screen w-screen flex-col items-center justify-center bg-green-50'>
        <Card className='w-full max-w-xl'>
          <CardHeader>
            <Link href={Routes.HOME} className='mb-4 w-fit'>
              <Image
                src='/logo.svg'
                alt='Magasinet KBH'
                width={120}
                height={120}
                className='size-[80px] md:size-[120px]'
                priority
              />
            </Link>
            <CardTitle className='text-2xl font-bold md:text-4xl'>
              MANGE TAK!
            </CardTitle>
          </CardHeader>
          <CardContent>
            <p className='mb-2'>
              Alle donationer til magasinet går til vores undersøgende og
              perspektiverende journalistik, der viser mulige veje til en bedre
              by.
            </p>
            <p className='mb-2'>
              Med din donation kan vi gå lidt bredere og grave lidt dybere.
            </p>
            <p className='mb-2'>
              Tak for at du ikke tænkte, at &quot;det gør nogen andre&quot;, og
              tog initiativ til at støtte vores arbejde.
            </p>
          </CardContent>
          <CardFooter>
            <Link
              href={Routes.HOME}
              className='text-client-red flex items-center gap-1 font-semibold uppercase hover:[&>svg]:-translate-x-2'
            >
              <ArrowLeft className='size-6 transition' />
              <span>Tilbage til læsning</span>
            </Link>
          </CardFooter>
        </Card>
      </div>
    );
  }

  if (param?.type === SuccessType.BUSINESS) {
    return (
      <div className='flex h-screen w-screen flex-col items-center justify-center bg-green-50'>
        <Card className='w-full max-w-xl'>
          <CardHeader>
            <Link href={Routes.HOME} className='mb-4 w-fit'>
              <Image
                src='/logo.svg'
                alt='Magasinet KBH'
                width={120}
                height={120}
                className='size-[80px] md:size-[120px]'
                priority
              />
            </Link>
            <CardTitle className='text-2xl font-bold md:text-4xl'>
              VELKOMMEN!
            </CardTitle>
          </CardHeader>
          <CardContent>
            <p className='mb-2'>
              Du er nu abonnent på Magasinet KBH. Når du lukker dette vindue,
              vil du blive taget til din brugerside.
            </p>
            <p className='mb-2'>
              Har du tegnet abonnement for flere medarbejdere, kan du tilføje
              disse på din brugerside.
            </p>
          </CardContent>
          <CardFooter>
            <Link
              href={Routes.HOME}
              className='text-client-red flex items-center gap-1 font-semibold uppercase hover:[&>svg]:-translate-x-2'
            >
              <ArrowLeft className='size-6 transition' />
              <span>Begynd at læse</span>
            </Link>
          </CardFooter>
        </Card>
      </div>
    );
  }

  if (param?.type === SuccessType.SETUP) {
    return (
      <div className='flex h-screen w-screen flex-col items-center justify-center bg-green-50'>
        <Card className='w-full max-w-xl'>
          <CardHeader>
            <Link href={Routes.HOME} className='mb-4 w-fit'>
              <Image
                src='/logo.svg'
                alt='Magasinet KBH'
                width={120}
                height={120}
                className='size-[80px] md:size-[120px]'
                priority
              />
            </Link>
            <CardTitle className='text-2xl font-bold md:text-4xl'>
              TAK!
            </CardTitle>
          </CardHeader>
          <CardContent>
            <p className='mb-2'>Vi har modtaget dine nye oplysninger.</p>
          </CardContent>
          <CardFooter>
            <Link
              href={Routes.HOME}
              className='text-client-red flex items-center gap-1 font-semibold uppercase hover:[&>svg]:-translate-x-2'
            >
              <ArrowLeft className='size-6 transition' />
              <span>Tilbage til profilsiden</span>
            </Link>
          </CardFooter>
        </Card>
      </div>
    );
  }

  return (
    <div className='flex h-screen w-screen flex-col items-center justify-center bg-green-50'>
      <Card className='w-full max-w-xl'>
        <CardHeader>
          <Link href={Routes.HOME} className='mb-4 w-fit'>
            <Image
              src='/logo.svg'
              alt='Magasinet KBH'
              width={120}
              height={120}
              className='size-[80px] md:size-[120px]'
              priority
            />
          </Link>
          <CardTitle className='text-2xl font-bold md:text-4xl'>
            VELKOMMEN!
          </CardTitle>
        </CardHeader>
        <CardContent>
          <Suspense fallback={
            <div className="flex items-center justify-center p-8">
              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-client-red"></div>
            </div>
          }>
            <SuccessPageContent />
          </Suspense>
        </CardContent>
        <CardFooter>
          <Link
            href={Routes.HOME}
            className='text-client-red flex items-center gap-1 font-semibold uppercase hover:[&>svg]:-translate-x-2'
          >
            <ArrowLeft className='size-6 transition' />
            <span>Begynd at læse</span>
          </Link>
        </CardFooter>
      </Card>
    </div>
  );
}