import React, { useState } from 'react';

const sounds = [
  { id: 1, name: 'Airhorn', emoji: '📯', duration: '1.2s', category: 'effects' },
  { id: 2, name: 'Cricket', emoji: '🦗', duration: '2.0s', category: 'effects' },
  { id: 3, name: 'Sad Trombone', emoji: '📯', duration: '1.8s', category: 'effects' },
  { id: 4, name: 'Clap', emoji: '👏', duration: '0.5s', category: 'effects' },
  { id: 5, name: 'Dun Dun Dun', emoji: '🎵', duration: '1.5s', category: 'effects' },
  { id: 6, name: 'Wow', emoji: '😮', duration: '0.8s', category: 'voice' },
  { id: 7, name: 'Bruh', emoji: '😐', duration: '0.5s', category: 'voice' },
  { id: 8, name: "Let's Go", emoji: '🔥', duration: '0.7s', category: 'voice' },
  { id: 9, name: 'GG', emoji: '🎮', duration: '0.6s', category: 'voice' },
  { id: 10, name: 'Oof', emoji: '💀', duration: '0.4s', category: 'voice' },
  { id: 11, name: 'Windows Error', emoji: '💻', duration: '0.8s', category: 'memes' },
  { id: 12, name: 'Vine Boom', emoji: '💥', duration: '0.6s', category: 'memes' },
];

export default function Soundboard({ onPlay, onClose }) {
  const [search, setSearch] = useState('');
  const [activeCategory, setActiveCategory] = useState('all');
  const [volume, setVolume] = useState(50);
  const [playing, setPlaying] = useState(null);
  const [favorites, setFavorites] = useState([1, 8, 12]);

  const categories = [
    { id: 'all', label: 'All' },
    { id: 'favorites', label: '⭐ Favorites' },
    { id: 'effects', label: 'Effects' },
    { id: 'voice', label: 'Voice' },
    { id: 'memes', label: 'Memes' },
  ];

  const filteredSounds = sounds.filter(s => {
    const matchesSearch = !search || s.name.toLowerCase().includes(search.toLowerCase());
    const matchesCategory = activeCategory === 'all' || 
      (activeCategory === 'favorites' ? favorites.includes(s.id) : s.category === activeCategory);
    return matchesSearch && matchesCategory;
  });

  const handlePlay = (sound) => {
    setPlaying(sound.id);
    onPlay?.(sound);
    // Simulate sound duration
    setTimeout(() => setPlaying(null), parseFloat(sound.duration) * 1000);
  };

  const toggleFavorite = (e, soundId) => {
    e.stopPropagation();
    setFavorites(prev => 
      prev.includes(soundId) 
        ? prev.filter(id => id !== soundId)
        : [...prev, soundId]
    );
  };

  return (
    <div className="soundboard">
      <div className="soundboard-header">
        <h3>Soundboard</h3>
        <button className="soundboard-close" onClick={onClose}>✕</button>
      </div>

      <div className="soundboard-search">
        <span className="search-icon">🔍</span>
        <input
          type="text"
          placeholder="Search sounds"
          value={search}
          onChange={(e) => setSearch(e.target.value)}
        />
      </div>

      <div className="soundboard-categories">
        {categories.map(cat => (
          <button
            key={cat.id}
            className={`sb-category ${activeCategory === cat.id ? 'active' : ''}`}
            onClick={() => setActiveCategory(cat.id)}
          >
            {cat.label}
          </button>
        ))}
      </div>

      <div className="soundboard-grid">
        {filteredSounds.map(sound => (
          <button
            key={sound.id}
            className={`sound-btn ${playing === sound.id ? 'playing' : ''}`}
            onClick={() => handlePlay(sound)}
          >
            <span className="sound-emoji">{sound.emoji}</span>
            <span className="sound-name">{sound.name}</span>
            <span className="sound-duration">{sound.duration}</span>
            <button 
              className={`sound-favorite ${favorites.includes(sound.id) ? 'active' : ''}`}
              onClick={(e) => toggleFavorite(e, sound.id)}
            >
              {favorites.includes(sound.id) ? '⭐' : '☆'}
            </button>
            {playing === sound.id && <div className="sound-playing-indicator" />}
          </button>
        ))}
      </div>

      {filteredSounds.length === 0 && (
        <div className="soundboard-empty">
          <span>No sounds found</span>
        </div>
      )}

      <div className="soundboard-footer">
        <div className="volume-control">
          <span className="volume-icon">🔊</span>
          <input
            type="range"
            min="0"
            max="100"
            value={volume}
            onChange={(e) => setVolume(Number(e.target.value))}
            className="volume-slider"
          />
          <span className="volume-value">{volume}%</span>
        </div>
        <button className="upload-sound-btn">+ Upload Sound</button>
      </div>
    </div>
  );
}
