import { useMemo } from 'react';

import { useSearchParams } from 'next/navigation';

import { RiCrossFill } from 'react-icons/ri';

import Highlight from '@/components/Highlight';
import CreatorAvatar from '@/components/creators/CreatorAvatar';
import { cn } from '@/lib/utils';

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

type CreatorCardPathname = '/alkoto/[id]' | '/alkoto/[id]/muveszeti-halo';
type CreatorCardTone = 'default' | 'dark';

export interface CreatorCardData {
  alkotoAzonosito: string;
  nev?: string | null;
  szakma?: string | null;
  elhalalozasIdeje?: string | null;
  profilkep?: {
    key?: string | null;
  } | null;
}

interface CreatorCardProps {
  creator: CreatorCardData;
  pathname?: CreatorCardPathname;
  tone?: CreatorCardTone;
  className?: string;
}

const CreatorCard: React.FC<CreatorCardProps> = ({
  creator,
  pathname = '/alkoto/[id]',
  tone = 'default',
  className,
}) => {
  const { alkotoAzonosito, profilkep, elhalalozasIdeje, szakma } = creator;
  const creatorName = creator.nev || 'Alkotó';
  const profession = szakma?.trim() || null;
  const searchParams = useSearchParams();
  const kifejezes = (searchParams.get('kifejezes') || '').trim();
  const queries = useMemo(
    () => (kifejezes ? kifejezes.split(/\s+/).filter(Boolean) : []),
    [kifejezes]
  );
  const hasQuery = queries.length > 0;
  const isDarkTone = tone === 'dark';
  const compactNameLength = creatorName.replace(/[\s-]+/g, '').length;
  const nameSizeClass =
    compactNameLength >= 24
      ? 'text-[11.5px] sm:text-[12.5px] tracking-[-0.018em]'
      : compactNameLength >= 20
        ? 'text-[12px] sm:text-[13.25px] tracking-[-0.014em]'
        : 'text-[12.5px] sm:text-[14px] tracking-[-0.01em]';

  return (
    <Link
      href={{
        pathname,
        params: { id: alkotoAzonosito },
      }}
      className={cn(
        'ui-card ui-card-interactive group flex h-full w-full flex-col overflow-hidden !border !shadow-none duration-300 ease-out',
        isDarkTone
          ? '!border-transparent !bg-transparent hover:!border-mma-yellow'
          : '!border-transparent !bg-transparent hover:!border-mma-cyan',
        className
      )}
      aria-label={creatorName}
    >
      <div className="flex w-full justify-center pt-0.5">
        <div className="w-[92%]">
          <CreatorAvatar
            imageKey={profilkep?.key}
            name={creatorName}
            wrapperClassName=""
            imageClassName={cn(
              'border group-hover:scale-[1.02]',
              isDarkTone ? 'border-white/30' : 'border-white/55'
            )}
            width={360}
            height={360}
          />
        </div>
      </div>

      <div className="w-full px-0.5 pb-1 pt-2">
        <h3
          className={cn(
            'flex min-w-0 items-center justify-center gap-0.5 text-center font-semibold leading-tight',
            isDarkTone ? 'text-white/90' : 'text-[#151720]',
            nameSizeClass
          )}
          title={creatorName}
        >
          {elhalalozasIdeje ? (
            <RiCrossFill
              className={cn(
                'shrink-0 text-[11px]',
                isDarkTone ? 'text-white/65' : 'text-[#151720]/75'
              )}
            />
          ) : null}
          <span className="min-w-0 overflow-hidden whitespace-nowrap text-clip">
            {hasQuery ? <Highlight text={creatorName} query={queries} /> : creatorName}
          </span>
        </h3>

        <p
          className={cn(
            'ui-meta mt-1 truncate text-center text-[11.5px] leading-tight normal-case tracking-[0.06em] sm:text-[12.5px]',
            isDarkTone ? 'text-white/70' : 'text-[#151720]/85'
          )}
          title={profession || undefined}
        >
          {profession || '\u00A0'}
        </p>
      </div>
    </Link>
  );
};

export default CreatorCard;