'use client';

import React, { useMemo } from 'react';

import { useTranslations } from 'next-intl';
import Image from 'next/image';

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

import Section from '@/components/common/Section';
import SectionHeader from '@/components/home/components/SectionHeader';
import AppSwiper, { AppSwiperSlide } from '@/components/swiper/AppSwiper';
import CarouselControls from '@/components/swiper/CarouselControls';
import { useAppSwiper } from '@/components/swiper/useAppSwiper';
import { getCreationCardImageSrc } from '@/utils/creationHelpers';
import { buildMediaUrl } from '@/utils/images';

import { Link } from '@/i18n/navigation';

interface HomepageCreatorOfTheWeekProps {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  creations: any[];
  locale: string;
  textFields?: HomepageCollectionTextFields | null;
}

type Slide = {
  id: string;
  src: string;
  title: string;
  subtitle: string;
  creatorId: string;
  year: string | number | null;
  location: string;
};

const getSortYear = (value: Slide['year']): number => {
  if (typeof value === 'number' && Number.isFinite(value)) return value;
  if (typeof value === 'string') {
    const matched = value.match(/\d{4}/);
    if (matched) return Number.parseInt(matched[0], 10);
  }
  return Number.NEGATIVE_INFINITY;
};

const HomepageCreatorOfTheWeek: React.FC<HomepageCreatorOfTheWeekProps> = ({
  creations,
  textFields,
}) => {
  const tCommon = useTranslations('common');

  const slides = useMemo<Slide[]>(() => {
    const mapped = (creations || []).map((creation) => ({
      id: creation.id ?? creation.alkotasAzonosito ?? creation.nev ?? '',
      src: creation.galeria?.[0]?.id
        ? buildMediaUrl(creation.galeria[0].id, 'w1920')
        : creation.fokep
          ? buildMediaUrl(creation.fokep, 'w1920')
          : getCreationCardImageSrc(creation),
      title: creation.title ?? creation.nev ?? '',
      subtitle: creation.subtitle ?? creation.megjelenitendoNev ?? '',
      creatorId: creation.alkotoAzonosito ?? '',
      year: creation.ev ?? null,
      location: creation.telepules ?? '',
    }));

    return mapped
      .filter((slide): slide is Slide => Boolean(slide.src && slide.creatorId))
      .sort((a, b) => {
        const aYear = getSortYear(a.year);
        const bYear = getSortYear(b.year);
        return bYear - aYear;
      });
  }, [creations]);

  const controller = useAppSwiper({ slideCount: slides.length });
  const activeSlide = controller.activeIndex;

  if (!slides.length) {
    return null;
  }

  return (
    <Section
      surface="ink"
      clip
      backdrop={
        <>
          <div
            className="pointer-events-none absolute inset-0"
            style={{
              background:
                'radial-gradient(50% 70% at 0% 0%, rgba(34,211,238,0.16) 0%, rgba(34,211,238,0) 72%), radial-gradient(44% 68% at 100% 0%, rgba(223,207,111,0.15) 0%, rgba(223,207,111,0) 74%)',
            }}
          />
        </>
      }
    >
      <div className="flex items-end justify-between gap-6">
        <SectionHeader
          eyebrow={textFields?.blockLabel || ''}
          eyebrowUrl="/alkotok"
          title={textFields?.blockTitle || ''}
          description={textFields?.blockSubtitle || ''}
        />
        <div className="hidden sm:block">
          <CarouselControls
            total={slides.length}
            activeIndex={activeSlide}
            onPrev={controller.prev}
            onNext={controller.next}
            onSelect={controller.goTo}
            prevLabel={tCommon('previous')}
            nextLabel={tCommon('next')}
            showDots={false}
            className="justify-end"
            inverted
          />
        </div>
      </div>

      <div className="relative overflow-hidden border border-white/20">
        <AppSwiper
          slideCount={slides.length}
          controller={controller}
          swiperOptions={{
            speed: 2000,
            effect: 'fade',
            fadeEffect: { crossFade: true },
          }}
        >
          {slides.map((slide, index) => (
            <AppSwiperSlide key={`${slide.id}-${index}`} className="relative">
              <div className="group/creator relative h-[380px] sm:h-[460px] lg:h-[600px] xl:h-[700px]">
                <Link
                  href={{
                    pathname: '/alkoto/[id]',
                    params: { id: slide.creatorId },
                  }}
                  className="absolute inset-0 z-20 block"
                  aria-label={slide.title || slide.subtitle || 'Creator'}
                />
                <div className="absolute inset-0 bg-[#111827]" aria-hidden />
                <Image
                  src={slide.src}
                  alt="background"
                  fill
                  sizes="100vw"
                  className="absolute inset-0 scale-125 object-cover blur-3xl opacity-30 brightness-50"
                  priority={index === 0}
                  aria-hidden={true}
                />
                <Image
                  src={slide.src}
                  alt={slide.title || ''}
                  fill
                  sizes="100vw"
                  className="absolute inset-0 object-contain"
                  priority={index === 0}
                />
                <div
                  className="absolute inset-0 bg-gradient-to-t from-black/60 via-black/10 to-transparent"
                  aria-hidden
                />
                <div className="pointer-events-none absolute left-6 bottom-6 z-30 translate-y-3 text-white opacity-0 transition-all duration-300 group-hover/creator:translate-y-0 group-hover/creator:opacity-100 group-focus-within/creator:translate-y-0 group-focus-within/creator:opacity-100 sm:left-10 sm:bottom-10">
                  <div className="text-xs uppercase tracking-[0.3em] text-white/60">
                    {slide.subtitle}
                  </div>
                  <div className="mt-3 text-2xl sm:text-3xl lg:text-4xl font-semibold">
                    {slide.title}
                    {slide.year ? ` (${slide.year})` : ''}
                  </div>
                  {slide.location ? (
                    <div className="mt-2 text-sm text-white/80">{slide.location}</div>
                  ) : null}
                </div>
              </div>
            </AppSwiperSlide>
          ))}
        </AppSwiper>
      </div>

      <CarouselControls
        total={slides.length}
        activeIndex={activeSlide}
        onPrev={controller.prev}
        onNext={controller.next}
        onSelect={controller.goTo}
        prevLabel={tCommon('previous')}
        nextLabel={tCommon('next')}
        showArrows={false}
        className="justify-start"
        inverted
      />
    </Section>
  );
};

export default HomepageCreatorOfTheWeek;