import { cache } from 'react';

import { Metadata } from 'next';
import { getTranslations } from 'next-intl/server';
import { notFound } from 'next/navigation';

import { format } from 'date-fns';
import { hu } from 'date-fns/locale';
import { IoHomeOutline } from 'react-icons/io5';

import { type NewsActualItem, getActualNews } from '@/services/news';

import Breadcrumbs from '@/components/common/Breadcrumbs';
import type { BreadcrumbItem } from '@/components/common/Breadcrumbs';
import EventImageDialog from '@/components/events/EventImageDialog';
import { getFullSizeImageByKey } from '@/utils/images';

const stripHtml = (html: string) =>
  html
    .replace(/<[^>]*>/g, ' ')
    .replace(/\s+/g, ' ')
    .trim();
const formatPublishedDate = (value: string, locale: string): string => {
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return value;

  if (locale.startsWith('hu')) {
    return format(date, 'yyyy. MMMM dd.', { locale: hu });
  }

  return format(date, 'yyyy. MMMM dd.');
};

const getCachedActualNews = cache(getActualNews);

const getDynamicArticle = async (slug: string): Promise<NewsActualItem | null> => {
  let newsList: NewsActualItem[] = [];

  try {
    newsList = (await getCachedActualNews()) || [];
  } catch (error) {
    console.error('Article page actual news fetch error:', error);
    return null;
  }

  const matchedItem = newsList.find((item) => item.url?.trim() === slug);
  if (!matchedItem) return null;

  return matchedItem;
};

interface ArticlePageParams {
  params: Promise<{ locale: string; slug: string }>;
}

const ArticlePage = async ({ params }: ArticlePageParams) => {
  const { locale, slug } = await params;
  const t = await getTranslations('articlePage');
  const dynamicArticle = await getDynamicArticle(slug);

  if (!dynamicArticle) {
    notFound();
  }

  const breadcrumbItems = [
    {
      label: locale === 'en' ? 'Home' : 'Főoldal',
      href: { pathname: '/' },
      icon: <IoHomeOutline />,
      ariaLabel: locale === 'en' ? 'Home' : 'Főoldal',
    },
    {
      label: locale === 'en' ? 'Articles' : 'Cikkek',
    },
    {
      label: dynamicArticle.cim || '',
    },
  ] satisfies BreadcrumbItem[];

  const { cimke, cim, alcim, body, kep, kozzeteve } = dynamicArticle;

  const articleImageUrl = getFullSizeImageByKey(kep?.key || '');

  return (
    <section className="relative w-full overflow-hidden bg-white text-[#151720]">
      <div className="relative px-site pt-2 lg:pt-4">
        <div className="mx-auto max-w-boxed">
          <Breadcrumbs items={breadcrumbItems} sticky={false} />
        </div>
      </div>

      <div className="relative mx-auto max-w-boxed px-site pb-14 pt-4 sm:pb-16 sm:pt-6 lg:pb-20 lg:pt-8">
        <div className="space-y-7">
          <div className="space-y-3">
            {cimke && <p className="type-eyebrow text-[#151720]/62">{cimke}</p>}

            {cim && <h1 className="type-section-title">{dynamicArticle.cim}</h1>}
          </div>

          <div className="grid items-start gap-8 lg:grid-cols-[1.05fr_1fr] lg:gap-10">
            <article className="space-y-5">
              {dynamicArticle.kozzeteve && (
                <p className="type-eyebrow text-[#151720]/55">
                  {t('published')}: {formatPublishedDate(kozzeteve || '', locale)}
                </p>
              )}

              {alcim && <p className="type-section-desc text-[#151720]/72 max-w-2xl">{alcim}</p>}

              {body && (
                <div
                  className="space-y-4 pt-2 text-[16px] leading-relaxed text-[#151720]/78 content-text"
                  dangerouslySetInnerHTML={{ __html: body }}
                />
              )}
            </article>

            {kep && (
              <EventImageDialog
                imageUrl={articleImageUrl}
                eventName={cim || ''}
                locale={locale}
                className="mobile-full-bleed order-first lg:order-last"
              />
            )}
          </div>
        </div>
      </div>
    </section>
  );
};

export async function generateMetadata({ params }: ArticlePageParams): Promise<Metadata> {
  const { slug } = await params;
  const t = await getTranslations('articlePage');
  const dynamicArticle = await getDynamicArticle(slug);

  if (!dynamicArticle) {
    return {
      title: t('notFoundTitle'),
      description: t('notFoundDescription'),
    };
  }

  return {
    title: dynamicArticle.cim,
    description:
      dynamicArticle.alcim ||
      (dynamicArticle.body ? stripHtml(dynamicArticle.body).slice(0, 160) : ''),
  };
}

export default ArticlePage;