'use client';

import React, { useMemo } from 'react';

import { useLocale } from 'next-intl';

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

import Section from '@/components/common/Section';
import CompactEventLinkCard from '@/components/events/CompactEventLinkCard';
import SectionHeader from '@/components/home/components/SectionHeader';
import { buildMediaUrl } from '@/utils/images';

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

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,
  urlEn: null,
  fokep: null,
  bemutato: false,
  hely: null,
  kepek: 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?.id;
          const imageUrl = rawImage ? buildMediaUrl(rawImage, 'w256') : undefined;
          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 surface="paper">
      <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>
    </Section>
  );
};

export default HomepageLibraryNews;