import { PublicLayout } from '@/components/layout/public/public-layout';
import MagazineInfo from '@/components/shared/magazine-info';
import PostContentRenderer from '@/components/tip-tap/tiptap-renderer/post-content-renderer';
import { createHelpers } from '@/lib/trpc/server';
import { formatDate } from '@/lib/utils';
import { Metadata } from 'next';
import { notFound } from 'next/navigation';
import { buildMetadataFromContent, generateMetaTags } from '@/lib/meta-tags/server';

const jobContent = {
  title: 'Jobs',
  description: 'Ledige jobs på Magasinet KBH',
  author: 'Magasinet KBH',
  created: new Date('2019-02-04T09:48:39+01:00'),
  modified: new Date('2025-06-27T10:18:29+02:00'),
  url: 'https://magasinetkbh.dk/job',
};

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

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

  const [data, config] = await Promise.all([
    helpers.job.list.fetch({}),
    helpers.siteConfig.values.fetch()
  ]);

  if (!data) {
    notFound();
  }

  const { jsonLd } = await generateMetaTags({ ...jobContent, title: 'Job' });

  const sortedData = data.sort((a, b) => a.order - b.order);

  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 p-3 md:p-[30px] xl:flex-row xl:items-start 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'>
              Aktuelle jobs
            </h2>
          </div>
          <div className='w-full space-y-2'>
            <h1 className='py-4 text-xl font-bold md:py-6 md:text-3xl'>Job</h1>
            {sortedData.map((item, index) => (
              <div className='bg-neutral-100 p-4 sm:p-12' key={index}>
                <h2 className='text-client-red mb-6 text-4xl font-bold uppercase'>
                  {item.title}
                </h2>
                <p className='mb-6 text-lg font-bold text-neutral-800'>
                  {formatDate(item.updatedAt)}
                </p>
                <PostContentRenderer nodeContent={item.content} />
              </div>
            ))}
          </div>
        </div>
        <MagazineInfo
          subscribersCount={config.facebookPageSubscribersTotal}
          newsletterCount={config.newsletterSubscribersTotal}
        />
      </section>
    </PublicLayout>
  );
}