/* eslint jsx-a11y/click-events-have-key-events: warn */

/* eslint jsx-a11y/no-static-element-interactions: warn */
import { useAuth, useClerk } from '@clerk/nextjs';
import clsx from 'clsx';
import { observer } from 'mobx-react-lite';
import { usePathname } from 'next/navigation';
import React, { useMemo, useState } from 'react';

import { useStores } from '@/app/(root)/AppProviders';
import Link from '@/components/link/Link';
import { SongMenuWithContext } from '@/components/song/newActions/SongMenuWithContext';
import MusicStyleTags from '@/components/tag/MusicStyleTags';
import { ThumbsUpIcon } from '@/icons';
import { CommentIcon, PlayIcon } from '@/icons';
import { Clip, Playlist, isLiked as getIsLiked } from '@/state/clipStore';
import { NO_STYLE_FALLBACK } from '@/utils/constants';
import { getClerkSignInRedirectProps, getCountString } from '@/utils/utils';

import { tagsToArray } from '../song/songUtils';
import ArtistTag, { Props as ArtistTagProps } from '../tag/ArtistTag';

interface MetadataBlockProps {
  clip?: Clip;
  playlist?: Playlist;
  title: string;
  subtitle: string;
  link?: string;
  isClipMetadata?: boolean;
  artistTagProps?: ArtistTagProps;
  isSongCard?: boolean;
  isPlaylistCard?: boolean;
  showPlaylistStats?: boolean;
  withStyleLinks?: boolean;
  carouselSectionName?: string;
  pinnedToProfile?: boolean;
  playCount?: number | null;
  commentCount?: number | null;
  isLiked?: boolean;
  visibleStats?: boolean;
  hideAvatar?: boolean;
  onCommentClick?: React.MouseEventHandler;
  onPlay?: React.MouseEventHandler;
  onLike?: (params: { isLiked: boolean }) => void;
  onTitleClick?: () => void;
  onArtistClick?: () => void;
}

