'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 CreatorAvatar from '@/components/creators/CreatorAvatar';
import CreationMap, { convertMapData } from '@/components/maps/CreationMap';

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

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

import SectionHeader from '@/components/home/components/SectionHeader';
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, ['megjelenitendoNev', '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.id },
    });
  };

  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 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)]">
          {creatorOptions.length > 0 ? (
            <div className="py-1">
              {creatorOptions.map((item) => {
                return (
                  <button
                    key={item.id}
                    type="button"
                    onMouseDown={(event) => {
                      event.preventDefault();
                      pickCreator(item);
                    }}
                    className={
                      'flex w-full items-center gap-3 px-3 py-2 text-left transition-colors hover:bg-[#f4f7fb] '
                    }
                  >
                    <CreatorAvatar
                      imageKey={item.avatarKey}
                      name={item.name}
                      width={40}
                      height={40}
                      wrapperClassName="h-9 w-9 shrink-0 rounded-full"
                      imageClassName="rounded-full"
                    />
                    <span className="min-w-0">
                      <span className="block truncate text-sm font-semibold text-[#0f172a]">
                        {item.name}
                      </span>
                      {item.profession ? (
                        <span className="block truncate text-xs text-[#151720]/60">
                          {item.profession}
                        </span>
                      ) : null}
                    </span>
                  </button>
                );
              })}
            </div>
          ) : (
            <div className="px-3 py-2 text-xs text-[#151720]/60">{t('selector.empty')}</div>
          )}
        </div>
      ) : null}
    </div>
  );

  return (
    <section className="relative w-full overflow-hidden bg-[#f4f7fa] px-site py-14 text-[#151720] sm:py-16 lg:py-20">
      <div className="pointer-events-none absolute inset-0 opacity-30 bg-[linear-gradient(90deg,rgba(15,23,42,0.08)_1px,transparent_1px),linear-gradient(0deg,rgba(15,23,42,0.08)_1px,transparent_1px)] bg-[size:48px_48px]" />
      <div className="pointer-events-none absolute inset-x-0 top-0 h-48 bg-gradient-to-b from-white/55 to-transparent" />

      <div className="relative mx-auto max-w-boxed space-y-8">
        <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>
      </div>
    </section>
  );
};

export default HomepageMapShowcaseClient;