'use client';

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

import { useTranslations } from 'next-intl';

import { ChevronDown } from 'lucide-react';

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

import Section from '@/components/common/Section';
import CreatorResultList from '@/components/creators/CreatorResultList';
import SectionHeader from '@/components/home/components/SectionHeader';
import CreationMap, { convertMapData } from '@/components/maps/CreationMap';

import type { CreationListItem } from '@/types/Creation';

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

import {
  HOMEPAGE_MAP_ALL_CREATORS_ID,
  HOMEPAGE_MAP_CARPATHIAN_BASIN_INITIAL_VIEW,
  type HomepageMapCreatorOption,
} from './homepageMapShowcaseConfig';

interface HomepageMapShowcaseClientProps {
  initialCreations: CreationListItem[];
  creatorOptions: HomepageMapCreatorOption[];
  textFields?: HomepageCollectionTextFields | null;
}

const HomepageMapShowcaseClient = ({
  initialCreations,
  creatorOptions,
  textFields,
}: HomepageMapShowcaseClientProps) => {
  const router = useRouter();
  const t = useTranslations('home.mapShowcase');
  const selectorPlaceholder = t('selector.placeholder');
  const selectorWrapperRef = useRef<HTMLDivElement | null>(null);

  const [selectorOpen, setSelectorOpen] = useState(false);

  const mapData = useMemo(
    () => convertMapData(initialCreations, ['creatorName', 'labelYear', 'telepules']),
    [initialCreations]
  );
  const hasMapData = mapData.length > 0;
  const headerEyebrow = textFields?.blockLabel?.trim();
  const headerTitle = textFields?.blockTitle?.trim();
  const headerDescription = textFields?.blockSubtitle?.trim();

  useEffect(() => {
    if (!selectorOpen) return;

    const handleDocumentClick = (event: MouseEvent) => {
      const nextTarget = event.target;
      if (!(nextTarget instanceof Node)) return;
      if (selectorWrapperRef.current?.contains(nextTarget)) return;

      setSelectorOpen(false);
    };

    document.addEventListener('mousedown', handleDocumentClick);
    return () => {
      document.removeEventListener('mousedown', handleDocumentClick);
    };
  }, [selectorOpen]);

  const pickCreator = (creator: HomepageMapCreatorOption) => {
    setSelectorOpen(false);
    router.push({
      pathname: '/alkoto/[id]/terkep',
      params: { id: creator.alkotoAzonosito },
    });
  };

  const selectorControl = (
    <div ref={selectorWrapperRef} className="relative w-full">
      <label htmlFor="homepage-map-creator-select" className="sr-only">
        {t('selector.label')}
      </label>

      <button
        id="homepage-map-creator-select"
        type="button"
        onClick={() => setSelectorOpen((open) => !open)}
        aria-label={t('selector.label')}
        aria-expanded={selectorOpen}
        className="flex h-[46px] w-full items-center gap-2 border border-[#151720]/18 bg-white px-3 text-left shadow-[0_10px_34px_-22px_rgba(15,23,42,0.8)]"
      >
        <span className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-[#eef2f7] text-[10px] font-semibold uppercase tracking-[0.1em] text-[#151720]/55">
          AZ
        </span>
        <span className="min-w-0 flex-1">
          <span className="block truncate text-sm font-semibold text-[#151720]/55">
            {selectorPlaceholder}
          </span>
        </span>
        <ChevronDown
          size={16}
          className={
            'shrink-0 text-[#151720]/55 transition-transform ' + (selectorOpen ? 'rotate-180' : '')
          }
        />
      </button>

      {selectorOpen ? (
        <div
          role="listbox"
          className="absolute left-0 right-0 max-h-[370px] overflow-y-auto border border-[#151720]/14 bg-white shadow-[0_20px_42px_-28px_rgba(15,23,42,0.85)]"
        >
          <CreatorResultList
            creators={creatorOptions}
            emptyLabel={t('selector.empty')}
            onSelect={pickCreator}
            itemClassName="hover:bg-[#f4f7fb]"
            preventMouseDown
            rowSize="sm"
            className="py-1"
          />
        </div>
      ) : null}
    </div>
  );

  return (
    <Section surface="paper">
      <SectionHeader
        eyebrow={headerEyebrow}
        eyebrowUrl="/terkep"
        title={headerTitle}
        description={headerDescription}
        maxWidth
      />

      <div className="space-y-4">
        <div className="relative isolate z-0">
          <div className="relative h-[75svh] overflow-hidden border border-[#151720]/12 bg-[#e8edf2] shadow-[0_30px_80px_-40px_rgba(15,23,42,0.5)] sm:h-[560px] lg:h-[700px]">
            <div className="absolute left-3 top-3 z-20 w-[calc(100%-6rem)] max-w-[285px]">
              {selectorControl}
            </div>
            {!hasMapData ? (
              <div className="flex h-full items-center justify-center px-6 text-center text-sm text-[#151720]/65">
                {t('states.noMap')}
              </div>
            ) : (
              <CreationMap
                className="h-full w-full"
                data={mapData}
                fitBoundsKey={HOMEPAGE_MAP_ALL_CREATORS_ID}
                preferredInitialView={HOMEPAGE_MAP_CARPATHIAN_BASIN_INITIAL_VIEW}
                preferredInitialViewKey={HOMEPAGE_MAP_ALL_CREATORS_ID}
              />
            )}
            <div className="pointer-events-none absolute inset-x-0 bottom-0 h-28 bg-gradient-to-t from-black/35 to-transparent" />
          </div>
        </div>
      </div>
    </Section>
  );
};

export default HomepageMapShowcaseClient;