reconstruct3.py

import sys

with open('components/music-visualizer.tsx', 'r', encoding='utf-8') as f:
    code = f.read()

# 1. Imports and state
if 'ChevronDown' not in code:
    code = code.replace('Globe } from "lucide-react"', 'Globe, ChevronDown } from "lucide-react"')
    
if 'isPlayerExpanded' not in code:
    code = code.replace('const [albumArtUrl, setAlbumArtUrl] = useState<string | null>(null)',
                        'const [albumArtUrl, setAlbumArtUrl] = useState<string | null>(null)\n  const [isPlayerExpanded, setIsPlayerExpanded] = useState(false)')

code = code.replace('await audioRef.current.play()', "await audioRef.current.play().catch(err => console.log('Audio play interrupted:', err))")

# 2. Extract UI parts
def extract_balanced(text, start_str):
    start = text.find(start_str)
    if start == -1: return None
    brace_count = 0
    in_block = False
    for i in range(start, len(text)):
        if text[i] == '{': 
            brace_count += 1
            in_block = True
        elif text[i] == '}': 
            brace_count -= 1
        if in_block and brace_count == 0:
            return text[start:i+1]
    return None

UPLOAD_MODAL = extract_balanced(code, '{isAddingSong && (')
BARS = extract_balanced(code, '{audioData.slice(0, activeBars).map((height, index) => {')

audio_start = code.find('<audio')
audio_end = code.find('/>', audio_start) + 2
AUDIO_TAG = code[audio_start:audio_end]

main_return_start = code.find('<div className="h-[100dvh]')
if main_return_start == -1:
    print("Could not find main return block")
    sys.exit(1)

return_idx = code.rfind('return (', 0, main_return_start)
top_part = code[:return_idx]

