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

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

import { getCreatorDataCached } from '@/services/creatorsCache';

import CreatorAwardsPdfButton from '@/components/creators/CreatorAwardsPdfButton';
import { Badge } from '@/components/ui/badge';
import { Heading, Text } from '@/components/ui/typography';
import { cn } from '@/lib/utils';
import { getAwardSlug, getAwardTypeChip, isStateAward } from '@/utils/awardHelpers';
import { stripHtml } from '@/utils/html';

import type { CreatorAward } from '@/types/Award';

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

const byYearDesc = (a: CreatorAward, b: CreatorAward) => {
  if (a.ev == null) return 1;
  if (b.ev == null) return -1;
  return b.ev - a.ev;
};

export default async function CreatorAwardsSection({ creatorId }: { creatorId: string }) {
  const creator = await getCreatorDataCached(creatorId);
  if (!creator) notFound();

  const awards = creator.dijak ?? [];
  if (awards.length === 0) {
    return null;
  }

  const locale = await getLocale();
  const t = await getTranslations('awardPage');

  // State awards have a detail page (clickable); the rest are grouped separately.
  const stateAwards = awards
    .filter((award) => isStateAward(award.dijazasTipusaId))
    .sort(byYearDesc);
  const otherAwards = awards
    .filter((award) => !isStateAward(award.dijazasTipusaId))
    .sort(byYearDesc);

  const hasBothGroups = stateAwards.length > 0 && otherAwards.length > 0;

  return (
    <div className="flex flex-col gap-8">
      <CreatorAwardsPdfButton
        awards={awards}
        creatorName={creator.nev || ''}
        creatorProfession={creator.szakma}
      />

      {stateAwards.length > 0 && (
        <section className="flex flex-col gap-3">
          {hasBothGroups && <GroupLabel>{t('stateAwardsGroup')}</GroupLabel>}
          <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4">
            {stateAwards.map((award, index) => (
              <AwardCard
                key={`${award.id}-${award.ev}-${index}`}
                award={award}
                href={{ pathname: '/dij/[slug]', params: { slug: getAwardSlug(award, locale) } }}
                viewLabel={t('viewAward')}
              />
            ))}
          </div>
        </section>
      )}

      {otherAwards.length > 0 && (
        <section className="flex flex-col gap-3">
          <GroupLabel>{t('otherAwardsGroup')}</GroupLabel>
          <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4">
            {otherAwards.map((award, index) => (
              <AwardCard
                key={`${award.id}-${award.ev}-${index}`}
                award={award}
                href={{ pathname: '/dij/[slug]', params: { slug: getAwardSlug(award, locale) } }}
                viewLabel={t('viewAward')}
              />
            ))}
          </div>
        </section>
      )}
    </div>
  );
}

function GroupLabel({ children }: { children: React.ReactNode }) {
  return (
    <Text
      as="div"
      variant="meta"
      tone="soft"
      className="flex items-center gap-3 px-0.5 before:hidden after:h-px after:flex-1 after:bg-brand-primary/10 after:content-['']"
    >
      {children}
    </Text>
  );
}

type AwardCardProps = {
  award: CreatorAward;
  href?: { pathname: '/dij/[slug]'; params: { slug: string } };
  viewLabel?: string;
};

function AwardCard({ award, href, viewLabel }: AwardCardProps) {
  const typeChip = getAwardTypeChip(award.dijazasTipusaId);
  const description = stripHtml(award.leiras);
  const clickable = Boolean(href);

  const content = (
    <>
      <div className="flex items-start justify-between gap-2">
        <span className="font-slab text-lg font-bold leading-none text-brand-primary">
          {award.ev ?? '—'}
        </span>
        {award.dijazasTipusaNev && (
          <Badge variant="category" size="sm" className={cn('shrink-0', typeChip.chip)}>
            {award.dijazasTipusaNev}
          </Badge>
        )}
      </div>

      <Heading as="h3" variant="cardTitle" tone="strong" className="mt-2">
        {award.nev}
      </Heading>

      {description && (
        <Text as="p" variant="bodySm" tone="muted" className="mt-1">
          {description}
        </Text>
      )}

      {clickable && viewLabel && (
        <Text
          as="span"
          variant="meta"
          tone="soft"
          className="mt-2 inline-flex items-center gap-1 transition-colors group-hover:text-brand-primary"
        >
          {viewLabel}
          <MdArrowOutward className="text-xs" />
        </Text>
      )}
    </>
  );

  const baseClass = cn(
    'flex h-full flex-col border border-brand-primary/10 border-l-[3px] bg-white p-3 shadow-sm',
    typeChip.accent
  );

  if (href) {
    return (
      <Link href={href} className={cn(baseClass, 'group transition-colors', typeChip.hover)}>
        {content}
      </Link>
    );
  }

  return <div className={baseClass}>{content}</div>;
}