import React from 'react';

import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '@/components/button/Button';
import SpinnerSVG from '@/components/svg/SpinnerSVG';
import { LockIcon, PauseIcon, PlayIcon } from '@/icons';

import { WaveformPreview } from './WaveformPreview';

interface SongPreviewCardControlsProps {
  audioUrl?: string;
  isPlaying: boolean;
  currentTime?: number;
  onPlayPause: () => void;
  onSignUp: () => void;
  logSignUpTriggered: (
    triggerType: 'auto_30s' | 'like' | 'dislike' | 'share' | 'manual',
    wasPlaying: boolean
  ) => void;
  disablePlayback?: boolean;
}

export const SongPreviewCardControls: React.FC<
  SongPreviewCardControlsProps
> = ({
  audioUrl,
  isPlaying,
  currentTime = 0,
  onPlayPause,
  onSignUp,
  logSignUpTriggered,
  disablePlayback = false,
}) => {
  return (
    <div className='flex max-w-[324px] items-center gap-3 md:ml-auto'>
      {/* Play/Pause Button or Spinner */}
      {!audioUrl && !disablePlayback ? (
        <div className='flex h-[36px] w-[36px] items-center justify-center rounded-full bg-white/5'>
          <SpinnerSVG className='h-5 w-5 text-foreground-primary' />
        </div>
      ) : (
        <Button
          onClick={onPlayPause}
          variant={ButtonVariant.Fog}
          size={ButtonSize.Medium}
          shape={ButtonShape.Pill}
          icon={disablePlayback ? PlayIcon : isPlaying ? PauseIcon : PlayIcon}
          aria-label={
            disablePlayback ? 'Sign up to play' : isPlaying ? 'Pause' : 'Play'
          }
          className='border-none'
        />
      )}

      <div className='relative flex flex-1 items-center overflow-hidden rounded-[6.375px] border border-white/15'>
        <WaveformPreview isPlaying={isPlaying} currentTime={currentTime} />
        <div
          role='button'
          tabIndex={0}
          onClick={() => {
            logSignUpTriggered('manual', isPlaying);
            onSignUp();
          }}
          onKeyDown={(e) => {
            if (e.key === 'Enter' || e.key === ' ') {
              e.preventDefault();
              logSignUpTriggered('manual', isPlaying);
              onSignUp();
            }
          }}
          aria-label='Sign up to unlock full song'
          className='absolute -top-px -right-px -bottom-px flex cursor-pointer items-center gap-2 rounded-r-[6.375px] border border-accent-pink bg-accent-pink/60 px-4 shadow-[0_2px_2px_0_rgba(0,0,0,0.25)] backdrop-blur-[2px]'
        >
          <LockIcon
            width={16}
            height={16}
            className='text-foreground-primary'
          />
          <span className='font-sans text-[14px] leading-[20px] font-medium tracking-[0.28px] text-foreground-primary'>
            Sign up
          </span>
        </div>
      </div>
    </div>
  );
};