with open("app/static/bim/index.html", "r", encoding="utf-8") as f:
    content = f.read()

hud_setup = """      // ==========================================
      // HUD Subtitles Setup
      // ==========================================
      const hudCanvas = document.createElement('canvas');
      const hudCtx = hudCanvas.getContext('2d');
      const hudTexture = new THREE.CanvasTexture(hudCanvas);
      hudTexture.minFilter = THREE.LinearFilter;
      const hudMaterial = new THREE.MeshBasicMaterial({ map: hudTexture, transparent: true });
      const hudScene = new THREE.Scene();
      const hudCamera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 10);
      const hudMesh = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), hudMaterial);
      hudScene.add(hudMesh);

      function renderWithHUD() {
        renderer.autoClear = false;
        renderer.clear();
        renderer.render(scene, camera);
        
        if (isExportingVideo) {
          const w = renderer.domElement.width;
          const h = renderer.domElement.height;
          if (hudCanvas.width !== w || hudCanvas.height !== h) {
            hudCanvas.width = w;
            hudCanvas.height = h;
          }
          hudCtx.clearRect(0, 0, w, h);
          
          const state = computePlanState(currentDay);
          const pad = Math.max(20, w * 0.03);
          const boxH = Math.max(80, h * 0.12);
          const boxY = h - pad - boxH;
          
          hudCtx.fillStyle = 'rgba(15, 23, 42, 0.85)';
          hudCtx.beginPath();
          if (hudCtx.roundRect) {
            hudCtx.roundRect(pad, boxY, w - pad * 2, boxH, 8);
          } else {
            hudCtx.rect(pad, boxY, w - pad * 2, boxH);
          }
          hudCtx.fill();
          
          hudCtx.fillStyle = '#38bdf8';
          const titleSize = Math.floor(boxH * 0.35);
          hudCtx.font = `bold ${titleSize}px sans-serif`;
          hudCtx.fillText(`Ngày ${state.day} / 270 - ${state.date}`, pad + 20, boxY + titleSize + 10);
          
          hudCtx.fillStyle = '#f8fafc';
          const taskSize = Math.floor(boxH * 0.28);
          hudCtx.font = `${taskSize}px sans-serif`;
          const tasks = state.active.map(t => t.name).join(' | ');
          hudCtx.fillText(tasks.length > 120 ? tasks.substring(0, 120) + '...' : tasks, pad + 20, boxY + boxH - 15);
          
          hudTexture.needsUpdate = true;
          renderer.render(hudScene, hudCamera);
        }
      }

      function animate() {"""

content = content.replace("      function animate() {", hud_setup)

with open("app/static/bim/index.html", "w", encoding="utf-8") as f:
    f.write(content)
print("Definition injected!")