import { useState } from 'react';
import { motion } from 'framer-motion';
import { 
  Sparkles, 
  Play, 
  Plus, 
  Music, 
  Heart,
  Shuffle,
  Download,
  ExternalLink,
  Trash2,
  Wand2
} from 'lucide-react';
import { useStore } from '../store/useStore';
import { generateMixedPlaylist, createPlaylist, addTracksToPlaylist } from '../utils/spotify';
import { apiPost } from '../utils/api';
import { formatDuration } from '../utils/cn';
import { getThemeClasses } from '../utils/theme';
import toast from 'react-hot-toast';

export const MixedPlaylistPage = () => {
  const { currentUser, partnerUser, mixedPlaylists, addMixedPlaylist, removeMixedPlaylist, theme } = useStore();
  const themeClasses = getThemeClasses(theme);
  const [isGenerating, setIsGenerating] = useState(false);
  const [isCreating, setIsCreating] = useState(false);
  const [newPlaylist, setNewPlaylist] = useState<any>(null);
  const [vibe, setVibe] = useState<string>('');
  const [genresText, setGenresText] = useState<string>('');
  const [includeKnown, setIncludeKnown] = useState<boolean>(true);
  const [createForBoth, setCreateForBoth] = useState<boolean>(false);

  const parsedGenres = genresText
    .split(',')
    .map(g => g.trim())
    .filter(g => g.length > 0);

  const handleGeneratePlaylist = async () => {
    if (!currentUser?.topTracks || !partnerUser?.topTracks) {
      toast.error('Both users need to have their music data loaded');
      return;
    }

    setIsGenerating(true);
    
    try {
      // Simulate AI processing time
      await new Promise(resolve => setTimeout(resolve, 2000));
      
      const generatedTracks = generateMixedPlaylist(
        currentUser.topTracks,
        partnerUser.topTracks,
        "Our Perfect Mix"
      );

      setNewPlaylist({
        id: Date.now().toString(),
        name: "Our Perfect Mix",
        description: `A beautiful blend of ${currentUser.user?.display_name} and ${partnerUser.user?.display_name}'s musical tastes`,
        tracks: generatedTracks,
        createdAt: new Date(),
        createdBy: 'AI Magic ✨',
      });

      toast.success('Playlist generated successfully!');
    } catch (error) {
      console.error('Playlist generation error:', error);
      toast.error('Failed to generate playlist');
    } finally {
      setIsGenerating(false);
    }
  };

  const handleCreateSpotifyPlaylist = async () => {
    if (!newPlaylist || !currentUser?.user?.id) {
      toast.error('Unable to create playlist');
      return;
    }
    if (!currentUser?.jwt) {
      toast.error('Please login again');
      return;
    }

    setIsCreating(true);
    try {
      const body: any = {
        partnerId: partnerUser?.user?.id || currentUser.user.id,
        createForBoth: false,
        includeKnown: true,
        name: newPlaylist.name,
        description: newPlaylist.description,
      };
      const result = await apiPost('/playlists/mixed', body, currentUser.jwt);

      addMixedPlaylist({
        ...newPlaylist,
        spotifyId: result?.createdFor?.creator?.playlistId,
        spotifyUrl: result?.createdFor?.creator?.url,
      });
      toast.success('Playlist created on Spotify!');
      setNewPlaylist(null);
    } catch (e) {
      console.error('Spotify playlist creation error:', e);
      toast.error('Failed to create playlist on Spotify');
    } finally {
      setIsCreating(false);
    }
  };

  const handleCreateEnhanced = async () => {
    if (!currentUser?.user?.id || !partnerUser?.user?.id) {
      toast.error('Missing users');
      return;
    }
    if (!currentUser?.jwt) {
      toast.error('Please login again');
      return;
    }
    setIsCreating(true);
    try {
      const body: any = {
        partnerId: partnerUser.user.id,
        createForBoth,
        includeKnown,
        vibe: vibe || undefined,
        genres: parsedGenres.length ? parsedGenres : undefined,
        name: newPlaylist?.name || 'Our Enhanced Mix',
        description: newPlaylist?.description || 'An AI-blended mix with fresh recommendations',
      };

      const result = await apiPost('/playlists/mixed', body, currentUser.jwt);
      toast.success('Enhanced playlist created!');
      // Optionally attach URLs to local card for quick open
      if (result?.createdFor?.creator?.url) {
        addMixedPlaylist({
          ...(newPlaylist || {
            id: Date.now().toString(),
            name: body.name,
            description: body.description,
            tracks: [],
            createdAt: new Date(),
            createdBy: 'AI Magic ✨',
          }),
          spotifyId: result.createdFor.creator.playlistId,
          spotifyUrl: result.createdFor.creator.url,
        });
        setNewPlaylist(null);
      }
    } catch (e) {
      console.error(e);
      toast.error('Failed to create enhanced playlist');
    } finally {
      setIsCreating(false);
    }
  };

  const handleSaveLocally = () => {
    if (!newPlaylist) return;
    
    addMixedPlaylist(newPlaylist);
    setNewPlaylist(null);
    toast.success('Playlist saved locally!');
  };

  const PlaylistCard = ({ playlist, isNew = false }: { playlist: any; isNew?: boolean }) => (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      whileHover={{ scale: 1.02 }}
      className={`glass rounded-2xl p-6 ${isNew ? 'border-spotify-green/50' : 'border-white/10'}`}
    >
      <div className="flex items-start justify-between mb-4">
        <div className="flex items-center space-x-4">
          <div className={`w-16 h-16 rounded-xl flex items-center justify-center ${
            isNew ? 'bg-gradient-to-br from-spotify-green to-green-600' : 'bg-gradient-to-br from-purple-500 to-pink-500'
          }`}>
            {isNew ? <Sparkles className="w-8 h-8 text-white" /> : <Music className="w-8 h-8 text-white" />}
          </div>
          <div>
            <h3 className="text-xl font-semibold text-white">{playlist.name}</h3>
            <p className="text-white/70 text-sm">{playlist.description}</p>
            <p className="text-white/50 text-xs mt-1">
              Created {isNew ? 'just now' : new Date(playlist.createdAt).toLocaleDateString()} • {playlist.tracks.length} tracks
            </p>
          </div>
        </div>

        <div className="flex items-center space-x-2">
          {playlist.spotifyUrl && (
            <a
              href={playlist.spotifyUrl}
              target="_blank"
              rel="noopener noreferrer"
              className="w-8 h-8 rounded-full bg-white/10 hover:bg-white/20 flex items-center justify-center transition-colors"
            >
              <ExternalLink className="w-4 h-4 text-white" />
            </a>
          )}
          
          {!isNew && (
            <button
              onClick={() => removeMixedPlaylist(playlist.id)}
              className="w-8 h-8 rounded-full bg-red-500/20 hover:bg-red-500/30 flex items-center justify-center transition-colors"
            >
              <Trash2 className="w-4 h-4 text-red-400" />
            </button>
          )}
        </div>
      </div>

      {/* Track List */}
      <div className="space-y-3 max-h-64 overflow-y-auto">
        {playlist.tracks.slice(0, 5).map((track: any, index: number) => (
          <motion.div
            key={track.id}
            initial={{ opacity: 0, x: -20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ delay: index * 0.1 }}
            className="flex items-center space-x-3 p-2 rounded-lg hover:bg-white/5 transition-colors"
          >
            <img
              src={track.album?.images?.[0]?.url || '/placeholder-album.png'}
              alt={track.album?.name || 'Unknown Album'}
              className="w-10 h-10 rounded-lg object-cover"
            />
            <div className="flex-1 min-w-0">
              <h4 className="text-white font-medium truncate">{track.name}</h4>
              <p className="text-white/70 text-sm truncate">{track.artists?.[0]?.name || 'Unknown Artist'}</p>
            </div>
            <div className="text-white/50 text-sm">
              {formatDuration(track.duration_ms)}
            </div>
          </motion.div>
        ))}
        
        {playlist.tracks.length > 5 && (
          <div className="text-center text-white/50 text-sm py-2">
            +{playlist.tracks.length - 5} more tracks
          </div>
        )}
      </div>

      {/* Actions */}
      {isNew && (
        <div className="flex items-center space-x-3 mt-6 pt-4 border-t border-white/10">
          <button
            onClick={handleCreateSpotifyPlaylist}
            disabled={isCreating || createForBoth}
            className="flex-1 bg-spotify-green hover:bg-spotify-green/90 text-white font-semibold py-3 px-4 rounded-lg transition-colors flex items-center justify-center space-x-2 disabled:opacity-50"
          >
            {isCreating ? (
              <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
            ) : (
              <>
                <Plus className="w-4 h-4" />
                <span>{createForBoth ? 'Disabled (using Create for both)' : 'Create on Spotify'}</span>
              </>
            )}
          </button>
          
          <button
            onClick={handleSaveLocally}
            className="px-4 py-3 bg-white/10 hover:bg-white/20 text-white rounded-lg transition-colors"
          >
            Save Locally
          </button>
        </div>
      )}
    </motion.div>
  );

  const canGeneratePlaylist = currentUser?.topTracks && partnerUser?.topTracks;

  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        className="mb-8"
      >
        <h1 className="text-4xl font-bold text-white mb-2 flex items-center space-x-3">
          <Sparkles 
            className="w-10 h-10" 
            style={{ color: themeClasses.cssVars?.primary || '#1db954' }}
          />
          <span>Mixed Playlists</span>
        </h1>
        <p className="text-white/70 text-lg">
          AI-powered playlists that perfectly blend your musical tastes together
        </p>
      </motion.div>

      {/* Generate New Playlist Section */}
      {canGeneratePlaylist && (
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.1 }}
          className="mb-8"
        >
          <div 
            className="glass rounded-2xl p-8 text-center"
            style={{ borderColor: `${themeClasses.cssVars?.primary || '#1db954'}30` }}
          >
            <div 
              className="w-16 h-16 mx-auto mb-4 rounded-full flex items-center justify-center"
              style={{
                background: `linear-gradient(135deg, ${themeClasses.cssVars?.primary || '#1db954'} 0%, ${themeClasses.cssVars?.secondary || '#1ed760'} 100%)`,
              }}
            >
              <Wand2 className="w-8 h-8 text-white" />
            </div>
            
            <h2 className="text-2xl font-bold text-white mb-2">Create Your Perfect Mix</h2>
            <p className="text-white/70 mb-6 max-w-2xl mx-auto">
              Our AI analyzes both your music tastes and creates a playlist that represents your unique musical connection
            </p>

            {/* Mix Generator removed as requested */}

            <div className="mt-4 text-white/50 text-sm">
              Analyzing {currentUser.topTracks.length + partnerUser.topTracks.length} tracks from both users
            </div>

            {/* Enhanced controls */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-left mt-8">
              <div>
                <label className="block text-white/80 text-sm mb-1">Vibe</label>
                <select
                  className="w-full bg-white/10 text-white rounded-lg p-2 appearance-none focus:outline-none focus:ring-2 focus:ring-spotify-green"
                  value={vibe}
                  onChange={(e) => setVibe(e.target.value)}
                >
                  <option value="">Auto</option>
                  <option value="energetic">Energetic</option>
                  <option value="chill">Chill</option>
                  <option value="happy">Happy</option>
                  <option value="sad">Sad</option>
                  <option value="party">Party</option>
                  <option value="focus">Focus</option>
                </select>
              </div>
              <div>
                <label className="block text-white/80 text-sm mb-1">Genres (comma-separated)</label>
                <input
                  className="w-full bg-white/10 text-white rounded-lg p-2 placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-spotify-green"
                  placeholder="pop, rock, edm"
                  value={genresText}
                  onChange={(e) => setGenresText(e.target.value)}
                />
              </div>
              <label className="flex items-center space-x-2 text-white/80">
                <input type="checkbox" checked={includeKnown} onChange={(e) => setIncludeKnown(e.target.checked)} />
                <span>Include songs we already know</span>
              </label>
              <label className="flex items-center space-x-2 text-white/80">
                <input type="checkbox" checked={createForBoth} onChange={(e) => setCreateForBoth(e.target.checked)} />
                <span>Create playlist on both accounts</span>
              </label>
            </div>

            <div className="flex items-center justify-center gap-3 mt-6">
              <button
                onClick={handleCreateEnhanced}
                disabled={isCreating}
                className="bg-white/10 hover:bg-white/20 text-white font-semibold py-3 px-4 rounded-lg transition-colors disabled:opacity-50"
              >
                Create Enhanced Playlist
              </button>
            </div>
          </div>
        </motion.div>
      )}

      {/* New Generated Playlist */}
      {newPlaylist && (
        <motion.div
          initial={{ opacity: 0, scale: 0.9 }}
          animate={{ opacity: 1, scale: 1 }}
          className="mb-8"
        >
          <h2 className="text-2xl font-bold text-white mb-4">✨ Your New Playlist</h2>
          <PlaylistCard playlist={newPlaylist} isNew={true} />
        </motion.div>
      )}

      {/* Existing Playlists */}
      {mixedPlaylists.length > 0 && (
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.3 }}
        >
          <h2 className="text-2xl font-bold text-white mb-4">Your Mixed Playlists</h2>
          <div className="grid gap-6">
            {mixedPlaylists.map((playlist) => (
              <PlaylistCard key={playlist.id} playlist={playlist} />
            ))}
          </div>
        </motion.div>
      )}

      {/* Empty State */}
      {!canGeneratePlaylist && (
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          className="glass rounded-2xl p-12 text-center"
        >
          <Heart className="w-16 h-16 mx-auto mb-4 text-pink-400" />
          <h3 className="text-xl font-semibold text-white mb-2">
            {!partnerUser ? 'Waiting for your partner' : 'Loading music data'}
          </h3>
          <p className="text-white/70">
            {!partnerUser 
              ? 'Invite your partner to connect their Spotify account to start creating mixed playlists'
              : 'We need to analyze both your music tastes to create the perfect mixed playlist'
            }
          </p>
        </motion.div>
      )}

      {mixedPlaylists.length === 0 && canGeneratePlaylist && !newPlaylist && (
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          className="glass rounded-2xl p-12 text-center"
        >
          <Music className="w-16 h-16 mx-auto mb-4 text-white/30" />
          <h3 className="text-xl font-semibold text-white mb-2">No playlists yet</h3>
          <p className="text-white/70">
            Create your first mixed playlist to start your musical journey together
          </p>
        </motion.div>
      )}
    </div>
  );
};
