import fs from 'fs';

const roomPath = 'C:/X/workspace/jumpa.id/vc/components/xcuRoom.tsx';
let roomContent = fs.readFileSync(roomPath, 'utf-8');

const newCapsuleUI = `
              {/* Quantum Engine Capsule */}
              <div className="hidden md:flex bg-slate-800/50 p-1 rounded-xl border border-slate-700/50 shadow-inner mr-2">
                  {/* Video Segment */}
                  <button onClick={handleToggleEngine} className={\`flex flex-col items-center justify-center w-24 h-14 rounded-lg transition-all duration-300 \${videoEngineMode === 'auto' ? 'bg-amber-900/60 text-amber-400 shadow-[0_0_15px_rgba(251,191,36,0.6)] z-10' : (videoEngineMode === 'webcodecs' ? 'bg-cyan-900/60 text-cyan-400 shadow-[0_0_15px_rgba(34,211,238,0.5)] z-10' : 'text-slate-400 hover:bg-slate-700/50')}\`}>
                     <div className="relative">
                         <svg className={\`w-5 h-5 mb-1 \${videoEngineMode === 'auto' ? 'animate-ping' : ''}\`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
                         </svg>
                     </div>
                     <span className="text-[8px] leading-tight text-center font-bold whitespace-nowrap">
                         {videoEngineMode === 'auto' ? \`AUTO (\${autoPilotMetrics.vCodec} \${autoPilotMetrics.bw.toFixed(1)}M)\` : (videoEngineMode === 'webcodecs' ? 'GPU VIDEO' : 'CPU VIDEO')}
                     </span>
                  </button>

                  {/* Divider */}
                  <div className="w-[1px] bg-slate-700 mx-1 self-center h-8"></div>

                  {/* Audio Segment */}
                  <button onClick={handleToggleAudioEngine} className={\`flex flex-col items-center justify-center w-24 h-14 rounded-lg transition-all duration-300 \${audioEngineMode === 'auto' ? 'bg-amber-900/60 text-amber-400 shadow-[0_0_15px_rgba(251,191,36,0.6)] z-10' : (audioEngineMode === 'xcu-neural' ? 'bg-fuchsia-900/60 text-fuchsia-400 shadow-[0_0_15px_rgba(217,70,239,0.5)] z-10' : 'text-slate-400 hover:bg-slate-700/50')}\`}>
                     <div className="relative">
                         <svg className={\`w-5 h-5 mb-1 \${audioEngineMode === 'auto' ? 'animate-pulse' : ''}\`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"></path>
                         </svg>
                     </div>
                     <span className="text-[8px] leading-tight text-center font-bold whitespace-nowrap">
                         {audioEngineMode === 'auto' ? \`AUTO (\${autoPilotMetrics.aCodec})\` : (audioEngineMode === 'xcu-neural' ? 'XCU NEURAL' : 'RAW PCM')}
                     </span>
                  </button>
              </div>
`;

// Insert it right at the beginning of the center flex container
roomContent = roomContent.replace(
    /<div className="flex items-center justify-center gap-1 md:gap-2 flex-1">/,
    `<div className="flex items-center justify-center gap-1 md:gap-2 flex-1">\n${newCapsuleUI}`
);

fs.writeFileSync(roomPath, roomContent, 'utf-8');
console.log("Capsule injected into UI.");