import React, { useState } from 'react';
import { Music, Sparkles, Search, RefreshCw, Loader2, Play, SkipForward, Volume2 } from 'lucide-react';

export default function SongSuggestionSystem() {
  const [mood, setMood] = useState('');
  const [genre, setGenre] = useState('');
  const [similarArtist, setSimilarArtist] = useState('');
  const [songLikeFood, setSongLikeFood] = useState('');
  const [location, setLocation] = useState('');
  const [idealType, setIdealType] = useState('');
  const [suggestions, setSuggestions] = useState('');
  const [isGenerating, setIsGenerating] = useState(false);
  const [showResults, setShowResults] = useState(false);
  const [searchQuery, setSearchQuery] = useState('');

  const moods = [
    { value: 'happy', emoji: '😊', label: 'Happy' },
    { value: 'sad', emoji: '😢', label: 'Sad' },
    { value: 'energetic', emoji: '⚡', label: 'Energetic' },
    { value: 'relaxed', emoji: '😌', label: 'Relaxed' },
    { value: 'romantic', emoji: '💕', label: 'Romantic' },
    { value: 'motivated', emoji: '💪', label: 'Motivated' },
    { value: 'nostalgic', emoji: '🌅', label: 'Nostalgic' },
    { value: 'peaceful', emoji: '🕊️', label: 'Peaceful' }
  ];

  const genres = [
    'Pop', 'Rock', 'Hip Hop', 'R&B', 'Jazz', 'Electronic', 'Country', 
    'Classical', 'Indie', 'K-Pop', 'Latin', 'Blues', 'Reggae', 'Metal'
  ];

  const buildSearchQuery = () => {
    let query = `best ${mood || ''} ${genre || 'music'} songs 2025`;
    
    if (similarArtist) {
      query += ` ${similarArtist}`;
    }
    
    if (location) {
      query += ` ${location}`;
    }
    
    if (idealType) {
      query += ` ${idealType}`;
    }
    
    const foodDescriptors = {
      'spicy': 'intense bold',
      'sweet': 'melodic catchy',
      'savory': 'complex rich',
      'bitter': 'edgy alternative',
      'sour': 'experimental',
      'umami': 'soulful'
    };
    
    const foodLower = songLikeFood.toLowerCase().trim();
    if (foodDescriptors[foodLower]) {
      query += ` ${foodDescriptors[foodLower]}`;
    }
    
    return query;
  };

  const generateSuggestions = async () => {
    setIsGenerating(true);
    const query = buildSearchQuery();
    setSearchQuery(query);
    
    setSuggestions('SEARCH_TRIGGER');
    setShowResults(true);
    setIsGenerating(false);
  };

  const resetForm = () => {
    setMood('');
    setGenre('');
    setSimilarArtist('');
    setSongLikeFood('');
    setLocation('');
    setIdealType('');
    setShowResults(false);
    setSuggestions('');
    setSearchQuery('');
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 p-4 md:p-8">
      <div className="max-w-5xl mx-auto">
        {/* Music Player Header */}
        <div className="bg-gradient-to-r from-purple-600 to-pink-600 rounded-t-3xl p-6 shadow-2xl">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-4">
              <div className="bg-white/20 backdrop-blur-sm p-3 rounded-xl">
                <Music className="w-8 h-8 text-white" />
              </div>
              <div>
                <h1 className="text-3xl font-bold text-white">AI Music Finder</h1>
                <p className="text-purple-100 text-sm">Discover your perfect soundtrack</p>
              </div>
            </div>
            <div className="flex items-center gap-2">
              <Volume2 className="w-6 h-6 text-white/80" />
              <div className="w-24 h-1 bg-white/30 rounded-full">
                <div className="w-3/4 h-1 bg-white rounded-full"></div>
              </div>
            </div>
          </div>
        </div>

        {!showResults ? (
          <div className="bg-slate-800/95 backdrop-blur-xl rounded-b-3xl shadow-2xl border-t-2 border-purple-500/30">
            {/* Player Controls Bar */}
            <div className="flex items-center justify-between px-6 py-4 border-b border-slate-700/50">
              <div className="flex items-center gap-3">
                <Play className="w-5 h-5 text-purple-400" />
                <span className="text-purple-300 text-sm font-medium">Configure Your Search</span>
              </div>
              <div className="flex items-center gap-2">
                <div className="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
                <span className="text-slate-400 text-xs">Ready</span>
              </div>
            </div>

            <div className="p-6 md:p-8 space-y-6">
              {/* Mood Selection */}
              <div>
                <label className="block text-purple-300 text-sm font-semibold mb-3 flex items-center gap-2">
                  <span className="text-lg">🎭</span> Current Mood
                </label>
                <div className="grid grid-cols-4 md:grid-cols-8 gap-2">
                  {moods.map((m) => (
                    <button
                      key={m.value}
                      onClick={() => setMood(m.value)}
                      className={`p-3 rounded-xl transition-all ${
                        mood === m.value
                          ? 'bg-gradient-to-br from-purple-500 to-pink-500 text-white scale-105 shadow-lg'
                          : 'bg-slate-700/50 text-slate-300 hover:bg-slate-700'
                      }`}
                    >
                      <div className="text-2xl mb-1">{m.emoji}</div>
                      <div className="text-xs font-medium">{m.label}</div>
                    </button>
                  ))}
                </div>
              </div>

              <div className="grid md:grid-cols-2 gap-6">
                {/* Genre Selection */}
                <div>
                  <label className="block text-purple-300 text-sm font-semibold mb-3 flex items-center gap-2">
                    <span className="text-lg">🎸</span> Genre
                  </label>
                  <select
                    value={genre}
                    onChange={(e) => setGenre(e.target.value)}
                    className="w-full p-3 rounded-xl bg-slate-700/50 text-white border border-slate-600 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                  >
                    <option value="">All Genres</option>
                    {genres.map((g) => (
                      <option key={g} value={g}>{g}</option>
                    ))}
                  </select>
                </div>

                {/* Similar Artist */}
                <div>
                  <label className="block text-purple-300 text-sm font-semibold mb-3 flex items-center gap-2">
                    <span className="text-lg">👤</span> Similar to Artist
                  </label>
                  <input
                    type="text"
                    value={similarArtist}
                    onChange={(e) => setSimilarArtist(e.target.value)}
                    placeholder="Taylor Swift, Drake, BTS..."
                    className="w-full p-3 rounded-xl bg-slate-700/50 text-white placeholder-slate-400 border border-slate-600 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                  />
                </div>

                {/* Food Flavor */}
                <div>
                  <label className="block text-purple-300 text-sm font-semibold mb-3 flex items-center gap-2">
                    <span className="text-lg">🍽️</span> Song Flavor
                  </label>
                  <input
                    type="text"
                    value={songLikeFood}
                    onChange={(e) => setSongLikeFood(e.target.value)}
                    placeholder="spicy, sweet, savory..."
                    className="w-full p-3 rounded-xl bg-slate-700/50 text-white placeholder-slate-400 border border-slate-600 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                  />
                </div>

                {/* Location */}
                <div>
                  <label className="block text-purple-300 text-sm font-semibold mb-3 flex items-center gap-2">
                    <span className="text-lg">📍</span> Where are you?
                  </label>
                  <input
                    type="text"
                    value={location}
                    onChange={(e) => setLocation(e.target.value)}
                    placeholder="Tokyo, New York, Seoul..."
                    className="w-full p-3 rounded-xl bg-slate-700/50 text-white placeholder-slate-400 border border-slate-600 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                  />
                </div>
              </div>

              {/* Ideal Type */}
              <div>
                <label className="block text-purple-300 text-sm font-semibold mb-3 flex items-center gap-2">
                  <span className="text-lg">💭</span> What's your ideal type?
                </label>
                <input
                  type="text"
                  value={idealType}
                  onChange={(e) => setIdealType(e.target.value)}
                  placeholder="mysterious and deep, warm and caring, cool and confident..."
                  className="w-full p-3 rounded-xl bg-slate-700/50 text-white placeholder-slate-400 border border-slate-600 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                />
                <p className="text-slate-400 text-xs mt-2">Describe personality traits - we'll match songs with similar vibes</p>
              </div>

              {/* Search Button */}
              <button
                onClick={generateSuggestions}
                disabled={!mood || isGenerating}
                className="w-full bg-gradient-to-r from-purple-500 to-pink-500 text-white font-bold py-4 px-6 rounded-xl hover:from-purple-600 hover:to-pink-600 disabled:opacity-50 disabled:cursor-not-allowed transition-all transform hover:scale-[1.02] flex items-center justify-center gap-3 shadow-lg"
              >
                {isGenerating ? (
                  <>
                    <Loader2 className="w-5 h-5 animate-spin" />
                    Searching...
                  </>
                ) : (
                  <>
                    <Search className="w-5 h-5" />
                    Find My Music
                  </>
                )}
              </button>
            </div>
          </div>
        ) : (
          <div className="bg-slate-800/95 backdrop-blur-xl rounded-b-3xl shadow-2xl border-t-2 border-purple-500/30">
            {/* Now Playing Bar */}
            <div className="flex items-center justify-between px-6 py-4 border-b border-slate-700/50">
              <div className="flex items-center gap-3">
                <div className="flex items-center gap-2">
                  <div className="w-2 h-6 bg-purple-500 animate-pulse rounded"></div>
                  <div className="w-2 h-4 bg-purple-400 animate-pulse rounded" style={{animationDelay: '0.2s'}}></div>
                  <div className="w-2 h-8 bg-purple-500 animate-pulse rounded" style={{animationDelay: '0.4s'}}></div>
                  <div className="w-2 h-5 bg-purple-400 animate-pulse rounded" style={{animationDelay: '0.6s'}}></div>
                </div>
                <span className="text-purple-300 text-sm font-medium">Searching...</span>
              </div>
              <button
                onClick={resetForm}
                className="flex items-center gap-2 px-4 py-2 rounded-lg bg-slate-700/50 text-slate-300 hover:bg-slate-700 transition-all"
              >
                <RefreshCw className="w-4 h-4" />
                <span className="text-sm">New Search</span>
              </button>
            </div>

            <div className="p-6 md:p-8">
              {/* Search Query Display */}
              <div className="bg-gradient-to-r from-purple-900/50 to-pink-900/50 border border-purple-500/30 rounded-xl p-6 mb-6">
                <div className="flex items-start gap-3">
                  <Sparkles className="w-6 h-6 text-yellow-400 flex-shrink-0 mt-1" />
                  <div>
                    <h3 className="text-white font-semibold mb-2">AI Search Query</h3>
                    <p className="text-purple-200 text-sm">{searchQuery}</p>
                  </div>
                </div>
              </div>

              <div className="bg-yellow-500/10 border border-yellow-500/30 rounded-xl p-6 text-center">
                <Play className="w-12 h-12 text-yellow-400 mx-auto mb-3" />
                <p className="text-yellow-100 font-semibold text-lg mb-2">Ready to discover amazing music!</p>
                <p className="text-yellow-200/80 text-sm">Claude will now search the web for personalized song recommendations</p>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}