const MetadataBlock: React.FC<MetadataBlockProps> = observer(
  ({
    clip,
    playlist,
    title,
    link,
    subtitle,
    isClipMetadata = false,
    artistTagProps,
    isSongCard,
    isPlaylistCard,
    showPlaylistStats = false,
    withStyleLinks = true,
    carouselSectionName,
    playCount,
    commentCount,
    visibleStats = true,
    hideAvatar = false,
    onCommentClick,
    onPlay,
    onLike,
    onTitleClick,
    onArtistClick,
  }) => {
    const { isSignedIn } = useAuth();
    const clerk = useClerk();
    const pathname = usePathname();
    const { clips: clipStore } = useStores();

    // Local state for optimistic updates
    const [currentUpvoteCount, setCurrentUpvoteCount] = useState(
      clip?.upvote_count || 0
    );
    const currentIsLiked = clip ? getIsLiked(clip) : false;

    const handleLikeClick = (e: React.MouseEvent) => {
      e.stopPropagation();
      e.preventDefault();

      if (!clip) return;

      const newStatus = !currentIsLiked;
      const clerkRedirectProps = getClerkSignInRedirectProps(pathname);

      if (!isSignedIn) {
        clerk.openSignIn({
          withSignUp: true,
          ...clerkRedirectProps,
        });
      } else {
        if (clipStore.isUpdatingClipReaction) {
          return;
        }

        // Call the original onLike handler for logging
        if (onLike) {
          onLike({ isLiked: newStatus });
        }

        // Update the clip store
        clipStore.likeClip(clip.id, newStatus);

        // Optimistic local update
        setCurrentUpvoteCount((prevCount: number) =>
          Math.max(prevCount + (newStatus ? 1 : -1), 0)
        );
      }
    };

    const styleTags = useMemo(() => {
      return tagsToArray(subtitle);
    }, [subtitle]);

    return (
      <div className='flex w-full flex-col'>
        <div
          className={clsx(
            'line-clamp-1 w-full cursor-pointer font-sans text-base font-medium text-foreground-primary hover:underline',
            {
              'font-500 text-md leading-[24px] font-normal': isSongCard,
              'flex items-center justify-between': isSongCard && clip,
            }
          )}
        >
          <div className='min-w-0 flex-1 overflow-hidden text-ellipsis'>
            {!!link ? (
              <Link
                href={link}
                title={title}
                className='block overflow-hidden text-ellipsis whitespace-nowrap'
                onClick={() => {
                  onTitleClick?.();
                }}
              >
                {title}
              </Link>
            ) : (
              <div className='overflow-hidden text-ellipsis whitespace-nowrap'>
                {title}
              </div>
            )}
          </div>
          {isSongCard && clip && (
            <SongMenuWithContext
              clip={clip}
              sectionName={carouselSectionName}
            />
          )}
        </div>
        {subtitle && !isPlaylistCard ? (
          isClipMetadata ? (
            <div>
              {subtitle === NO_STYLE_FALLBACK && clip?.id ? null : (
                <div>
                  <MusicStyleTags
                    className={clsx(
                      'mb-1 line-clamp-1 flex-nowrap text-foreground-secondary',
                      {
                        'text-[14px] leading-[20px] font-normal': isSongCard,
                        'text-sm': !isSongCard,
                      }
                    )}
                    tags={styleTags}
                    renderTag={withStyleLinks ? undefined : null}
                    title={subtitle}
                  />
                </div>
              )}
              {isSongCard && visibleStats && (
                <div className='mt-1 flex items-center gap-1 text-[12px] text-[#8B8785]'>
                  <div
                    className='flex cursor-pointer items-center gap-[2px] hover:opacity-80'
                    onClick={(e) => {
                      e.stopPropagation();
                      e.preventDefault();
                      onPlay?.(e);
                    }}
                  >
                    <PlayIcon className='h-[12px] w-[12px]' />
                    <span className='text-[12px] leading-4 font-medium font-normal'>
                      {getCountString(playCount || 0)}
                    </span>
                  </div>
                  <div
                    className='flex cursor-pointer items-center gap-[2px] hover:opacity-80'
                    onClick={handleLikeClick}
                  >
                    <ThumbsUpIcon
                      className={clsx(
                        'h-[12px] w-[12px]',
                        currentIsLiked ? 'text-foreground-primary' : ''
                      )}
                    />
                    <span
                      className={clsx(
                        'text-[12px] leading-4 font-medium font-normal',
                        currentIsLiked ? 'text-foreground-primary' : ''
                      )}
                    >
                      {getCountString(currentUpvoteCount)}
                    </span>
                  </div>

                  {commentCount !== undefined && (
                    <div
                      className='flex cursor-pointer items-center gap-[2px] hover:opacity-80'
                      onClick={(e) => {
                        e.stopPropagation();
                        e.preventDefault();
                        onCommentClick?.(e);
                      }}
                    >
                      <CommentIcon className='h-[12px] w-[12px]' />
                      <span className='text-[12px] leading-4 font-medium font-normal'>
                        {getCountString(commentCount || 0)}
                      </span>
                    </div>
                  )}
                </div>
              )}
            </div>
          ) : (
            subtitle
          )
        ) : null}
        {isPlaylistCard && showPlaylistStats && (
          <span
            className={clsx(
              'font-sans',
              hideAvatar
                ? 'mt-[2px] text-[14px] leading-5 font-normal text-foreground-secondary'
                : '-mt-1 text-[14px] text-foreground-primary'
            )}
          >
            {(playlist?.num_total_results || 0) >= 500
              ? '500+ songs'
              : `${playlist?.num_total_results || 0} ${(playlist?.num_total_results || 0) === 1 ? 'song' : 'songs'}`}
          </span>
        )}
        <div className='mt-1 flex w-full items-center justify-between'>
          {artistTagProps && !hideAvatar && (
            <ArtistTag
              {...artistTagProps}
              {...((clip?.persona?.is_owned || clip?.persona?.is_public) &&
              !clip?.persona?.is_trashed
                ? {
                    personaId: clip?.persona.id || undefined,
                    personaImageUrl: clip?.persona.image_s3_id || undefined,
                    personaDisplayName: clip?.persona.name || undefined,
                  }
                : {})}
              onClick={() => {
                onArtistClick?.();
              }}
            />
          )}
        </div>
      </div>
    );
  }
);

export default MetadataBlock;