import React from 'react';

import { useLocale } from 'next-intl';

import { format, isSameDay } from 'date-fns';
import { enUS, hu } from 'date-fns/locale';

import CompactEventLinkCard from '@/components/events/CompactEventLinkCard';
import { toBudapestDate } from '@/utils/eventHelpers';

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

interface EventListViewProps {
  events: Event[];
}

const EventListView: React.FC<EventListViewProps> = ({ events }) => {
  const locale = useLocale();
  const isHu = locale.startsWith('hu');
  const dateLocale = isHu ? hu : enUS;
  const unknownDateLabel = 'N/A';

  if (!events || events.length === 0) {
    return (
      <p className="py-8 text-center text-sm text-[#151720]/60">
        {isHu ? 'Nincs megjeleníthető esemény.' : 'No events to display.'}
      </p>
    );
  }

  const formatEventDateLabel = (event: Event) => {
    const toSafeDate = (isoString: string) => {
      try {
        const converted = toBudapestDate(isoString);
        return Number.isNaN(converted.getTime()) ? new Date(isoString) : converted;
      } catch {
        return new Date(isoString);
      }
    };

    const start = toSafeDate(event.kezdete);
    if (Number.isNaN(start.getTime())) return unknownDateLabel;

    if (event.vege) {
      const end = toSafeDate(event.vege);
      if (!Number.isNaN(end.getTime()) && !isSameDay(start, end)) {
        const startLabel = format(start, 'MMM d', {
          locale: dateLocale,
        }).replace(/\.$/, '');
        const endLabel = format(end, 'MMM d', { locale: dateLocale }).replace(/\.$/, '');
        return `${startLabel} - ${endLabel}`;
      }
    }

    const formatString = event.kezdeteDatum ? 'MMM d' : 'MMM d, HH:mm';
    return format(start, formatString, { locale: dateLocale }).replace(/\.$/, '');
  };

  return (
    <div className="flex flex-col gap-1.5 sm:gap-2">
      {events.map((event) => {
        const dateLabel = formatEventDateLabel(event);

        return (
          <CompactEventLinkCard
            key={event.id}
            event={event}
            dateLabel={dateLabel}
            locale={locale}
            showChevron={true}
            className="py-2 sm:py-3"
          />
        );
      })}
    </div>
  );
};

export default EventListView;