(function () {
  /**
   * Nexus Terminal — connection profile editor.
   * Renders a slide-out drawer for creating and editing connection profiles.
   * Dynamically switches form sections based on the selected protocol.
   */

  const { createElement, escapeHtml, generateId, $ } = window.NexusTerminal;

  /**
   * Default values mirroring the Go backend defaults.
   */
  const DEFAULTS = {
    ssh: {
      port: 22,
      protocol: "ssh",
      ssh: {
        authMethods: ["publickey", "password", "keyboard-interactive"],
        secretMode: "saved",
        keySecretMode: "saved",
        hostKeyPolicy: "ask",
        terminalType: "xterm-256color",
        keepaliveInterval: 30,
        keepaliveCountMax: 3,
        compression: false,
        jumpHosts: [],
        portForwards: [],
        startupCommand: "",
        envVars: {},
        loginScripts: [],
      },
    },
    telnet: {
      port: 23,
      protocol: "telnet",
      telnet: {
        localEcho: false,
        lineEnding: "crlf",
        terminalType: "xterm-256color",
        encoding: "utf-8",
        negotiationDebug: false,
        lineMode: false,
        loginScripts: [],
      },
    },
    raw: {
      port: 23,
      protocol: "raw",
      raw: {
        autoReconnect: false,
        lineEnding: "crlf",
        encoding: "utf-8",
        showTimestamps: false,
        showDirection: false,
        payloadPresets: [],
      },
    },
    github: {
      port: 443,
      protocol: "github",
      host: "github.com",
      github: {
        baseURL: "https://api.github.com",
        secretMode: "saved",
        refreshIntervalSecs: 300,
      },
    },
  };

  class ProfileEditor {
    /**
     * @param {App} app
     */
    constructor(app) {
      this.app = app;

      /** @type {HTMLElement|null} */
      this.drawer = null;

      /** @type {Object|null} The profile currently being edited. */
      this._profile = null;

      /** @type {boolean} */
      this._isNew = false;
    }

    // ── Public API ───────────────────────────────────────────────────

    /**
     * Opens the editor with a blank profile of the given protocol.
     * @param {string} [protocol='ssh']
     */
    openNew(protocol = "ssh") {
      const profile = this._defaultProfile(protocol);
      this._isNew = true;
      this._profile = profile;
      this.render(profile, true);
    }

    /**
     * Opens the editor pre-populated with an existing profile.
     * @param {string} profileId
     */
    openEdit(profileId) {
      const profile = this.app.state.getProfile(profileId);
      if (!profile) {
        this.app.notifications.error("Profile not found");
        return;
      }
      this._isNew = false;
      this._profile = JSON.parse(JSON.stringify(profile)); // deep clone
      this.render(this._profile, false);
    }

    /**
     * Renders (or re-renders) the editor drawer.
     * @param {Object} profile
     * @param {boolean} isNew
     */
    render(profile, isNew) {
      this.close();

      const overlay = createElement("div", "drawer-backdrop");
      const drawer = createElement("div", "drawer");

      // ── Header ──────────────────────────────────────────────
      const header = createElement("div", "drawer-header");
      header.innerHTML = `
            <h2 class="drawer-title">${isNew ? "New Connection" : "Edit Connection"}</h2>
            <button class="drawer-close" aria-label="Close">&times;</button>
        `;
      drawer.appendChild(header);

      // ── Protocol selector tabs ──────────────────────────────
      const protocols = ["ssh", "telnet", "raw", "github"];
      const tabBar = createElement("div", "drawer-protocol-tabs");
      for (const proto of protocols) {
        const label = proto === "github" ? "GitHub" : proto.toUpperCase();
        const btn = createElement(
          "button",
          `drawer-proto-tab ${profile.protocol === proto ? "active" : ""}`,
          {
            textContent: label,
            dataset: { proto },
          },
        );
        btn.addEventListener("click", () => this.handleProtocolChange(proto));
        tabBar.appendChild(btn);
      }
      drawer.appendChild(tabBar);

      // ── Scrollable body ─────────────────────────────────────
      const body = createElement("div", "drawer-body");

      // General section (common to all protocols)
      body.appendChild(this._renderGeneralSection(profile));

      // Protocol-specific sections
      switch (profile.protocol) {
        case "ssh":
          this._renderSSHSections(profile).forEach((s) => body.appendChild(s));
          break;
        case "telnet":
          this._renderTelnetSections(profile).forEach((s) =>
            body.appendChild(s),
          );
          break;
        case "raw":
          this._renderRAWSections(profile).forEach((s) => body.appendChild(s));
          break;
        case "github":
          this._renderGitHubSections(profile).forEach((s) =>
            body.appendChild(s),
          );
          break;
      }

      // Terminal section (SSH and Telnet only)
      if (profile.protocol !== "raw" && profile.protocol !== "github") {
        body.appendChild(this._renderTerminalSection(profile));
      }

      // Notes & Tags section (common)
      body.appendChild(this._renderNotesSection(profile));

      drawer.appendChild(body);

      // ── Footer ──────────────────────────────────────────────
      const footer = createElement("div", "drawer-footer");
      const cancelBtn = createElement("button", "btn btn-secondary", {
        textContent: "Cancel",
      });
      const testBtn = createElement("button", "btn btn-outline", {
        textContent: "Test",
      });
      const saveBtn = createElement("button", "btn btn-primary", {
        textContent: isNew ? "Create" : "Save",
      });
      const connectBtn = createElement("button", "btn btn-accent", {
        textContent: isNew ? "Create & Connect" : "Save & Connect",
      });
      const deleteBtn = !isNew
        ? createElement("button", "btn btn-danger", { textContent: "Delete" })
        : null;

      cancelBtn.addEventListener("click", () => this.close());
      testBtn.addEventListener("click", () => this._testConnection());
      saveBtn.addEventListener("click", () => this._handleSave(false));
      connectBtn.addEventListener("click", () => this._handleSave(true));
      if (deleteBtn) {
        deleteBtn.addEventListener("click", () => this._handleDelete());
      }

      if (deleteBtn) footer.appendChild(deleteBtn);
      footer.appendChild(cancelBtn);
      footer.appendChild(testBtn);
      footer.appendChild(saveBtn);
      footer.appendChild(connectBtn);
      drawer.appendChild(footer);

      // ── Events ──────────────────────────────────────────────
      header
        .querySelector(".drawer-close")
        .addEventListener("click", () => this.close());
      overlay.addEventListener("click", () => this.close());

      overlay.appendChild(drawer);
      document.body.appendChild(overlay);
      this.drawer = overlay;

      // Trigger visibility after append so CSS transitions animate
      requestAnimationFrame(() => {
        overlay.classList.add("is-visible");
        drawer.classList.add("is-visible");
      });

      // Prevent overlay click from reaching through the drawer
      drawer.addEventListener("click", (e) => e.stopPropagation());

      // Focus the first input
      const firstInput = drawer.querySelector("input, select, textarea");
      if (firstInput) firstInput.focus();
    }

    /**
     * Closes the editor drawer.
     */
    close() {
      if (this.drawer) {
        this.drawer.remove();
        this.drawer = null;
      }
    }

    /**
     * Handles protocol change from the tab bar.
     * @param {string} protocol
     */
    handleProtocolChange(protocol) {
      if (this._profile.protocol === protocol) return;

      // Preserve common fields, reset protocol-specific ones
      this._collectFormValues();
      const base = this._defaultProfile(protocol);
      base.id = this._profile.id;
      base.displayName = this._profile.displayName;
      base.description = this._profile.description;
      base.host = this._profile.host;
      base.username = this._profile.username;
      base.tags = this._profile.tags;
      base.notes = this._profile.notes;
      base.favourite = this._profile.favourite;

      this._profile = base;
      this.render(this._profile, this._isNew);
    }

    // ── Section renderers ────────────────────────────────────────────

    /** @private */
    _renderGeneralSection(profile) {
      const fields = [
        this._field(
          "text",
          "displayName",
          "Display Name",
          profile.displayName,
          { placeholder: "My Server" },
        ),
        this._field("text", "host", "Host", profile.host, {
          placeholder:
            profile.protocol === "github"
              ? "github.com"
              : "192.168.1.1 or example.com",
          required: true,
        }),
      ];

      // Port and username not relevant for GitHub connections
      if (profile.protocol !== "github") {
        fields.push(
          this._field("number", "port", "Port", profile.port, {
            min: 1,
            max: 65535,
            required: true,
          }),
        );
        fields.push(
          this._field("text", "username", "Username", profile.username, {
            placeholder: "root",
          }),
        );
      }

      fields.push(this._renderGroupField(profile));
      fields.push(
        this._field("text", "description", "Description", profile.description, {
          placeholder: "Optional description",
        }),
      );

      return this._renderSection("General", fields);
    }

    /**
     * Renders a combo-box for the Group field — a text input backed by a
     * datalist of existing group names. Typing a new name creates a group.
     * @param {Object} profile
     * @returns {HTMLElement}
     * @private
     */
    _renderGroupField(profile) {
      const group = createElement("div", "form-group");
      const label = createElement("label", "form-label", {
        textContent: "Group",
        for: "field-folder",
      });
      group.appendChild(label);

      // Collect distinct group names from all profiles
      const existingGroups = [
        ...new Set(
          this.app.state.profiles
            .map((p) => (p.folder || "").trim())
            .filter(Boolean),
        ),
      ].sort((a, b) => a.localeCompare(b));

      // Create the datalist so the browser offers autocomplete
      const listId = "folder-suggestions";
      const datalist = document.createElement("datalist");
      datalist.id = listId;
      for (const g of existingGroups) {
        const opt = document.createElement("option");
        opt.value = g;
        datalist.appendChild(opt);
      }
      group.appendChild(datalist);

      const input = createElement("input", "form-input", {
        type: "text",
        id: "field-folder",
        name: "folder",
        value: profile.folder || "",
        placeholder: "e.g. Production, Staging, Home Lab",
      });
      input.setAttribute("list", listId);
      input.setAttribute("autocomplete", "off");
      group.appendChild(input);

      const hint = createElement("span", "form-hint", {
        textContent:
          "Choose an existing group or type a new name to create one",
      });
      group.appendChild(hint);

      return group;
    }

    /** @private */
    _renderSSHSections(profile) {
      const ssh = profile.ssh || {};
      const sections = [];

      // Authentication
      sections.push(
        this._renderSection("Authentication", [
          this._field(
            "select",
            "ssh.secretMode",
            "Password Mode",
            ssh.secretMode,
            {
              options: [
                { value: "saved", label: "Saved in vault" },
                { value: "session-only", label: "Session only" },
                { value: "ask-every-time", label: "Ask every time" },
              ],
            },
          ),
          this._field(
            "tags",
            "ssh.authMethods",
            "Auth Methods",
            (ssh.authMethods || []).join(", "),
            {
              help: "Comma-separated: publickey, password, keyboard-interactive",
            },
          ),
        ]),
      );

      // Key & Passphrase
      sections.push(
        this._renderSection("Key & Passphrase", [
          this._field(
            "text",
            "ssh.privateKeyPath",
            "Private Key Path",
            ssh.privateKeyPath,
            {
              placeholder: "~/.ssh/id_ed25519",
            },
          ),
          this._field(
            "select",
            "ssh.keySecretMode",
            "Passphrase Mode",
            ssh.keySecretMode,
            {
              options: [
                { value: "saved", label: "Saved in vault" },
                { value: "session-only", label: "Session only" },
                { value: "ask-every-time", label: "Ask every time" },
              ],
            },
          ),
        ]),
      );

      // Host Verification
      sections.push(
        this._renderSection("Host Verification", [
          this._field(
            "select",
            "ssh.hostKeyPolicy",
            "Host Key Policy",
            ssh.hostKeyPolicy,
            {
              options: [
                { value: "strict", label: "Strict (reject unknown)" },
                { value: "ask", label: "Ask (prompt on unknown)" },
                { value: "accept-new", label: "Accept new keys" },
                { value: "insecure", label: "Insecure (accept all)" },
              ],
            },
          ),
        ]),
      );

      // Jump Hosts
      sections.push(
        this._renderSection(
          "Jump Hosts",
          [this._renderJumpHostsList(ssh.jumpHosts || [])],
          true,
        ),
      );

      // Port Forwarding
      sections.push(
        this._renderSection(
          "Port Forwarding",
          [this._renderPortForwardsList(ssh.portForwards || [])],
          true,
        ),
      );

      // Startup
      sections.push(
        this._renderSection("Startup", [
          this._field(
            "text",
            "ssh.startupCommand",
            "Startup Command",
            ssh.startupCommand,
            {
              placeholder: "Optional command to run after connecting",
            },
          ),
          this._field(
            "textarea",
            "ssh.envVarsText",
            "Environment Variables",
            this._envVarsToText(ssh.envVars),
            {
              placeholder: "KEY=VALUE (one per line)",
              rows: 3,
            },
          ),
        ]),
      );

      // Login Scripts (expect-style)
      sections.push(
        this._renderLoginScriptSection("ssh", ssh.loginScripts || []),
      );

      // SSH Agent
      sections.push(
        this._renderSection(
          "SSH Agent",
          [
            this._field(
              "toggle",
              "ssh.agentAuth",
              "Use SSH Agent for Authentication",
              ssh.agentAuth,
              {
                help: "Authenticate using keys from the local SSH agent (ssh-agent)",
              },
            ),
            this._field(
              "toggle",
              "ssh.agentForwarding",
              "Forward Agent to Remote",
              ssh.agentForwarding,
              {
                help: "Allow the remote host to use your local SSH agent keys (equivalent to ssh -A)",
              },
            ),
          ],
          true,
        ),
      );

      // TOTP / 2FA
      sections.push(this._renderTOTPSection(profile));

      // Proxy
      sections.push(
        this._renderSection(
          "Proxy",
          [
            this._field(
              "select",
              "ssh.proxyType",
              "Proxy Type",
              ssh.proxyType || "none",
              {
                options: [
                  { value: "none", label: "None (direct connection)" },
                  { value: "socks5", label: "SOCKS5" },
                  { value: "http", label: "HTTP CONNECT" },
                ],
              },
            ),
            this._field(
              "text",
              "ssh.proxyHost",
              "Proxy Host",
              ssh.proxyHost || "",
              {
                placeholder: "proxy.example.com",
              },
            ),
            this._field(
              "number",
              "ssh.proxyPort",
              "Proxy Port",
              ssh.proxyPort || 1080,
              { min: 1, max: 65535 },
            ),
            this._field(
              "text",
              "ssh.proxyUsername",
              "Proxy Username",
              ssh.proxyUsername || "",
              {
                placeholder: "Optional",
              },
            ),
            this._field(
              "text",
              "ssh.proxyPassword",
              "Proxy Password",
              ssh.proxyPassword || "",
              {
                placeholder: "Optional",
              },
            ),
          ],
          true,
        ),
      );

      // Advanced
      sections.push(
        this._renderSection(
          "Advanced",
          [
            this._field(
              "text",
              "ssh.terminalType",
              "Terminal Type",
              ssh.terminalType,
              { placeholder: "xterm-256color" },
            ),
            this._field(
              "number",
              "ssh.keepaliveInterval",
              "Keepalive Interval (s)",
              ssh.keepaliveInterval,
              { min: 0 },
            ),
            this._field(
              "number",
              "ssh.keepaliveCountMax",
              "Max Missed Keepalives",
              ssh.keepaliveCountMax,
              { min: 0 },
            ),
            this._field(
              "toggle",
              "ssh.compression",
              "Compression",
              ssh.compression,
            ),
            this._field(
              "toggle",
              "ssh.autoReconnect",
              "Auto-Reconnect",
              ssh.autoReconnect,
              {
                help: "Automatically reconnect with exponential backoff when the connection drops",
              },
            ),
            this._field(
              "number",
              "ssh.maxReconnectTries",
              "Max Reconnect Attempts",
              ssh.maxReconnectTries || 5,
              { min: 1, max: 20 },
            ),
          ],
          true,
        ),
      );

      return sections;
    }

    /** @private */
    _renderTelnetSections(profile) {
      const tel = profile.telnet || {};
      const sections = [];

      sections.push(
        this._renderSection("Login", [
          this._field(
            "toggle",
            "telnet.localEcho",
            "Local Echo",
            tel.localEcho,
          ),
          this._field("toggle", "telnet.lineMode", "Line Mode", tel.lineMode),
        ]),
      );

      sections.push(
        this._renderSection("Terminal & Encoding", [
          this._field(
            "text",
            "telnet.terminalType",
            "Terminal Type",
            tel.terminalType,
            { placeholder: "xterm-256color" },
          ),
          this._field("select", "telnet.encoding", "Encoding", tel.encoding, {
            options: [
              { value: "utf-8", label: "UTF-8" },
              { value: "ascii", label: "ASCII" },
              { value: "iso-8859-1", label: "ISO 8859-1" },
            ],
          }),
        ]),
      );

      sections.push(
        this._renderSection("Echo & Line Endings", [
          this._field(
            "select",
            "telnet.lineEnding",
            "Line Ending",
            tel.lineEnding,
            {
              options: [
                { value: "crlf", label: "CR+LF (\\r\\n)" },
                { value: "lf", label: "LF (\\n)" },
                { value: "cr", label: "CR (\\r)" },
                { value: "none", label: "None" },
              ],
            },
          ),
        ]),
      );

      sections.push(
        this._renderSection(
          "Negotiation",
          [
            this._field(
              "toggle",
              "telnet.negotiationDebug",
              "Debug Negotiation",
              tel.negotiationDebug,
            ),
          ],
          true,
        ),
      );

      // Login Scripts (expect-style)
      sections.push(
        this._renderLoginScriptSection("telnet", tel.loginScripts || []),
      );

      sections.push(
        this._renderSection(
          "Reconnection",
          [
            this._field(
              "toggle",
              "telnet.autoReconnect",
              "Auto-Reconnect",
              tel.autoReconnect,
              {
                help: "Automatically reconnect with exponential backoff when the connection drops",
              },
            ),
            this._field(
              "number",
              "telnet.maxReconnectTries",
              "Max Reconnect Attempts",
              tel.maxReconnectTries || 5,
              { min: 1, max: 20 },
            ),
          ],
          true,
        ),
      );

      return sections;
    }

    /** @private */
    _renderRAWSections(profile) {
      const raw = profile.raw || {};
      const sections = [];

      sections.push(
        this._renderSection("Encoding & Framing", [
          this._field("select", "raw.encoding", "Encoding", raw.encoding, {
            options: [
              { value: "utf-8", label: "UTF-8" },
              { value: "ascii", label: "ASCII" },
              { value: "hex", label: "Hex" },
            ],
          }),
          this._field(
            "select",
            "raw.lineEnding",
            "Line Ending",
            raw.lineEnding,
            {
              options: [
                { value: "crlf", label: "CR+LF (\\r\\n)" },
                { value: "lf", label: "LF (\\n)" },
                { value: "cr", label: "CR (\\r)" },
                { value: "none", label: "None" },
              ],
            },
          ),
        ]),
      );

      sections.push(
        this._renderSection("Display", [
          this._field(
            "toggle",
            "raw.showTimestamps",
            "Show Timestamps",
            raw.showTimestamps,
          ),
          this._field(
            "toggle",
            "raw.showDirection",
            "Show Direction",
            raw.showDirection,
          ),
        ]),
      );

      sections.push(
        this._renderSection(
          "Payload Presets",
          [this._renderPayloadPresetsList(raw.payloadPresets || [])],
          true,
        ),
      );

      sections.push(
        this._renderSection("Timeouts & Reconnect", [
          this._field(
            "number",
            "connectTimeout",
            "Connect Timeout (s)",
            profile.connectTimeout,
            { min: 0 },
          ),
          this._field(
            "number",
            "readTimeout",
            "Read Timeout (s)",
            profile.readTimeout,
            { min: 0 },
          ),
          this._field(
            "toggle",
            "raw.autoReconnect",
            "Auto-reconnect",
            raw.autoReconnect,
          ),
        ]),
      );

      return sections;
    }

    /** @private */
    _renderGitHubSections(profile) {
      const sections = [];
      const gh = profile.github || DEFAULTS.github.github;

      sections.push(
        this._renderSection("API", [
          this._field("text", "github.baseURL", "API Base URL", gh.baseURL, {
            placeholder: "https://api.github.com",
          }),
          this._field(
            "select",
            "github.secretMode",
            "Token Storage",
            gh.secretMode,
            {
              options: [
                { value: "saved", label: "Save to keychain" },
                { value: "session-only", label: "Remember for session" },
                { value: "ask-every-time", label: "Ask every time" },
              ],
            },
          ),
        ]),
      );

      sections.push(
        this._renderSection("Refresh", [
          this._field(
            "number",
            "github.refreshIntervalSecs",
            "Refresh Interval (seconds)",
            gh.refreshIntervalSecs,
            {
              min: 60,
              max: 3600,
            },
          ),
        ]),
      );

      return sections;
    }

    /** @private */
    _renderTerminalSection(profile) {
      return this._renderSection("Terminal", [
        this._field(
          "text",
          "terminalFontFamily",
          "Font Family",
          profile.terminalFontFamily,
          {
            placeholder: "JetBrains Mono, Menlo, Monaco, Consolas, monospace",
          },
        ),
        this._field(
          "number",
          "terminalFontSize",
          "Font Size",
          profile.terminalFontSize,
          { min: 8, max: 36 },
        ),
        this._field(
          "number",
          "terminalScrollback",
          "Scrollback Lines",
          profile.terminalScrollback,
          { min: 0, max: 100000 },
        ),
        this._field(
          "select",
          "terminalCursorStyle",
          "Cursor Style",
          profile.terminalCursorStyle,
          {
            options: [
              { value: "block", label: "Block" },
              { value: "underline", label: "Underline" },
              { value: "bar", label: "Bar" },
            ],
          },
        ),
      ]);
    }

    /** @private */
    _renderNotesSection(profile) {
      return this._renderSection("Notes & Tags", [
        this._field("tags", "tags", "Tags", (profile.tags || []).join(", "), {
          placeholder: "production, london, vpn",
          help: "Comma-separated tags for filtering",
        }),
        this._field("textarea", "notes", "Notes", profile.notes, {
          placeholder: "Free-form notes…",
          rows: 4,
        }),
      ]);
    }

    // ── Form helpers ─────────────────────────────────────────────────

    /**
     * Renders a collapsible form section.
     * @param {string} title
     * @param {HTMLElement[]} fields
     * @param {boolean} [startCollapsed=false]
     * @returns {HTMLElement}
     * @private
     */
    /**
     * Renders the TOTP/2FA section with secret management and test button.
     * @param {Object} profile
     * @returns {HTMLElement}
     * @private
     */
    _renderTOTPSection(profile) {
      const section = createElement("div", "form-section");
      const header = createElement("div", "form-section-header");
      let collapsed = true;

      header.innerHTML = `
            <span class="form-section-chevron">▸</span>
            <span class="form-section-title">TOTP / 2FA</span>
        `;

      const content = createElement("div", "form-section-content");
      content.style.display = "none";

      const helpText = createElement("div", "form-help", {
        textContent:
          "Configure a TOTP secret to auto-fill 2FA codes during SSH keyboard-interactive authentication. The secret is stored encrypted.",
      });
      content.appendChild(helpText);

      // TOTP secret input
      const group = createElement("div", "form-group");
      const label = createElement("label", "form-label", {
        textContent: "TOTP Secret",
      });
      group.appendChild(label);

      const row = createElement("div", "totp-input-row");

      const secretInput = createElement("input", "form-input", {
        type: "password",
        placeholder:
          "Base32-encoded secret (e.g. from authenticator app setup)",
        id: "field-ssh.totpSecret",
        dataset: { field: "ssh.totpSecret" },
        autocapitalize: "off",
        autocorrect: "off",
        spellcheck: false,
      });

      // Show/hide toggle
      const toggleBtn = createElement(
        "button",
        "btn btn-small btn-secondary totp-toggle",
        {
          textContent: "👁",
          title: "Show/hide secret",
          type: "button",
        },
      );
      toggleBtn.addEventListener("mousedown", (e) => e.preventDefault());
      toggleBtn.addEventListener("click", () => {
        secretInput.type =
          secretInput.type === "password" ? "text" : "password";
      });

      // Test button — generates a live code
      const testBtn = createElement(
        "button",
        "btn btn-small btn-accent totp-test",
        {
          textContent: "Test",
          title: "Generate a code with this secret",
          type: "button",
        },
      );
      testBtn.addEventListener("mousedown", (e) => e.preventDefault());
      testBtn.addEventListener("click", async () => {
        const profileId = profile.id;
        if (profileId) {
          try {
            const code = await window.go.api.Service.GetTOTPCode(profileId);
            testBtn.textContent = code;
            setTimeout(() => {
              testBtn.textContent = "Test";
            }, 5000);
          } catch (err) {
            // If no saved secret yet, try computing locally using the input value
            testBtn.textContent = "Save first";
            setTimeout(() => {
              testBtn.textContent = "Test";
            }, 2000);
          }
        }
      });

      // Save button
      const saveBtn = createElement(
        "button",
        "btn btn-small btn-primary totp-save",
        {
          textContent: "Save",
          title: "Encrypt and save the TOTP secret",
          type: "button",
        },
      );
      saveBtn.addEventListener("mousedown", (e) => e.preventDefault());
      saveBtn.addEventListener("click", async () => {
        const profileId = profile.id;
        const secret = secretInput.value.trim();
        if (!profileId) {
          NexusTerminal.Notifications.show(
            "Save the profile first, then set the TOTP secret.",
            "warning",
          );
          return;
        }
        if (!secret) {
          // Delete existing secret
          try {
            await window.go.api.Service.DeleteTOTPSecret(profileId);
            NexusTerminal.Notifications.show("TOTP secret removed.", "info");
          } catch (err) {
            NexusTerminal.Notifications.show(
              "Failed to remove TOTP secret.",
              "error",
            );
          }
          return;
        }
        try {
          await window.go.api.Service.SetTOTPSecret(profileId, secret);
          NexusTerminal.Notifications.show(
            "TOTP secret saved securely.",
            "success",
          );
          secretInput.value = "";
          secretInput.placeholder = "••••••••• (secret saved)";
        } catch (err) {
          NexusTerminal.Notifications.show(
            "Failed to save TOTP secret: " + err,
            "error",
          );
        }
      });

      // Delete button
      const deleteBtn = createElement(
        "button",
        "btn btn-small btn-danger totp-delete",
        {
          textContent: "Delete",
          title: "Remove the TOTP secret",
          type: "button",
        },
      );
      deleteBtn.addEventListener("mousedown", (e) => e.preventDefault());
      deleteBtn.addEventListener("click", async () => {
        const profileId = profile.id;
        if (!profileId) return;
        try {
          await window.go.api.Service.DeleteTOTPSecret(profileId);
          NexusTerminal.Notifications.show("TOTP secret removed.", "info");
          secretInput.placeholder =
            "Base32-encoded secret (e.g. from authenticator app setup)";
        } catch (err) {
          NexusTerminal.Notifications.show(
            "Failed to remove TOTP secret.",
            "error",
          );
        }
      });

      row.appendChild(secretInput);
      row.appendChild(toggleBtn);
      row.appendChild(testBtn);
      row.appendChild(saveBtn);
      row.appendChild(deleteBtn);
      group.appendChild(row);
      content.appendChild(group);

      // Check if secret is already saved and show placeholder
      if (profile.id) {
        (async () => {
          try {
            const has = await window.go.api.Service.HasTOTPSecret(profile.id);
            if (has) {
              secretInput.placeholder = "••••••••• (secret saved)";
            }
          } catch (_) {
            // Ignore — might not be unlocked.
          }
        })();
      }

      header.addEventListener("mousedown", (e) => e.preventDefault());
      header.addEventListener("click", () => {
        collapsed = !collapsed;
        content.style.display = collapsed ? "none" : "block";
        header.querySelector(".form-section-chevron").textContent = collapsed
          ? "▸"
          : "▾";
      });

      section.appendChild(header);
      section.appendChild(content);
      return section;
    }

    /**
     * Renders the login script section (expect-style send/wait steps).
     * @param {string} prefix - 'ssh' or 'telnet'
     * @param {Array} steps - Array of {type, value, timeout}
     * @returns {HTMLElement}
     * @private
     */
    _renderLoginScriptSection(prefix, steps) {
      const section = createElement("div", "form-section");
      const header = createElement("div", "form-section-header");
      let collapsed = true;

      header.innerHTML = `
            <span class="form-section-chevron">▸</span>
            <span class="form-section-title">Login Script</span>
        `;

      const content = createElement("div", "form-section-content");
      content.style.display = "none";

      const helpText = createElement("div", "form-help", {
        textContent:
          "Automate login sequences: wait for text from the server, then send a response. Steps execute in order after connection.",
      });
      content.appendChild(helpText);

      // Hidden input to hold JSON
      const hiddenInput = createElement("input", "", {
        type: "hidden",
        id: `field-${prefix}.loginScripts`,
        dataset: { field: `${prefix}.loginScripts` },
      });
      content.appendChild(hiddenInput);

      // List container
      const listContainer = createElement("div", "login-script-list");
      content.appendChild(listContainer);

      // Working copy
      let currentSteps = JSON.parse(JSON.stringify(steps || []));

      const renderSteps = () => {
        listContainer.innerHTML = "";
        hiddenInput.value = JSON.stringify(currentSteps);

        if (currentSteps.length === 0) {
          const empty = createElement("div", "login-script-empty", {
            textContent: "No login script steps configured.",
          });
          listContainer.appendChild(empty);
        }

        currentSteps.forEach((step, idx) => {
          const row = createElement("div", "login-script-row");

          const typeSelect = createElement(
            "select",
            "form-input login-script-type",
          );
          ["wait", "send"].forEach((t) => {
            const opt = createElement("option", "", {
              value: t,
              textContent: t === "wait" ? "Wait for" : "Send",
            });
            if (t === step.type) opt.selected = true;
            typeSelect.appendChild(opt);
          });
          typeSelect.addEventListener("change", () => {
            currentSteps[idx].type = typeSelect.value;
            hiddenInput.value = JSON.stringify(currentSteps);
            renderSteps();
          });

          const valueInput = createElement(
            "input",
            "form-input login-script-value",
            {
              type: "text",
              value: step.value || "",
              placeholder:
                step.type === "wait" ? "Text to match..." : "Text to send...",
              autocapitalize: "off",
              autocorrect: "off",
              spellcheck: false,
            },
          );
          valueInput.addEventListener("input", () => {
            currentSteps[idx].value = valueInput.value;
            hiddenInput.value = JSON.stringify(currentSteps);
          });

          row.appendChild(typeSelect);
          row.appendChild(valueInput);

          // Timeout field for wait steps
          if (step.type === "wait") {
            const timeoutInput = createElement(
              "input",
              "form-input login-script-timeout",
              {
                type: "number",
                value: step.timeout || 10,
                min: 1,
                max: 120,
                title: "Timeout (seconds)",
              },
            );
            timeoutInput.style.width = "60px";
            timeoutInput.addEventListener("input", () => {
              currentSteps[idx].timeout =
                parseInt(timeoutInput.value, 10) || 10;
              hiddenInput.value = JSON.stringify(currentSteps);
            });
            const timeoutLabel = createElement(
              "span",
              "login-script-timeout-label",
              { textContent: "s" },
            );
            row.appendChild(timeoutInput);
            row.appendChild(timeoutLabel);
          }

          // Move up/down/remove buttons
          const actions = createElement("div", "login-script-actions");

          if (idx > 0) {
            const upBtn = createElement("button", "login-script-btn", {
              textContent: "▲",
              title: "Move up",
              type: "button",
            });
            upBtn.addEventListener("mousedown", (e) => e.preventDefault());
            upBtn.addEventListener("click", () => {
              [currentSteps[idx - 1], currentSteps[idx]] = [
                currentSteps[idx],
                currentSteps[idx - 1],
              ];
              renderSteps();
            });
            actions.appendChild(upBtn);
          }

          if (idx < currentSteps.length - 1) {
            const downBtn = createElement("button", "login-script-btn", {
              textContent: "▼",
              title: "Move down",
              type: "button",
            });
            downBtn.addEventListener("mousedown", (e) => e.preventDefault());
            downBtn.addEventListener("click", () => {
              [currentSteps[idx], currentSteps[idx + 1]] = [
                currentSteps[idx + 1],
                currentSteps[idx],
              ];
              renderSteps();
            });
            actions.appendChild(downBtn);
          }

          const removeBtn = createElement(
            "button",
            "login-script-btn login-script-btn-remove",
            { textContent: "✕", title: "Remove", type: "button" },
          );
          removeBtn.addEventListener("mousedown", (e) => e.preventDefault());
          removeBtn.addEventListener("click", () => {
            currentSteps.splice(idx, 1);
            renderSteps();
          });
          actions.appendChild(removeBtn);

          row.appendChild(actions);
          listContainer.appendChild(row);
        });
      };

      renderSteps();

      // Add step buttons
      const addRow = createElement("div", "login-script-add-row");
      const addWaitBtn = createElement(
        "button",
        "btn btn-small btn-secondary",
        { textContent: "+ Wait", type: "button" },
      );
      addWaitBtn.addEventListener("mousedown", (e) => e.preventDefault());
      addWaitBtn.addEventListener("click", () => {
        currentSteps.push({ type: "wait", value: "", timeout: 10 });
        renderSteps();
      });
      const addSendBtn = createElement(
        "button",
        "btn btn-small btn-secondary",
        { textContent: "+ Send", type: "button" },
      );
      addSendBtn.addEventListener("mousedown", (e) => e.preventDefault());
      addSendBtn.addEventListener("click", () => {
        currentSteps.push({ type: "send", value: "", timeout: 0 });
        renderSteps();
      });
      addRow.appendChild(addWaitBtn);
      addRow.appendChild(addSendBtn);
      content.appendChild(addRow);

      header.addEventListener("mousedown", (e) => e.preventDefault());
      header.addEventListener("click", () => {
        collapsed = !collapsed;
        content.style.display = collapsed ? "none" : "block";
        header.querySelector(".form-section-chevron").textContent = collapsed
          ? "▸"
          : "▾";
      });

      section.appendChild(header);
      section.appendChild(content);
      return section;
    }

    _renderSection(title, fields, startCollapsed = false) {
      const section = createElement("div", "form-section");
      const header = createElement("div", "form-section-header");
      let collapsed = startCollapsed;

      header.innerHTML = `
            <span class="form-section-chevron">${collapsed ? "▸" : "▾"}</span>
            <span class="form-section-title">${escapeHtml(title)}</span>
        `;

      const content = createElement("div", "form-section-content");
      if (collapsed) content.style.display = "none";

      for (const field of fields) {
        if (field instanceof HTMLElement) {
          content.appendChild(field);
        }
      }

      // Prevent mousedown from starting a text selection gesture in WKWebView,
      // which would swallow the first click and require a double-click.
      header.addEventListener("mousedown", (e) => e.preventDefault());
      header.addEventListener("click", () => {
        collapsed = !collapsed;
        content.style.display = collapsed ? "none" : "block";
        header.querySelector(".form-section-chevron").textContent = collapsed
          ? "▸"
          : "▾";
      });

      section.appendChild(header);
      section.appendChild(content);
      return section;
    }

    /**
     * Renders a single form field.
     * @param {string} type - text | number | select | toggle | textarea | tags | file
     * @param {string} name - Dot-notated field name, e.g. "ssh.secretMode".
     * @param {string} label
     * @param {*} value
     * @param {Object} [opts]
     * @returns {HTMLElement}
     * @private
     */
    _field(type, name, label, value, opts = {}) {
      const group = createElement("div", "form-group");

      // Label
      const labelEl = createElement("label", "form-label", {
        textContent: label,
        for: `field-${name}`,
      });
      group.appendChild(labelEl);

      // Input element based on type
      let input;

      switch (type) {
        case "text":
        case "file":
          input = createElement("input", "form-input", {
            type: type === "file" ? "text" : "text",
            id: `field-${name}`,
            name,
            value: value || "",
            placeholder: opts.placeholder || "",
          });
          if (opts.required) input.required = true;
          break;

        case "number":
          input = createElement("input", "form-input", {
            type: "number",
            id: `field-${name}`,
            name,
            value: value != null ? String(value) : "",
          });
          if (opts.min != null) input.min = opts.min;
          if (opts.max != null) input.max = opts.max;
          if (opts.required) input.required = true;
          break;

        case "select": {
          input = createElement("select", "form-select", {
            id: `field-${name}`,
            name,
          });
          for (const opt of opts.options || []) {
            const option = createElement("option", "", {
              value: opt.value,
              textContent: opt.label,
            });
            if (opt.value === value) option.selected = true;
            input.appendChild(option);
          }
          break;
        }

        case "toggle": {
          const wrapper = createElement("div", "form-toggle-wrapper");
          input = createElement("input", "form-toggle", {
            type: "checkbox",
            id: `field-${name}`,
            name,
          });
          input.checked = !!value;
          const slider = createElement("label", "form-toggle-label", {
            for: `field-${name}`,
          });
          wrapper.appendChild(input);
          wrapper.appendChild(slider);
          group.appendChild(wrapper);
          // Help text
          if (opts.help) {
            group.appendChild(
              createElement("span", "form-hint", { textContent: opts.help }),
            );
          }
          return group;
        }

        case "textarea":
          input = createElement("textarea", "form-textarea", {
            id: `field-${name}`,
            name,
            placeholder: opts.placeholder || "",
          });
          input.rows = opts.rows || 3;
          input.textContent = value || "";
          break;

        case "tags":
          input = createElement("input", "form-input", {
            type: "text",
            id: `field-${name}`,
            name,
            value: value || "",
            placeholder: opts.placeholder || "",
          });
          break;

        default:
          input = createElement("input", "form-input", {
            type: "text",
            id: `field-${name}`,
            name,
            value: value || "",
          });
      }

      group.appendChild(input);

      // Help text
      if (opts.help) {
        group.appendChild(
          createElement("span", "form-hint", { textContent: opts.help }),
        );
      }

      return group;
    }

    /**
     * Renders the jump-hosts list editor.
     * @param {Array<Object>} jumpHosts
     * @returns {HTMLElement}
     * @private
     */
    _renderJumpHostsList(jumpHosts) {
      const wrapper = createElement("div", "jump-hosts-list");

      for (let i = 0; i < jumpHosts.length; i++) {
        const jh = jumpHosts[i];
        const row = createElement("div", "jump-host-row");
        row.innerHTML = `
                <div class="jump-host-fields">
                    <input class="form-input form-input-sm" name="jumpHost-${i}-host" value="${escapeHtml(jh.host || "")}" placeholder="Host" />
                    <input class="form-input form-input-sm" name="jumpHost-${i}-port" type="number" value="${jh.port || 22}" min="1" max="65535" style="width:80px" />
                    <input class="form-input form-input-sm" name="jumpHost-${i}-username" value="${escapeHtml(jh.username || "")}" placeholder="User" />
                </div>
                <div class="jump-host-fields">
                    <input class="form-input form-input-sm" name="jumpHost-${i}-privateKeyPath" value="${escapeHtml(jh.privateKeyPath || "")}" placeholder="Private key path (optional)" style="flex:1" />
                    <button class="btn btn-icon btn-danger jump-host-remove" data-index="${i}" title="Remove">&times;</button>
                </div>
            `;
        row.querySelector(".jump-host-remove").addEventListener("click", () => {
          jumpHosts.splice(i, 1);
          this.render(this._profile, this._isNew);
        });
        wrapper.appendChild(row);
      }

      const addBtn = createElement("button", "btn btn-sm btn-outline", {
        textContent: "+ Add Jump Host",
      });
      addBtn.addEventListener("click", () => {
        jumpHosts.push({
          host: "",
          port: 22,
          username: "",
          authMethod: "publickey",
          secretMode: "ask-every-time",
          privateKeyPath: "",
        });
        this.render(this._profile, this._isNew);
      });
      wrapper.appendChild(addBtn);

      return wrapper;
    }

    /**
     * Renders the port-forwarding rules list editor.
     * @param {Array<Object>} portForwards
     * @returns {HTMLElement}
     * @private
     */
    _renderPortForwardsList(portForwards) {
      const wrapper = createElement("div", "port-forwards-list");

      for (let i = 0; i < portForwards.length; i++) {
        const pf = portForwards[i];
        const row = createElement("div", "port-forward-row");
        row.innerHTML = `
                <div class="port-forward-fields">
                    <select class="form-select form-select-sm" name="portFwd-${i}-direction" style="width:110px">
                        <option value="local" ${pf.direction === "local" ? "selected" : ""}>Local →</option>
                        <option value="remote" ${pf.direction === "remote" ? "selected" : ""}>← Remote</option>
                    </select>
                    <input class="form-input form-input-sm" name="portFwd-${i}-bindHost" value="${escapeHtml(pf.bindHost || "127.0.0.1")}" placeholder="Bind host" style="width:110px" />
                    <input class="form-input form-input-sm" name="portFwd-${i}-bindPort" type="number" value="${pf.bindPort || 0}" min="1" max="65535" placeholder="Bind port" style="width:80px" />
                    <span class="port-forward-arrow">⟶</span>
                    <input class="form-input form-input-sm" name="portFwd-${i}-destHost" value="${escapeHtml(pf.destHost || "")}" placeholder="Dest host" style="width:110px" />
                    <input class="form-input form-input-sm" name="portFwd-${i}-destPort" type="number" value="${pf.destPort || 0}" min="1" max="65535" placeholder="Dest port" style="width:80px" />
                </div>
                <div class="port-forward-fields">
                    <input class="form-input form-input-sm" name="portFwd-${i}-label" value="${escapeHtml(pf.label || "")}" placeholder="Label (optional)" style="flex:1" />
                    <label class="port-forward-enabled-label" title="Enable on connect">
                        <input type="checkbox" name="portFwd-${i}-enabled" ${pf.enabled !== false ? "checked" : ""} />
                        <span>Active</span>
                    </label>
                    <button class="btn btn-icon btn-danger port-forward-remove" data-index="${i}" title="Remove">&times;</button>
                </div>
            `;
        row
          .querySelector(".port-forward-remove")
          .addEventListener("click", () => {
            portForwards.splice(i, 1);
            this.render(this._profile, this._isNew);
          });
        wrapper.appendChild(row);
      }

      const addBtn = createElement("button", "btn btn-sm btn-outline", {
        textContent: "+ Add Port Forward",
      });
      addBtn.addEventListener("click", () => {
        portForwards.push({
          id: generateId(),
          direction: "local",
          bindHost: "127.0.0.1",
          bindPort: 0,
          destHost: "",
          destPort: 0,
          enabled: true,
          label: "",
        });
        this.render(this._profile, this._isNew);
      });
      wrapper.appendChild(addBtn);

      return wrapper;
    }

    /**
     * Renders the payload-presets list editor.
     * @param {Array<Object>} presets
     * @returns {HTMLElement}
     * @private
     */
    _renderPayloadPresetsList(presets) {
      const wrapper = createElement("div", "payload-presets-list");

      for (let i = 0; i < presets.length; i++) {
        const ps = presets[i];
        const row = createElement("div", "preset-row");
        row.innerHTML = `
                <input class="form-input form-input-sm" name="preset-${i}-name" value="${escapeHtml(ps.name || "")}" placeholder="Name" />
                <input class="form-input form-input-sm" name="preset-${i}-payload" value="${escapeHtml(ps.payload || "")}" placeholder="Payload" />
                <select class="form-select form-select-sm" name="preset-${i}-format">
                    <option value="text" ${ps.format === "text" ? "selected" : ""}>Text</option>
                    <option value="hex" ${ps.format === "hex" ? "selected" : ""}>Hex</option>
                    <option value="escaped" ${ps.format === "escaped" ? "selected" : ""}>Escaped</option>
                </select>
                <button class="btn btn-icon btn-danger preset-remove" data-index="${i}" title="Remove">&times;</button>
            `;
        row.querySelector(".preset-remove").addEventListener("click", () => {
          presets.splice(i, 1);
          this.render(this._profile, this._isNew);
        });
        wrapper.appendChild(row);
      }

      const addBtn = createElement("button", "btn btn-sm btn-outline", {
        textContent: "+ Add Preset",
      });
      addBtn.addEventListener("click", () => {
        presets.push({
          id: generateId(),
          name: "",
          payload: "",
          format: "text",
        });
        this.render(this._profile, this._isNew);
      });
      wrapper.appendChild(addBtn);

      return wrapper;
    }

    // ── Form data collection ─────────────────────────────────────────

    /**
     * Reads current form values into this._profile.
     * @private
     */
    _collectFormValues() {
      if (!this.drawer) return;

      const val = (name) => {
        const el = this.drawer.querySelector(`[name="${name}"]`);
        if (!el) return undefined;
        if (el.type === "checkbox") return el.checked;
        if (el.type === "number") return el.value !== "" ? Number(el.value) : 0;
        return el.value;
      };

      const p = this._profile;

      // General
      p.displayName = val("displayName") || "";
      p.host = val("host") || "";
      p.port = val("port") || p.port;
      p.username = val("username") || "";
      p.description = val("description") || "";
      p.folder = (val("folder") || "").trim();
      p.terminalFontFamily = val("terminalFontFamily") || "";
      p.terminalFontSize = val("terminalFontSize") || 14;
      p.terminalScrollback = val("terminalScrollback") || 10000;
      p.terminalCursorStyle = val("terminalCursorStyle") || "block";
      p.connectTimeout = val("connectTimeout") || 30;
      p.readTimeout = val("readTimeout") || 0;

      // Tags
      const tagsStr = val("tags");
      if (tagsStr !== undefined) {
        p.tags = tagsStr
          .split(",")
          .map((t) => t.trim())
          .filter(Boolean);
      }

      // Notes
      const notes = val("notes");
      if (notes !== undefined) p.notes = notes;

      // SSH-specific
      if (p.protocol === "ssh" && p.ssh) {
        p.ssh.secretMode = val("ssh.secretMode") || p.ssh.secretMode;
        p.ssh.privateKeyPath = val("ssh.privateKeyPath") || "";
        p.ssh.keySecretMode = val("ssh.keySecretMode") || p.ssh.keySecretMode;
        p.ssh.hostKeyPolicy = val("ssh.hostKeyPolicy") || p.ssh.hostKeyPolicy;
        p.ssh.terminalType = val("ssh.terminalType") || "xterm-256color";
        p.ssh.keepaliveInterval = val("ssh.keepaliveInterval") ?? 30;
        p.ssh.keepaliveCountMax = val("ssh.keepaliveCountMax") ?? 3;
        p.ssh.compression = val("ssh.compression") || false;
        p.ssh.agentAuth = val("ssh.agentAuth") || false;
        p.ssh.agentForwarding = val("ssh.agentForwarding") || false;
        p.ssh.autoReconnect = val("ssh.autoReconnect") || false;
        p.ssh.maxReconnectTries = val("ssh.maxReconnectTries") ?? 5;
        p.ssh.startupCommand = val("ssh.startupCommand") || "";

        // Proxy settings
        p.ssh.proxyType = val("ssh.proxyType") || "none";
        p.ssh.proxyHost = val("ssh.proxyHost") || "";
        p.ssh.proxyPort = val("ssh.proxyPort") || 1080;
        p.ssh.proxyUsername = val("ssh.proxyUsername") || "";
        p.ssh.proxyPassword = val("ssh.proxyPassword") || "";

        const authStr = val("ssh.authMethods");
        if (authStr !== undefined) {
          p.ssh.authMethods = authStr
            .split(",")
            .map((s) => s.trim())
            .filter(Boolean);
        }

        // Env vars from textarea
        const envText = val("ssh.envVarsText");
        if (envText !== undefined) {
          p.ssh.envVars = {};
          envText.split("\n").forEach((line) => {
            const eq = line.indexOf("=");
            if (eq > 0) {
              p.ssh.envVars[line.slice(0, eq).trim()] = line
                .slice(eq + 1)
                .trim();
            }
          });
        }

        // Jump hosts
        const jh = [];
        let ji = 0;
        while (this.drawer.querySelector(`[name="jumpHost-${ji}-host"]`)) {
          jh.push({
            host: val(`jumpHost-${ji}-host`) || "",
            port: val(`jumpHost-${ji}-port`) || 22,
            username: val(`jumpHost-${ji}-username`) || "",
            authMethod: "publickey",
            secretMode: "ask-every-time",
            privateKeyPath: val(`jumpHost-${ji}-privateKeyPath`) || "",
          });
          ji++;
        }
        p.ssh.jumpHosts = jh;

        // Port forwards
        const pfs = [];
        let fi = 0;
        while (this.drawer.querySelector(`[name="portFwd-${fi}-direction"]`)) {
          pfs.push({
            id:
              (p.ssh.portForwards && p.ssh.portForwards[fi]?.id) ||
              generateId(),
            direction: val(`portFwd-${fi}-direction`) || "local",
            bindHost: val(`portFwd-${fi}-bindHost`) || "127.0.0.1",
            bindPort: val(`portFwd-${fi}-bindPort`) || 0,
            destHost: val(`portFwd-${fi}-destHost`) || "",
            destPort: val(`portFwd-${fi}-destPort`) || 0,
            enabled: val(`portFwd-${fi}-enabled`) !== false,
            label: val(`portFwd-${fi}-label`) || "",
          });
          fi++;
        }
        p.ssh.portForwards = pfs;

        // Login scripts
        const loginScriptsRaw = val("ssh.loginScripts");
        if (loginScriptsRaw) {
          try {
            p.ssh.loginScripts = JSON.parse(loginScriptsRaw);
          } catch (_) {
            p.ssh.loginScripts = [];
          }
        } else {
          p.ssh.loginScripts = [];
        }
      }

      // Telnet-specific
      if (p.protocol === "telnet" && p.telnet) {
        p.telnet.localEcho = val("telnet.localEcho") || false;
        p.telnet.lineMode = val("telnet.lineMode") || false;
        p.telnet.terminalType = val("telnet.terminalType") || "xterm-256color";
        p.telnet.encoding = val("telnet.encoding") || "utf-8";
        p.telnet.lineEnding = val("telnet.lineEnding") || "crlf";
        p.telnet.negotiationDebug = val("telnet.negotiationDebug") || false;
        p.telnet.autoReconnect = val("telnet.autoReconnect") || false;
        p.telnet.maxReconnectTries = val("telnet.maxReconnectTries") ?? 5;

        // Login scripts
        const telLoginScriptsRaw = val("telnet.loginScripts");
        if (telLoginScriptsRaw) {
          try {
            p.telnet.loginScripts = JSON.parse(telLoginScriptsRaw);
          } catch (_) {
            p.telnet.loginScripts = [];
          }
        } else {
          p.telnet.loginScripts = [];
        }
      }

      // RAW-specific
      if (p.protocol === "raw" && p.raw) {
        p.raw.encoding = val("raw.encoding") || "utf-8";
        p.raw.lineEnding = val("raw.lineEnding") || "crlf";
        p.raw.showTimestamps = val("raw.showTimestamps") || false;
        p.raw.showDirection = val("raw.showDirection") || false;
        p.raw.autoReconnect = val("raw.autoReconnect") || false;

        // Presets
        const presets = [];
        let pi = 0;
        while (this.drawer.querySelector(`[name="preset-${pi}-name"]`)) {
          presets.push({
            id:
              (p.raw.payloadPresets && p.raw.payloadPresets[pi]?.id) ||
              generateId(),
            name: val(`preset-${pi}-name`) || "",
            payload: val(`preset-${pi}-payload`) || "",
            format: val(`preset-${pi}-format`) || "text",
          });
          pi++;
        }
        p.raw.payloadPresets = presets;
      }

      // GitHub-specific
      if (p.protocol === "github") {
        if (!p.github) p.github = {};
        p.github.baseURL = val("github.baseURL") || "https://api.github.com";
        p.github.secretMode = val("github.secretMode") || "saved";
        p.github.refreshIntervalSecs = val("github.refreshIntervalSecs") || 300;
      }
    }

    // ── Validation ───────────────────────────────────────────────────

    /**
     * Validates the collected profile. Returns an array of error strings (empty = valid).
     * @param {Object} profile
     * @returns {string[]}
     * @private
     */
    _validate(profile) {
      const errors = [];
      if (!profile.host || !profile.host.trim()) {
        errors.push("Host is required.");
      }
      if (!profile.port || profile.port < 1 || profile.port > 65535) {
        errors.push("Port must be between 1 and 65535.");
      }
      return errors;
    }

    // ── Actions ──────────────────────────────────────────────────────

    /** @private */
    async _handleSave(andConnect = false) {
      this._collectFormValues();
      const errors = this._validate(this._profile);
      if (errors.length > 0) {
        this.app.notifications.warning(errors.join(" "));
        return;
      }

      try {
        let saved;
        if (this._isNew) {
          saved = await window.go.api.Service.CreateProfile(this._profile);
          this.app.state.addProfile(saved);
          this.app.notifications.success("Profile created");
        } else {
          saved = await window.go.api.Service.UpdateProfile(this._profile);
          this.app.state.updateProfile(saved);
          this.app.notifications.success("Profile updated");
        }
        this.app.sidebar.render();
        this.close();

        if (andConnect && saved && saved.id) {
          this.app.connectProfile(saved.id);
        }
      } catch (err) {
        this.app.notifications.error("Save failed: " + err);
      }
    }

    /** @private */
    async _handleDelete() {
      const ok = await this._confirmDelete();
      if (!ok) return;

      try {
        await window.go.api.Service.DeleteProfile(this._profile.id);
        this.app.state.removeProfile(this._profile.id);
        this.app.sidebar.render();
        this.app.notifications.success("Profile deleted");
        this.close();
      } catch (err) {
        this.app.notifications.error("Failed to delete profile: " + err);
      }
    }

    /** @private */
    async _testConnection() {
      this._collectFormValues();
      const errors = this._validate(this._profile);
      if (errors.length > 0) {
        this.app.notifications.warning(errors.join(" "));
        return;
      }

      const host = this._profile.host;
      const port = this._profile.port;
      this.app.notifications.info(`Testing connection to ${host}:${port}…`);

      try {
        const result = await window.go.api.Service.TestConnection(host, port);
        this.app.notifications.success(
          `Reachable — ${result.latencyMs}ms latency`,
        );
      } catch (err) {
        this.app.notifications.error("Test failed: " + err);
      }
    }

    /**
     * Shows a confirmation modal for profile deletion.
     * @returns {Promise<boolean>}
     * @private
     */
    _confirmDelete() {
      return new Promise((resolve) => {
        const backdrop = createElement("div", "modal-backdrop");
        const modal = createElement("div", "modal modal-sm");
        const label = escapeHtml(
          this._profile.displayName || this._profile.host || "Untitled",
        );
        modal.innerHTML = `
                <div class="modal-header">
                    <h3 class="modal-title">Delete Profile</h3>
                    <button class="btn btn-icon btn-xs modal-close">&times;</button>
                </div>
                <div class="modal-body">
                    <p style="font-size:var(--text-sm);color:var(--text-secondary)">
                        Delete <strong>${label}</strong>? This cannot be undone.
                    </p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-sm confirm-cancel">Cancel</button>
                    <button class="btn btn-sm btn-danger confirm-ok">Delete</button>
                </div>
            `;
        backdrop.appendChild(modal);
        document.body.appendChild(backdrop);
        requestAnimationFrame(() => {
          backdrop.classList.add("is-visible");
          modal.classList.add("is-visible");
        });

        const close = (val) => {
          backdrop.classList.remove("is-visible");
          modal.classList.remove("is-visible");
          setTimeout(() => backdrop.remove(), 200);
          resolve(val);
        };
        modal
          .querySelector(".modal-close")
          .addEventListener("click", () => close(false));
        modal
          .querySelector(".confirm-cancel")
          .addEventListener("click", () => close(false));
        modal
          .querySelector(".confirm-ok")
          .addEventListener("click", () => close(true));
        backdrop.addEventListener("click", (e) => {
          if (e.target === backdrop) close(false);
        });
      });
    }

    // ── Utilities ────────────────────────────────────────────────────

    /**
     * Returns a default profile object for the given protocol.
     * @param {string} protocol
     * @returns {Object}
     * @private
     */
    _defaultProfile(protocol) {
      const base = {
        id: generateId(),
        displayName: "",
        description: "",
        protocol,
        host: "",
        port: 0,
        username: "",
        tags: [],
        folder: "",
        environment: "",
        notes: "",
        favourite: false,
        lastConnected: null,
        connectTimeout: 30,
        readTimeout: 0,
        terminalFontFamily:
          "JetBrains Mono, Menlo, Monaco, Consolas, monospace",
        terminalFontSize: 14,
        terminalScrollback: 10000,
        terminalCursorStyle: "block",
        ssh: null,
        telnet: null,
        raw: null,
      };

      const defaults = DEFAULTS[protocol] || {};
      return { ...base, ...defaults };
    }

    /**
     * Converts an envVars map into "KEY=VALUE\n" text.
     * @param {Object} envVars
     * @returns {string}
     * @private
     */
    _envVarsToText(envVars) {
      if (!envVars) return "";
      return Object.entries(envVars)
        .map(([k, v]) => `${k}=${v}`)
        .join("\n");
    }
  }

  window.NexusTerminal = window.NexusTerminal || {};
  window.NexusTerminal.ProfileEditor = ProfileEditor;
})();