'use client';

import React from 'react';
import { twMerge } from 'tailwind-merge';

import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '@/components/button/Button';
import ImageWithFallback from '@/components/image/ImageWithFallback';
import Link from '@/components/link/Link';
import SpinnerSVG from '@/components/svg/SpinnerSVG';
import { RemixIcon } from '@/icons';
import { Clip } from '@/state/clipStore';
import { getClipTitle } from '@/utils/clip';
import { SMALL_IMAGE } from '@/utils/constants';

interface RemixContestComponentProps {
  baseClip: Clip | null;
  onRemixClick: () => void;
  className?: string;
  isLoading?: boolean;
}

const RemixContestComponent: React.FC<RemixContestComponentProps> = ({
  baseClip,
  onRemixClick,
  className,
  isLoading = false,
}) => {
  if (isLoading) {
    return (
      <div
        className={twMerge(
          'flex items-center justify-center gap-4 rounded-xl bg-background-tertiary p-4 pl-2',
          className
        )}
      >
        <SpinnerSVG className='h-8 w-8' />
        <div className='text-white/80'>Loading contest base clip...</div>
      </div>
    );
  }

  if (!baseClip) return null;

  const title = getClipTitle(baseClip);

  return (
    <div
      className={twMerge(
        'flex items-center justify-between gap-4 rounded-xl bg-background-tertiary p-4 pl-2',
        className
      )}
    >
      <div className='flex min-w-0 flex-1 flex-col gap-3'>
        <div className='flex items-center justify-between gap-4'>
          <div className='flex min-w-0 flex-1 items-center gap-2'>
            <div className='relative h-14 w-8 shrink-0 overflow-hidden rounded-md'>
              <ImageWithFallback
                className='block h-full w-full object-cover'
                alt='Contest Base Clip Cover'
                imageSize={SMALL_IMAGE}
                src={baseClip.image_url}
              />
            </div>
            <div className='flex min-w-0 flex-1 flex-col'>
              <div className='truncate text-sm font-medium text-accent-brand uppercase'>
                REMIX CONTEST
              </div>
              <Link
                href={`/song/${baseClip.id}`}
                className='truncate text-sm leading-tight text-white hover:underline'
                title={title || undefined}
              >
                {title}
              </Link>
              <div className='flex min-w-0 items-center gap-1'>
                <div className='relative h-4 w-4 shrink-0 overflow-hidden rounded-full'>
                  <ImageWithFallback
                    className='block h-full w-full object-cover'
                    alt='Artist Avatar'
                    imageSize={SMALL_IMAGE}
                    src={baseClip.avatar_image_url}
                  />
                </div>
                <Link
                  href={`/@${baseClip.handle}`}
                  className='truncate text-sm text-white/80 hover:underline'
                  title={baseClip.display_name || undefined}
                >
                  {baseClip.display_name}
                </Link>
              </div>
            </div>
          </div>
          <Button
            variant={ButtonVariant.Standard}
            size={ButtonSize.Small}
            shape={ButtonShape.Pill}
            icon={RemixIcon}
            iconClassName='text-accent-brand'
            onClick={onRemixClick}
            className='shrink-0 border-none bg-gray-300 py-4 text-sm text-white backdrop-blur-sm hover:bg-gray-400'
          >
            Remix & Enter
          </Button>
        </div>
      </div>
    </div>
  );
};

export default RemixContestComponent;