import { Metadata } from 'next';
import { getTranslations } from 'next-intl/server';

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

import { getCreationList } from '@/services/creations';

import Breadcrumbs, { BreadcrumbItem } from '@/components/common/Breadcrumbs';
import { convertFromPrettyKey } from '@/utils/filterUtils';

import AggregateMapClient from '@/app/[locale]/terkep/AggregateMapClient';
import { Link } from '@/i18n/navigation';

interface PageParams {
  params: Promise<{ category: string; locale: string }>;
}

export async function generateMetadata({ params }: PageParams): Promise<Metadata> {
  const { category } = await params;
  const key = convertFromPrettyKey(category);

  if (!key) return {};

  const t = await getTranslations('mapViewPage.metaData');
  const categoryT = await getTranslations('categories');

  const categoryName = categoryT(key);
  const title = t('categoryTitle', { category: categoryName });
  const description = t('description');

  const canonical = `/terkep/${category}`;

  return {
    title,
    description,
    alternates: {
      canonical,
    },
    openGraph: {
      url: canonical,
      title: `${title} | A-Z OPUS`,
      description,
      type: 'website',
      locale: 'hu_HU',
    },
    twitter: {
      card: 'summary_large_image',
      site: '@azopus',
      title,
      description,
    },
  };
}

export default async function MapCategoryPage({ params }: PageParams) {
  const { category, locale } = await params;
  const key = convertFromPrettyKey(category);
  if (!key) return null;

  const tCategory = await getTranslations('categories');
  const tMapView = await getTranslations('mapViewPage');
  const categoryName = tCategory(key);

  const breadcrumbItems = [
    {
      label: locale === 'en' ? 'Home' : 'Főoldal',
      href: { pathname: '/' },
      icon: <IoHomeOutline />,
      ariaLabel: locale === 'en' ? 'Home' : 'Főoldal',
    },
    {
      label: tMapView('title'),
      href: { pathname: '/terkep' },
    },
    {
      label: categoryName,
    },
  ] satisfies BreadcrumbItem[];

  const creations = await getCreationList({
    contentType: [key],
    withCoord: true,
  });

  return (
    <>
      <Breadcrumbs
        items={breadcrumbItems}
        className="px-site"
        sticky
        rightSlot={
          <Link
            href={`/alkotasok/${category}` as never}
            className="inline-flex h-full items-center gap-1.5 bg-white/90 px-2 sm:px-3 text-[11px] sm:text-[12px] font-semibold uppercase tracking-[0.3em] text-[#151720]/75 transition-colors hover:bg-white hover:text-[#151720]"
          >
            <List size={14} />
            <span className="hidden sm:inline">{tMapView('listView')}</span>
          </Link>
        }
      />
      <AggregateMapClient creations={creations} />
    </>
  );
}