'use client';

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

import { useTranslations } from 'next-intl';

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

import Section from '@/components/common/Section';
import CreatorCard from '@/components/creators/CreatorCard';
import CreatorCombobox from '@/components/creators/CreatorCombobox';
import SectionHeader from '@/components/home/components/SectionHeader';

import type { CreatorListData } from '@/types/Creator';

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

interface HomepageInteractiveCreatorPickerClientProps {
  creators: CreatorListData[];
  textFields?: HomepageCollectionTextFields | null;
}

const RECOMMENDED_AVATAR_COUNT = 3;

const HomepageInteractiveCreatorPickerClient: React.FC<
  HomepageInteractiveCreatorPickerClientProps
> = ({ creators, textFields }) => {
  const t = useTranslations('home.interactivePicker');
  const router = useRouter();

  const lastSelectedIdRef = useRef<string | null>(null);
  const [recommendedCreators, setRecommendedCreators] = useState<CreatorListData[]>([]);

  useEffect(() => {
    if (!creators.length) {
      setRecommendedCreators([]);
      return;
    }

    const basePool = creators.some((creator) => creator.profilkep?.id)
      ? creators.filter((creator) => Boolean(creator.profilkep?.id))
      : creators;

    const shuffled = [...basePool];
    for (let i = shuffled.length - 1; i > 0; i -= 1) {
      const randomIndex = Math.floor(Math.random() * (i + 1));
      [shuffled[i], shuffled[randomIndex]] = [shuffled[randomIndex], shuffled[i]];
    }

    setRecommendedCreators(shuffled.slice(0, Math.min(RECOMMENDED_AVATAR_COUNT, shuffled.length)));
  }, [creators]);

  const handleSelect = (creator: CreatorListData) => {
    const targetId = creator.alkotoAzonosito;
    if (!targetId) return;
    if (targetId === lastSelectedIdRef.current) {
      return;
    }

    lastSelectedIdRef.current = targetId;
    router.push({
      pathname: '/alkoto/[id]/muveszeti-halo',
      params: { id: targetId },
    } as never);
  };

  return (
    <Section
      surface="ink"
      gap="loose"
      className="z-20 hidden overflow-visible md:block"
      innerClassName="z-10"
      backdrop={
        <>
          <div
            className="pointer-events-none absolute inset-0"
            style={{
              background:
                'radial-gradient(52% 74% at 8% 0%, rgba(34,211,238,0.18) 0%, rgba(34,211,238,0) 70%), radial-gradient(40% 62% at 94% 8%, rgba(223,207,111,0.16) 0%, rgba(223,207,111,0) 72%)',
            }}
          />
          <div
            className="pointer-events-none absolute inset-y-0 right-0 hidden w-[48%] md:block"
            style={{
              WebkitMaskImage:
                'linear-gradient(270deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.95) 64%, rgba(0,0,0,0) 100%)',
              WebkitMaskRepeat: 'no-repeat',
              WebkitMaskSize: '100% 100%',
              maskImage:
                'linear-gradient(270deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.95) 64%, rgba(0,0,0,0) 100%)',
              maskRepeat: 'no-repeat',
              maskSize: '100% 100%',
            }}
          >
            <div
              className="h-full w-full"
              style={
                {
                  backgroundColor: 'rgba(255, 255, 255, 0.38)',
                  WebkitMaskImage: "url('/assets/images/connections-removebg-preview.png')",
                  WebkitMaskPosition: 'center right',
                  WebkitMaskSize: 'cover',
                  WebkitMaskRepeat: 'no-repeat',
                  maskImage: "url('/assets/images/connections-removebg-preview.png')",
                  maskPosition: 'center right',
                  maskSize: 'cover',
                  maskRepeat: 'no-repeat',
                  maskMode: 'alpha',
                } as React.CSSProperties
              }
            />
          </div>
        </>
      }
    >
      <SectionHeader
        eyebrow={textFields?.blockLabel || ''}
        title={textFields?.blockTitle || ''}
        description={textFields?.blockSubtitle || ''}
        maxWidth
      />

      <div className="mx-auto flex w-full max-w-[560px] justify-center">
        <CreatorCombobox
          options={creators}
          placeholder={t('selector.placeholder')}
          ariaLabel={t('selector.label')}
          emptyLabel={t('selector.empty')}
          onSelect={handleSelect}
        />
      </div>

      {recommendedCreators.length > 0 && (
        <div className="mx-auto mt-5 flex w-full max-w-[860px] flex-wrap items-start justify-center gap-x-4 gap-y-4">
          {recommendedCreators.map((creator) => (
            <div key={`recommended-${creator.alkotoAzonosito}`} className="w-[128px] sm:w-[166px]">
              <CreatorCard creator={creator} pathname="/alkoto/[id]/muveszeti-halo" tone="dark" />
            </div>
          ))}
        </div>
      )}
    </Section>
  );
};

export default HomepageInteractiveCreatorPickerClient;