'use client';

import React, { useMemo } from 'react';

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

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

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 { getFullSizeImageByKey } from '@/utils/images';

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

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

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]?.key
        ? getFullSizeImageByKey(creation.galeria[0].key)
        : creation.fokep
          ? getFullSizeImageByKey(creation.fokep)
          : 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 className="relative w-full overflow-hidden bg-[#111827] px-site py-14 text-white sm:py-16 lg:py-20">
      <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="pointer-events-none absolute inset-0 opacity-20 bg-[linear-gradient(90deg,rgba(255,255,255,0.08)_1px,transparent_1px),linear-gradient(0deg,rgba(255,255,255,0.08)_1px,transparent_1px)] bg-[size:48px_48px]" />

      <div className="relative mx-auto max-w-boxed space-y-8">
        <div className="flex items-end justify-between gap-6">
          <SectionHeader
            eyebrow={textFields?.blockLabel || ''}
            eyebrowUrl="/alkotok"
            title={textFields?.blockTitle || ''}
            description={textFields?.blockSubtitle || ''}
            tone="dark"
          />
          <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=""
                    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
        />
      </div>
    </section>
  );
};

export default HomepageCreatorOfTheWeek;