import React from 'react';

import Image from 'next/image';

import { format, isSameDay } from 'date-fns';
import { enUS, hu } from 'date-fns/locale';
import { MdChevronRight } from 'react-icons/md';

import { cn } from '@/lib/utils';
import { getEventCultTypeLabel, toBudapestDate } from '@/utils/eventHelpers';
import { getFullSizeImageByKey } from '@/utils/images';

import { Event } from '@/types/Events';

import { getCategoryColors } from '@/config/calendarCategories';
import { Link } from '@/i18n/navigation';

interface CompactEventLinkCardProps {
  event: Event;
  dateLabel: string;
  locale: string;
  className?: string;
  showCategoryBadge?: boolean;
  showChevron?: boolean;
  openInNewTab?: boolean;
  borderColorOverride?: string;
  disableLink?: boolean;
  imageVariant?: 'default' | 'avatarCircle';
  showImagePlaceholder?: boolean;
  hrefOverride?: React.ComponentProps<typeof Link>['href'];
  titleClampLines?: 2 | 3;
}

const normalize = (value: string) =>
  value
    .normalize('NFD')
    .replace(/[\u0300-\u036f]/g, '')
    .toLowerCase()
    .trim();

const getCategoryColorToken = (rawLabel: string) => {
  const normalized = normalize(rawLabel);
  if (normalized.includes('koncert')) return 'concert';
  if (normalized.includes('kiallit')) return 'exhibition';
  if (normalized.includes('eload')) return 'performance';
  if (normalized.includes('egyeb') || normalized.includes('other')) return 'other';
  return rawLabel;
};

const hasDateRangeLabel = (value: string) => /\s[-\u2013]\s/.test(value);

const toSafeDate = (isoString: string): Date => {
  try {
    const converted = toBudapestDate(isoString);
    return Number.isNaN(converted.getTime()) ? new Date(isoString) : converted;
  } catch {
    return new Date(isoString);
  }
};

const CompactEventLinkCard: React.FC<CompactEventLinkCardProps> = ({
  event,
  dateLabel,
  locale,
  className,
  showCategoryBadge = true,
  showChevron = false,
  openInNewTab = false,
  borderColorOverride,
  disableLink = false,
  imageVariant = 'default',
  showImagePlaceholder = false,
  hrefOverride,
  titleClampLines = 2,
}) => {
  const isHu = locale.startsWith('hu');
  const city = event.intezmeny?.[0]?.intezmeny?.intezmenyCime?.city?.trim();
  const imageUrl = event.fokep?.key
    ? getFullSizeImageByKey(event.fokep.key)
    : event.kepLink || null;
  const categoryLabel =
    event.esemenyKategoria?.[0]?.nev ||
    event.category ||
    getEventCultTypeLabel(event) ||
    (isHu ? 'Egy\u00e9b' : 'Other');
  const { color: categoryColor } = getCategoryColors(getCategoryColorToken(categoryLabel));
  const borderColor = borderColorOverride || (showCategoryBadge ? categoryColor : undefined);
  const slug = event.url || event.id.toString();
  const href = hrefOverride || {
    pathname: '/program/[slug]',
    params: { slug },
  };
  const imageContainerClassName =
    imageVariant === 'avatarCircle'
      ? 'relative h-[84px] w-[84px] shrink-0 overflow-hidden rounded-full border border-[#151720]/12 bg-[#151720]/[0.04] sm:h-20 sm:w-20'
      : 'relative h-[84px] w-20 shrink-0 overflow-hidden bg-[#151720]/[0.04] sm:h-20 sm:w-28';
  const imageSizes =
    imageVariant === 'avatarCircle'
      ? '(min-width: 640px) 80px, 84px'
      : '(min-width: 1024px) 12vw, (min-width: 640px) 24vw, 96px';
  const cardClassName = cn(
    'ui-card ui-card-interactive group flex items-stretch gap-3 border-l-4 px-3 py-2 shadow-[0_20px_45px_-36px_rgba(20,25,40,0.3)]',
    className
  );
  const titleClampClass = titleClampLines === 3 ? 'line-clamp-3' : 'line-clamp-2';
  const endDateLabel = (() => {
    if (!event.vege) return null;

    const start = toSafeDate(event.kezdete);
    const end = toSafeDate(event.vege);
    if (Number.isNaN(start.getTime()) || Number.isNaN(end.getTime())) return null;
    if (isSameDay(start, end)) return null;

    const dateLocale = isHu ? hu : enUS;
    return format(end, 'MMM d', { locale: dateLocale }).replace(/\.$/, '');
  })();
  const resolvedDateLabel =
    endDateLabel && !hasDateRangeLabel(dateLabel) ? `${dateLabel} - ${endDateLabel}` : dateLabel;
  const cardContent = (
    <>
      {(imageUrl || showImagePlaceholder) && (
        <div className={imageContainerClassName}>
          {imageUrl ? (
            <Image
              src={imageUrl}
              alt={event.nev || 'event'}
              fill
              className="object-cover"
              sizes={imageSizes}
            />
          ) : (
            <div className="h-full w-full bg-[#d6d8de]" aria-hidden />
          )}
        </div>
      )}

      <div className="min-w-0 flex-1">
        <div className="mb-1 flex flex-wrap items-center gap-2">
          <p className="ui-meta">{resolvedDateLabel}</p>
          {showCategoryBadge && (
            <span className="ui-chip text-white" style={{ backgroundColor: categoryColor }}>
              {categoryLabel}
            </span>
          )}
        </div>

        <h3 className={cn('ui-title-sm', titleClampClass)}>{event.nev}</h3>

        {city && <span className="ui-chip-outline mt-1">{city}</span>}
      </div>

      {showChevron && (
        <MdChevronRight
          size={22}
          className="shrink-0 self-center text-[#151720]/55 transition-transform group-hover:translate-x-0.5"
        />
      )}
    </>
  );

  if (disableLink) {
    return (
      <article className={cardClassName} style={borderColor ? { borderColor } : undefined}>
        {cardContent}
      </article>
    );
  }

  return (
    <Link
      href={href}
      target={openInNewTab ? '_blank' : undefined}
      rel={openInNewTab ? 'noreferrer' : undefined}
      className={cardClassName}
      style={borderColor ? { borderColor } : undefined}
    >
      {cardContent}
    </Link>
  );
};

export default CompactEventLinkCard;