import { Suspense } from 'react';

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

import { MdMilitaryTech } from 'react-icons/md';

import { getAwardDetails } from '@/services/awards';

import Breadcrumbs from '@/components/common/Breadcrumbs';
import type { BreadcrumbItem } from '@/components/common/Breadcrumbs';
import FloatingShareRail from '@/components/common/FloatingShareRail';
import LanguageNotice from '@/components/common/LanguageNotice';
import CreatorCard from '@/components/creators/CreatorCard';
import { Badge } from '@/components/ui/badge';
import { Heading, Text } from '@/components/ui/typography';
import { cn } from '@/lib/utils';
import { getAwardSlug, getAwardTypeChip, groupAwardInstancesByYear } from '@/utils/awardHelpers';
import { stripHtml } from '@/utils/html';
import { getLocalizedAlternates, getLocalizedUrl, resolveAppLocale } from '@/utils/seo';

import { type AppLocale } from '@/config/i18n';
import { LocaleSwitchOverride } from '@/contexts/LocaleSwitchContext';

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

const AwardDetailsPage = async ({ params }: PageParams) => {
  const { slug } = await params;
  if (!slug) return null;

  const instances = await getAwardDetails({ body: { slug } });

  if (!instances || instances.length === 0) return notFound();

  const award = instances[0].dij;
  const t = await getTranslations('awardPage');

  const typeChip = getAwardTypeChip(award.tipusaId);
  const description = stripHtml(award.leiras);
  const typeDefinition = award.tipusaDefinicio?.trim();
  const typeDescription = stripHtml(award.tipusaLeiras);

  const yearGroups = groupAwardInstancesByYear(instances);
  const recipientCount = instances.length;
  const years = yearGroups
    .map((group) => group.year)
    .filter((year): year is number => year != null);
  const firstYear = years.length > 0 ? Math.min(...years) : null;
  const lastYear = years.length > 0 ? Math.max(...years) : null;
  const yearRangeLabel =
    firstYear != null && lastYear != null
      ? firstYear === lastYear
        ? String(firstYear)
        : `${firstYear}–${lastYear}`
      : null;

  const breadcrumbItems = [
    {
      label: t('breadcrumb'),
      hideBelow: 'sm',
    },
    {
      label: award.nev,
    },
  ] satisfies BreadcrumbItem[];

  // Per-locale hrefs for the language switcher: the slug is locale-specific.
  const localeSwitchHrefs = {
    hu: { pathname: '/dij/[slug]', params: { slug: getAwardSlug(award, 'hu') } },
    en: { pathname: '/dij/[slug]', params: { slug: getAwardSlug(award, 'en') } },
  };

  return (
    <section className="relative min-h-screen w-full overflow-hidden bg-white text-brand-primary">
      <LocaleSwitchOverride hrefs={localeSwitchHrefs} />
      <FloatingShareRail position="left-center" title={award.nev} description={description || ''} />
      <FloatingShareRail
        position="bottom-center"
        layout="horizontal"
        hideOnMobile={false}
        className="lg:hidden"
        title={award.nev}
        description={description || ''}
        showNativeShare={true}
        showEmail={false}
      />

      <div className="px-site">
        <div className="mx-auto max-w-boxed">
          <Breadcrumbs items={breadcrumbItems} sticky={false} />
        </div>
      </div>

      <div className="relative px-site pb-12 lg:pt-4">
        <div className="mx-auto flex max-w-boxed flex-col gap-10">
          <LanguageNotice />

          {/* ---- Award header ---- */}
          <header className="flex flex-col gap-5">
            <div className="flex flex-wrap items-center gap-2">
              {award.tipusaNev && (
                <Badge variant="category" size="md" className={typeChip.chip}>
                  {award.tipusaNev}
                </Badge>
              )}
              {yearRangeLabel && (
                <Text
                  as="span"
                  variant="meta"
                  tone="soft"
                  className="inline-flex items-center gap-2"
                >
                  <MdMilitaryTech className="text-base text-brand-primary/50" />
                  {yearRangeLabel}
                </Text>
              )}
            </div>

            <Heading as="h1" variant="pageTitle" tone="strong">
              {award.nev}
            </Heading>

            {description && (
              <Text as="p" variant="lead" tone="muted" className="max-w-3xl">
                {description}
              </Text>
            )}
          </header>

          {/* ---- Award type info ---- */}
          {(typeDefinition || typeDescription) && (
            <aside
              className={cn(
                'border border-brand-primary/10 border-l-[3px] px-5 py-4',
                typeChip.accent,
                typeChip.surface
              )}
            >
              <Text as="div" variant="meta" tone="soft" className="mb-2">
                {t('typeLabel')}
                {award.tipusaNev ? ` · ${award.tipusaNev}` : ''}
              </Text>
              {typeDefinition && (
                <Text as="p" variant="body" tone="muted" className="font-medium">
                  {typeDefinition}
                </Text>
              )}
              {typeDescription && (
                <Text as="p" variant="bodySm" tone="soft" className="mt-2">
                  {typeDescription}
                </Text>
              )}
            </aside>
          )}

          {/* ---- Recipients ---- */}
          <div className="flex flex-col gap-6">
            <div className="flex items-baseline justify-between gap-4 border-b border-brand-primary/10 pb-3">
              <Heading as="h2" variant="subsectionTitle" tone="strong">
                {t('recipients')}
              </Heading>
              <Text as="span" variant="meta" tone="soft">
                {t('recipientCount', { count: recipientCount })}
              </Text>
            </div>

            <Suspense>
              <div className="flex flex-col gap-9">
                {yearGroups.map((group) => (
                  <div key={group.year ?? 'unknown'} className="flex flex-col gap-4">
                    {/* Year header with a trailing hairline */}
                    <div className="flex items-baseline gap-4">
                      <span className="font-slab text-xl font-bold leading-none text-brand-primary md:text-2xl">
                        {group.year ?? '—'}
                      </span>
                      <span className="h-px flex-1 translate-y-[-0.2rem] bg-brand-primary/10" />
                    </div>
                    <div className="grid grid-cols-3 gap-2 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8">
                      {group.recipients.map((recipient, index) => (
                        <CreatorCard
                          key={`${recipient.szemely.alkotoAzonosito}-${index}`}
                          creator={recipient.szemely}
                        />
                      ))}
                    </div>
                  </div>
                ))}
              </div>
            </Suspense>
          </div>
        </div>
      </div>
    </section>
  );
};

