'use client';

import React from 'react';

import { useLocale, useTranslations } from 'next-intl';

import { formatEventShortDate } from '@/components/creators/creatorEventFormatting';
import CompactEventLinkCard from '@/components/events/CompactEventLinkCard';
import AppSwiper, { AppSwiperSlide } from '@/components/swiper/AppSwiper';
import { useAppSwiper } from '@/components/swiper/useAppSwiper';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';

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

interface CreatorEventsInlineProps {
  events: Event[];
  maxItems?: number;
}

const CreatorEventsInline: React.FC<CreatorEventsInlineProps> = ({ events, maxItems = 3 }) => {
  const t = useTranslations('creatorPage.sections');
  const locale = useLocale();
  const items = events;
  const desktopVisibleCount = Math.max(1, maxItems);
  const hasDesktopCarousel = items.length > desktopVisibleCount;
  const hasMobileCarousel = items.length > 1;
  const desktopController = useAppSwiper({
    slideCount: items.length,
    loop: true,
    autoplay: true,
  });
  const desktopGridColumnsClass =
    items.length >= 3 ? 'grid-cols-3' : items.length === 2 ? 'grid-cols-2' : 'grid-cols-1';

  if (items.length === 0) return null;

  const renderEventCard = (event: Event, className?: string) => {
    const dateLabel = formatEventShortDate(event, locale);

    return (
      <CompactEventLinkCard
        event={event}
        dateLabel={dateLabel}
        locale={locale}
        openInNewTab={true}
        className={cn('h-full min-h-[116px]', className)}
      />
    );
  };

  return (
    <section className="w-full">
      <div className="flex items-center justify-between gap-3">
        <div className="ui-meta">{items.length > 1 ? t('nextEvents') : t('nextEvent')}</div>
        {hasDesktopCarousel && (
          <div className="hidden lg:flex items-center gap-2">
            <Button
              type="button"
              variant="outline"
              size="icon"
              onClick={desktopController.prev}
              className="h-8 w-8"
              aria-label="Previous events"
            >
              {'\u2190'}
            </Button>
            <Button
              type="button"
              variant="outline"
              size="icon"
              onClick={desktopController.next}
              className="h-8 w-8"
              aria-label="Next events"
            >
              {'\u2192'}
            </Button>
          </div>
        )}
      </div>

      <div className="mt-3 lg:hidden">
        {hasMobileCarousel ? (
          <AppSwiper
            slideCount={items.length}
            autoplay={false}
            loop={false}
            swiperOptions={{
              slidesPerView: 1.08,
              spaceBetween: 12,
              speed: 500,
              grabCursor: true,
              breakpoints: {
                420: {
                  slidesPerView: 1.12,
                },
              },
            }}
          >
            {items.map((event) => (
              <AppSwiperSlide key={`mobile-${event.id}-${event.kezdete}`}>
                {renderEventCard(event)}
              </AppSwiperSlide>
            ))}
          </AppSwiper>
        ) : (
          renderEventCard(items[0])
        )}
      </div>

      <div className="mt-3 hidden lg:block">
        {hasDesktopCarousel ? (
          <AppSwiper
            slideCount={items.length}
            controller={desktopController}
            autoplay={true}
            loop={false}
            swiperOptions={{
              slidesPerView: desktopVisibleCount,
              spaceBetween: 12,
              speed: 500,
              grabCursor: true,
            }}
          >
            {items.map((event) => (
              <AppSwiperSlide key={`desktop-${event.id}-${event.kezdete}`}>
                {renderEventCard(event)}
              </AppSwiperSlide>
            ))}
          </AppSwiper>
        ) : (
          <div className={cn('grid gap-3', desktopGridColumnsClass)}>
            {items.map((event) => (
              <div key={`desktop-grid-${event.id}-${event.kezdete}`}>{renderEventCard(event)}</div>
            ))}
          </div>
        )}
      </div>
    </section>
  );
};

export default CreatorEventsInline;