'use client';

import { useMemo } from 'react';

import { useLocale, useTranslations } from 'next-intl';

import { IoHomeOutline } from 'react-icons/io5';

import Breadcrumbs, { BreadcrumbItem } from '@/components/common/Breadcrumbs';
import CreationMap, { convertMapData } from '@/components/maps/CreationMap';
import { getMetaAttribute110ByKey } from '@/utils/filterUtils';

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

import { asHref } from '@/i18n/asHref';

interface TerkepClientProps {
  creatorId: string;
  creatorName: string;
  creatorArtBranchEnum?: string | null;
  creatorArtBranchName?: string | null;
  creations: CreationListItem[];
}

export default function TerkepClient({
  creatorId,
  creatorName,
  creatorArtBranchEnum,
  creatorArtBranchName,
  creations,
}: TerkepClientProps) {
  const locale = useLocale();
  const tNav = useTranslations('navigation.menu');
  const tGrid = useTranslations('creatorPage.grid');

  const artBranch = useMemo(() => {
    if (!creatorArtBranchEnum && !creatorArtBranchName) {
      return null;
    }
    const meta = creatorArtBranchEnum ? getMetaAttribute110ByKey(creatorArtBranchEnum) : null;
    const prettyKey = meta?.prettyKey;
    const label = creatorArtBranchName || meta?.name || null;
    if (!prettyKey || !label) return null;
    return { prettyKey, label };
  }, [creatorArtBranchEnum, creatorArtBranchName]);

  const mapData = useMemo(() => convertMapData(creations, ['labelYear']), [creations]);

  const breadcrumbs = useMemo(() => {
    const homeLabel = locale === 'en' ? 'Home' : 'Főoldal';
    const items: BreadcrumbItem[] = [
      {
        label: homeLabel,
        href: { pathname: '/' },
        icon: <IoHomeOutline />,
        ariaLabel: homeLabel,
      },
      {
        label: tNav('creators'),
        href: { pathname: '/alkotok' },
      },
    ];

    if (artBranch?.prettyKey && artBranch.label) {
      items.push({
        label: artBranch.label,
        href: asHref(`/alkotok/${artBranch.prettyKey}`),
        hideBelow: 'lg',
      });
    }

    items.push({
      label: creatorName,
      href: {
        pathname: '/alkoto/[id]',
        params: { id: creatorId },
      },
      hideBelow: 'lg',
    });

    items.push({ label: tGrid('terkep') });

    return items;
  }, [artBranch?.label, artBranch?.prettyKey, creatorId, creatorName, locale, tGrid, tNav]);

  return (
    <section className="px-site pb-8">
      <div className="mx-auto max-w-boxed flex flex-col gap-2">
        <Breadcrumbs items={breadcrumbs} sticky />
        {mapData.length > 0 ? (
          <CreationMap
            className="h-[560px] lg:h-[700px] border border-mma-blue/10"
            data={mapData}
          />
        ) : (
          <div className="ui-panel flex min-h-[320px] items-center justify-center p-6 text-sm text-[#151720]/65">
            {locale === 'hu'
              ? 'Ehhez az alkotóhoz nem található megjeleníthető térképes adat.'
              : 'No map data is available for this creator.'}
          </div>
        )}
        {/* 2nd check just in case.. page.tsx already throws notfound() in case of !creator.hasCreationMapData */}
      </div>
    </section>
  );
}