import React from 'react';
import { Card } from '../ui/card';
import { Badge } from '../ui/badge';
import { Button } from '../ui/button';
import { Product } from '../../types';
import { Play, Pause, ShoppingCart, Star, Eye, Zap } from 'lucide-react';

interface ProductCardProps {
  product: Product;
  onAddToCart: (product: Product) => void;
  onClick: (product: Product) => void;
  onPreview: (productId: string) => void;
  isPlayingPreview: boolean;
}

export const ProductCard: React.FC<ProductCardProps> = ({
  product,
  onAddToCart,
  onClick,
  onPreview,
  isPlayingPreview,
}) => {
  return (
    <Card
      variant="default"
      className="group p-0 overflow-hidden border-transparent hover:border-kodo-cyan/50 transition-all duration-300 hover:shadow-neon-cyan/20 bg-kodo-graphite cursor-pointer"
      onClick={() => onClick(product)}
    >
      {/* Image & Overlay */}
      <div className="relative aspect-square overflow-hidden bg-black">
        <img
          src={product.coverUrl}
          className={`w-full h-full object-cover transition-transform duration-700 group-hover:scale-110 ${isPlayingPreview ? 'scale-110 blur-sm opacity-50' : ''}`}
          alt={product.title}
        />

        {product.isHot && (
          <div className="absolute top-2 left-2">
            <Badge
              label="TRENDING"
              variant="gold"
              icon={<Zap className="w-3 h-3" />}
            />
          </div>
        )}

        {/* Play Button Overlay */}
        <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
          <button
            onClick={(e) => {
              e.stopPropagation();
              onPreview(product.id);
            }}
            className="w-16 h-16 rounded-full bg-kodo-cyan text-black flex items-center justify-center hover:scale-110 transition-transform shadow-lg"
          >
            {isPlayingPreview ? (
              <Pause className="w-8 h-8 fill-current" />
            ) : (
              <Play className="w-8 h-8 fill-current ml-1" />
            )}
          </button>
        </div>

        {/* Audio Viz Simulation */}
        {isPlayingPreview && (
          <div className="absolute bottom-0 left-0 right-0 h-1/2 flex items-end justify-center gap-1 px-8 pb-8">
            {[...Array(12)].map((_, i) => (
              <div
                key={i}
                className="w-2 bg-white rounded-t animate-pulse"
                style={{
                  height: `${Math.random() * 80 + 20}%`,
                  animationDuration: '0.6s',
                }}
              ></div>
            ))}
          </div>
        )}
      </div>

      {/* Details */}
      <div className="p-5">
        <div className="flex justify-between items-start mb-2">
          <h3 className="font-bold text-white text-base truncate pr-2 group-hover:text-kodo-cyan transition-colors">
            {product.title}
          </h3>
          <div className="flex flex-col items-end">
            <span className="font-mono font-bold text-white">
              {product.currency === 'USD' ? '$' : 'Ξ'}
              {product.price}
            </span>
          </div>
        </div>

        <p className="text-gray-400 text-xs mb-4 flex items-center gap-1">
          by{' '}
          <span className="text-gray-300 hover:underline">
            {product.author}
          </span>
        </p>

        <div className="flex items-center gap-2 mb-4 text-xs text-kodo-gold">
          <Star className="w-3 h-3 fill-current" />
          <span className="font-bold">{product.rating}</span>
          <span className="text-gray-500">({product.reviewCount || 0})</span>
        </div>

        <div className="flex gap-2">
          <Button
            variant="primary"
            size="sm"
            className="flex-1"
            onClick={(e) => {
              e.stopPropagation();
              onAddToCart(product);
            }}
          >
            <ShoppingCart className="w-4 h-4 mr-2" /> ADD
          </Button>
          <Button
            variant="ghost"
            size="icon"
            className="border border-kodo-steel hover:bg-white/10"
            onClick={(e) => {
              e.stopPropagation();
              onClick(product);
            }}
          >
            <Eye className="w-4 h-4" />
          </Button>
        </div>
      </div>
    </Card>
  );
};
