'use client';

import React, { useEffect, useMemo, useRef, useState } from 'react';

import Image from 'next/image';

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

import { getCreationCardImageSrc } from '@/utils/creationHelpers';
import { getFullSizeImageByKey } from '@/utils/images';

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

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

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

const DESKTOP_TOTAL = 40;
const DESKTOP_SIDE = 20;
const MOBILE_POOL_SIZE = 36;
const MOBILE_SIDE = 6;
const MOBILE_GROUP_SIZE = 12;
const MOBILE_GROUP_COUNT = 3;

const sliceCyclic = <T,>(items: T[], start: number, count: number): T[] => {
  if (!items.length || count <= 0) return [];
  const normalizedStart = ((start % items.length) + items.length) % items.length;
  const result: T[] = [];
  for (let i = 0; i < count; i += 1) {
    result.push(items[(normalizedStart + i) % items.length]);
  }
  return result;
};

const HomepageCreationSelectionFramed: React.FC<HomepageCreationSelectionFramedProps> = ({
  creations,
  textFields,
}) => {
  const slides = useMemo(() => {
    const mapped = (creations || []).map((creation) => ({
      id: creation.id ?? creation.alkotasAzonosito ?? creation.nev ?? '',
      alkotasId: creation.alkotasAzonosito ?? '',
      src:
        (creation.galeria?.[0]?.key
          ? getFullSizeImageByKey(creation.galeria[0].key)
          : creation.fokep
            ? getFullSizeImageByKey(creation.fokep)
            : getCreationCardImageSrc(creation)) || '',
      title: creation.nev || '',
      subtitle: creation.megjelenitendoNev || '',
    }));

    return mapped.filter(
      (slide): slide is (typeof mapped)[number] & { src: string } =>
        typeof slide.src === 'string' && slide.src.length > 0
    );
  }, [creations]);

  const desktopSlides = useMemo(() => slides.slice(0, DESKTOP_TOTAL), [slides]);
  const frontSlides = useMemo(() => desktopSlides.slice(0, DESKTOP_SIDE), [desktopSlides]);
  const backSlides = useMemo(
    () => desktopSlides.slice(DESKTOP_SIDE, DESKTOP_TOTAL),
    [desktopSlides]
  );
  const getBackSlide = (index: number) => backSlides[index] ?? null;

  const [flipped, setFlipped] = useState<Record<number, boolean>>({});
  const flippedRef = useRef<Record<number, boolean>>({});
  const [mobileGroupIndex, setMobileGroupIndex] = useState(0);
  const [mobileFlipped, setMobileFlipped] = useState<Record<number, boolean>>({});
  const mobileFlippedRef = useRef<Record<number, boolean>>({});

  const mobilePool = useMemo(() => {
    if (!slides.length) return [];

    return slides.slice(0, Math.min(MOBILE_POOL_SIZE, slides.length));
  }, [slides]);

  const mobileSlides = useMemo(() => {
    if (!mobilePool.length) return [];
    const start = mobileGroupIndex * MOBILE_GROUP_SIZE;
    const count = Math.min(MOBILE_GROUP_SIZE, mobilePool.length);

    return sliceCyclic(mobilePool, start, count);
  }, [mobileGroupIndex, mobilePool]);

  const mobileFrontSlides = useMemo(() => mobileSlides.slice(0, MOBILE_SIDE), [mobileSlides]);
  const mobileBackSlides = useMemo(
    () => mobileSlides.slice(MOBILE_SIDE, MOBILE_GROUP_SIZE),
    [mobileSlides]
  );

  useEffect(() => {
    flippedRef.current = flipped;
  }, [flipped]);

  useEffect(() => {
    mobileFlippedRef.current = mobileFlipped;
  }, [mobileFlipped]);

  useEffect(() => {
    if (!frontSlides.length) return;
    const interval = window.setInterval(() => {
      const unflipped = frontSlides
        .map((_, index) => index)
        .filter((index) => !flippedRef.current[index]);
      if (!unflipped.length) {
        flippedRef.current = {};
        setFlipped({});
        return;
      }
      const nextIndex = unflipped[Math.floor(Math.random() * unflipped.length)];
      setFlipped((prev) => ({ ...prev, [nextIndex]: true }));
    }, 1800);

    return () => window.clearInterval(interval);
  }, [frontSlides, frontSlides.length]);

  useEffect(() => {
    setMobileGroupIndex(Math.floor(Math.random() * MOBILE_GROUP_COUNT));
  }, []);

  useEffect(() => {
    mobileFlippedRef.current = {};
    setMobileFlipped({});
  }, [mobileGroupIndex]);

  useEffect(() => {
    if (!mobileBackSlides.length) return;
    const interval = window.setInterval(() => {
      const unflipped = mobileFrontSlides
        .map((_, index) => index)
        .filter((index) => !mobileFlippedRef.current[index]);

      if (!unflipped.length) {
        mobileFlippedRef.current = {};
        setMobileFlipped({});
        return;
      }

      const nextIndex = unflipped[Math.floor(Math.random() * unflipped.length)];
      setMobileFlipped((prev) => ({ ...prev, [nextIndex]: true }));
    }, 1800);

    return () => window.clearInterval(interval);
  }, [mobileBackSlides.length, mobileFrontSlides]);

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

  return (
    <section className="w-full bg-[#0f172a] text-white px-site py-14 sm:py-16 lg:py-20">
      <div className="mx-auto max-w-boxed space-y-8">
        <div className="flex items-end justify-between gap-6">
          <SectionHeader
            eyebrow={textFields?.blockLabel || ''}
            eyebrowUrl="/alkotasok-kepekkel"
            title={textFields?.blockTitle || ''}
            description={textFields?.blockSubtitle || ''}
            tone="dark"
          />
        </div>

        <div className="grid grid-cols-2 gap-0 auto-rows-[150px] sm:hidden">
          {mobileFrontSlides.map((slide, index) => {
            const backSlide = mobileBackSlides[index] ?? null;
            const isFlipped = Boolean(mobileFlipped[index] && backSlide);
            return (
              <div
                key={`${slide.id}-mobile-${mobileGroupIndex}-${index}`}
                className="overflow-hidden border border-white/10 bg-white/5 mosaic-cell"
              >
                <div
                  className={`relative h-full w-full mosaic-tile${isFlipped ? ' is-flipping' : ''}`}
                >
                  <div className="absolute inset-0 mosaic-face mosaic-front">
                    <Image
                      src={slide.src}
                      alt=""
                      fill
                      sizes="50vw"
                      className="absolute inset-0 object-cover blur-2xl scale-110 opacity-35"
                      aria-hidden
                    />
                    {slide.alkotasId ? (
                      <Link
                        href={{
                          pathname: '/alkotas/[id]',
                          params: { id: slide.alkotasId },
                        }}
                        className="absolute inset-0 mosaic-link"
                        aria-label={slide.title || 'Alkotas'}
                      >
                        <Image
                          src={slide.src}
                          alt={slide.title}
                          fill
                          sizes="50vw"
                          className="absolute inset-0 h-full w-full object-contain"
                        />
                        <div className="absolute inset-0 bg-gradient-to-t from-black/55 via-black/10 to-transparent" />
                        <div className="mosaic-caption absolute left-3 bottom-3 right-3">
                          <div className="text-[9px] uppercase tracking-[0.24em] text-white/60 truncate">
                            {slide.subtitle}
                          </div>
                          <div className="mt-1 text-xs font-semibold truncate">{slide.title}</div>
                        </div>
                      </Link>
                    ) : (
                      <>
                        <Image
                          src={slide.src}
                          alt={slide.title}
                          fill
                          sizes="50vw"
                          className="absolute inset-0 h-full w-full object-contain"
                        />
                        <div className="absolute inset-0 bg-gradient-to-t from-black/55 via-black/10 to-transparent" />
                        <div className="mosaic-caption absolute left-3 bottom-3 right-3">
                          <div className="text-[9px] uppercase tracking-[0.24em] text-white/60 truncate">
                            {slide.subtitle}
                          </div>
                          <div className="mt-1 text-xs font-semibold truncate">{slide.title}</div>
                        </div>
                      </>
                    )}
                  </div>
                  {backSlide ? (
                    <div className="absolute inset-0 mosaic-face mosaic-back">
                      {isFlipped && (
                        <>
                          <Image
                            src={backSlide.src}
                            alt=""
                            fill
                            sizes="50vw"
                            className="absolute inset-0 object-cover blur-2xl scale-110 opacity-35"
                            aria-hidden
                          />
                          {backSlide.alkotasId ? (
                            <Link
                              href={{
                                pathname: '/alkotas/[id]',
                                params: { id: backSlide.alkotasId },
                              }}
                              className="absolute inset-0 mosaic-link"
                              aria-label={backSlide.title || 'Alkotas'}
                            >
                              <Image
                                src={backSlide.src}
                                alt={backSlide.title}
                                fill
                                sizes="50vw"
                                className="absolute inset-0 h-full w-full object-contain"
                              />
                              <div className="absolute inset-0 bg-gradient-to-t from-black/55 via-black/10 to-transparent" />
                              <div className="mosaic-caption absolute left-3 bottom-3 right-3">
                                <div className="text-[9px] uppercase tracking-[0.24em] text-white/60 truncate">
                                  {backSlide.subtitle}
                                </div>
                                <div className="mt-1 text-xs font-semibold truncate">
                                  {backSlide.title}
                                </div>
                              </div>
                            </Link>
                          ) : (
                            <>
                              <Image
                                src={backSlide.src}
                                alt={backSlide.title}
                                fill
                                sizes="50vw"
                                className="absolute inset-0 h-full w-full object-contain"
                              />
                              <div className="absolute inset-0 bg-gradient-to-t from-black/55 via-black/10 to-transparent" />
                              <div className="mosaic-caption absolute left-3 bottom-3 right-3">
                                <div className="text-[9px] uppercase tracking-[0.24em] text-white/60 truncate">
                                  {backSlide.subtitle}
                                </div>
                                <div className="mt-1 text-xs font-semibold truncate">
                                  {backSlide.title}
                                </div>
                              </div>
                            </>
                          )}
                        </>
                      )}
                    </div>
                  ) : null}
                </div>
              </div>
            );
          })}
        </div>

        <div className="hidden sm:grid grid-cols-4 lg:grid-cols-5 gap-0 auto-rows-[160px] lg:auto-rows-[170px]">
          {frontSlides.map((slide, index) => {
            const backSlide = getBackSlide(index);
            const isFlipped = Boolean(flipped[index]);
            return (
              <div
                key={`${slide.id}-${index}`}
                className="overflow-hidden border border-white/10 bg-white/5 mosaic-cell"
              >
                <div
                  className={`relative h-full w-full mosaic-tile${
                    flipped[index] ? ' is-flipping' : ''
                  }`}
                >
                  <div className="absolute inset-0 mosaic-face mosaic-front">
                    <Image
                      src={slide.src}
                      alt=""
                      fill
                      sizes="(min-width: 1024px) 10vw, (min-width: 640px) 25vw, 50vw"
                      className="absolute inset-0 object-cover blur-2xl scale-110 opacity-35"
                      aria-hidden
                    />
                    {slide.alkotasId ? (
                      <Link
                        href={{
                          pathname: '/alkotas/[id]',
                          params: { id: slide.alkotasId },
                        }}
                        className="absolute inset-0 mosaic-link"
                        aria-label={slide.title || 'Alkotas'}
                        // prefetch={false}
                      >
                        <Image
                          src={slide.src}
                          alt={slide.title}
                          fill
                          sizes="(min-width: 1024px) 10vw, (min-width: 640px) 25vw, 50vw"
                          className="absolute inset-0 h-full w-full object-contain"
                        />
                        <div className="absolute inset-0 bg-gradient-to-t from-black/50 via-black/10 to-transparent" />
                        <div className="mosaic-caption absolute left-4 bottom-4 right-4">
                          <div className="text-[9px] uppercase tracking-[0.28em] text-white/60">
                            {slide.subtitle}
                          </div>
                          <div className="mt-1 text-sm sm:text-base font-semibold truncate">
                            {slide.title}
                          </div>
                        </div>
                      </Link>
                    ) : (
                      <>
                        <Image
                          src={slide.src}
                          alt={slide.title}
                          fill
                          sizes="(min-width: 1024px) 10vw, (min-width: 640px) 25vw, 50vw"
                          className="absolute inset-0 h-full w-full object-contain"
                        />
                        <div className="absolute inset-0 bg-gradient-to-t from-black/50 via-black/10 to-transparent" />
                        <div className="mosaic-caption absolute left-4 bottom-4 right-4">
                          <div className="text-[9px] uppercase tracking-[0.28em] text-white/60">
                            {slide.subtitle}
                          </div>
                          <div className="mt-1 text-sm sm:text-base font-semibold">
                            {slide.title}
                          </div>
                        </div>
                      </>
                    )}
                  </div>
                  {backSlide ? (
                    <div className="absolute inset-0 mosaic-face mosaic-back">
                      {isFlipped && (
                        <>
                          <Image
                            src={backSlide.src}
                            alt=""
                            fill
                            sizes="(min-width: 1024px) 10vw, (min-width: 640px) 25vw, 50vw"
                            className="absolute inset-0 object-cover blur-2xl scale-110 opacity-35"
                            aria-hidden
                          />
                          {backSlide.alkotasId ? (
                            <Link
                              href={{
                                pathname: '/alkotas/[id]',
                                params: { id: backSlide.alkotasId },
                              }}
                              className="absolute inset-0 mosaic-link"
                              aria-label={backSlide.title || 'Alkotas'}
                              // prefetch={false}
                            >
                              <Image
                                src={backSlide.src}
                                alt={backSlide.title}
                                fill
                                sizes="(min-width: 1024px) 10vw, (min-width: 640px) 25vw, 50vw"
                                className="absolute inset-0 h-full w-full object-contain"
                              />
                              <div className="absolute inset-0 bg-gradient-to-t from-black/50 via-black/10 to-transparent" />
                              <div className="mosaic-caption absolute left-4 bottom-4 right-4">
                                <div className="text-[9px] uppercase tracking-[0.28em] text-white/60">
                                  {backSlide.subtitle}
                                </div>
                                <div className="mt-1 text-sm sm:text-base font-semibold truncate">
                                  {backSlide.title}
                                </div>
                              </div>
                            </Link>
                          ) : (
                            <>
                              <Image
                                src={backSlide.src}
                                alt={backSlide.title}
                                fill
                                sizes="(min-width: 1024px) 10vw, (min-width: 640px) 25vw, 50vw"
                                className="absolute inset-0 h-full w-full object-contain"
                              />
                              <div className="absolute inset-0 bg-gradient-to-t from-black/50 via-black/10 to-transparent" />
                              <div className="mosaic-caption absolute left-4 bottom-4 right-4">
                                <div className="text-[9px] uppercase tracking-[0.28em] text-white/60">
                                  {backSlide.subtitle}
                                </div>
                                <div className="mt-1 text-sm sm:text-base font-semibold">
                                  {backSlide.title}
                                </div>
                              </div>
                            </>
                          )}
                        </>
                      )}
                    </div>
                  ) : null}
                </div>
              </div>
            );
          })}
        </div>
        <style>{`
          .mosaic-cell {
            perspective: 800px;
            perspective-origin: center;
          }
          .mosaic-tile {
            transform-style: preserve-3d;
            transform-origin: center;
            transition: transform 1400ms cubic-bezier(0.22, 1, 0.36, 1);
            will-change: transform;
            box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
          }
          .mosaic-tile.is-flipping {
            transform: rotateY(180deg);
          }
          .mosaic-face {
            backface-visibility: hidden;
            pointer-events: none;
          }
          .mosaic-back {
            transform: rotateY(180deg);
          }
          .mosaic-link {
            pointer-events: auto;
          }
          .mosaic-tile.is-flipping .mosaic-front {
            pointer-events: none;
          }
          .mosaic-tile.is-flipping .mosaic-back {
            pointer-events: auto;
          }
          .mosaic-tile:not(.is-flipping) .mosaic-front {
            pointer-events: auto;
          }
          .mosaic-tile:not(.is-flipping) .mosaic-back {
            pointer-events: none;
          }
          .mosaic-caption {
            opacity: 0;
            transform: translateY(6px);
            transition: opacity 220ms ease, transform 220ms ease;
            pointer-events: none;
          }
          .mosaic-face:hover .mosaic-caption,
          .mosaic-face:focus-within .mosaic-caption {
            opacity: 1;
            transform: translateY(0);
          }
        `}</style>
      </div>
    </section>
  );
};

export default HomepageCreationSelectionFramed;