# 3. Define the new return block using a raw string and placeholder replacement
NEW_RETURN = """return (
    <div className="h-[100dvh] w-full bg-[#050505] text-white flex flex-col font-sans overflow-hidden relative">
      
      {/* Home Screen (Only visible if not expanded) */}
      <div className={`flex-1 overflow-y-auto pb-28 transition-opacity duration-300 ${isPlayerExpanded ? 'opacity-0 pointer-events-none absolute inset-0' : 'opacity-100 relative z-10'}`}>
        
        {/* Header */}
        <div className="sticky top-0 z-40 bg-[#050505]/90 backdrop-blur-xl px-4 sm:px-8 py-4 flex items-center justify-between border-b border-white/5">
          <motion.div 
            className="flex items-center gap-3 cursor-pointer group"
            onClick={handleAdminLogin}
            whileHover={{ scale: 1.02 }}
          >
            <img src="/rhythmx-logo.png" alt="RhythmX Logo" className="w-8 h-8 rounded-lg shadow-lg shadow-purple-500/20" />
            <div className="flex flex-col justify-center">
              <div className="flex items-center text-xl tracking-tight uppercase text-white leading-none" style={{ fontFamily: "'Pixer', monospace" }}>
                Rhythm<span className="text-purple-500">X</span>
                {isAdmin && <span className="ml-2 text-[10px] bg-red-500 text-white px-1.5 py-0.5 rounded font-sans tracking-normal">ADMIN</span>}
              </div>
            </div>
          </motion.div>
          
          <div className="flex items-center gap-4">
            <Link href="https://github.com/CodeWithBasu" target="_blank" className="text-white/40 hover:text-white transition-colors">
              <Github className="w-5 h-5" />
            </Link>
            <ProfileDropdown user={user} />
          </div>
        </div>

        {/* Main Content */}
        <main className="px-4 sm:px-8 py-6 space-y-10 max-w-7xl mx-auto w-full">
          
          {/* Greeting & Search & Upload */}
          <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
            <h1 className="text-3xl font-bold tracking-tight">Good Evening</h1>
            <div className="flex items-center gap-3 w-full md:w-auto">
              <div className="relative flex-1 md:w-64">
                <input
                  type="text"
                  placeholder="Search songs, artists..."
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="w-full bg-white/5 border border-white/10 rounded-full px-4 py-2 pl-10 text-sm text-white focus:outline-none focus:border-purple-500/50 transition-colors"
                />
                <svg className="w-4 h-4 text-white/40 absolute left-4 top-1/2 -translate-y-1/2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                </svg>
              </div>
              {isAdmin && (
                <button
                  onClick={() => setIsAddingSong(true)}
                  className="bg-white/10 hover:bg-white/20 text-white px-4 py-2 rounded-full text-sm font-medium transition-colors whitespace-nowrap flex items-center gap-2 border border-white/5"
                >
                  <Upload className="w-4 h-4" /> <span className="hidden sm:inline">Upload</span>
                </button>
              )}
            </div>
          </div>

          {error && (
              <div className="p-4 rounded-xl text-sm text-red-400 bg-red-400/10 border border-red-400/20">
                  {error}
              </div>
          )}

          {/* New Releases (Horizontal Scroll) */}
          {songs.length > 0 && (
            <section>
              <h2 className="text-xl font-bold mb-4 flex items-center justify-between">
                New Releases
                <span className="text-xs text-white/40 uppercase tracking-wider font-semibold hover:text-white cursor-pointer transition-colors">View All</span>
              </h2>
              <div className="flex overflow-x-auto gap-4 sm:gap-6 pb-6 snap-x hide-scrollbar">
                {songs.slice(0, 10).map((song) => (
                  <div 
                    key={song.id} 
                    onClick={() => { playSong(song); setIsPlayerExpanded(true); }} 
                    className="snap-start shrink-0 w-36 sm:w-44 group cursor-pointer"
                  >
                    <div className="w-36 h-36 sm:w-44 sm:h-44 rounded-xl bg-gradient-to-br from-purple-900/40 to-black/80 mb-3 flex items-center justify-center relative overflow-hidden shadow-lg group-hover:shadow-[0_0_20px_rgba(168,85,247,0.2)] transition-shadow border border-white/5">
                      <GridAlbumArt song={song} />
                      <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
                        <div className="w-12 h-12 rounded-full bg-purple-500 flex items-center justify-center shadow-[0_0_20px_rgba(168,85,247,0.6)] transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300">
                          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" className="text-white ml-1">
                            <path d="M8 5v14l11-7z" fill="currentColor"/>
                          </svg>
                        </div>
                      </div>
                    </div>
                    <h3 className="font-bold text-white/90 text-sm truncate group-hover:text-white transition-colors">{song.title}</h3>
                    <p className="text-white/40 text-xs truncate mt-0.5">{song.artist || 'Unknown Artist'}</p>
                  </div>
                ))}
              </div>
            </section>
          )}

          {/* Your Library (Grid) */}
          <section>
            <h2 className="text-xl font-bold mb-4">Your Library</h2>
            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4 sm:gap-6">
                {songs.filter((song) => song.title.toLowerCase().includes(searchQuery.toLowerCase()) || song.language?.toLowerCase().includes(searchQuery.toLowerCase())).map((song) => (
                    <div 
                        key={song.id} 
                        onClick={() => { playSong(song); setIsPlayerExpanded(true); }}
                        className="group relative bg-white/[0.02] rounded-2xl p-3 hover:bg-white/[0.06] transition-all cursor-pointer border border-white/5 hover:border-purple-500/30 flex flex-col"
                    >
                        <div className="w-full aspect-square rounded-xl bg-gradient-to-br from-purple-900/40 to-black/80 mb-3 flex items-center justify-center relative overflow-hidden shadow-md">
                            <GridAlbumArt song={song} />
                            <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
                                <div className="w-10 h-10 rounded-full bg-purple-500 flex items-center justify-center shadow-[0_0_20px_rgba(168,85,247,0.6)] transform scale-90 group-hover:scale-100 transition-transform duration-300">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" className="text-white ml-1">
                                        <path d="M8 5v14l11-7z" fill="currentColor"/>
                                    </svg>
                                </div>
                            </div>
                        </div>
                        <h3 className="font-bold text-white/90 text-sm truncate group-hover:text-white transition-colors">{song.title}</h3>
                        <div className="flex justify-between items-center mt-1">
                            <p className="text-white/40 text-xs truncate pr-2">{song.artist || 'Unknown Artist'}</p>
                            {song.language && (
                                <span className="text-[9px] px-1.5 py-0.5 rounded-full bg-white/10 text-white/60 shrink-0 font-medium tracking-wide uppercase">
                                    {song.language}
                                </span>
                            )}
                        </div>
                    </div>
                ))}
            </div>
            
            {songs.length === 0 && !error && (
              <div className="p-12 text-center flex flex-col items-center border border-white/5 rounded-2xl mt-4 bg-white/[0.02]">
                  <Database className="w-12 h-12 text-white/10 mb-4" />
                  <div className="text-white/30 text-base font-medium">Your library is empty</div>
                  <div className="text-white/20 text-xs mt-2">Upload some tracks to get started.</div>
              </div>
            )}
          </section>
        </main>
      </div>

      {/* MINI PLAYER (Floating at Bottom) */}
      <AnimatePresence>
        {!isPlayerExpanded && hasAudio && currentSongObj && (
          <motion.div 
            initial={{ y: 100, opacity: 0 }}
            animate={{ y: 0, opacity: 1 }}
            exit={{ y: 100, opacity: 0 }}
            className="fixed bottom-4 left-4 right-4 sm:left-1/2 sm:-translate-x-1/2 sm:w-[500px] bg-[#1a1a1a]/95 backdrop-blur-xl border border-white/10 rounded-2xl p-2 flex items-center gap-3 shadow-2xl cursor-pointer hover:bg-[#222]/95 transition-colors z-[100]"
            onClick={() => setIsPlayerExpanded(true)}
          >
            {/* Mini Art */}
            <div className="w-12 h-12 shrink-0 rounded-xl overflow-hidden relative border border-white/5">
              <GridAlbumArt song={currentSongObj} />
            </div>
            
            {/* Mini Info */}
            <div className="flex-1 min-w-0 flex flex-col justify-center">
              <div className="text-sm font-bold text-white truncate">{currentSongObj.title}</div>
              <div className="text-xs text-white/50 truncate mt-0.5">{currentSongObj.artist || 'Unknown Artist'}</div>
            </div>

            {/* Mini Controls */}
            <div className="flex items-center gap-1 sm:gap-2 pr-2 shrink-0" onClick={(e) => e.stopPropagation()}>
              <button className="w-8 h-8 sm:w-10 sm:h-10 rounded-full flex items-center justify-center text-white/60 hover:text-white hover:bg-white/10 transition-colors">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
              </button>
              <button 
                onClick={() => isPlaying ? audioRef.current?.pause() : audioRef.current?.play()}
                className="w-10 h-10 sm:w-12 sm:h-12 rounded-full bg-white text-black flex items-center justify-center hover:scale-105 transition-transform"
              >
                {isPlaying ? (
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z"/></svg>
                ) : (
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" className="ml-1"><path d="M8 5v14l11-7z"/></svg>
                )}
              </button>
            </div>
          </motion.div>
        )}
      </AnimatePresence>

      {/* EXPANDED PLAYER (Visualizer) */}
      <div 
        className={`fixed inset-0 z-50 bg-[#0C0414] flex flex-col overflow-hidden transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] ${isPlayerExpanded ? 'translate-y-0' : 'translate-y-full'}`}
      >
        {/* Collapse Button */}
        <div className="absolute top-0 left-0 right-0 z-[60] flex items-center justify-between px-4 py-6 bg-gradient-to-b from-black/80 to-transparent">
          <button 
            onClick={() => setIsPlayerExpanded(false)}
            className="p-2.5 rounded-full bg-black/20 hover:bg-black/40 text-white backdrop-blur-md transition-all border border-white/5 hover:scale-105"
          >
            <ChevronDown className="w-6 h-6" />
          </button>
          
          {isAdmin && (
             <button onClick={() => setIsAddingSong(true)} className="w-10 h-10 rounded-full bg-white/5 hover:bg-white/10 flex items-center justify-center text-white backdrop-blur-md transition-all border border-white/10 shadow-[0_0_15px_rgba(255,255,255,0.05)]">
               <Upload className="w-5 h-5" />
             </button>
          )}
        </div>

        {/* Visualizer Canvas & Bars */}
        <div className="flex-1 relative flex flex-col items-center justify-center w-full min-h-[45vh]">
          <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-purple-900/10 via-[#0C0414]/50 to-[#0C0414] pointer-events-none" />
          
          {!hasAudio && (
            <div className="absolute inset-0 flex items-center justify-center flex-col pointer-events-none z-10 px-4">
              <TextType 
                texts={DEFAULT_TEXT} 
                speed={80} 
                pauseTime={3000} 
                className="text-2xl sm:text-4xl md:text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 drop-shadow-[0_0_10px_rgba(168,85,247,0.5)] uppercase tracking-[0.2em] text-center"
              />
            </div>
          )}

          <div className="absolute inset-x-0 top-1/2 -translate-y-1/2 h-[40vh] max-h-[400px] flex items-end justify-center gap-[1px] sm:gap-[2px] md:gap-1 px-4 z-10">
            __BARS__
          </div>
        </div>

        {/* Current Song Info & Controls */}
        <div className="w-full bg-black/40 backdrop-blur-2xl border-t border-white/5 pt-6 pb-12 px-6 sm:px-12 relative z-20 shrink-0">
          <div className="max-w-5xl mx-auto flex flex-col gap-6">
            
            <div className="flex flex-col md:flex-row md:items-end justify-between gap-6">
              <div className="flex items-center gap-6">
                <motion.div 
                    className="w-16 h-16 sm:w-24 sm:h-24 md:w-32 md:h-32 rounded-xl overflow-hidden shadow-[0_0_30px_rgba(0,0,0,0.5)] border border-white/10 shrink-0 bg-white/5 flex items-center justify-center relative"
                    initial={{ opacity: 0, y: 10 }}
                    animate={{ opacity: 1, y: 0 }}
                >
                    {albumArtUrl ? (
                        <img src={albumArtUrl} alt="Album Art" className="w-full h-full object-cover" />
                    ) : (
                        <Headphones className="w-8 h-8 sm:w-12 sm:h-12 text-white/40" />
                    )}
                    {is8DMode && (
                      <div className="absolute top-2 right-2 bg-purple-500/80 backdrop-blur text-[10px] px-2 py-0.5 rounded text-white font-bold tracking-widest shadow-[0_0_10px_rgba(168,85,247,0.5)]">
                        8D
                      </div>
                    )}
                </motion.div>
                
                <div className="flex-1 min-w-0">
                    <motion.div 
                      className="text-2xl sm:text-3xl md:text-4xl font-bold tracking-wider text-white truncate drop-shadow-md mb-2"
                      initial={{ opacity: 0, x: -20 }}
                      animate={{ opacity: 1, x: 0 }}
                    >
                        {currentTrack}
                    </motion.div>
                    {currentSongObj?.artist && (
                      <motion.div 
                        className="text-sm sm:text-base md:text-lg text-white/60 font-medium truncate tracking-wide"
                        initial={{ opacity: 0, x: -20 }}
                        animate={{ opacity: 1, x: 0 }}
                        transition={{ delay: 0.1 }}
                      >
                        {currentSongObj.artist}
                      </motion.div>
                    )}
                </div>
              </div>

              <div className="flex flex-col gap-4 min-w-[280px]">
                <div className="flex items-center gap-3">
                  <span className="text-xs text-white/40 font-medium w-10 text-right">{formatTime(currentTime)}</span>
                  <div 
                    className="flex-1 h-1.5 sm:h-2 bg-white/10 rounded-full overflow-hidden cursor-pointer relative group"
                    onClick={(e) => {
                      const rect = e.currentTarget.getBoundingClientRect()
                      const percent = (e.clientX - rect.left) / rect.width
                      if(duration) {
                        const newTime = percent * duration
                        if (audioRef.current) audioRef.current.currentTime = newTime
                        setCurrentTime(newTime)
                      }
                    }}
                  >
                    <motion.div 
                      className="absolute top-0 left-0 bottom-0 bg-gradient-to-r from-purple-500 to-pink-500"
                      style={{ width: `${(currentTime / (duration || 1)) * 100}%` }}
                      layoutId="progress"
                    />
                    <div className="absolute top-0 bottom-0 left-0 bg-white/20 opacity-0 group-hover:opacity-100 transition-opacity w-full" />
                  </div>
                  <span className="text-xs text-white/40 font-medium w-10">{formatTime(duration)}</span>
                </div>

                <div className="flex items-center justify-between px-2">
                  <button onClick={() => setIsShuffle(!isShuffle)} className={`p-2.5 rounded-full transition-all ${isShuffle ? 'text-purple-400 bg-purple-500/10' : 'text-white/40 hover:text-white/80 hover:bg-white/5'}`}>
                    <Shuffle className="w-4 h-4 sm:w-5 sm:h-5" />
                  </button>
                  <button onClick={() => {
                    const idx = songs.findIndex(s => s.id === currentSongObj?.id);
                    if(idx > 0) playSong(songs[idx-1]);
                  }} className="p-2.5 text-white/70 hover:text-white hover:bg-white/5 rounded-full transition-all">
                    <SkipBack className="w-5 h-5 sm:w-6 sm:h-6" />
                  </button>
                  <button 
                    onClick={() => isPlaying ? audioRef.current?.pause() : audioRef.current?.play()}
                    className="w-12 h-12 sm:w-14 sm:h-14 bg-white text-black rounded-full flex items-center justify-center hover:scale-105 transition-all shadow-[0_0_20px_rgba(255,255,255,0.3)] hover:shadow-[0_0_30px_rgba(255,255,255,0.5)]"
                  >
                    {isPlaying ? (
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z"/></svg>
                    ) : (
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" className="ml-1"><path d="M8 5v14l11-7z"/></svg>
                    )}
                  </button>
                  <button onClick={() => {
                    const idx = songs.findIndex(s => s.id === currentSongObj?.id);
                    if(idx < songs.length - 1) playSong(songs[idx+1]);
                  }} className="p-2.5 text-white/70 hover:text-white hover:bg-white/5 rounded-full transition-all">
                    <SkipForward className="w-5 h-5 sm:w-6 sm:h-6" />
                  </button>
                  <button onClick={() => setIsRepeat(!isRepeat)} className={`p-2.5 rounded-full transition-all ${isRepeat ? 'text-purple-400 bg-purple-500/10' : 'text-white/40 hover:text-white/80 hover:bg-white/5'}`}>
                    <Repeat className="w-4 h-4 sm:w-5 sm:h-5" />
                  </button>
                </div>
              </div>
            </div>

            {/* Extras (Theme / 8D Audio) */}
            <div className="flex flex-wrap items-center justify-center gap-4 pt-4 border-t border-white/5">
              <button onClick={() => setIs8DMode(!is8DMode)} className={`px-4 py-2 rounded-full text-[10px] sm:text-xs font-bold tracking-wider transition-all ${is8DMode ? 'bg-purple-500 text-white shadow-[0_0_15px_rgba(168,85,247,0.5)]' : 'bg-white/5 text-white/50 hover:bg-white/10 hover:text-white'}`}>
                <span className="flex items-center gap-2"><Headphones className="w-3 h-3 sm:w-4 sm:h-4" />8D AUDIO {is8DMode ? 'ON' : 'OFF'}</span>
              </button>
              <div className="flex gap-2 bg-white/5 p-1 rounded-full">
                {["neon", "synthwave", "matrix", "ocean"].map((t) => (
                  <button key={t} onClick={() => setTheme(t)} className={`px-3 sm:px-4 py-1.5 rounded-full text-[10px] sm:text-xs font-bold uppercase tracking-wider transition-all ${theme === t ? 'bg-white text-black shadow-md' : 'text-white/50 hover:text-white'}`}>
                    {t}
                  </button>
                ))}
              </div>
            </div>

          </div>
        </div>
      </div>
      
      {/* Modals & Audio Element */}
      <AnimatePresence>
        __UPLOAD_MODAL__
      </AnimatePresence>

      __AUDIO_TAG__
      
      <style dangerouslySetInnerHTML={{__html: `
        .hide-scrollbar::-webkit-scrollbar { display: none; }
        .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
      `}} />
    </div>
  );
}
"""

NEW_RETURN = NEW_RETURN.replace('__UPLOAD_MODAL__', UPLOAD_MODAL)
NEW_RETURN = NEW_RETURN.replace('__BARS__', BARS)
NEW_RETURN = NEW_RETURN.replace('__AUDIO_TAG__', AUDIO_TAG)

new_code = top_part + NEW_RETURN
with open('components/music-visualizer.tsx', 'w', encoding='utf-8') as f:
    f.write(new_code)
print("done rewriting")