/**
 * VEZA V5 ULTRA - TRACK CARD
 * Beautiful animated track card with glassmorphism and interactions
 */

import { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { Play, Pause, Heart, MoreVertical, Plus, Share2 } from 'lucide-react';
import { cn } from '@/lib/utils';

interface Track {
  id: string;
  title: string;
  artist: string;
  album?: string;
  duration: number;
  artwork?: string;
  liked?: boolean;
}

interface TrackCardProps {
  track: Track;
  isPlaying?: boolean;
  onPlayPause?: () => void;
  onLike?: () => void;
  onAddToQueue?: () => void;
  onShare?: () => void;
  variant?: 'default' | 'compact' | 'large';
  className?: string;
}

export function TrackCard({
  track,
  isPlaying = false,
  onPlayPause,
  onLike,
  onAddToQueue,
  onShare,
  variant = 'default',
  className = '',
}: TrackCardProps) {
  const [isHovered, setIsHovered] = useState(false);
  const [showMenu, setShowMenu] = useState(false);

  const formatDuration = (seconds: number): string => {
    const mins = Math.floor(seconds / 60);
    const secs = seconds % 60;
    return `${mins}:${secs.toString().padStart(2, '0')}`;
  };

  const sizes = {
    compact: 'h-16',
    default: 'h-24',
    large: 'h-32',
  };

  const artworkSizes = {
    compact: 'w-16 h-16',
    default: 'w-24 h-24',
    large: 'w-32 h-32',
  };

  return (
    <motion.div
      className={cn(
        'group relative overflow-hidden rounded-2xl glass transition-smooth',
        'hover:shadow-2xl hover:scale-[1.02] cursor-pointer',
        sizes[variant],
        className
      )}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => {
        setIsHovered(false);
        setShowMenu(false);
      }}
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      whileHover={{ y: -4 }}
      transition={{ duration: 0.2 }}
    >
      {/* Shimmer effect */}
      <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/5 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000" />

      {/* Waveform background (animated) */}
      <AnimatePresence>
        {isPlaying && (
          <motion.div
            className="absolute inset-0 opacity-20"
            initial={{ opacity: 0 }}
            animate={{ opacity: 0.2 }}
            exit={{ opacity: 0 }}
          >
            <div className="flex items-end justify-center h-full gap-1 px-4">
              {Array.from({ length: 40 }).map((_, i) => (
                <motion.div
                  key={i}
                  className="waveform-bar flex-1 bg-gradient-brand rounded-full"
                  initial={{ height: '20%' }}
                  animate={{
                    height: ['20%', '80%', '20%'],
                  }}
                  transition={{
                    duration: 1,
                    repeat: Infinity,
                    delay: i * 0.05,
                  }}
                />
              ))}
            </div>
          </motion.div>
        )}
      </AnimatePresence>

      <div className="relative flex items-center h-full p-3 gap-3">
        {/* Artwork */}
        <div className={cn('relative flex-shrink-0 rounded-xl overflow-hidden', artworkSizes[variant])}>
          {track.artwork ? (
            <img
              src={track.artwork}
              alt={track.title}
              className="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-700"
            />
          ) : (
            <div className="w-full h-full gradient-mesh" />
          )}

          {/* Overlay gradient */}
          <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent opacity-0 group-hover:opacity-100 transition-opacity" />

          {/* Play/Pause button overlay */}
          <AnimatePresence>
            {isHovered && (
              <motion.button
                onClick={onPlayPause}
                className="absolute inset-0 flex items-center justify-center"
                initial={{ opacity: 0, scale: 0.8 }}
                animate={{ opacity: 1, scale: 1 }}
                exit={{ opacity: 0, scale: 0.8 }}
                whileHover={{ scale: 1.1 }}
                whileTap={{ scale: 0.95 }}
              >
                <div className="w-12 h-12 rounded-full gradient-brand flex items-center justify-center shadow-2xl">
                  {isPlaying ? (
                    <Pause className="w-6 h-6 text-white fill-white" />
                  ) : (
                    <Play className="w-6 h-6 text-white fill-white ml-1" />
                  )}
                </div>
              </motion.button>
            )}
          </AnimatePresence>
        </div>

        {/* Track info */}
        <div className="flex-1 min-w-0 relative z-10">
          <h3 className="font-semibold text-foreground truncate group-hover:text-gradient-aurora transition-all">
            {track.title}
          </h3>
          <p className="text-sm text-muted-foreground truncate">
            {track.artist}
          </p>
          {variant === 'large' && track.album && (
            <p className="text-xs text-muted-foreground/60 truncate mt-1">
              {track.album}
            </p>
          )}
        </div>

        {/* Duration */}
        <div className="flex-shrink-0 text-sm text-muted-foreground">
          {formatDuration(track.duration)}
        </div>

        {/* Actions */}
        <div className="flex items-center gap-2">
          {/* Like button */}
          <motion.button
            onClick={onLike}
            className={cn(
              'p-2 rounded-lg transition-smooth',
              'hover:bg-white/10 hover-scale',
              track.liked && 'text-red-500'
            )}
            whileHover={{ scale: 1.1 }}
            whileTap={{ scale: 0.9 }}
          >
            <Heart
              className={cn('w-5 h-5', track.liked && 'fill-current')}
            />
          </motion.button>

          {/* More menu */}
          <div className="relative">
            <motion.button
              onClick={() => setShowMenu(!showMenu)}
              className="p-2 rounded-lg hover:bg-white/10 transition-smooth hover-scale"
              whileHover={{ scale: 1.1 }}
              whileTap={{ scale: 0.9 }}
            >
              <MoreVertical className="w-5 h-5" />
            </motion.button>

            {/* Dropdown menu */}
            <AnimatePresence>
              {showMenu && (
                <motion.div
                  className="absolute right-0 top-full mt-2 glass-strong rounded-xl shadow-2xl overflow-hidden border border-white/10 min-w-[200px] z-50"
                  initial={{ opacity: 0, scale: 0.95, y: -10 }}
                  animate={{ opacity: 1, scale: 1, y: 0 }}
                  exit={{ opacity: 0, scale: 0.95, y: -10 }}
                  transition={{ duration: 0.15 }}
                >
                  <button
                    onClick={() => {
                      onAddToQueue?.();
                      setShowMenu(false);
                    }}
                    className="w-full flex items-center gap-3 px-4 py-3 hover:bg-white/10 transition-smooth text-left"
                  >
                    <Plus className="w-4 h-4" />
                    <span>Add to Queue</span>
                  </button>
                  <button
                    onClick={() => {
                      onShare?.();
                      setShowMenu(false);
                    }}
                    className="w-full flex items-center gap-3 px-4 py-3 hover:bg-white/10 transition-smooth text-left"
                  >
                    <Share2 className="w-4 h-4" />
                    <span>Share</span>
                  </button>
                </motion.div>
              )}
            </AnimatePresence>
          </div>
        </div>
      </div>

      {/* Glow effect on hover */}
      {isHovered && (
        <div className="absolute inset-0 rounded-2xl animate-pulse-slow pointer-events-none"
          style={{
            boxShadow: '0 0 40px rgba(102, 126, 234, 0.3)',
          }}
        />
      )}
    </motion.div>
  );
}

// Skeleton loader
export function TrackCardSkeleton({ variant = 'default' }: { variant?: 'default' | 'compact' | 'large' }) {
  const sizes = {
    compact: 'h-16',
    default: 'h-24',
    large: 'h-32',
  };

  return (
    <div className={cn('rounded-2xl glass overflow-hidden', sizes[variant])}>
      <div className="flex items-center h-full p-3 gap-3">
        <div className="skeleton rounded-xl" style={{
          width: variant === 'compact' ? '4rem' : variant === 'large' ? '8rem' : '6rem',
          height: variant === 'compact' ? '4rem' : variant === 'large' ? '8rem' : '6rem',
        }} />
        <div className="flex-1 space-y-2">
          <div className="skeleton h-4 w-3/4 rounded" />
          <div className="skeleton h-3 w-1/2 rounded" />
        </div>
        <div className="skeleton h-4 w-12 rounded" />
      </div>
    </div>
  );
}

