update-profile.js

const fs = require('fs');
const file = 'src/App.tsx';
let d = fs.readFileSync(file, 'utf8');

// The new profile UI code
const newProfileStr = `{activeTab === 'profile' && (
              <motion.div key="profile" initial={{ opacity: 0, x: -20 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 20 }} className="flex flex-col gap-6">
                
                 {/* ID CARD / BANNER INFO */}
                 <div className="relative p-6 bg-[#111318] border border-[#1F2229] rounded-2xl flex flex-col gap-6 overflow-hidden">
                    {/* Background decoration */}
                    <div className="absolute -top-20 -right-20 w-64 h-64 bg-blue-500/10 blur-[80px] rounded-full pointer-events-none" />

                    <div className="flex gap-4 relative z-10">
                      <div className="w-20 h-20 shrink-0 relative">
                        {user?.photoURL ? (
                          <img src={user.photoURL} alt="avatar" className="w-full h-full rounded-full object-cover border-4 border-[#1F2229]" />
                        ) : (
                           <div className="w-full h-full rounded-full border-4 border-[#1F2229] bg-gradient-to-br from-[#1C1F26] to-[#0A0B10] flex items-center justify-center font-bold text-3xl text-blue-500 shadow-lg">
                             {profile.username.charAt(0).toUpperCase()}
                           </div>
                        )}
                        <div className="absolute -bottom-2 -right-0 px-2 py-0.5 rounded-full bg-blue-500 border-2 border-[#111318] flex items-center justify-center">
                          <span className="text-[10px] font-bold text-white shadow-sm">Lv.{profile.level || 1}</span>
                        </div>
                      </div>

                      <div className="flex-1 flex flex-col justify-center">
                        <div className="flex items-center gap-2 mb-1">
                          <span className="px-1.5 py-0.5 bg-rose-500 rounded flex items-center justify-center">
                             <Heart size={8} className="text-white fill-current" />
                          </span>
                          <h2 className="text-xl font-bold text-white uppercase tracking-tight line-clamp-1">{profile.username}</h2>
                        </div>
                        <p className="text-[10px] text-[#8E9299] mb-3 uppercase tracking-wider font-bold">Dragon</p>

                        <div className="bg-[#1A1C22] rounded-lg p-2.5 flex gap-3 border border-[#2A2D35] items-center">
                           <div className="bg-blue-500 h-full w-8 rounded flex items-center justify-center shrink-0">
                             <Zap size={16} className="text-white fill-white" />
                           </div>
                           <div className="flex flex-col flex-1 gap-1 w-full">
                             <div className="flex justify-between items-end">
                               <span className="text-xs font-bold text-white">Level {profile.level || 1}</span>
                               <span className="text-[9px] text-[#8E9299] font-mono tracking-wider">[ AKATSUKI ]</span>
                             </div>
                             <div className="h-1.5 w-full bg-[#0A0B10] rounded-full overflow-hidden">
                               <div className="h-full bg-blue-500 rounded-full" style={{ width: \`\${Math.min(100, Math.max(0, ((profile.exp || 0) / ((profile.level || 1) * 100)) * 100))}\%\` }} />
                             </div>
                             <span className="text-[9px] text-[#636669]">{profile.exp || 0} Experiences Point</span>
                           </div>
                        </div>
                      </div>
                    </div>

                    <div className="flex gap-2 relative z-10 w-full mt-2">
                       <button className="flex-1 bg-indigo-500 hover:bg-indigo-400 text-white text-[10px] font-bold py-2 rounded shadow-lg shadow-indigo-500/10 cursor-pointer transition-colors">
                          Abyssal Voyager
                       </button>
                       <button className="flex-1 bg-[#1C1F26] border border-[#2A2D35] text-white text-[10px] font-bold py-2 rounded shadow-lg cursor-pointer transition-colors hover:bg-[#2A2D35]">
                          Trust Factor
                       </button>
                    </div>

                    <div className="grid grid-cols-3 gap-2 relative z-10 w-full mt-2">
                      <div className="bg-orange-400 text-white py-2 px-3 rounded-lg flex justify-between items-center shadow-lg shadow-orange-500/10">
                        <span className="text-sm font-bold font-mono">{profile.gems.toLocaleString()}</span>
                        <Gem size={14} className="opacity-50" />
                      </div>
                      <div className="bg-blue-500 text-white py-2 px-3 rounded-lg flex justify-between items-center shadow-lg shadow-blue-500/10">
                        <span className="text-sm font-bold font-mono">{profile.dust.toLocaleString()}</span>
                        <Sparkles size={14} className="opacity-50" />
                      </div>
                      <div className="bg-emerald-500 text-white py-2 px-3 rounded-lg flex justify-between items-center shadow-lg shadow-emerald-500/10">
                        <span className="text-sm font-bold font-mono">{inventoryCards.length}</span>
                        <Package size={14} className="opacity-50" />
                      </div>
                    </div>

                 </div>

                 {/* ACHIEVEMENTS */}
                 <div>
                   <div className="flex justify-between items-end mb-3">
                     <div className="flex items-center gap-2">
                       <Award className="text-amber-400" size={18} />
                       <h3 className="text-sm font-semibold tracking-wide text-white">Achievement Card</h3>
                     </div>
                     <span className="text-[10px] text-[#8E9299]">4 achievements</span>
                   </div>
                   <div className="grid grid-cols-2 gap-3">
                     {[
                       { id: '088', name: 'Earthshaker', stars: 2 },
                       { id: '032', name: 'Surprise Luck?!', stars: 1 },
                       { id: '027', name: 'Beastkin', stars: 3 },
                       { id: '087', name: 'Pure Blood', stars: 2 }
                     ].map(ach => (
                        <div key={ach.id} className="relative bg-gradient-to-br from-[#1C1F26] to-[#111318] border border-[#2A2D35] p-3 rounded-xl flex items-center justify-between overflow-hidden group hover:border-blue-500/30 transition-colors">
                           <div className="flex items-center gap-3 relative z-10 w-full">
                             <div className="w-8 h-8 rounded-full bg-blue-500/10 flex items-center justify-center shrink-0 group-hover:scale-110 transition-transform">
                               <Award size={14} className="text-blue-400" />
                             </div>
                             <div className="flex flex-col flex-1">
                               <span className="text-xs font-bold text-white mb-0.5 whitespace-nowrap overflow-hidden text-ellipsis w-[70px]">{ach.name}</span>
                               <div className="flex justify-between items-center w-full">
                                  <span className="text-[9px] text-[#8E9299] font-mono">#{ach.id}</span>
                                  <div className="flex gap-0.5">
                                    {Array(ach.stars).fill(0).map((_, i) => <Star key={i} size={8} className="fill-white text-white drop-shadow-md" />)}
                                  </div>
                               </div>
                             </div>
                           </div>
                           {/* Light flair */}
                           <div className="absolute right-0 top-0 bottom-0 w-8 bg-white/5 skew-x-[30deg] pointer-events-none blur-sm" />
                        </div>
                     ))}
                   </div>
                 </div>

                 {/* INVENTORY / ROSTER PART */}
                 <div className="mt-4 flex flex-col gap-4">
                  <div className="flex justify-between items-center">
                    <h3 className="text-sm font-semibold tracking-wide border-l-2 border-fuchsia-500 pl-2">My Inventory</h3>
                  </div>

                  {/* Filters */}
                  <div className="flex flex-col gap-3 mb-2">
                    <div className="grid grid-cols-3 gap-2">
                      <select 
                        value={rarityFilter} 
                        onChange={e => setRarityFilter(e.target.value)} 
                        className="bg-[#111318] border border-[#1F2229] rounded-xl px-2 py-2 text-[10px] text-[#E0E0E0] focus:outline-none focus:border-amber-400/50 appearance-none h-8 text-center font-medium cursor-pointer"
                      >
                        <option value="All">All Rarity</option>
                        <option value="SSR">SSR</option>
                        <option value="SR">SR</option>
                        <option value="R">R</option>
                      </select>
                      <select 
                        value={elementFilter} 
                        onChange={e => setElementFilter(e.target.value)} 
                        className="bg-[#111318] border border-[#1F2229] rounded-xl px-2 py-2 text-[10px] text-[#E0E0E0] focus:outline-none focus:border-cyan-400/50 appearance-none h-8 text-center font-medium cursor-pointer"
                      >
                        <option value="All">All Element</option>
                        <option value="Fire">Fire</option>
                        <option value="Water">Water</option>
                        <option value="Wind">Wind</option>
                        <option value="Earth">Earth</option>
                        <option value="Light">Light</option>
                        <option value="Dark">Dark</option>
                      </select>
                      <select 
                        value={roleFilter} 
                        onChange={e => setRoleFilter(e.target.value)} 
                        className="bg-[#111318] border border-[#1F2229] rounded-xl px-2 py-2 text-[10px] text-[#E0E0E0] focus:outline-none focus:border-emerald-400/50 appearance-none h-8 text-center font-medium cursor-pointer"
                      >
                        <option value="All">All Roles</option>
                        <option value="Attacker">Attacker</option>
                        <option value="Defender">Defender</option>
                        <option value="Support">Support</option>
                        <option value="Healer">Healer</option>
                        <option value="Caster">Caster</option>
                      </select>
                    </div>

                    <div className="flex gap-2">
                      <button 
                        onClick={async () => {
                          try {
                            const dust = await bulkSell(false);
                            if (dust > 0) showNotification(\`Bulk sold duplicates for \${dust} Dust!\`);
                            else showNotification('No duplicates to sell.');
                          } catch (e) {
                            console.error(e);
                            showNotification("Failed to sell extras");
                          }
                        }}
                        className="flex-1 bg-[#1A1C22] border border-[#2A2D35] text-white/70 font-bold text-xs h-9 rounded-xl hover:bg-[#2A2D35] hover:text-white transition-colors flex items-center justify-center gap-1.5 cursor-pointer"
                      >
                        Sell Extras
                      </button>
                      <button 
                        onClick={async () => {
                          try {
                            const dust = await bulkSell(true);
                            if (dust > 0) showNotification(\`Sold ALL cards for \${dust} Dust!\`);
                            else showNotification('No cards to sell.');
                          } catch (e) {
                            console.error(e);
                            showNotification("Failed to sell all cards");
                          }
                        }}
                        className="flex-1 bg-red-500/10 border border-red-500/20 text-red-400 font-bold text-xs h-9 rounded-xl hover:bg-red-500/20 transition-colors flex items-center justify-center gap-1.5 cursor-pointer"
                      >
                        Sell ALL 
                      </button>
                    </div>
                  </div>
                  
                  <div className="grid grid-cols-2 lg:grid-cols-5 gap-4">
                    {filteredInventory.length === 0 ? (
                      <div className="col-span-full text-center py-10 text-[#636669] text-xs">
                        No operators match the current filters.
                      </div>
                    ) : (
                      filteredInventory.map(template => {
                        const count = template.count;
                        const Icon = ICON_MAP[template.iconName] || Search;
                        const style = RARITY_COLORS[template.rarity];
                        
                        return (
                          <div 
                            key={template.id} 
                            onClick={() => setSelectedCard(template)}
                            className={cn(
                            "aspect-[3/4] rounded-xl flex flex-col p-2 border-2 relative overflow-hidden shadow-lg group cursor-pointer hover:scale-105 transition-transform",
                            style.border, style.bg
                          )}>
                            <div className="absolute inset-0 z-0 bg-[#0A0B10]">
                              <img src={template.imageUrl} alt={template.name} className="w-full h-full object-cover opacity-80" />
                              <div className="absolute inset-x-0 bottom-0 h-2/3 bg-gradient-to-t from-[#0A0B10] via-[#0A0B10]/80 to-transparent" />
                            </div>
                            
                            <div className="flex justify-between items-start relative z-20">
                              <span className={cn("font-black tracking-tighter drop-shadow-md text-sm", style.text)}>{template.rarity}</span>
                              <div className="rounded-full flex items-center justify-center backdrop-blur-md bg-[#0A0B10]/60 border border-white/10 shadow-lg p-1.5">
                                <Icon size={12} className={ELEMENT_COLORS[template.element]} />
                              </div>
                            </div>

                            <div className="flex-1 flex flex-col justify-end relative z-20 pb-1">
                               <div className="flex text-amber-400 mb-1">
                                  {Array(template.stars).fill(0).map((_, i) => <Star key={i} size={8} className="fill-current drop-shadow-md" />)}
                               </div>
                               <div className="w-full h-px bg-white/20 mb-1.5" />
                               <p className="text-[10px] font-bold leading-tight text-white line-clamp-1 drop-shadow-md">{template.name}</p>
                               <div className="flex justify-between items-center mt-0.5">
                                  <p className="text-[8px] text-white/80 font-semibold uppercase tracking-widest drop-shadow-md">{template.element}</p>
                                  <p className="text-[8px] text-emerald-400 font-semibold drop-shadow-md">{template.role}</p>
                               </div>
                            </div>

                            <div className="absolute bottom-2 right-2 flex items-center gap-1.5 z-30">
                              <button 
                                onClick={(e) => { e.stopPropagation(); sellCard(template.id); }}
                                className="md:opacity-0 md:group-hover:opacity-100 transition-opacity bg-fuchsia-500/80 hover:bg-fuchsia-500 text-white rounded px-2 py-0.5 text-[9px] font-bold shadow-lg backdrop-blur cursor-pointer"
                              >
                                SELL
                              </button>
                              <div className="bg-[#0A0B10]/80 rounded px-1.5 py-0.5 border border-[#1F2229] backdrop-blur-md shadow-lg">
                                <span className="text-[10px] font-bold text-white">x{count}</span>
                              </div>
                            </div>
                          </div>
                        );
                      })
                    )}
                  </div>
                 </div>

                 {/* LOGOUT BUTTON */}
                 <div className="mt-12 flex justify-center pb-6">
                   <button onClick={logout} className="w-[80%] max-w-[200px] flex items-center justify-center gap-2 px-6 py-3 rounded border border-rose-500/30 bg-[#1C1F26] text-rose-500 hover:bg-rose-500/10 text-sm font-bold cursor-pointer transition-all shadow-lg">
                     <LogOut size={16} />
                     Log Out
                   </button>
                 </div>
                 
              </motion.div>
            )}`;

// We need to delete `activeTab === 'roster'` up to its closing tag.
const startRosterStr = "{activeTab === 'roster' && (";
const endRosterStr = "</motion.div>\n            )}";
const idxRosterStart = d.indexOf(startRosterStr);
if (idxRosterStart !== -1) {
    const idxRosterEnd = d.indexOf(endRosterStr, idxRosterStart);
    if (idxRosterEnd !== -1) {
        d = d.slice(0, idxRosterStart) + d.slice(idxRosterEnd + endRosterStr.length);
    }
}

// Ensure Profile replacement
const startProfileStr = "{activeTab === 'profile' && (";
const idxProfileStart = d.indexOf(startProfileStr);
if (idxProfileStart !== -1) {
    const idxProfileEnd = d.indexOf(endRosterStr, idxProfileStart); // Reusing endRosterStr because it's the exact same closing sequence
    if (idxProfileEnd !== -1) {
        d = d.slice(0, idxProfileStart) + newProfileStr + d.slice(idxProfileEnd + endRosterStr.length);
    }
}

fs.writeFileSync(file, d);
console.log('Update script executed successfully');