import { PublicLayout } from '@/components/layout/public/public-layout';
import MagazineInfo from '@/components/shared/magazine-info';
import NewsletterForm from './_components/newsletter-form';
import { Separator } from '@/components/ui/separator';
import { Metadata } from 'next';
import Link from 'next/link';
import { createHelpers } from '@/lib/trpc/server';
import PostContentRenderer from '@/components/tip-tap/tiptap-renderer/post-content-renderer';
import { buildMetadataFromContent, generateMetaTags } from '@/lib/meta-tags/server';

const newsletterContent = {
  title: 'Modtag vores nyhedsbrev',
  description: 'Modtag Magasinet KBHs ugentlige nyhedsbrev ― Ikke noget pjat. Ikke noget spam. Og du kan altid framelde dig igen med ét klik fra nyhedsbrevet.',
  author: 'Magasinet KBH',
  created: new Date('2018-01-15T17:05:10+01:00'),
  modified: new Date('2023-08-08T09:34:55+02:00'),
  url: 'https://magasinetkbh.dk/nyhedsbrev',
};

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

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

  const [data, config] = await Promise.all([
    helpers.page.get.fetch({
      slug: 'nyhedsbrev'
    }),
    helpers.siteConfig.values.fetch()
  ]);
  const { jsonLd } = await generateMetaTags(newsletterContent);
  return (
    <PublicLayout>
      {jsonLd && (
        <script
          type='application/ld+json'
          dangerouslySetInnerHTML={{
            __html: JSON.stringify(jsonLd).replace(/</g, '\\u003c')
          }}
        />
      )}
      <section className='mx-auto flex w-full max-w-[1362px] grow flex-col items-center gap-8 p-3 md:p-[30px] xl:flex-row xl:items-start xl:gap-0 xl:border-x'>
        <div className='w-full'>
          <div className='flex flex-col xl:flex-row'>
            <div className='w-68 shrink-0'>
              <h2 className='text-xl leading-none font-bold text-[#CBCBCB] md:text-3xl'>
                Nyhedsbrevet
              </h2>
            </div>
            <div className='w-full'>
              {data?.title && (
                <h1 className='py-4 text-xl font-bold md:py-6 md:text-3xl'>
                  {data.title}
                </h1>
              )}
              <PostContentRenderer nodeContent={data?.content} />
              <NewsletterForm />
            </div>
          </div>
          <Separator className='my-8' />
          <div className='flex flex-col xl:flex-row'>
            <div className='w-68 shrink-0'>
              <h2 className='text-xl leading-none font-bold text-[#CBCBCB] md:text-3xl'>
                RSS Feed
              </h2>
            </div>
            <div className='w-full'>
              <div>
                <p className='my-6 font-serif text-base text-neutral-600 md:text-lg lg:mt-0'>
                  Vi har også et &quot;gammeldags&quot; RSS-feed, hvis du gerne
                  vil modtage dine nyheder i en RSS-reader.
                </p>
                <Link
                  href='http://kbh-rss-feed.s3-website-us-east-1.amazonaws.com/byens-rum-liv--mode-range-limit.xml'
                  className='text-client-red font-serif text-base hover:underline md:text-lg'
                >
                  Magasinet KBHs RSS feed
                </Link>
              </div>
            </div>
          </div>
        </div>

        <MagazineInfo
          subscribersCount={config.facebookPageSubscribersTotal}
          newsletterCount={config.newsletterSubscribersTotal}
        />
      </section>
    </PublicLayout>
  );
}