import React from 'react';

import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '@/components/button/Button';
import { ShareArrowIcon, ThumbsDownIcon, ThumbsUpIcon } from '@/icons';
import { FALLBACK_AURA_URL } from '@/utils/constants';

import { SongPreviewCardControls } from './SongPreviewCardControls';

interface SongPreviewCardSignUpRequiredProps {
  onSignUp: () => void;
  logSignUpTriggered: (
    triggerType: 'auto_30s' | 'like' | 'dislike' | 'share' | 'manual',
    wasPlaying: boolean
  ) => void;
}

export const SongPreviewCardSignUpRequired: React.FC<
  SongPreviewCardSignUpRequiredProps
> = ({ onSignUp, logSignUpTriggered }) => {
  const handlePlayClick = () => {
    logSignUpTriggered('manual', false);
    onSignUp();
  };

  const handleLike = () => {
    logSignUpTriggered('like', false);
    onSignUp();
  };

  const handleDislike = () => {
    logSignUpTriggered('dislike', false);
    onSignUp();
  };

  const handleShare = () => {
    logSignUpTriggered('share', false);
    onSignUp();
  };

  return (
    <div className='w-fit max-w-[984px] overflow-hidden rounded-[16px] border border-white/10 p-4 backdrop-blur-[50px] md:w-full'>
      <div className='flex flex-col gap-4 md:flex-row md:gap-6'>
        {/* Left Section: Album Art + Content */}
        <div className='flex flex-col gap-4 md:flex-row md:items-start'>
          {/* Album Art */}
          <div className='relative h-[86px] w-[67px] flex-shrink-0 overflow-hidden rounded-[12px] border-[0.5px] border-white/10'>
            <img
              src={FALLBACK_AURA_URL}
              alt='Your Song'
              className='h-full w-full bg-gray-300 object-cover'
            />
          </div>

          {/* Content */}
          <div className='flex flex-col'>
            {/* Title and Badge */}
            <div className='flex items-center gap-2'>
              {/* Title Container with Blur */}
              <div className='relative h-[24px] w-[154px] overflow-hidden rounded-[8px] bg-white/[0.04]'>
                <h3 className='absolute inset-0 flex items-center text-left font-sans text-[16px] leading-[24px] font-medium tracking-[0.32px] text-foreground-primary blur-sm select-none'>
                  Your Preview Song
                </h3>
              </div>
              <span className='rounded-[34px] bg-accent-pink/10 px-2 py-1 font-sans text-[14px] font-medium text-accent-pink'>
                Preview
              </span>
            </div>

            {/* Styles Container with Blur */}
            <div className='relative mt-2 h-[16px] w-[102px] overflow-hidden rounded-[8px] bg-white/[0.04]'>
              <p className='absolute inset-0 flex items-center text-left font-sans text-[12px] leading-[16px] font-normal tracking-[0.24px] text-foreground-secondary blur-sm select-none'>
                your preview tags
              </p>
            </div>

            {/* Reaction Buttons */}
            <div className='mt-3 flex items-center gap-3'>
              <Button
                onClick={handleLike}
                variant={ButtonVariant.LightGlass}
                size={ButtonSize.Small}
                shape={ButtonShape.Pill}
                icon={ThumbsUpIcon}
                aria-label='Like'
              />
              <Button
                onClick={handleDislike}
                variant={ButtonVariant.LightGlass}
                size={ButtonSize.Small}
                shape={ButtonShape.Pill}
                icon={ThumbsDownIcon}
                aria-label='Dislike'
              />
              <Button
                onClick={handleShare}
                variant={ButtonVariant.LightGlass}
                size={ButtonSize.Small}
                shape={ButtonShape.Pill}
                icon={ShareArrowIcon}
                aria-label='Share'
              />
            </div>
          </div>
        </div>

        {/* Right Section: Waveform and Controls */}
        <SongPreviewCardControls
          isPlaying={false}
          onPlayPause={handlePlayClick}
          onSignUp={onSignUp}
          logSignUpTriggered={logSignUpTriggered}
          disablePlayback={true}
        />
      </div>
    </div>
  );
};