import React, { useMemo } from 'react';

import { useSearchParams } from 'next/navigation';

import { FaYoutube } from 'react-icons/fa';

import Highlight from '@/components/Highlight';
import YouTubeVideo from '@/components/YoutubeVideo';
import { cn } from '@/lib/utils';
import { getCreationDateLabel, getCreationHref } from '@/utils/creationHelpers';
import { getSearchUrl } from '@/utils/generalUtils';

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

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

interface CreationVideoCardProps {
  data: CreationListItem;
  vertical?: boolean;
  type?: 'creation' | 'life' | 'news';
  rowContainsImage?: boolean; // temp function duplication in row component
  showCreatorProfession?: boolean;
}

const CreationVideoCard: React.FC<CreationVideoCardProps> = ({
  data,
  vertical,
  showCreatorProfession,
}) => {
  const descriptionHeight =
    data.cardType === 'creation'
      ? 'h-[74px] sm:h-[88px]'
      : data.cardType === 'news'
        ? 'h-[44px] sm:h-[52px]'
        : 'h-[106px] sm:h-[114px]';

  const videoId = data.hivatkozasLista?.[0]?.hivatkozas ?? '';

  return (
    <div className={cn('flex flex-col justify-start overflow-hidden ', vertical ? '' : 'flex-1')}>
      {videoId.length > 0 && (
        <div className="w-full bg-image-load flex">
          <div className=" w-full h-full flex items-center justify-center object-cover">
            <YouTubeVideo id={videoId} title={data.nev || ''} backgroundSize="cover" />
          </div>
        </div>
      )}

      <div
        className={cn(
          'mt-1 flex h-full w-full flex-col gap-0.5 overflow-hidden',
          descriptionHeight
        )}
      >
        <Link
          className={cn('flex min-w-0 flex-col gap-0.5', data.id ? '' : 'pointer-events-none')}
          href={getCreationHref(data) as never}
        >
          <GenericCellContent data={data} />
        </Link>

        {data.cardType !== 'life' && (
          <div className="flex min-w-0 flex-col gap-0.5">
            {data.alkotoAzonosito && (
              <Link
                href={{
                  pathname: '/alkoto/[id]',
                  params: { id: data.alkotoAzonosito },
                }}
                className="line-clamp-1 text-[11px] font-semibold uppercase tracking-[0.07em] leading-[1.15] text-[#151720]/90 hover:underline sm:text-xs"
              >
                {data.megjelenitendoNev}
                {showCreatorProfession && data.szakma ? (
                  <span className="normal-case font-medium tracking-normal text-[#151720]/60">
                    {' '}
                    {data.szakma}
                  </span>
                ) : null}
              </Link>
            )}
            {data.telepules && (
              <Link
                href={
                  (getSearchUrl(data.telepules, 'alkotas', null, data.telepules, 'telepules') ||
                    '') as never
                }
              >
                <div className="line-clamp-1 text-[11px] leading-[1.15] text-[#151720]/60 hover:underline sm:text-xs">
                  {data.telepules}
                </div>
              </Link>
            )}
          </div>
        )}
      </div>
    </div>
  );
};

interface GenericCellContentProps {
  data: CreationListItem;
}

function GenericCellContent(props: GenericCellContentProps) {
  const searchParams = useSearchParams();
  const kifejezes = (searchParams.get('kifejezes') || '').trim();
  const queries = useMemo(
    () => (kifejezes ? kifejezes.split(/\s+/).filter(Boolean) : []),
    [kifejezes]
  );
  const hasQuery = queries.length > 0;

  return (
    <>
      {getCreationDateLabel(props.data) && (
        <div className="ui-meta line-clamp-1 text-[11px] leading-[1.05] sm:text-xs">
          {getCreationDateLabel(props.data)}
        </div>
      )}

      {props.data.nev && (
        <div className="line-clamp-2 w-full text-[12px] leading-[1.2] text-[#151720] sm:text-[13px]">
          {props.data.hivatkozasLista && (
            <span className="mr-1 inline-block translate-y-[1px] align-text-bottom">
              <FaYoutube className="inline-block" size={14} color="#FF0033" title="youtube" />
            </span>
          )}

          {hasQuery ? (
            <Highlight text={props.data.nev} query={queries} />
          ) : (
            <span>{props.data.nev}</span>
          )}
        </div>
      )}
    </>
  );
}

export default CreationVideoCard;