'use client';

import React, { useMemo } from 'react';

import { useLocale } from 'next-intl';

import type { HomepageCollectionTextFields } from '@/services/homeCollections';
import { NewsActualItem } from '@/services/news';

import CompactEventLinkCard from '@/components/events/CompactEventLinkCard';
import { getFullSizeImageByKey } from '@/utils/images';

import { Event } from '@/types/Events';

import SectionHeader from '@/components/home/components/SectionHeader';

const createNewsCardEvent = (slug: string, title: string, imageUrl: string): Event => ({
  kezdete: new Date().toISOString(),
  kezdeteDatum: false,
  vege: null,
  vegeDatum: false,
  nev: title,
  leiras: null,
  infoUrl: null,
  jegyUrl: null,
  szemely: [],
  kepLink: imageUrl,
  kulturalisTipus: null,
  kulturalisAltipus: null,
  esemenyMMATagozat: null,
  esemenyFoTipusa: null,
  id: 0,
  intezmeny: [],
  category: '',
  bgColor: '',
  color: '',
  esemenyKategoria: null,
  url: slug,
  fokep: null,
});

interface LibraryNewsCard {
  title: string;
  dateLabel: string;
  imageUrl: string;
  slug: string;
}

interface HomepageLibraryNewsProps {
  newsItems?: NewsActualItem[];
  textFields?: HomepageCollectionTextFields | null;
}

const HomepageLibraryNews: React.FC<HomepageLibraryNewsProps> = ({
  newsItems = [],
  textFields,
}) => {
  const locale = useLocale();
  const localeForDates = locale.startsWith('hu') ? 'hu-HU' : 'en-US';

  const apiCards = useMemo<LibraryNewsCard[]>(
    () =>
      (newsItems ?? [])
        .map((item) => {
          const title = item.cim || '';
          const rawImage = item.kep?.key || '';
          const imageUrl = rawImage ? getFullSizeImageByKey(rawImage) : '';
          const publishedAt = item.kozzeteve || '';
          const parsedDate = publishedAt ? new Date(publishedAt) : null;
          const dateLabel =
            parsedDate && !Number.isNaN(parsedDate.getTime())
              ? new Intl.DateTimeFormat(localeForDates, {
                  year: 'numeric',
                  month: 'long',
                  day: 'numeric',
                }).format(parsedDate)
              : '';

          const slug = item.url?.trim();
          if (!slug) return null;

          return {
            title,
            dateLabel,
            imageUrl,
            slug,
          };
        })
        .filter((card): card is LibraryNewsCard => Boolean(card))
        .slice(0, 3),
    [localeForDates, newsItems]
  );

  const cards = apiCards.length > 0 ? apiCards : null;

  return (
    <section className="relative w-full overflow-hidden bg-[#f7f5ef] px-site py-14 text-[#151720] sm:py-16 lg:py-20">
      <div className="pointer-events-none absolute inset-0 opacity-30 bg-[linear-gradient(90deg,rgba(15,23,42,0.08)_1px,transparent_1px),linear-gradient(0deg,rgba(15,23,42,0.08)_1px,transparent_1px)] bg-[size:52px_52px]" />

      <div className="relative mx-auto max-w-boxed space-y-8">
        <SectionHeader
          eyebrow={textFields?.blockLabel || ''}
          title={textFields?.blockTitle || ''}
          description={textFields?.blockSubtitle || ''}
          maxWidth
        />

        <div className="grid items-start gap-3 sm:gap-4 lg:grid-cols-3">
          {cards?.map((card) => (
            <CompactEventLinkCard
              key={card.slug}
              event={createNewsCardEvent(card.slug, card.title, card.imageUrl)}
              dateLabel={card.dateLabel}
              locale={locale}
              showImagePlaceholder
              hrefOverride={{
                pathname: '/cikk/[slug]',
                params: { slug: card.slug },
              }}
              showCategoryBadge={false}
              className="border-[#151720]/14 bg-white/95"
            />
          ))}
        </div>
      </div>
    </section>
  );
};

export default HomepageLibraryNews;