import { motion } from 'framer-motion';
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';

export interface SongPreviewCardProps {
  clipId?: string;
  title: string;
  imageUrl?: string;
  styles: string;
  isPlaying: boolean;
  currentTime?: number;
  audioUrl?: string;
  onPlayPause: () => void;
  onLike: () => void;
  onDislike: () => void;
  onShare: () => void;
  onSignUp: () => void;
  signUpToListen: string;
  logSignUpTriggered: (
    triggerType: 'auto_30s' | 'like' | 'dislike' | 'share' | 'manual',
    wasPlaying: boolean
  ) => void;
}

export const SongPreviewCard: React.FC<SongPreviewCardProps> = ({
  title,
  imageUrl,
  styles,
  isPlaying,
  currentTime,
  audioUrl,
  onPlayPause,
  onLike,
  onDislike,
  onShare,
  onSignUp,
  logSignUpTriggered,
}) => {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.95 }}
      animate={{ opacity: 1, scale: 1 }}
      exit={{ opacity: 0, scale: 0.95 }}
      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={imageUrl || FALLBACK_AURA_URL}
              alt={title}
              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'>
              <h3 className='text-left font-sans text-[16px] leading-[24px] font-medium tracking-[0.32px] text-foreground-primary'>
                {title}
              </h3>
              <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 */}
            <p className='text-left font-sans text-[12px] leading-[16px] font-normal tracking-[0.24px] text-foreground-secondary'>
              {styles}
            </p>

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

        {/* Right Section: Waveform and Controls */}
        <SongPreviewCardControls
          audioUrl={audioUrl}
          isPlaying={isPlaying}
          currentTime={currentTime}
          onPlayPause={onPlayPause}
          onSignUp={onSignUp}
          logSignUpTriggered={logSignUpTriggered}
        />
      </div>
    </motion.div>
  );
};