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

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

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

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

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

import CreationListClient from '@/app/[locale]/alkotasok/CreationListClient';

export async function generateMetadata(): Promise<Metadata> {
  const t = await getTranslations('videosPage.metaData');

  return {
    title: t('title'),
    description: t('description'),
    alternates: {
      canonical: '/videok',
    },
    openGraph: {
      url: '/videok',
      title: t('title'),
      description: t('description'),
      type: 'website',
      locale: 'hu_HU',
    },
    twitter: {
      card: 'summary_large_image',
      title: t('title'),
      description: t('description'),
    },
  };
}

export default async function VideoListPage({ params }: { params: Promise<{ locale: string }> }) {
  const { locale } = await params;
  const creations: CreationListItem[] = await getCreationList({
    videoType: ['alkotas_video'],
  });

  // Extract and process years
  const years = creations
    .map((c: CreationListItem) => c.labelYear)
    .filter((year: number | null): year is number => typeof year === 'number' && year !== 1000);

  const maxYear = years.length > 0 ? Math.max(...years) : new Date().getFullYear();
  const minYear = years.length > 0 ? Math.min(...years) : maxYear - 100;

  // Get unique years sorted descending (newest first)
  const availableYears: number[] = [...new Set<number>(years)].sort((a, b) => b - a);

  const t = await getTranslations('navigation.menu');
  const breadcrumbItems = [
    {
      label: locale === 'en' ? 'Home' : 'Főoldal',
      href: { pathname: '/' },
      icon: <IoHomeOutline />,
      ariaLabel: locale === 'en' ? 'Home' : 'Főoldal',
    },
    {
      label: t('videos'),
      href: { pathname: '/videok' },
    },
  ] satisfies BreadcrumbItem[];

  return (
    <>
      <Breadcrumbs items={breadcrumbItems} className="px-site" />
      <CreationListClient
        title={t('videos')}
        creations={creations}
        min={minYear}
        max={maxYear}
        initialYear={maxYear}
        availableYears={availableYears}
        showCreatorProfession
      />
    </>
  );
}