export async function generateMetadata({ params }: PageParams): Promise<Metadata> {
  const { slug, locale } = await params;
  const resolvedLocale = resolveAppLocale(locale);
  const t = await getTranslations('awardPage.metaData');

  try {
    const instances = await getAwardDetails({ body: { slug } });
    const award = instances[0]?.dij;

    if (!award) {
      return { title: t('awardNotFound') };
    }

    const awardHref = (loc: AppLocale) => ({
      pathname: '/dij/[slug]',
      params: { slug: getAwardSlug(award, loc) },
    });
    const awardUrl = getLocalizedUrl(resolvedLocale, awardHref(resolvedLocale));
    const recipientNames = instances
      .map((instance) => instance.szemely.nev)
      .filter((name): name is string => Boolean(name));
    const description =
      stripHtml(award.leiras) ||
      (recipientNames.length > 0
        ? t('recipientsPrefix', { names: recipientNames.slice(0, 6).join(', ') })
        : award.nev);

    return {
      title: award.nev,
      description,
      alternates: getLocalizedAlternates(locale, awardHref),
      openGraph: {
        title: award.nev,
        description,
        type: 'website',
        url: awardUrl,
        locale: resolvedLocale,
        siteName: 'A-Z OPUS',
      },
      twitter: {
        card: 'summary',
        title: award.nev,
        description,
      },
    };
  } catch (error) {
    console.error('Failed to generate award metadata:', error);
    return { title: t('award') };
  }
}

export default AwardDetailsPage;