import { Metadata } from 'next';
import Link from 'next/link';
import Image from 'next/image';
import { Banknote } from 'lucide-react';
import { PublicLayout } from '@/components/layout/public/public-layout';
import { Separator } from '@/components/ui/separator';
import { Routes } from '@/config/routes';
import { PlanType } from '@/server/modules/payment/types/plan-type.enum';
import { createHelpers } from '@/lib/trpc/server';
import SupportForm from './_components/forms/support-form';
import PostContentRenderer from '@/components/tip-tap/tiptap-renderer/post-content-renderer';
import { formatPrice } from '@/lib/utils/format-price';
import { buildMetadataFromContent, generateMetaTags } from '@/lib/meta-tags/server';

const personalContent = {
  title: 'Bliv medlem',
  description: 'Bliv medlem af Magasinet KBH og følg Københavns udvikling',
  author: 'Magasinet KBH',
  created: new Date('2019-08-16T13:56:44+02:00'),
  modified: new Date('2024-12-17T13:50:09+01:00'),
  url: 'https://magasinetkbh.dk/payments/personal',
};

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

const sponsorSocials = [
  {
    id: 1,
    label: 'Del på Facebook',
    url: 'https://www.facebook.com/sharer.php?u=https://www.magasinetkbh.dk/sponsorship',
    icon: 'https://www.magasinetkbh.dk/sites/all/themes/custom/mkbh/assets/images/svg/icon-share-facebook.svg'
  },
  {
    id: 2,
    label: 'Del på Twitter',
    url: 'https://twitter.com/intent/tweet?url=https://www.magasinetkbh.dk/sponsorship',
    icon: 'https://www.magasinetkbh.dk/sites/all/themes/custom/mkbh/assets/images/svg/icon-share-twitter.svg'
  },
  {
    id: 3,
    label: 'Del på LinkedIn',
    url: 'https://www.linkedin.com/shareArticle?mini=true&url=https://www.magasinetkbh.dk/sponsorship',
    icon: 'https://www.magasinetkbh.dk/sites/all/themes/custom/mkbh/assets/images/svg/icon-share-linkedin.svg'
  },
  {
    id: 4,
    label: 'Del via Email',
    url: 'mailto:?subject=Stoet MagasinetKBH&body=https://www.magasinetkbh.dk/sponsor',
    icon: 'https://www.magasinetkbh.dk/sites/all/themes/custom/mkbh/assets/images/svg/icon-share-email.svg'
  }
];

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

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

  const { jsonLd } = await generateMetaTags(personalContent);

  return (
    <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>

          <div className='mx-auto my-8 flex flex-col justify-center gap-x-4 gap-y-4 text-left sm:flex-row md:gap-x-8'>
            {plans.map((plan) => {
              const monthlyPrice = plan.prices.find(
                (item) => item.period === 'month' && item.price
              );

              return (
                <article
                  key={plan.id}
                  className='h-full w-full bg-neutral-100 text-center md:max-w-81'
                >
                  <h6 className='bg-neutral-600 p-4 text-center text-lg font-bold text-white'>
                    {plan.name}
                  </h6>
                  <div className='p-2'>
                    <p className='my-8 font-bold'>Fra</p>
                    <p className='my-3 text-6xl font-bold'>
                      {formatPrice(monthlyPrice?.price, {
                        withCurrency: false,
                        withCents: false
                      })}
                      ,-
                    </p>
                    <p className='my-3 font-bold'>/md.</p>
                    <p className='mb-6 px-6 text-lg font-bold text-neutral-500'>
                      {plan.description}
                    </p>

                    <PostContentRenderer nodeContent={plan.content} />

                    <a
                      className='bg-client-red hover:bg-client-red/80 mb-7 inline-block rounded-md px-6 py-2 text-lg font-bold text-white transition'
                      href={`${Routes.PAYMENTS.PERSONAL.CHECKOUT}?plan=${plan.id}`}
                    >
                      Ja tak
                    </a>
                  </div>
                </article>
              );
            })}
          </div>

          <div className='mx-auto mb-6 max-w-200'>
            <PostContentRenderer nodeContent={data?.bottomContent} />
            <div className='my-12'>
              <h5 className='mb-6 text-5xl font-medium text-neutral-600'>
                Vi er nu <span className='text-client-red'>2808</span> medlemmer
              </h5>
              <p className='font-medium text-neutral-600 uppercase'>
                del siden på
              </p>
              <ul className='mt-6 flex justify-center gap-2'>
                {sponsorSocials.map((item, index) => (
                  <li key={index}>
                    <Link href={item.url} className='rounded-full'>
                      <Image
                        width={34}
                        height={34}
                        alt={item.label}
                        src={item.icon}
                        className='rounded-full transition-transform hover:scale-110'
                      />
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
          </div>
          <Separator className='max-w-[50%] bg-neutral-600' />
        </div>
      </section>
      <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'>
          <div>
            <Banknote className='stroke-client-red/80 mx-auto size-20' />
            <h2 className='mb-6 text-4xl font-bold uppercase'>
              STØT MED ET ENGANGSBELØB
            </h2>
            <p className='mx-auto mb-6 max-w-140 text-lg font-bold text-neutral-500'>
              Vi er allergladest for medlemskaber, men vi bliver også lykkelige,
              hvis du vil støtte Magasinet KBH med et engangsbeløb. OBS: Støtte
              er ikke det samme som et medlemskab. Se herover for indmeldelse.
            </p>
            <p className='mx-auto mb-6 max-w-180 text-lg font-bold text-neutral-500'>
              Du kan sende et beløb til <b>MobilePay 711911</b>
            </p>
            <p className='mx-auto mb-6 max-w-180 text-lg font-bold text-neutral-500'>
              — eller du kan bruge boksen herunder til betalingskort.
            </p>
            <div className='mt-10 mb-6 flex justify-center'>
              <SupportForm />
            </div>
            <p className='mx-auto mb-6 max-w-120 text-lg font-bold text-neutral-500'>
              For hver krone modtaget kan vi arbejde 5% hårdere på at gøre
              København til verdens bedste by at leve i.
            </p>
          </div>
        </div>
      </section>
    </PublicLayout>
  );
}