import { PublicLayout } from '@/components/layout/public/public-layout';
import Link from 'next/link';
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger
} from '@/components/ui/accordion';
import { Metadata } from 'next';
import { createHelpers } from '@/lib/trpc/server';
import { FaqType } from '@/server/modules/faq/faq-type.enum';
import PostContentRenderer from '@/components/tip-tap/tiptap-renderer/post-content-renderer';
import { buildMetadataFromContent, generateMetaTags } from '@/lib/meta-tags/server';

const faqContent = {
  title: 'Medlem FAQ',
  description: 'Ofte stillede spørgsmål vedrørende medlemskab og abonnement | Magasinet KBH',
  author: 'Magasinet KBH',
  created: new Date('2019-08-26T09:28:19+02:00'),
  modified: new Date('2025-08-11T13:09:34+02:00'),
  url: 'https://magasinetkbh.dk/faq',
};

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

export default async function FaqPage() {
  const helpers = await createHelpers();
  const data = await helpers.faq.list.fetch({});
  const { jsonLd } = await generateMetaTags(faqContent);

  const generalFaqs = data?.filter((faq) => faq.type === FaqType.GENERAL);
  const memberFaqs = data?.filter((faq) => faq.type === FaqType.MEMBER);

  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] grow p-3 md:p-[30px] xl:border-x'>
        <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'>
              hjælp
            </h2>
          </div>
          <div className='w-full xl:max-w-[660px]'>
            {!!memberFaqs?.length && (
              <div className='mb-12'>
                <h2 className='border-b border-neutral-200 py-4 text-2xl font-bold text-neutral-800 md:py-6 md:text-3xl'>
                  medlems-spørgsmål
                </h2>

                <Accordion
                  type='single'
                  collapsible
                  className='w-full font-serif'
                >
                  {memberFaqs.map((faq) => (
                    <AccordionItem
                      key={faq.id}
                      value={`item-${faq.id}`}
                      className='last:border-b'
                    >
                      <AccordionTrigger className='text-lg font-bold text-neutral-800'>
                        {faq.title}
                      </AccordionTrigger>
                      <AccordionContent className='flex flex-col gap-4'>
                        <PostContentRenderer nodeContent={faq.content} />
                      </AccordionContent>
                    </AccordionItem>
                  ))}
                </Accordion>
              </div>
            )}
            {!!generalFaqs?.length && (
              <div className='mb-12'>
                <h2 className='border-b border-neutral-200 pb-4 text-2xl font-bold text-neutral-800 md:pb-6 md:text-3xl'>
                  generelle spørgsmål
                </h2>
                <Accordion
                  type='single'
                  collapsible
                  className='w-full font-serif'
                >
                  {generalFaqs.map((faq) => (
                    <AccordionItem
                      key={faq.id}
                      value={`item-${faq.id}`}
                      className='last:border-b'
                    >
                      <AccordionTrigger className='text-lg font-bold text-neutral-800'>
                        {faq.title}
                      </AccordionTrigger>
                      <AccordionContent className='flex flex-col gap-4'>
                        <PostContentRenderer nodeContent={faq.content} />
                      </AccordionContent>
                    </AccordionItem>
                  ))}
                </Accordion>
              </div>
            )}

            <div className='mb-12'>
              <p className='mb-6 font-serif text-base text-neutral-800 md:text-lg'>
                Har du andre spørgsmål? Skriv til{' '}
                <Link
                  href='mailto:medlem@magasinetkbh.dk'
                  className='text-client-red hover:underline'
                >
                  medlem@magasinetkbh.dk
                </Link>
              </p>

              <p className='font-serif text-base text-neutral-600 italic md:text-lg'>
                Er spørgsmålet af teknisk karakter, så inkludér venligst så
                mange oplysninger som muligt. Er du logget ind? Hvad ser du på
                skærmen, når fejlen opstår? Er du på en mobil eller stationær
                enhed? Etc.
              </p>
            </div>
          </div>
        </div>
      </section>
    </PublicLayout>
  );
}