{% extends '_base.html' %} {% block html_head0 %} <script defer src="/static/socket.io.js?v={{ cache_bust_version }}"></script> {% endblock %} {% block content %} <div x-data="update"><div x-show="pageReady" x-transition class="container mx-auto w-full pt-10 pb-12 sm:pt-24 sm:pb-12 md:pt-28 lg:px-4"><div class="flex items-center justify-between"><h1 class="px-1 py-4 font-bold uppercase text-gray-600">{{locales.nav_update}}</h1></div> {% include '_notification.html' %} {% include '_ipk_manager.html' %} {% include '_firmware_update.html' %} {% include '_mcu_update.html' %} {% include '_upgrade_confirmation_modal.html' %} {% include '_checkpoint_confirmation_modal.html' %} {% include '_dynamic_tips.html' %} {% include '_log_display.html' %} </div> </div> {% endblock %} {% block bottom %} <script>
  function formatSize(file_size) {
    if (file_size == 0) return "0 Bytes";
    var k = 1024,
      dm = 2,
      sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"],
      i = Math.floor(Math.log(file_size) / Math.log(k));
    return parseFloat((file_size / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
  }
  function need_update(local_version, remote_version) {
    // eg:	1.0.10-0
    let local_version_n = local_version.replace("-", ".");
    let remote_version_n = remote_version.replace("-", ".");
    let local_version_arr = local_version_n.split('.');
    let remote_version_arr = remote_version_n.split('.');
    const len = Math.max(local_version_arr.length, remote_version_arr.length)
    while (local_version_arr.length < len) {
      local_version_arr.push('0')
    }
    while (remote_version_arr.length < len) {
      remote_version_arr.push('0')
    }
    for (let i = 0; i < len; i++) {
      const num1 = parseInt(local_version_arr[i])
      const num2 = parseInt(remote_version_arr[i])
      if (num1 > num2) {
        return -1;
      } else if (num1 < num2) {
        return 1;
      }
    }
    return 0;
  }
  document.addEventListener("alpine:init", () => {
    Alpine.store("app").set_page("update");
    Alpine.data("update", () => ({
      init() {
        // Tick the relative-time clock so "X ago" labels stay current.
        // Update every second for the first 2 minutes (fresh builds), then
        // back off to once a minute to avoid needless re-renders.
        setInterval(() => { this.now_ts = Math.floor(Date.now() / 1000); }, 1000);

        window.socket = io({ transports: ["polling"], upgrade: false });
        socket.on("connect", function () {
          socket.emit("client_connected", { data: "" });
        });

        socket.on("disconnect", () => {
          console.log("Socket disconnected - this might be due to firmware upgrade restart");
          if (this.firmware_upgrading && this.upgrade_status.stage === 'restart') {
            // System is restarting, show reconnection message
            this.upgrade_status.message = 'System is restarting... Attempting to reconnect...';
            this.startReconnectionMonitoring();
          }
        });

        socket.on("connect_error", (error) => {
          console.log("Socket connection error:", error);
          if (this.firmware_upgrading) {
            this.upgrade_status.message = 'Connection lost during upgrade. Attempting to reconnect...';
          }
        });

        socket.on("connected_response", (msg, cb) => {
        });

        socket.on("log_response", (msg, cb) => {
          // Output log removed - logs now go to Download and Install Logs window
          
          // Also add to download logs if download, upload, or firmware upgrade is in progress
          if (this.downloading_url || (this.uploading || this.show_download_logs) || this.firmware_upgrading) {
            // Remove timestamp from msg.data since add_download_log adds its own
            const logMessage = msg.data.replace(/^\[\d{2}:\d{2}:\d{2}\]\s*/, '');
            this.add_download_log(logMessage.trim());
          }
          
          if (msg.data.includes("ipk installed success.") || msg.data.includes("Packages update completed.") || 
              msg.data.includes("Archive packages installed successfully.")) {
            // Add success emoji to download logs (for both downloads and uploads)
            if (this.downloading_url || this.show_download_logs) {
              if (msg.data.includes("Archive packages installed successfully.")) {
                this.add_download_log("✅ Installation completed successfully!");
              } else if (msg.data.includes("ipk installed success.")) {
                this.add_download_log("✅ Package installed successfully!");
              }
            }
            
            this.uploading = false;
            this.downloading_url = false;
            this.selected_file_name = "";
            this.selected_file_size = "";
            this.$refs.file.value = "";
            this.updating_package = "";
            this.get_versions();
            setTimeout(() => {
              this.reboot_dlg_open = true;
            }, 2000);
          } else if (msg.data.includes("installation completed with warnings") || 
                    msg.data.includes("Archive installation failed") || 
                    msg.data.includes("ipk installation failed")) {
            // Add appropriate emoji based on status (for both downloads and uploads)
            if (this.downloading_url || this.show_download_logs) {
              if (msg.data.includes("completed with warnings")) {
                this.add_download_log("⚠️ Installation completed with warnings (some packages failed)");
              } else if (msg.data.includes("installation failed")) {
                this.add_download_log("❌ Installation failed");
              }
              // Stop the downloading state on failure/warning
              this.downloading_url = false;
            }
          }
          if (cb) cb();
        });

        socket.on("firmware_upgrade_status", (msg, cb) => {
          console.log("Firmware upgrade status update:", msg);
          this.upgrade_status = msg;

          // Implement monotonic progress - only allow forward movement
          if (msg.progress !== undefined && msg.progress > this.monotonic_progress) {
            this.monotonic_progress = msg.progress;
          }
          // Override the progress with our monotonic version
          this.upgrade_status.progress = this.monotonic_progress;

          // Pipe status updates into download log for verbose progress tracking
          if (msg.message && this.show_download_logs) {
            const stageIcons = {
              'starting': '🚀', 'download': '📥', 'verify': '🔐',
              'prepare': '🔧', 'install': '💾', 'restart': '🔄',
              'completed': '✅', 'error': '❌'
            };
            const icon = stageIcons[msg.stage] || 'ℹ️';
            const progressStr = msg.progress !== undefined ? ` [${msg.progress}%]` : '';
            this.add_download_log(`${icon}${progressStr} ${msg.message}`);
          }
          
          // Update firmware upgrading state
          this.firmware_upgrading = msg.active ||
                                   (['download', 'verify', 'prepare', 'install', 'restart'].includes(msg.stage) &&
                                    msg.stage !== 'completed' && msg.stage !== 'error');
          
          // Update keep_config setting from status
          if (msg.keep_config !== undefined) {
            this.keep_config = msg.keep_config;
          }
          if (msg.keep_config_option !== undefined) {
            this.keep_config_option = msg.keep_config_option;
          }
                                   
          // If upgrade completed successfully, hide modal and show success
          if (msg.stage === 'completed' || (msg.stage === 'restart' && msg.progress >= 100)) {
            this.firmware_upgrading = false;
            console.log("Firmware upgrade completed, will reload page in 10 seconds");
            // Optionally refresh the page after some time to check new firmware version
            setTimeout(() => {
              window.location.reload();
            }, 10000);
          }
          
          if (cb) cb();
        });

        socket.on("firmware_checkpoint_status", (msg, cb) => {
          console.log("Firmware checkpoint status update:", msg);
          this.checkpoint_status = msg;
          
          if (msg.stage === 'completed' && msg.file_path && msg.sha256) {
            // Download completed, show checkpoint dialog
            this.showCheckpointDialog(msg.file_path, msg.sha256, msg.logs || []);
          } else if (msg.stage === 'error') {
            this.checkpoint_mode = false;
            this.showNotification(`Checkpoint failed: ${msg.message}`, `检查点失败: ${msg.message}`, 'error');
          }
          
          if (cb) cb();
        });

        this.get_versions();
        
        // Check firmware servers in parallel
        Promise.all([
          this.check_firmware_updates(),
          this.check_dev_server()
        ]).finally(() => {
          console.log("Firmware checks completed");
        });
        
        this.check_ongoing_upgrade();
        
        // Show page immediately after basic initialization
        setTimeout(() => {
          this.pageReady = true;
          
          // Run MCU checks asynchronously after page is visible
          setTimeout(() => {
            this.check_mcu_updates();
          }, 500);
        }, 100);
      },
      pageReady: false,
      versions: [],
      remote_versions: [],
      firmware_update_available: false,
      firmware_check_completed: false,
      firmware_info: {},
      upgrade_firmware_info: {}, // Separate object for upgrade modal to prevent production display mixing
      show_log_message: false,
      uploading: false,
      updating_package: "",
      selected_file_name: "",
      selected_file_size: "",
      
      // URL download functionality
      download_url: "",
      downloading_url: false,
      is_valid_download_url: false,
      show_download_logs: false,
      download_progress: 0,
      download_log_output: "",
      
      // Firmware upgrade functionality
      show_upgrade_modal: false,
      firmware_upgrading: false,
      production_firmware_upgrading: false,
      canceling_firmware_download: false,
      confirming_firmware_upgrade: false,
      keep_config: true, // For backward compatibility
      keep_config_option: '-c', // Default to -c flag
      download_method: 'wget', // Default to wget
      auto_upgrade: true, // Default to automatic upgrade
      show_debug_info: false,
      
      // Checkpoint mode variables
      checkpoint_mode: false,
      show_checkpoint_confirm: false,
      checkpoint_status: {
        stage: '',
        message: '',
        file_path: '',
        sha256: '',
        logs: []
      },
      checkpoint_data: {
        file_path: '',
        sha256: '',
        logs: []
      },
      upgrade_status: {
        stage: '',
        progress: 0,
        message: ''
      },
      // Monotonic progress tracking - only moves forward
      monotonic_progress: 0,
      
      // Dev server functionality
      dev_server_reachable: false,
      dev_firmware_newer: false,
      dev_firmware_info: {},
      dev_versions_same: false,
      dev_firmware_upgrading: false,
      now_ts: Math.floor(Date.now() / 1000), // live clock for relative "X ago" timestamps
      
      // MCU Update functionality
      mcu_check_completed: false,
      mcu_checks_loading: false,
      mcu_dev_server_reachable: false,
      mcu_prod_update_available: false,
      mcu_dev_update_available: false,
      mcu_dev_versions_same: false,
      mcu_dev_info: {},
      mcu_prod_info: {},
      mcu_updating: false,
      mcu_dev_updating: false,
      mcu_prod_updating: false,
      show_mcu_upgrade_modal: false,
      confirming_mcu_upgrade: false,
      mcu_update_status: {
        stage: '',
        progress: 0,
        message: '',
        debug_logs: []
      },
      show_debug_logs: false,
      
      // Notification system
      notification: {
        show: false,
        message: '',
        message_en: '',
        message_cn: '',
        type: 'info' // 'success', 'error', 'info'
      },
      
      // Click counters for downgrade functionality
      dev_firmware_click_count: 0,
      prod_firmware_click_count: 0,
      mcu_dev_click_count: 0,
      mcu_prod_click_count: 0,
      upload(e) {
        const files = this.$refs.file.files;
        if (files === null || files.length == 0) {
          this.showNotification("{{locales.please_select_a_update_pkg}}", "请选择一个更新包", 'error');
          return;
        }
        
        try {
          this.uploading = true;
          // Use Download Logs instead of output log
          this.show_download_logs = true;
          this.download_log_output = "";
          this.add_download_log(`Starting upload: ${files[0].name}`);
          this.add_download_log("Uploading file, please wait...");
          
          const formData = new FormData();
          formData.append("package", files[0]);
          const xhr = new XMLHttpRequest();
          
          xhr.onload = () => {
            try {
              const resp = JSON.parse(xhr.responseText);
              this.add_download_log(`Upload successful: ${resp.file_name}`);
              this.add_download_log("Starting installation...");
              this.uploading = false;
              window.socket.emit("request_install", { filename: resp.file_name });
            } catch (parseError) {
              console.error('Error parsing upload response:', parseError);
              this.add_download_log(`Upload failed: Failed to parse response`);
              this.showNotification('Failed to parse upload response', '解析上传响应失败', 'error');
              this.uploading = false;
            }
          };
          
          xhr.onerror = () => {
            console.error('Upload request failed');
            this.add_download_log('Upload request failed');
            this.showNotification('Upload request failed', '上传请求失败', 'error');
            this.uploading = false;
          };
          
          xhr.open("POST", e.target.action);
          xhr.send(formData);
        } catch (error) {
          console.error('Error starting upload:', error);
          this.add_download_log(`Failed to start upload: ${error.message}`);
          this.showNotification('Failed to start upload', '启动上传失败', 'error');
          this.uploading = false;
        }
      },

      get_versions() {
        const xhr = new XMLHttpRequest();
        xhr.onload = () => {
          const resp = JSON.parse(xhr.responseText);
          this.versions = resp.versions.map((version_item) => {
            return {
              name: version_item.name,
              full_name: "",
              version: version_item.version,
              new_version: "",
              need_update: false,
            };
          });
          this.check_update();
        };
        xhr.open("GET", "/pkg_versions");
        xhr.send();
      },

      check_update(e) {
        const xhr = new XMLHttpRequest();
        xhr.onload = () => {
          const resp = JSON.parse(xhr.responseText);
          if (resp.status == "ok") {
            this.remote_versions = resp.versions;
            this.versions.forEach((local_package) => {
              this.remote_versions.forEach((remote_package) => {
                if (local_package["name"] === remote_package["name"]) {
                  local_package["new_version"] = remote_package["version"];
                  if (need_update(local_package["version"], remote_package["version"]) == 1) {
                    local_package.need_update = true;
                    local_package.full_name = remote_package["full_name"];
                  }
                }
              });
            });
          }
        };
        xhr.open("GET", "/pkg_update");
        xhr.send();
      },

      file_selected() {
        const files = this.$refs.file.files;
        if (files === null || files.length == 0) {
          return;
        }
        this.selected_file_name = files[0].name;
        this.selected_file_size = formatSize(files[0].size);
      },
      handle_file_drop(event) {
        const files = event.dataTransfer.files;
        if (files === null || files.length == 0) {
          return;
        }
        
        // Check if the file type is acceptable
        const file = files[0];
        const acceptedTypes = ['.ipk', '.gz', '.xz', '.bz2', '.tar'];
        const fileName = file.name.toLowerCase();
        const isValidType = acceptedTypes.some(type => fileName.endsWith(type));
        
        if (!isValidType) {
          this.showNotification('Invalid file type. Please select an IPK package file.', '文件类型无效，请选择IPK包文件。', 'error');
          return;
        }
        
        // Set the dropped file to the file input
        const dt = new DataTransfer();
        dt.items.add(file);
        this.$refs.file.files = dt.files;
        
        // Update the UI
        this.selected_file_name = file.name;
        this.selected_file_size = formatSize(file.size);
      },
      getFileSelectText() {
        return '{{locales.choose_your_file if locales.choose_your_file else "Choose file..."}}';
      },
      getUploadButtonText() {
        return this.uploading ? '{{locales.uploading if locales.uploading else "Uploading..."}}' : '{{locales.upload_ipks}}';
      },
      getDownloadButtonText() {
        return this.downloading_url ? '{{locales.downloading if locales.downloading else "Downloading..."}}' : '{{locales.download_button}}';
      },
      getUpgradeButtonText() {
        return this.confirming_firmware_upgrade ? '{{locales.starting if locales.starting else "Starting..."}}' : '{{locales.start_upgrade}}';
      },
      getDevFirmwareButtonText() {
        return this.dev_firmware_upgrading ? '{{locales.dev_upgrading if locales.dev_upgrading else "Upgrading..."}}' : '{{locales.dev_auto_upgrade_button}}';
      },
      getProdFirmwareButtonText() {
        return this.production_firmware_upgrading ? '{{locales.firmware_upgrading if locales.firmware_upgrading else "Upgrading..."}}' : '{{locales.firmware_auto_upgrade_button}}';
      },
      getCancelDownloadButtonText() {
        return this.canceling_firmware_download ? '{{locales.canceling if locales.canceling else "Canceling..."}}' : 'Cancel Download';
      },
      getMcuDevButtonText() {
        return this.mcu_dev_updating ? '{{locales.mcu_updating if locales.mcu_updating else "Updating..."}}' : '{{locales.mcu_dev_update_button if locales.mcu_dev_update_button else "Update MCU (Dev)"}}';
      },
      getMcuDevReinstallButtonText() {
        return this.mcu_dev_updating ? '{{locales.mcu_updating if locales.mcu_updating else "Updating..."}}' : '{{locales.mcu_dev_reinstall_button if locales.mcu_dev_reinstall_button else "Reinstall MCU"}}';
      },
      getMcuProdButtonText() {
        return this.mcu_prod_updating ? '{{locales.mcu_updating if locales.mcu_updating else "Updating..."}}' : '{{locales.mcu_auto_update_button if locales.mcu_auto_update_button else "Update MCU"}}';
      },
      getMcuUpgradeButtonText() {
        return this.confirming_mcu_upgrade ? '{{locales.starting if locales.starting else "Starting..."}}' : '{{locales.start_mcu_update if locales.start_mcu_update else "Start Update"}}';
      },
      getMcuVersionText(version) {
        return version || '{{locales.unknown if locales.unknown else "Unknown"}}';
      },
      getSaveButtonText() {
        return this.loading.saveSettings ? '{{ locales["common_saving"] | default("Saving...") }}' : '{{ locales["save_settings"] }}';
      },

      validate_download_url() {
        const url = this.download_url.trim();
        if (!url) {
          this.is_valid_download_url = false;
          return;
        }
        
        // Check if it's a valid URL
        try {
          new URL(url);
        } catch {
          this.is_valid_download_url = false;
          return;
        }
        
        // Check if it's a supported file extension
        const supportedExtensions = ['.ipk', '.gz', '.xz', '.bz2', '.tar'];
        const urlPath = url.toLowerCase();
        this.is_valid_download_url = supportedExtensions.some(ext => urlPath.endsWith(ext));
      },

      download_from_url() {
        if (!this.download_url || !this.is_valid_download_url) {
          this.showNotification('Please enter a valid IPK package URL', '请输入有效的IPK包链接', 'error');
          return;
        }

        this.downloading_url = true;
        this.show_download_logs = true;
        this.download_progress = 0;
        this.download_log_output = "";
        
        this.add_download_log(`Starting download from: ${this.download_url}`);
        
        try {
          // Create a fake filename from the URL for processing
          const urlParts = this.download_url.split('/');
          const filename = urlParts[urlParts.length - 1] || 'downloaded_package';
          
          this.add_download_log("Initiating download request...");
          
          // Send download request to server
          fetch('/api/v1/download_ipk', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
            },
            body: JSON.stringify({
              url: this.download_url
            })
          })
          .then(response => response.json())
          .then(data => {
            if (data.status === 'ok') {
              this.add_download_log(`Download successful: ${data.filename}`);
              this.add_download_log("Starting installation...");
              
              // Emit install request via socket
              window.socket.emit("request_install", { filename: data.filename });
              
              // Reset URL input
              this.download_url = "";
              this.is_valid_download_url = false;
            } else {
              this.add_download_log(`Download failed: ${data.message || 'Unknown error'}`);
              this.downloading_url = false;
            }
          })
          .catch(error => {
            this.add_download_log(`Download error: ${error.message}`);
            this.downloading_url = false;
          });
          
        } catch (error) {
          console.error('Error starting download:', error);
          this.add_download_log(`Failed to start download: ${error.message}`);
          this.downloading_url = false;
        }
      },

      add_download_log(message) {
        const timestamp = new Date().toLocaleTimeString();
        const logEntry = `[${timestamp}] ${message}\n`;
        this.download_log_output += logEntry;
        
        // Auto scroll to bottom with better timing and correct selector
        this.$nextTick(() => {
          setTimeout(() => {
            // Target the scrollable container that holds the download logs
            const logContainer = document.querySelector('[x-html="download_log_output"]')?.parentElement;
            
            if (logContainer && logContainer.classList.contains('overflow-y-auto')) {
              // Ensure smooth scrolling is disabled for instant scroll
              const originalBehavior = logContainer.style.scrollBehavior;
              logContainer.style.scrollBehavior = 'auto';
              
              // Scroll to bottom
              logContainer.scrollTop = logContainer.scrollHeight;
              
              // Restore original scroll behavior
              if (originalBehavior) {
                logContainer.style.scrollBehavior = originalBehavior;
              }
            }
          }, 5);
        });
      },

      clear_download_logs() {
        this.download_log_output = "";
        this.download_progress = 0;
        this.show_download_logs = false;
      },

      update(name, full_name, version) {
        this.updating_package = name;
        this.show_log_message = true;
        window.socket.emit("request_install_package", { package: full_name });
      },

      check_firmware_updates() {
        return fetch("/api/v1/firmware_update_check.json")
          .then(response => response.json())
          .then(data => {
            this.firmware_check_completed = true;
            if (data.status === "ok") {
              this.firmware_update_available = data.update_available;
              this.firmware_info = data;
              
              if (data.update_available) {
                console.log(`Firmware update available: ${data.remote_filename}`);
              } else {
                // Firmware is up to date
              }
            } else {
              console.warn("Failed to check firmware updates:", data.message);
              this.firmware_info = data;
            }
          })
          .catch(error => {
            this.firmware_check_completed = true;
            console.error("Error checking firmware updates:", error);
            this.showNotification('Failed to check firmware updates', '检查固件更新失败', 'error');
          });
      },

      check_dev_server() {
        return fetch("/api/v1/dev_server_check.json")
          .then(response => response.json())
          .then(data => {
            // Only show dev section if server returns OK status AND is reachable
            if (data.status === "ok" && data.reachable === true) {
              this.dev_server_reachable = true;
              this.dev_firmware_info = data;
              
              // Check if versions are actually the same by comparing revision numbers
              this.dev_versions_same = data.local_revision === data.dev_revision;
              this.dev_firmware_newer = data.dev_revision > data.local_revision;
              
              if (this.dev_versions_same) {
                // Dev server firmware matches local version but upgrade still available
              } else if (data.dev_revision > data.local_revision) {
                // Dev server has newer firmware
              } else {
                // Dev server has older firmware
              }
            } else {
              this.dev_server_reachable = false;
              if (data.status === "unreachable") {
                console.log("Dev server is not reachable:", data.message || "Server returned non-200 status");
              } else {
                console.log("Dev server is not available:", data.message || "Unknown error");
              }
            }
          })
          .catch(error => {
            this.dev_server_reachable = false;
            console.log("Dev server check failed:", error);
          });
      },

      start_prod_firmware_upgrade() {
        if (!this.firmware_info.download_url) {
          this.showNotification('No firmware download URL available', '固件下载链接不可用', 'error');
          return;
        }
        
        // Copy production firmware info to upgrade object
        this.upgrade_firmware_info = {
          download_url: this.firmware_info.download_url,
          remote_filename: this.firmware_info.remote_filename,
          local_version: this.firmware_info.local_version
        };
        this.show_upgrade_modal = true;
      },

      start_dev_firmware_upgrade() {
        if (!this.dev_firmware_info.dev_download_url) {
          this.showNotification('No dev server firmware download URL available', '开发服务器固件下载链接不可用', 'error');
          return;
        }
        
        try {
          this.dev_firmware_upgrading = true;
          
          // Use separate object for upgrade modal to avoid overwriting production firmware display
          this.upgrade_firmware_info = {
            download_url: this.dev_firmware_info.dev_download_url,
            remote_filename: this.dev_firmware_info.dev_filename,
            local_version: this.dev_firmware_info.local_version
          };
          this.show_upgrade_modal = true;
        } catch (error) {
          console.error('Error starting dev firmware upgrade:', error);
          this.showNotification('Failed to start dev firmware upgrade', '启动开发固件升级失败', 'error');
          this.dev_firmware_upgrading = false;
        }
      },

      format_version_display(version) {
        if (!version) return "";
        
        // If it's a filename like "photonicatwrt-25.02.0-r7565-1ebb07f39-rockchip..."
        // Extract version info from filename
        const filenameMatch = version.match(/photonicatwrt-(.+?)-r(\d+)/);
        if (filenameMatch) {
          return `R${filenameMatch[1]} / r${filenameMatch[2]}`;
        }
        
        // If it's already in format like "R25.02.0 / r7561-973b5947b"
        // Extract main version and r-number
        const versionMatch = version.match(/^(.+?)\s*\/\s*r(\d+)/);
        if (versionMatch) {
          return `${versionMatch[1]} / r${versionMatch[2]}`;
        }
        
        return version; // Return original if no match
      },

      format_version_with_hash(version, revision, hash) {
        if (!version) return "";
        
        // Extract release version (like R25.02.0)
        let releaseVersion = "";
        
        // If it's a filename like "photonicatwrt-25.02.0-r7565-1ebb07f39-rockchip..."
        const filenameMatch = version.match(/photonicatwrt-(.+?)-r(\d+)/);
        if (filenameMatch) {
          releaseVersion = `R${filenameMatch[1]}`;
        } else {
          // If it's already in format like "R25.02.0 / r7561-973b5947b"
          const versionMatch = version.match(/^(R[^/]+)/);
          if (versionMatch) {
            releaseVersion = versionMatch[1];
          } else {
            releaseVersion = version;
          }
        }
        
        // Format: R25.02.0 / r7566-973b5947b
        if (revision && hash) {
          return `${releaseVersion} / r${revision}-${hash}`;
        } else if (revision) {
          return `${releaseVersion} / r${revision}`;
        } else {
          return releaseVersion;
        }
      },

      format_version_with_hash_and_date(version, revision, hash, buildDate) {
        let versionText = this.format_version_with_hash(version, revision, hash);
        if (buildDate) {
          return `${versionText} / ${buildDate}`;
        }
        return versionText;
      },

      // Human-friendly "X ago" from a Unix epoch (seconds). Reactive on now_ts.
      relative_time(epoch) {
        if (!epoch) return "";
        let diff = this.now_ts - epoch;
        if (diff < 0) diff = 0;
        if (diff < 60) return `${diff}s ago`;
        const mins = Math.floor(diff / 60);
        if (mins < 60) return `${mins}m ago`;
        const hours = Math.floor(diff / 3600);
        if (hours < 24) return `${hours}h ago`;
        const days = Math.floor(diff / 86400);
        if (days < 30) return `${days} day${days === 1 ? '' : 's'} ago`;
        const months = Math.floor(days / 30);
        if (months < 12) return `${months} month${months === 1 ? '' : 's'} ago`;
        const years = Math.floor(days / 365);
        return `${years} year${years === 1 ? '' : 's'} ago`;
      },

      // "2026-06-11 07:12 (4m ago)" — absolute build date plus live relative span.
      format_build_date(buildDate, epoch) {
        if (!buildDate) return "";
        const rel = this.relative_time(epoch);
        return rel ? `${buildDate} (${rel})` : buildDate;
      },

      start_firmware_upgrade() {
        if (!this.upgrade_firmware_info.download_url) {
          this.showNotification('No firmware download URL available', '固件下载链接不可用', 'error');
          return;
        }
        
        try {
          this.confirming_firmware_upgrade = true;
          this.production_firmware_upgrading = true;
          
          console.log("Starting firmware upgrade:", {
            url: this.upgrade_firmware_info.download_url,
            keep_config: this.keep_config,
            keep_config_option: this.keep_config_option,
            download_method: this.download_method
          });
          
          this.show_upgrade_modal = false;
          this.firmware_upgrading = true;
          
          // Reset upgrade status and monotonic progress
          this.upgrade_status = {
            stage: 'starting',
            progress: 0,
            message: 'Preparing firmware upgrade...'
          };
          this.monotonic_progress = 0;
          
          // Determine keep_config based on keep_config_option
          const shouldKeepConfig = this.keep_config_option !== '';
          
          // Show logs expanded by default for firmware upgrades
          this.show_download_logs = true;
          this.download_log_output = "";
          this.add_download_log("🔧 Starting firmware upgrade...");
          this.add_download_log(`📦 Target firmware: ${this.upgrade_firmware_info.download_url.split('/').pop()}`);
          this.add_download_log(`🌐 Source URL: ${this.upgrade_firmware_info.download_url}`);
          this.add_download_log(`⚙️ Keep config: ${shouldKeepConfig ? 'Yes (' + this.keep_config_option + ')' : 'No (fresh install)'}`);
          this.add_download_log(`📥 Download method: ${this.download_method}`);
          if (this.upgrade_firmware_info.local_version) {
            this.add_download_log(`📋 Current version: ${this.upgrade_firmware_info.local_version}`);
          }
          this.add_download_log("🚀 Sending upgrade request to server...");
          
          // Emit socket event to start firmware upgrade
          window.socket.emit("request_firmware_upgrade", {
            firmware_url: this.upgrade_firmware_info.download_url,
            keep_config: shouldKeepConfig, // Set based on whether any preservation option is selected
            keep_config_option: this.keep_config_option, // Specific option (-c, -o, or empty)
            download_method: this.download_method
          });
          
          // Reset loading states after a delay
          setTimeout(() => {
            this.confirming_firmware_upgrade = false;
            this.production_firmware_upgrading = false;
            this.dev_firmware_upgrading = false;
          }, 2000);
        } catch (error) {
          console.error('Error starting firmware upgrade:', error);
          this.showNotification('Failed to start firmware upgrade', '启动固件升级失败', 'error');
          this.confirming_firmware_upgrade = false;
          this.production_firmware_upgrading = false;
          this.dev_firmware_upgrading = false;
          this.firmware_upgrading = false;
        }
      },

      check_ongoing_upgrade() {
        // Check if there's an ongoing firmware upgrade when page loads
        fetch("/api/v1/firmware_upgrade_status.json")
          .then(response => response.json())
          .then(data => {
            if (data.status === "ok" && data.active) {
              // There's an ongoing upgrade, update the UI
              this.upgrade_status = data;
              this.firmware_upgrading = true;
              this.keep_config = data.keep_config || true;
              this.keep_config_option = data.keep_config_option || '-c';
              
              // Initialize monotonic progress with current progress
              this.monotonic_progress = data.progress || 0;
              
              // Request current status via socket for real-time updates
              window.socket.emit("get_firmware_upgrade_status_socket", {});
              
              console.log("Resumed monitoring ongoing firmware upgrade:", data.stage);
            }
          })
          .catch(error => {
            console.warn("Failed to check ongoing firmware upgrade:", error);
            this.showNotification('Failed to check ongoing firmware upgrade', '检查正在进行的固件升级失败', 'error');
          });
      },

      cancel_firmware_upgrade() {
        if (this.upgrade_status.stage === 'download') {
          if (confirm('{{locales.confirm_cancel_download}}')) {
            try {
              this.canceling_firmware_download = true;
              
              // Send cancel request
              window.socket.emit("cancel_firmware_upgrade", {});
              
              // Reset states after a delay
              setTimeout(() => {
                this.firmware_upgrading = false;
                this.production_firmware_upgrading = false;
                this.dev_firmware_upgrading = false;
                this.canceling_firmware_download = false;
                this.confirming_firmware_upgrade = false;
                this.upgrade_status = {
                  stage: '',
                  progress: 0,
                  message: ''
                };
                this.monotonic_progress = 0;
              }, 1000);
            } catch (error) {
              console.error('Error canceling firmware upgrade:', error);
              this.showNotification('Failed to cancel firmware download', '取消固件下载失败', 'error');
              this.canceling_firmware_download = false;
              this.firmware_upgrading = false;
              this.production_firmware_upgrading = false;
              this.dev_firmware_upgrading = false;
              this.confirming_firmware_upgrade = false;
            }
          }
        }
      },
      
      // Notification system functions
      showNotification(message_en, message_cn = '', type = 'info') {
        this.notification.message_en = message_en;
        this.notification.message_cn = message_cn;
        this.notification.message = message_en; // Fallback
        this.notification.type = type;
        this.notification.show = true;
        
        // Auto-hide after 4 seconds for success and info messages
        if (type !== 'error') {
          setTimeout(() => {
            this.notification.show = false;
          }, 4000);
        }
        
        // Also log to console for debugging
        console.log(type.toUpperCase() + ':', message_en, message_cn ? `(${message_cn})` : '');
      },
      
      hideNotification() {
        this.notification.show = false;
      },
      
      // MCU Update functions
      check_mcu_updates() {
        this.mcu_checks_loading = true;
        this.mcu_check_completed = false;
        
        // Check both dev and production MCU servers in parallel
        Promise.all([
          this.check_mcu_dev_server(),
          this.check_mcu_prod_server()
        ]).finally(() => {
          this.mcu_check_completed = true;
          this.mcu_checks_loading = false;
        });
      },

      check_mcu_dev_server() {
        return fetch("/api/v1/mcu_dev_check.json")
          .then(response => response.json())
          .then(data => {
            if (data.status === "ok" && data.reachable === true) {
              this.mcu_dev_server_reachable = true;
              this.mcu_dev_info = data;
              this.mcu_dev_versions_same = data.local_version === data.dev_version;
              this.mcu_dev_update_available = data.update_available || data.newer_available;
              
              if (data.newer_available) {
                // Dev MCU server has newer firmware
              } else if (data.same_version) {
                // Dev MCU server firmware matches local version
              }
            } else {
              this.mcu_dev_server_reachable = false;
              console.log("Dev MCU server is not reachable:", data.message || "Unknown error");
            }
          })
          .catch(error => {
            this.mcu_dev_server_reachable = false;
            console.log("Dev MCU server check failed:", error);
          });
      },

      check_mcu_prod_server() {
        return fetch("/api/v1/mcu_prod_check.json")
          .then(response => response.json())
          .then(data => {
            this.mcu_prod_info = data;
            
            if (data.status === "ok" && data.reachable === true) {
                this.mcu_prod_update_available = data.update_available || data.newer_available;
            }
          })
          .catch(error => {
            console.error("Error checking production MCU updates:", error);
            this.showNotification('Failed to check MCU updates', '检查MCU更新失败', 'error');
          });
      },

      start_mcu_dev_update() {
        if (!this.mcu_dev_info.dev_firmware_url) {
          this.showNotification('No dev MCU firmware URL available', '开发MCU固件下载链接不可用', 'error');
          return;
        }
        
        this.mcu_dev_updating = true;
        this.mcu_updating = true;
        
        this.perform_mcu_update(this.mcu_dev_info.dev_firmware_url, this.mcu_dev_info.dev_sha256);
      },

      start_mcu_prod_update() {
        this.show_mcu_upgrade_modal = false;
        this.confirming_mcu_upgrade = true;
        this.mcu_prod_updating = true;
        this.mcu_updating = true;
        
        this.perform_mcu_update(this.mcu_prod_info.prod_firmware_url, this.mcu_prod_info.prod_sha256);
        
        // Reset loading states after a delay
        setTimeout(() => {
          this.confirming_mcu_upgrade = false;
        }, 2000);
      },

      perform_mcu_update(firmware_url, sha256) {
        // Starting MCU firmware update
        
        // Reset update status
        this.mcu_update_status = {
          stage: 'starting',
          progress: 0,
          message: 'Preparing MCU firmware update...'
        };
        
        // Start the update
        fetch("/api/v1/mcu_update.json", {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ 
            firmware_url: firmware_url,
            sha256: sha256
          })
        })
        .then(response => response.json())
        .then(data => {
          if (data.status === 'ok') {
            console.log("MCU update started successfully");
            // Start polling for status updates
            this.poll_mcu_update_status();
          } else {
            throw new Error(data.message || 'Failed to start MCU update');
          }
        })
        .catch(error => {
          console.error('Error starting MCU update:', error);
          this.showNotification('Failed to start MCU update', '启动MCU更新失败', 'error');
          this.reset_mcu_updating_states();
        });
      },

      poll_mcu_update_status() {
        const pollInterval = setInterval(() => {
          fetch("/api/v1/mcu_update_status.json")
            .then(response => response.json())
            .then(data => {
              this.mcu_update_status = data;
              
              if (data.stage === 'complete') {
                this.reset_mcu_updating_states();
                this.showNotification('MCU update completed successfully', 'MCU更新成功完成', 'success');
                clearInterval(pollInterval);
                
                // Refresh MCU version info
                setTimeout(() => {
                  this.check_mcu_updates();
                }, 3000);
              } else if (data.stage === 'error') {
                this.reset_mcu_updating_states();
                this.showNotification(`MCU update failed: ${data.error}`, `MCU更新失败: ${data.error}`, 'error');
                clearInterval(pollInterval);
              } else if (!data.active) {
                // Update completed but not explicitly marked as complete
                this.reset_mcu_updating_states();
                clearInterval(pollInterval);
              }
            })
            .catch(error => {
              console.error('Error polling MCU update status:', error);
              clearInterval(pollInterval);
              this.reset_mcu_updating_states();
            });
        }, 2000); // Poll every 2 seconds
      },

      // Handle remote version clicks for potential downgrades
      handleRemoteVersionClick(type) {
        if (type === 'dev_firmware') {
          this.dev_firmware_click_count++;
        } else if (type === 'prod_firmware') {
          this.prod_firmware_click_count++;
        } else if (type === 'mcu_dev') {
          this.mcu_dev_click_count++;
        } else if (type === 'mcu_prod') {
          this.mcu_prod_click_count++;
        }
        
        const clickCount = this[type + '_click_count'];
        
        if (clickCount >= 10) {
          const confirmMessage = clickCount === 10 ? 
            'You have clicked the remote version 10 times. Do you really want to downgrade/install this version?' :
            `You have clicked ${clickCount} times. Do you really want to downgrade/install this version?`;
          
          if (confirm(confirmMessage)) {
            this.performVersionInstall(type);
            // Reset counter after action
            this[type + '_click_count'] = 0;
          }
        }
      },
      
      performVersionInstall(type) {
        if (type === 'dev_firmware') {
          this.start_dev_firmware_upgrade();
        } else if (type === 'prod_firmware') {
          this.start_firmware_upgrade();
        } else if (type === 'mcu_dev') {
          this.start_mcu_dev_update();
        } else if (type === 'mcu_prod') {
          this.start_mcu_prod_update();
        }
      },
      
      reset_mcu_updating_states() {
        this.mcu_updating = false;
        this.mcu_dev_updating = false;
        this.mcu_prod_updating = false;
        this.confirming_mcu_upgrade = false;
      },

      start_checkpoint_mode() {
        if (!this.upgrade_firmware_info.download_url) {
          this.showNotification('No firmware download URL available', '固件下载链接不可用', 'error');
          return;
        }
        
        this.checkpoint_mode = true;
        this.show_upgrade_modal = false;
        this.confirming_firmware_upgrade = true;
        
        // Reset checkpoint status
        this.checkpoint_status = {
          stage: 'downloading',
          message: 'Downloading firmware...',
          file_path: '',
          sha256: '',
          logs: []
        };
        
        console.log("Starting checkpoint mode - downloading firmware for inspection");
        
        // Start download process
        window.socket.emit("request_firmware_checkpoint", {
          firmware_url: this.upgrade_firmware_info.download_url,
          keep_config: this.keep_config_option !== '',
          keep_config_option: this.keep_config_option,
          download_method: this.download_method
        });
        
        // Reset loading states after a delay
        setTimeout(() => {
          this.confirming_firmware_upgrade = false;
        }, 2000);
      },

      showCheckpointDialog(filePath, sha256, logs) {
        this.checkpoint_data = {
          file_path: filePath,
          sha256: sha256,
          logs: logs
        };
        this.checkpoint_mode = false;
        this.show_checkpoint_confirm = true;
      },

      confirmCheckpointInstall() {
        this.show_checkpoint_confirm = false;
        this.proceedWithInstallation(this.checkpoint_data.file_path, this.checkpoint_data.sha256);
      },

      cancelCheckpointInstall() {
        this.show_checkpoint_confirm = false;
        this.showNotification('Firmware upgrade cancelled', '固件升级已取消', 'info');
        
        // Cleanup downloaded file on server
        if (this.checkpoint_data.file_path) {
          window.socket.emit("cleanup_checkpoint_file", {
            file_path: this.checkpoint_data.file_path
          });
        }
      },

      proceedWithInstallation(filePath, sha256) {
        console.log("Proceeding with firmware installation:", filePath);
        
        this.firmware_upgrading = true;
        this.checkpoint_mode = false;
        
        // Reset upgrade status and monotonic progress
        this.upgrade_status = {
          stage: 'prepare',
          progress: 0,
          message: 'Preparing firmware installation...'
        };
        this.monotonic_progress = 0;
        
        // Send install request
        window.socket.emit("request_firmware_install_from_checkpoint", {
          file_path: filePath,
          sha256: sha256,
          keep_config: this.keep_config_option !== '',
          keep_config_option: this.keep_config_option
        });
      },

      startReconnectionMonitoring() {
        console.log("Starting reconnection monitoring after firmware upgrade...");
        let reconnectAttempts = 0;
        const maxAttempts = 60; // Try for up to 5 minutes
        const reconnectInterval = 5000; // Check every 5 seconds
        
        const checkConnection = () => {
          reconnectAttempts++;
          
          if (reconnectAttempts >= maxAttempts) {
            this.upgrade_status.message = 'Reconnection timeout. Please manually refresh the page or check your connection.';
            return;
          }
          
          // Try to ping server to check if it's back online
          fetch('/api/v1/system/board.json', { 
            method: 'GET',
            cache: 'no-cache',
            timeout: 3000 
          })
          .then(response => {
            if (response.ok) {
              console.log("Server is back online! Redirecting...");
              this.upgrade_status.message = 'System is back online! Redirecting...';
              
              // Wait a moment for user to see the message, then redirect
              setTimeout(() => {
                // Redirect to login or update page based on auth status
                if (response.status === 401 || response.status === 403) {
                  window.location.href = '/login';
                } else {
                  window.location.reload();
                }
              }, 2000);
            } else {
              throw new Error(`Server returned ${response.status}`);
            }
          })
          .catch(error => {
            console.log(`Reconnection attempt ${reconnectAttempts}/${maxAttempts} failed:`, error.message);
            this.upgrade_status.message = `System restarting... Reconnection attempt ${reconnectAttempts}/${maxAttempts}`;
            
            // Continue checking
            setTimeout(checkConnection, reconnectInterval);
          });
        };
        
        // Start checking after initial delay
        setTimeout(checkConnection, reconnectInterval);
      }
    }));
  });
</script> {% endblock %}