options.js

/* global React ReactDOM */
import {sfConn, apiVersion, defaultApiVersion} from "./inspector.js";
import {nullToEmptyString, getLatestApiVersionFromOrg, Constants, UserInfoModel, createSpinForMethod, DataCache, applyProductionStyling} from "./utils.js";
import {getFlowScannerRules, FLOW_SCANNER_RULES_STORAGE_KEY} from "./flow-scanner-rules.js";
/* global initButton, lightningflowscanner */
import {DescribeInfo} from "./data-load.js";
import Toast from "./components/Toast.js";
import Tooltip from "./components/Tooltip.js";
import ColorPicker from "./components/ColorPicker.js";
import {PageHeader} from "./components/PageHeader.js";

class Model {

  constructor(sfHost) {
    this.sfHost = sfHost;
    this.sfLink = "https://" + this.sfHost;
    this.orgName = this.sfHost.split(".")[0]?.toUpperCase() || "";
    this.spinnerCount = 0;

    applyProductionStyling(sfHost);

    // Initialize spinFor method
    this.spinFor = createSpinForMethod(this);

    this.describeInfo = new DescribeInfo(this.spinFor.bind(this), () => { });

    // Initialize user info model - handles all user-related properties
    this.userInfoModel = new UserInfoModel(this.spinFor.bind(this));
  }

  /**
   * Notify React that we changed something, so it will rerender the view.
   * Should only be called once at the end of an event or asynchronous operation, since each call can take some time.
   * All event listeners (functions starting with "on") should call this function if they update the model.
   * Asynchronous operations should use the spinFor function, which will call this function after the asynchronous operation completes.
   * Other functions should not call this function, since they are called by a function that does.
   * @param cb A function to be called once React has processed the update.
   */
  didUpdate(cb) {
    if (this.reactCallback) {
      this.reactCallback(cb);
    }
    if (this.testCallback) {
      this.testCallback();
    }
  }


}

class OptionsTabSelector extends React.Component {
  constructor(props) {
    super(props);
    this.model = props.model;
    this.appRef = props.appRef;
    this.sfHost = this.model.sfHost;

    // Get the tab from the URL or default to "user-experience"
    const urlParams = new URLSearchParams(window.location.search);
    const initialTabId = urlParams.get("selectedTab") || "user-experience";

    this.state = {
      selectedTabId: initialTabId
    };

    const flowScannerVersion = window.lightningflowscanner?.version || "";
    const flowScannerTitle = flowScannerVersion ? `Enabled Rules (v${flowScannerVersion})` : "Enabled Rules";

    this.tabs = [
      {
        id: "user-experience",
        tabTitle: "User Experience",
        content: [
          {option: ArrowButtonOption, props: {key: 1}},
          {option: Option, props: {type: "toggle", title: "Inspect page - Show table borders", key: "displayInspectTableBorders"}},
          {option: Option, props: {type: "toggle", title: "Always open links in a new tab", key: "openLinksInNewTab", tooltip: "Enabling this option will prevent Lightning Navigation (faster loading) to be used"}},
          {option: Option, props: {type: "toggle", title: "Open Permission Set / Permission Set Group summary from shortcuts", key: "enablePermSetSummary"}},
          {option: MultiCheckboxButtonGroup,
            props: {title: "Searchable metadata from Shortcut tab",
              key: "metadataShortcutSearchOptions",
              checkboxes: [
                {label: "Flows", name: "flows", checked: true},
                {label: "Profiles", name: "profiles", checked: true},
                {label: "PermissionSets", name: "permissionSets", checked: true},
                {label: "Apex Classes", name: "classes", checked: false}
              ]}
          },
          {option: Option, props: {type: "toggle", title: "Popup Dark theme", key: "popupDarkTheme"}},
          {option: MultiCheckboxButtonGroup,
            props: {title: "Show buttons",
              key: "hideButtonsOption",
              length: 8,
              checkboxes: [
                {label: "New", name: "new", checked: true},
                {label: "Explore API", name: "explore-api", checked: true},
                {label: "Org Limits", name: "org-limits", checked: true},
                {label: "Options", name: "options", checked: true},
                {label: "Generate Access Token", name: "generate-token", checked: true},
                {label: "Copy User Id", name: "copy-userId", checked: true},
                {label: "Reset Password", name: "reset-password", checked: true}
              ]}
          },
          {option: FaviconOption, props: {key: this.sfHost + FaviconOption.CUSTOM_FAVICON_KEY, tooltip: "You may need to add this domain to CSP trusted domains to see the favicon in Salesforce."}},
          {option: Option, props: {type: "toggle", title: "Use favicon color on sandbox banner", key: "colorizeSandboxBanner"}},
          {option: Option, props: {type: "toggle", title: "Highlight PROD (color from favicon)", key: "colorizeProdBanner", tooltip: "Top border in extension pages and banner on Salesforce"}},
          {option: Option, props: {type: "text", title: "Banner text", inputSize: "6", key: this.sfHost + "_prodBannerText", tooltip: "Text that will be displayed in the banner (if enabled)", placeholder: "WARNING: THIS IS PRODUCTION"}},
          {option: Option, props: {type: "toggle", title: "Enable Lightning Navigation", key: "lightningNavigation", default: true, tooltip: "Enable faster navigation by using standard e.force:navigateToURL method"}},
          {option: MultiCheckboxButtonGroup,
            props: {title: "Exclude users from search (org specific)",
              key: this.sfHost + Constants.USER_SEARCH_EXCLUSIONS_KEY,
              checkboxes: Constants.USER_SEARCH_EXCLUSIONS_CHECKBOXES.map(({label, name}) => ({label, name, checked: false}))}
          },
          {option: MultiCheckboxButtonGroup,
            props: {title: "User Default Search Fields",
              key: "userDefaultSearchFieldsOptions",
              checkboxes: [
                {label: "Username", name: "username", checked: true},
                {label: "Email", name: "email", checked: true},
                {label: "Alias", name: "alias", checked: true},
                {label: "Name", name: "name", checked: true},
                {label: "Profile Name", name: "profile.name"}
              ]}
          },
          {option: MultiCheckboxButtonGroup,
            props: {title: "Default Popup Tab",
              key: "defaultPopupTab",
              unique: true,
              checkboxes: [
                {label: "Object", name: "sobject", checked: true},
                {label: "Users", name: "users"},
                {label: "Shortcuts", name: "shortcuts"},
                {label: "Org", name: "org"}
              ]}
          },
          {option: Option, props: {type: "toggle", title: "Enable Dynamic Popup Height", key: "popupHeighDynamictMode", default: false, tooltip: "When enabled, the popup height will be dynamically adjusted based on the content."}},
          {option: Option, props: {type: "toggle", title: "Show recently viewed records in popup", key: Constants.ENABLE_RECENTLY_VIEWED_RECORDS, default: true, tooltip: "When enabled, queries and displays recently viewed records when focusing the Object search field in the popup."}},
        ]
      },
      {
        id: "api",
        tabTitle: "API",
        content: [
          {option: APIVersionOption, props: {key: 1}},
          {option: Option,
            props: {type: "text",
              title: "API Consumer Key",
              placeholder: "Consumer Key",
              key: this.sfHost + Constants.CLIENT_ID,
              inputSize: "5",
              actionButton: {
                label: "Delete Token",
                title: "Delete the connected app generated token",
                disabled: localStorage.getItem(this.sfHost + Constants.ACCESS_TOKEN) == null,
                onClick: (e, model) => {
                  localStorage.removeItem(model.sfHost + Constants.ACCESS_TOKEN);
                  e.target.disabled = true;
                }
              }}},
          {option: Option, props: {type: "text", title: "Rest Header", placeholder: "Rest Header", key: "createUpdateRestCalloutHeaders", inputSize: "6"}},
          {option: Option, props: {type: "toggle", title: "Enable API Stats Debug Mode", key: Constants.API_DEBUG_STATISTICS_MODE, default: false, tooltip: "When enabled, tracks API call statistics (REST and SOAP) to help monitor API usage. Statistics can be viewed on the API Debug Statistics page."}},
          {option: Option, props: {type: "toggle", title: "Preload SObjects before popup opens", key: Constants.PRELOAD_SOBJECTS_BEFORE_POPUP, default: true, tooltip: "When enabled, loads the SObjects list from cache before the popup is opened for faster context detection. Disable to reduce initial load time and only load when the Objects tab is accessed."}},
        ]
      },
      {
        id: "cache",
        tabTitle: "Cache",
        content: [
          {option: Option,
            props: {
              type: "button",
              title: "Clear All Extension Cache",
              key: "clearAllCache",
              tooltip: "Clear all cache entries from both localStorage and browser.storage.local. This will remove all cached data including User Field Names, SObjects List, and any other cached information.",
              actionButtonVariant: "destructive",
              actionButton: {
                label: "Clear All Cache",
                title: "Clear all extension cache",
                onClick: async (e, model, appRef) => {
                  await DataCache.clearAllExtensionCache();
                  if (appRef) {
                    appRef.setState({
                      showToast: true,
                      toastMessage: "All extension cache cleared successfully.",
                      toastVariant: "success",
                      toastTitle: "Success"
                    });
                    setTimeout(() => appRef.hideToast(), 3000);
                  }
                }
              }
            }
          },
          {option: Option,
            props: {
              type: "number",
              title: "User Field Names Cache Duration (hours)",
              key: "cacheDuration_userFieldNames",
              default: 168,
              min: 1,
              inputSize: "3",
              tooltip: "Duration in hours for caching User field names. This cache stores User object field metadata to improve performance.",
              actionButton: {
                label: "Clear Cache",
                title: "Clear User Field Names cache",
                onClick: async (e, model, appRef) => {
                  await DataCache.clearCache("userFieldNames", model.sfHost, false, false);
                  if (appRef) {
                    appRef.setState({
                      showToast: true,
                      toastMessage: "User Field Names cache cleared successfully.",
                      toastVariant: "success",
                      toastTitle: "Success"
                    });
                    setTimeout(() => appRef.hideToast(), 3000);
                  }
                }
              }
            }
          },
          {option: SObjectsCacheOptions, props: {key: "sobjectsCacheOptions"}}
        ]
      },
      {
        id: "data-export",
        tabTitle: "Data Export",
        content: [
          {option: CSVSeparatorOption, props: {key: 1}},
          {option: Option, props: {type: "toggle", title: "Display Query Execution Time", key: "displayQueryPerformance", default: true}},
          {option: MultiCheckboxButtonGroup,
            props: {
              title: "Date/Time Display Format",
              key: "dateTimeFormat",
              unique: true,
              requireSelection: true,
              tooltip: "Choose how date and time values are displayed in the data export table",
              checkboxes: [
                {label: "Salesforce Default (ISO 8601)", name: "iso8601", checked: true, tooltip: "YYYY-MM-DDTHH:MM:SS.sss+0000"},
                {label: "American", name: "us", tooltip: "MM/DD/YYYY HH:MM:SS AM/PM"},
                {label: "European", name: "european", tooltip: "DD/MM/YYYY HH:MM:SS"},
                {label: "Asian", name: "asian", tooltip: "YYYY/MM/DD HH:MM:SS"}
              ]
            }
          },
          {option: Option, props: {type: "toggle", title: "Use Local Timezone", key: "showLocalTime", default: false, tooltip: "When enabled, converts date/time values to your local timezone instead of UTC"}},
          {option: Option, props: {type: "toggle", title: "Display Timezone", key: "displayTimezone", default: false, tooltip: "When enabled, displays the timezone abbreviation (e.g., PST, UTC) after the time"}},
          {option: Option, props: {type: "toggle", title: "Use SObject context on Data Export ", key: "useSObjectContextOnDataImpoltrink", default: true}},
          {option: Option, props: {type: "toggle", title: "Enable List View Export", key: "enableListViewExport", default: false, tooltip: "If enabled, Data Export link will be automatically populated with current ListView"}},
          {option: MultiCheckboxButtonGroup,
            props: {title: "Show buttons",
              key: "hideExportButtonsOption",
              checkboxes: [
                {label: "Delete Records", name: "delete", checked: true},
                {label: "Export Query", name: "export-query", checked: false},
                {label: "Agentforce", name: "export-agentforce", checked: false}
              ]}
          },
          {option: Option, props: {type: "toggle", title: "Hide Object columns by default on Data Export", key: "hideObjectNameColumnsDataExport", default: false}},
          {option: Option, props: {type: "toggle", title: "Prevent line wrap in Data Export table cells", key: "preventLineWrapDataExport", default: true, tooltip: "When enabled, prevents text from wrapping in table cells (matches v1.27 behavior)"}},
          {option: Option, props: {type: "toggle", title: "Include formula fields from suggestion", key: "includeFormulaFieldsFromExportAutocomplete", default: true}},
          {option: Option, props: {type: "toggle", title: "Disable query input autofocus", key: "disableQueryInputAutoFocus"}},
          {option: Option, props: {type: "number", title: "Number of queries stored in the history", key: "numberOfQueriesInHistory", default: 100, inputSize: "1"}},
          {option: Option, props: {type: "number", title: "Number of saved queries", key: "numberOfQueriesSaved", default: 50, inputSize: "1"}},
          {option: Option, props: {type: "textarea", title: "Query Templates", key: "queryTemplates", inputSize: "6", placeholder: "SELECT Id FROM// SELECT Id FROM WHERE//SELECT Id FROM WHERE IN//SELECT Id FROM WHERE LIKE//SELECT Id FROM ORDER BY//SELECT ID FROM MYTEST__c//SELECT ID WHERE"}},
          {option: Option, props: {type: "toggle", title: "Enable Query Typo Fix", key: "enableQueryTypoFix", default: false, tooltip: "Enable automation that removes typos from query input"}},
          {option: Option, props: {type: "text", title: "Prompt Template Name", key: this.sfHost + "_exportAgentForcePrompt", default: Constants.PromptTemplateSOQL, tooltip: "Developer name of the prompt template to use for SOQL query builder"}},
          //This option is created to disable BOM for CSV in case of errors appearing during export, created in v2.0.0, can be deleted in two releases if no issues are reported
          {option: Option, props: {type: "toggle", default: true, title: "Use BOM for CSV export", key: "useBomForCsvExport", tooltip: "Add UTF-8 BOM (Byte Order Mark) for Excel compatibility with non-Latin characters."}}
        ]
      },
      {
        id: "data-import",
        tabTitle: "Data Import",
        content: [
          {option: Option, props: {type: "text", title: "Default batch size", key: "defaultBatchSize", placeholder: "200", inputSize: "1"}},
          {option: Option, props: {type: "text", title: "Default thread size", key: "defaultThreadSize", placeholder: "6", inputSize: "1"}},
          {option: Option, props: {type: "toggle", title: "Grey Out Skipped Columns in Data Import", key: "greyOutSkippedColumns", tooltip: "Control if skipped columns are greyed out or not in data import"}}
        ]
      },
      {
        id: "field-creator",
        tabTitle: "Field Creator",
        content: [
          {option: Option,
            props: {
              type: "select",
              title: "Field Naming Convention",
              key: "fieldNamingConvention",
              default: "pascal",
              tooltip: "Controls how API names are auto-generated from field labels. PascalCase: 'My Field' -> 'MyField'. Underscores: 'My Field' -> 'My_Field'",
              options: [
                {label: "PascalCase", value: "pascal"},
                {label: "Underscores", value: "underscore"}
              ]
            }},
          {option: Option, props: {type: "toggle", title: "Include managed packages objects", key: "fieldCreatorIncludeManaged", default: false, tooltip: "Show objects from managed packages in the object selector"}}
        ]
      },
      {
        id: "enable-logs",
        tabTitle: "Enable Logs",
        content: [
          {option: enableLogsOption, props: {key: 1}}
        ]
      },
      {
        id: "metadata",
        tabTitle: "Metadata",
        content: [
          {option: Option, props: {type: "toggle", title: "Include managed packages metadata", key: "includeManagedMetadata"}},
          {option: Option,
            props: {type: "select",
              title: "Sort metadata components",
              key: "sortMetadataBy",
              default: "fullName",
              options: [
                {label: "A-Z", value: "fullName"},
                {label: "Last Modified Date DESC", value: "lastModifiedDate"}
              ]
            }
          },
          {option: Option, props: {type: "toggle", title: "Use legacy version", key: "useLegacyDlMetadata", default: false}},
        ]
      },
      {
        id: "flow-scanner",
        tabTitle: "Flow Scanner",
        title: flowScannerTitle,
        description: "Configure which Flow Scanner rules are enabled and their settings. Only enabled rules will be used when scanning flows.",
        descriptionTooltip: "Flow Scanner rules help identify potential issues, best practices violations, and improvements opportunities in your Salesforce Flows. Each rule can be individually enabled or disabled, and some rules have configurable parameters like thresholds or expressions.",
        actionButtons: [
          {
            type: "brand",
            label: "Check All",
            title: "Enable all Flow Scanner rules",
            method: this.handleCheckAll.bind(this)
          },
          {
            type: "neutral",
            label: "Uncheck All",
            title: "Disable all Flow Scanner rules",
            method: this.handleUncheckAll.bind(this)
          },
          {
            type: "neutral",
            label: "Reset to Defaults",
            title: "Reset all rules to their default settings",
            method: this.handleResetToDefaults.bind(this)
          },
          {
            type: "icon",
            icon: "download",
            title: "Export Flow Scanner rules configuration to file",
            method: this.handleExportRules.bind(this)
          },
          {
            type: "icon",
            icon: "upload",
            title: "Import Flow Scanner rules configuration from file",
            method: this.handleImportRules.bind(this)
          }
        ],
        content: [
          {option: Option, props: {type: "number", title: "Flow History Size", key: "flowScannerHistorySize", default: 5, tooltip: "Number of old flow versions to keep when purging (in addition to the latest version)."}},
          {option: MultiCheckboxButtonGroup,
            props: {title: "Show buttons",
              key: "hideFlowScannerButtonsOption",
              checkboxes: [
                {label: "Agentforce", name: "flow-agentforce", checked: false},
                {label: "Settings", name: "flow-settings", checked: true}
              ]}
          },
          {option: Option, props: {type: "text", title: "Prompt Template Name", key: this.sfHost + "_flowScannerAgentForcePrompt", default: Constants.PromptTemplateFlow, tooltip: "Developer name of the prompt template to use for Flow Scanner"}},
          {option: FlowScannerRules, props: {model: this.model}}
        ]
      },
      {
        id: "logs-viewer",
        tabTitle: "Log Viewer",
        content: [
          {option: Option, props: {type: "text", title: "Prompt Template Name", key: this.sfHost + "_debugLogAgentForcePrompt", default: Constants.PromptTemplateDebugLog, tooltip: "Developer name of the prompt template to use for Debug Log Analysis"}},
          {option: Option, props: {type: "toggle", title: "Fetch log bodies for action details", key: "debugLogFetchBodies", default: true, tooltip: "When enabled, fetches log bodies to derive detailed action information. Disable to reduce API calls and improve performance."}},
          {option: Option, props: {type: "toggle", title: "Show profile names as suffix in user filter", key: "debugLogShowProfileNames", default: false, tooltip: "When enabled, displays user profile names as a suffix in the format 'Name (ProfileName)' in the user filter picklist and logs table."}},
          {option: MultiCheckboxButtonGroup,
            props: {title: "Show buttons",
              key: "hideDebugLogButtonsOption",
              checkboxes: [
                {label: "Share Logs", name: "share-logs", checked: true},
                {label: "Agentforce", name: "logs-agentforce", checked: false}
              ]}
          },
        ]
      },
      {
        id: "custom-shortcuts",
        tabTitle: "Custom Shortcuts",
        content: [
          {option: CustomShortcuts, props: {}}
        ]
      },
      {
        id: "rest-explore",
        tabTitle: "REST Explorer",
        content: [
          {option: MultiCheckboxButtonGroup,
            props: {title: "Display response information",
              key: "restExploreDisplayOptions",
              checkboxes: [
                {label: "Response Size", name: "responseSize", checked: true},
                {label: "Response Duration", name: "responseDuration", checked: true}
              ]}
          }
        ]
      },
      {
        id: "show-all",
        tabTitle: "Show All",
        content: [
          {option: Option, props: {type: "toggle", title: "Enable Agentforce Helper for formula fields", key: "showAgentforceHelperInspect", default: true, tooltip: "When enabled, shows the 'Agentforce Helper' link in the field actions menu for calculated/formula fields."}},
          {option: Option, props: {type: "text", title: "Formula Helper Prompt Template Name", key: this.sfHost + "_formulaAgentForcePrompt", default: "FormulaHelper", tooltip: "Developer name of the prompt template to use for Formula Field Analysis in the Inspect page"}},
        ]
      }
    ];
    this.onTabSelect = this.onTabSelect.bind(this);
  }

  handleCheckAll() {
    // Implementation to check all Flow Scanner rules
    if (this.model.flowScannerRulesRef) {
      this.model.flowScannerRulesRef.checkAllRules();
    }
  }

  handleUncheckAll() {
    // Implementation to uncheck all Flow Scanner rules
    if (this.model.flowScannerRulesRef) {
      this.model.flowScannerRulesRef.uncheckAllRules();
    }
  }

  handleResetToDefaults() {
    // Implementation to reset Flow Scanner rules to defaults
    if (this.model.flowScannerRulesRef) {
      this.model.flowScannerRulesRef.resetToDefaults();
    }
  }

  handleExportRules() {
    // Export only Flow Scanner related localStorage keys
    const flowScannerFilters = [FLOW_SCANNER_RULES_STORAGE_KEY];
    // Get reference to App component to call its exportOptions method
    if (this.appRef) {
      this.appRef.exportOptions(flowScannerFilters);
    }
  }

  handleImportRules() {
    if (this.appRef) {
      this.appRef.pendingImportFilters = [FLOW_SCANNER_RULES_STORAGE_KEY];
      this.appRef.refs.fileInput.click();
    }
  }

  onTabSelect(e) {
    e.preventDefault();
    const selectedTabId = e.currentTarget.dataset.tabId;

    // Update the URL with the selected tab
    const url = new URL(window.location);
    url.searchParams.set("selectedTab", selectedTabId);
    window.history.pushState({}, "", url);

    this.setState({selectedTabId});
  }

  render() {
    return h("div", {className: "slds-tabs_default"},
      h("ul", {className: "sfir-options-tab-container slds-tabs_default__nav", role: "tablist"},
        this.tabs.map((tab) => h(OptionsTab, {key: tab.id, title: tab.tabTitle || tab.title, id: tab.id, selectedTabId: this.state.selectedTabId, onTabSelect: this.onTabSelect}))
      ),
      this.tabs.map((tab) => h(OptionsContainer, {
        key: tab.id,
        id: tab.id,
        title: tab.title,
        description: tab.description,
        descriptionTooltip: tab.descriptionTooltip,
        actionButtons: tab.actionButtons,
        content: tab.content,
        selectedTabId: this.state.selectedTabId,
        model: this.model,
        appRef: this.appRef
      }))
    );
  }
}

class OptionsTab extends React.Component {

  getClass() {
    return "options-tab slds-text-align_center slds-tabs_default__item" + (this.props.selectedTabId === this.props.id ? " slds-is-active" : "");
  }

  render() {
    return h("li", {key: this.props.id, className: this.getClass(), title: this.props.title, "data-tab-id": this.props.id, role: "presentation", onClick: this.props.onTabSelect},
      h("a", {className: "slds-tabs_default__link", href: "#", role: "tab", tabIndex: "0", id: "tab-default-" + this.props.id + "__item"},
        this.props.title)
    );
  }
}

class OptionsContainer extends React.Component {

  constructor(props) {
    super(props);
    this.model = props.model;
    this.appRef = props.appRef;
  }

  getClass() {
    return (this.props.selectedTabId === this.props.id ? "slds-show" : " slds-hide");
  }

  renderTabHeader() {
    const {title, description, descriptionTooltip, actionButtons} = this.props;

    if (!title && !description && !actionButtons) {
      return null;
    }

    return h("div", {className: "slds-p-horizontal_medium slds-p-top_small slds-p-bottom_x-small slds-border_bottom"},
      (title || (actionButtons && actionButtons.length > 0)) && h("div", {className: "slds-grid"},
        title && h("div", {className: "slds-col"}, h("h2", {className: "slds-text-heading_large slds-text-title_bold"}, title)),
        actionButtons && actionButtons.length > 0 && h("div", {className: "slds-col_bump-left"},
          h("div", {className: "slds-button-group", role: "group"},
            actionButtons.map((button, index) => {
              if (button.type === "icon") {
                return h("button", {
                  key: index,
                  className: `slds-button slds-button_icon slds-button_icon-border-filled${index > 0 ? " slds-m-left_x-small" : ""}`,
                  onClick: button.method,
                  title: button.title
                }, h("svg", {className: "slds-button__icon"},
                  h("use", {xlinkHref: `symbols.svg#${button.icon}`})
                ));
              }
              return h("button", {
                key: index,
                className: `slds-button ${button.type === "brand" ? "slds-button_brand" : "slds-button_neutral"}`,
                onClick: button.method,
                title: button.title || button.label
              }, button.label);
            })
          )
        )
      ),
      description && h("div", {className: "slds-m-bottom_xx-small"},
        h("div", {className: "slds-text-body_regular slds-text-color_weak"},
          h("span", {}, description),
          descriptionTooltip && h(Tooltip, {tooltip: descriptionTooltip, idKey: `${this.props.id}_description`})
        )
      )
    );
  }

  render() {
    return h("div", {id: this.props.id, key: this.props.id, className: this.getClass(), role: "tabpanel"},
      this.renderTabHeader(),
      h("div", {},
        this.props.content.map((c, index) =>
          h(c.option, {
            key: c.props?.key || `option-${index}`,
            storageKey: c.props?.key,
            ...c.props,
            model: this.model,
            appRef: this.appRef
          })
        )
      )
    );
  }

}

class ArrowButtonOption extends React.Component {

  constructor(props) {
    super(props);
    this.onChangeArrowOrientation = this.onChangeArrowOrientation.bind(this);
    this.onChangeArrowPosition = this.onChangeArrowPosition.bind(this);
    this.state = {
      arrowButtonOrientation: localStorage.getItem("popupArrowOrientation") ? localStorage.getItem("popupArrowOrientation") : "vertical",
      arrowButtonPosition: localStorage.getItem("popupArrowPosition") ? localStorage.getItem("popupArrowPosition") : "20"
    };
    this.timeout;
  }

  onChangeArrowOrientation(e) {
    let orientation = e.target.value;
    this.setState({arrowButtonOrientation: orientation});
    localStorage.setItem("popupArrowOrientation", orientation);
    window.location.reload();
  }

  onChangeArrowPosition(e) {
    let position = e.target.value;
    this.setState({arrowButtonPosition: position});
    console.log("[SFInspector] New Arrow Position Value: ", position);
    if (this.timeout) {
      clearTimeout(this.timeout);
    }
    this.timeout = setTimeout(() => {
      console.log("[SFInspector] Setting Arrow Position: ", position);
      localStorage.setItem("popupArrowPosition", position);
      window.location.reload();
    }, 1000);
  }

  render() {
    return h("div", {className: "slds-grid slds-border_bottom slds-p-horizontal_small slds-p-vertical_x-small"},
      h("div", {className: "slds-col slds-size_3-of-12 text-align-middle"},
        h("span", {}, "Popup arrow button orientation and position")
      ),
      h("div", {className: "slds-col slds-size_9-of-12 slds-form-element slds-grid slds-grid_align-start slds-grid_vertical-align-center slds-gutters_small"},
        h("label", {className: "slds-text-align_right slds-m-left_medium slds-m-right_small"}, "Orientation:"),
        h("div", {className: "slds-form-element__control slds-col slds-size_2-of-12"},
          h("div", {className: "slds-select_container"},
            h("select", {className: "slds-select", defaultValue: this.state.arrowButtonOrientation, name: "arrowPosition", id: "arrowPosition", onChange: this.onChangeArrowOrientation},
              h("option", {value: "horizontal"}, "Horizontal"),
              h("option", {value: "vertical"}, "Vertical")
            ))),
        h("label", {className: "slds-m-left_medium slds-col slds-size_2-of-12 slds-text-align_right", htmlFor: "arrowPositionSlider"}, "Position (%):"),
        h("div", {className: "slds-form-element__control slider-container slds-col slds-size_3-of-12"},
          h("div", {className: "slds-slider"},
            h("input", {type: "range", id: "arrowPositionSlider", className: "slds-slider__range", value: nullToEmptyString(this.state.arrowButtonPosition), min: "0", max: "100", step: "1", onChange: this.onChangeArrowPosition}),
            h("span", {className: "slds-slider__value", "aria-hidden": true}, this.state.arrowButtonPosition)
          )
        )
      )
    );
  }
}

class APIVersionOption extends React.Component {

  constructor(props) {
    super(props);
    this.onChangeApiVersion = this.onChangeApiVersion.bind(this);
    this.onRestoreDefaultApiVersion = this.onRestoreDefaultApiVersion.bind(this);
    this.state = {apiVersion: localStorage.getItem("apiVersion") ? localStorage.getItem("apiVersion") : apiVersion};
  }

  async onChangeApiVersion(e) {
    let {sfHost} = this.props.model;
    const inputElt = e.target;
    const newApiVersion = e.target.value;
    if (this.state.apiVersion < newApiVersion) {
      const latestApiVersion = await getLatestApiVersionFromOrg(sfHost);
      if (latestApiVersion >= newApiVersion) {
        localStorage.setItem("apiVersion", newApiVersion + ".0");
        this.setState({apiVersion: newApiVersion + ".0"});
      } else {
        inputElt.setAttribute("max", latestApiVersion);
        inputElt.setCustomValidity("Maximum version available: " + latestApiVersion);
        inputElt.reportValidity();
      }
    } else {
      localStorage.setItem("apiVersion", newApiVersion + ".0");
      this.setState({apiVersion: newApiVersion + ".0"});
    }
  }

  onRestoreDefaultApiVersion(){
    localStorage.removeItem("apiVersion");
    this.setState({apiVersion: defaultApiVersion});
  }
  render() {
    return h("div", {className: "slds-grid slds-border_bottom slds-p-horizontal_small slds-p-vertical_xx-small"},
      h("div", {className: "slds-col slds-size_3-of-12 text-align-middle"},
        h("span", {}, "API Version",
          h(Tooltip, {tooltip: "Update api version", idKey: "APIVersion"})
        ),
      ),
      h("div", {className: "slds-col slds-size_10-of-12 slds-form-element"},
        h("div", {className: "slds-grid slds-grid_align-start slds-grid_vertical-align-center slds-gutters_small"},
          h("div", {className: "slds-col slds-size_1-of-12"},
            h("div", {className: "slds-form-element__control"},
              h("input", {type: "number", required: true, className: "slds-input", value: nullToEmptyString(this.state.apiVersion.split(".0")[0]), onChange: this.onChangeApiVersion}),
            )
          ),
          this.state.apiVersion != defaultApiVersion ? h("div", {className: "slds-col"},
            h("button", {className: "slds-button slds-button_brand", onClick: this.onRestoreDefaultApiVersion, title: "Restore Extension's default version"}, "Restore Default")
          ) : null
        )
      )
    );
  }
}

class Option extends React.Component {

  constructor(props) {
    super(props);
    this.onChange = this.onChange.bind(this);
    this.onChangeToggle = this.onChangeToggle.bind(this);
    this.onChangeConfig = this.onChangeConfig.bind(this);
    this.toggleDescriptionExpanded = this.toggleDescriptionExpanded.bind(this);
    this.checkForTruncation = this.checkForTruncation.bind(this);
    this.descriptionRef = {current: null};
    this.key = props.storageKey;
    this.type = props.type;
    this.label = props.label;
    this.tooltip = props.tooltip;
    this.placeholder = props.placeholder;
    this.actionButton = props.actionButton;
    this.actionButtonVariant = props.actionButtonVariant || "brand"; // Default to "brand" variant (blue button)
    this.inputSize = props.inputSize || "3";
    this.min = props.min; // Minimum value for number input type (sets HTML min attribute)
    this.readOnly = props.readOnly || false;

    // Enhanced properties
    this.enhancedTitle = props.enhancedTitle;
    this.badge = props.badge; // {label: "Beta", type: "beta|custom"}
    this.severity = props.severity; // "info|warning|error"
    this.description = props.description; // Enhanced description display

    // Configurable rule properties
    this.isConfigurable = props.isConfigurable;
    this.configType = props.configType;
    this.configStorageKey = props.configStorageKey;
    this.onConfigChange = props.onConfigChange;
    this.onToggleChange = props.onToggleChange;

    // Handle Flow Scanner rules (no storageKey, managed by parent)
    const isFlowScannerRule = !this.key && this.onToggleChange;

    let value;
    if (isFlowScannerRule) {
      // Use checked prop from parent for Flow Scanner rules
      value = props.checked;
    } else {
      // Use localStorage for regular options
      value = localStorage.getItem(this.key);
      if (props.default !== undefined && value === null) {
        value = props.type != "text" ? JSON.stringify(props.default) : props.default;
        localStorage.setItem(this.key, value);
      }
    }

    // Initialize config value if configurable (value comes from props)
    let configValue = props.configValue || null;

    this.state = {
      [this.key || "checked"]: isFlowScannerRule ? value
      : this.type == "toggle" ? !!JSON.parse(value)
      : this.type == "select" ? (value || props.default || props.options?.[0]?.value)
      : value,
      configValue,
      descriptionExpanded: false,
      showExpandButton: false
    };
    this.title = props.title;
  }

  onChangeToggle(e) {
    const enabled = e.target.checked;
    const stateKey = this.key || "checked";
    this.setState({[stateKey]: enabled});

    // Handle Flow Scanner rules vs regular options
    if (this.onToggleChange) {
      // Flow Scanner rule - call parent callback
      this.onToggleChange(enabled);
    } else {
      // Regular option - use localStorage
      localStorage.setItem(this.key, JSON.stringify(enabled));
    }
  }

  onChangeConfig(e) {
    const configValue = e.target.value;
    this.setState({configValue});
    if (this.onConfigChange) {
      this.onConfigChange(this.key, configValue);
    }
  }

  onChange(e) {
    let inputValue = e.target.value;
    this.setState({[this.key]: inputValue});
    localStorage.setItem(this.key, inputValue);
  }

  toggleDescriptionExpanded() {
    this.setState(prevState => ({
      descriptionExpanded: !prevState.descriptionExpanded
    }));
  }

  isDescriptionTruncated() {
    if (!this.descriptionRef.current || !this.description) {
      return false;
    }
    const element = this.descriptionRef.current;
    return element.scrollWidth > element.clientWidth;
  }

  checkForTruncation() {
    const isTruncated = this.isDescriptionTruncated();
    if (this.state.showExpandButton !== isTruncated) {
      this.setState({showExpandButton: isTruncated});
    }
  }

  renderInputControl(id, isEnhanced = false) {
    const isTextOrNumber = this.type == "text" || this.type == "number";
    const isTextArea = this.type == "textarea";
    const isSelect = this.type == "select";
    const isToggle = this.type == "toggle";

    if (isToggle) {
      return isEnhanced ? null : (
        h("div", {dir: "ltr", className: "slds-form-element__control slds-col slds-size_1-of-12 slds-p-right_medium"},
          h("label", {className: "slds-checkbox_toggle slds-grid"},
            h("input", {type: "checkbox", required: true, id, "aria-describedby": id, className: "slds-input", checked: this.state[this.key || "checked"], onChange: this.onChangeToggle}),
            h("span", {id, className: "slds-checkbox_faux_container center-label"},
              h("span", {className: "slds-checkbox_faux"}),
              h("span", {className: "slds-checkbox_on"}, "Enabled"),
              h("span", {className: "slds-checkbox_off"}, "Disabled"),
            )
          )
        )
      );
    }

    const inputElement = isTextOrNumber ? h("input", {
      type: this.type,
      id,
      className: isEnhanced ? "slds-input enhanced-option-input" : "slds-input",
      placeholder: this.placeholder,
      value: nullToEmptyString(this.state[this.key]),
      onChange: this.onChange,
      readOnly: this.readOnly,
      ...(this.type === "number" && this.min !== undefined ? {min: this.min} : {})
    })
      : isTextArea ? h("textarea", {
        id,
        className: isEnhanced ? "slds-input enhanced-option-input" : "slds-input",
        placeholder: this.placeholder,
        value: nullToEmptyString(this.state[this.key]),
        onChange: this.onChange,
        readOnly: this.readOnly
      })
      : isSelect ? h("select", {
        className: isEnhanced ? "slds-select enhanced-option-input" : "slds-select slds-m-right_small",
        value: this.state[this.key],
        onChange: this.onChange
      },
      this.props.options.map(opt =>
        h("option", {key: opt.value, value: opt.value}, opt.label)
      ))
      : null;

    if (isEnhanced) {
      return inputElement;
    } else {
      // Standard layout wrapping - returns just the input wrapper
      return h("div", {className: "slds-form-element__control"},
        inputElement
      );
    }
  }

  renderConfigInput() {
    if (!this.isConfigurable || !this.configType) {
      return null;
    }

    const configId = this.configStorageKey || `${this.key}_config`;
    const inputType = this.configType === "threshold" ? "number" : "text";
    const placeholder = this.configType === "threshold" ? "Enter threshold value"
      : this.configType === "expression" ? "Enter regex pattern"
      : "Enter configuration value";

    return h("input", {
      type: inputType,
      id: configId,
      className: "slds-input enhanced-option-input",
      placeholder,
      value: this.state.configValue || "",
      onChange: this.onChangeConfig,
      title: `Configure ${this.enhancedTitle || this.title} (${this.configType})`
    });
  }

  render() {
    const id = this.key;
    const isToggle = this.type == "toggle";
    const isButton = this.type == "button";
    const isEnhanced = this.enhancedTitle || this.badge || this.severity || this.description;

    if (isEnhanced) {
      // Enhanced layout
      return h("div", {className: "enhanced-option-row"},
        // Main content area
        h("div", {className: "enhanced-option-content"},
          // Enhanced title with badge
          h("div", {className: "enhanced-option-title"},
            h("h4", {className: "enhanced-option-title-text"}, this.enhancedTitle || this.title),
            this.badge && h("span", {
              className: `${this.badge.type || "beta"}-badge`
            }, this.badge.label)
          ),

          // Description on the same line with expand functionality
          this.description && h("div", {className: "enhanced-option-description-container"},
            h("span", {
              className: `enhanced-option-description ${this.state.descriptionExpanded ? "expanded" : ""}`,
              ref: (el) => {
                this.descriptionRef.current = el;
                if (el) {
                  setTimeout(() => this.checkForTruncation(), 0);
                }
              }
            }, this.description),
            // Expand icon (only show when text is truncated)
            this.state.showExpandButton && h("button", {
              className: "enhanced-option-expand-btn",
              onClick: this.toggleDescriptionExpanded,
              title: this.state.descriptionExpanded ? "Collapse description" : "Expand description"
            },
            h("svg", {className: `expand-icon ${this.state.descriptionExpanded ? "expanded" : ""}`, viewBox: "0 0 24 24", width: "16", height: "16"},
              h("path", {d: "M7 10l5 5 5-5z"})
            )
            )
          )
        ),

        // Controls on the right
        h("div", {className: "enhanced-option-controls"},
          // Configuration input (for configurable rules)
          this.renderConfigInput(),

          // Severity selector
          this.severity && h("select", {
            className: `severity-select severity-${this.severity}`,
            value: this.severity,
            onChange: (e) => {
              const newSeverity = e.target.value;
              this.severity = newSeverity;
              this.setState({}); // Force re-render
              if (this.props.onSeverityChange) {
                this.props.onSeverityChange(this.key, newSeverity);
              }
            }
          },
          h("option", {value: "info"}, "Info"),
          h("option", {value: "warning"}, "Warning"),
          h("option", {value: "error"}, "Error")
          ),

          // Toggle control for all enhanced options (positioned at the end)
          isToggle && h("div", {className: "slds-form-element__control"},
            h("label", {className: "slds-checkbox_toggle slds-grid"},
              h("input", {type: "checkbox", required: true, id, "aria-describedby": id, className: "slds-input", checked: this.state[this.key || "checked"], onChange: this.onChangeToggle}),
              h("span", {id, className: "slds-checkbox_faux_container center-label"},
                h("span", {className: "slds-checkbox_faux"}),
                h("span", {className: "slds-checkbox_on"}, "Enabled"),
                h("span", {className: "slds-checkbox_off"}, "Disabled"),
              )
            )
          ),

          // Input controls for non-toggle and non-button types
          !isToggle && !isButton && this.renderInputControl(id, true)
        )
      );
    } else {
      // Standard layout with responsive grid
      return h("div", {className: "slds-grid slds-border_bottom slds-p-horizontal_small slds-p-vertical_xx-small"},
        h("div", {className: "slds-col slds-size_3-of-12 text-align-middle"},
          h("span", {}, this.title,
            h(Tooltip, {tooltip: this.tooltip, idKey: this.key || `option_${this.title || "unnamed"}`})
          )
        ),
        h("div", {className: "slds-col slds-size_9-of-12"},
          h("div", {className: "slds-grid slds-grid_vertical-align-center slds-gutters_small"},
            // Input field container with configurable size (not for toggle or button types)
            !isToggle && !isButton && h("div", {className: "slds-col slds-size_" + this.inputSize + "-of-12"},
              this.renderInputControl(id, false)
            ),
            // Action button (if present)
            // appRef is passed to allow actionButton handlers to show toast notifications via appRef.setState()
            this.actionButton && h("div", {className: "slds-col"},
              h("button", {
                className: `slds-button slds-button_${this.actionButtonVariant}`,
                onClick: (e) => this.actionButton.onClick(e, this.props.model, this.props.appRef),
                title: this.actionButton.title || "Action"
              }, this.actionButton.label || "Action")
            ),
            // Toggle control aligned to the right
            isToggle && h("div", {className: "slds-col slds-grid slds-grid_align-end"},
              this.renderInputControl(id, false)
            )
          )
        )
      );
    }
  }
}

class FaviconOption extends React.Component {

  static CUSTOM_FAVICON_KEY = "_customFavicon";

  constructor(props) {
    super(props);
    this.sfHost = props.model.sfHost;
    this.onChangeFavicon = this.onChangeFavicon.bind(this);
    this.populateFaviconColors = this.populateFaviconColors.bind(this);
    this.onToogleSmartMode = this.onToogleSmartMode.bind(this);
    this.toggleColorPicker = this.toggleColorPicker.bind(this);
    this.handleColorSelect = this.handleColorSelect.bind(this);
    this.colorIconRef = null;

    let favicon = localStorage.getItem(this.sfHost + FaviconOption.CUSTOM_FAVICON_KEY) ? localStorage.getItem(this.sfHost + FaviconOption.CUSTOM_FAVICON_KEY) : "";
    let isInternal = favicon.length > 0 && !favicon.startsWith("http");
    let smartMode = localStorage.getItem("faviconSmartMode") !== null ? JSON.parse(localStorage.getItem("faviconSmartMode")) : true;
    this.tooltip = props.tooltip;
    this.state = {
      favicon,
      isInternal,
      smartMode,
      showColorPicker: false,
      colorPickerPosition: {top: 0, left: 0}
    };
    this.colorShades = {
      dev: [
        "DeepSkyBlue", "DodgerBlue", "RoyalBlue", "MediumBlue", "CornflowerBlue",
        "#CCCCFF", "SteelBlue", "SkyBlue", "#0F52BA", "Navy",
        "Indigo", "PowderBlue", "LightBlue", "CadetBlue", "Aqua",
        "Turquoise", "DarkTurquoise", "#6082B6", "LightSlateGray", "MidnightBlue"
      ],
      uat: [
        "MediumOrchid", "Orchid", "DarkOrchid", "DarkViolet", "DarkMagenta",
        "Purple", "BlueViolet", "Indigo", "DarkSlateBlue", "RebeccaPurple",
        "MediumPurple", "MediumSlateBlue", "SlateBlue", "Plum", "Violet",
        "Thistle", "Magenta", "DarkOrchid", "Fuchsia", "#301934"
      ],
      int: [
        "LimeGreen", "SeaGreen", "MediumSeaGreen", "ForestGreen", "Green",
        "DarkGreen", "YellowGreen", "OliveDrab", "DarkOliveGreen",
        "SpringGreen", "LawnGreen", "DarkKhaki",
        "GreenYellow", "DarkSeaGreen", "MediumAquamarine", "DarkCyan",
        "Teal", "#00A36C", "#347235", "#355E3B"
      ],
      full: [
        "Orange", "DarkOrange", "Coral", "Tomato", "OrangeRed",
        "Salmon", "IndianRed", "Sienna", "Chocolate", "SaddleBrown",
        "Peru", "DarkSalmon", "RosyBrown", "Brown", "Maroon",
        "#b9770e", "#FFE5B4", "#CC5500", "#FF7518", "#FFBF00"
      ]
    };
  }

  componentWillUnmount() {
    if (this.pickerInstance) {
      this.pickerInstance.destroy();
      this.pickerInstance = null;
    }
    this.isPickerOpen = false;
  }

  shouldComponentUpdate() {
    return !this.isPickerOpen;
  }

  setColorButtonRef(element) {
    this.colorButtonEl = element;
  }

  onChangeFavicon(e) {
    let favicon = e.target.value;
    let isInternal = favicon.length > 0 && !favicon.startsWith("http");
    this.setState({favicon, isInternal});
    localStorage.setItem(this.sfHost + FaviconOption.CUSTOM_FAVICON_KEY, favicon);
  }

  onToogleSmartMode(e) {
    let smartMode = e.target.checked;
    this.setState({smartMode});
    localStorage.setItem("faviconSmartMode", smartMode);
  }

  toggleColorPicker() {
    if (this.state.showColorPicker) {
      this.setState({showColorPicker: false});
    } else {
      if (!this.state.favicon.startsWith("#")){
        this.setState({favicon: null});
      }
      // Calculate position relative to the icon
      const iconElement = this.colorIconRef;
      if (iconElement) {
        const rect = iconElement.getBoundingClientRect();
        this.setState({
          showColorPicker: true,
          colorPickerPosition: {
            top: rect.bottom + 8 + "px",
            left: rect.left + "px"
          }
        });
      }
    }
  }

  handleColorSelect(color) {
    this.setState({
      favicon: color,
      isInternal: true,
      showColorPicker: false
    });
    localStorage.setItem(this.sfHost + FaviconOption.CUSTOM_FAVICON_KEY, color);
  }

  populateFaviconColors(){
    let orgs = Object.keys(localStorage).filter((localKey) =>
      localKey.endsWith("_isSandbox")
    );

    orgs.forEach((org) => {
      let sfHost = org.substring(0, org.indexOf("_isSandbox"));
      let existingColor = localStorage.getItem(sfHost + FaviconOption.CUSTOM_FAVICON_KEY);

      if (!existingColor) { // Only assign a color if none is set
        const chosenColor = this.getColorForHost(sfHost, this.state.smartMode);
        if (chosenColor) {
          console.info(sfHost + FaviconOption.CUSTOM_FAVICON_KEY, chosenColor);
          localStorage.setItem(sfHost + FaviconOption.CUSTOM_FAVICON_KEY, chosenColor);
          if (sfHost === this.sfHost) {
            this.setState({favicon: chosenColor});
          }
        }
      } else {
        console.info(sfHost + " already has a customFavicon: " + existingColor);
      }
    });
  }

  getEnvironmentType(sfHost) {
    // Function to get environment type based on sfHost
    if (sfHost.includes("dev")) return "dev";
    if (sfHost.includes("uat")) return "uat";
    if (sfHost.includes("int") || sfHost.includes("sit")) return "int";
    if (sfHost.includes("full")) return "full";
    return null;
  }

  getColorForHost(sfHost, smartMode) {
    // Attempt to get the environment type
    const envType = this.getEnvironmentType(sfHost);

    // Check if smartMode is true and environment type is valid
    if (smartMode && envType && this.colorShades[envType].length > 0) {
      // Select a random color from the corresponding environment shades
      const randomIndex = Math.floor(Math.random() * this.colorShades[envType].length);
      const chosenColor = this.colorShades[envType][randomIndex];
      this.colorShades[envType].splice(randomIndex, 1); // Remove the used color from the list
      return chosenColor;
    } else {
      // If no environment type matches or smartMode is false, use a random color from all available shades
      const allColors = Object.values(this.colorShades).flat();
      if (allColors.length > 0) {
        const randomIndex = Math.floor(Math.random() * allColors.length);
        const chosenColor = allColors[randomIndex];
        allColors.splice(randomIndex, 1); // Remove the used color from the list
        return chosenColor;
      } else {
        console.warn("No more colors available.");
        return null;
      }
    }
  }


  render() {
    return h("div", {className: "slds-grid slds-border_bottom slds-p-horizontal_small slds-p-vertical_xx-small"},
      h("div", {className: "slds-col slds-size_3-of-12 text-align-middle"},
        h("span", {}, "Custom favicon (org specific)",
          h(Tooltip, {tooltip: this.tooltip, idKey: this.key || "favicon_option"})
        )
      ),
      h("div", {className: "slds-col slds-size_4-of-12 slds-form-element slds-grid slds-grid_align-end slds-grid_vertical-align-center slds-gutters_small"},
        h("div", {className: "slds-form-element__control slds-col slds-size_10-of-12", style: {position: "relative"}},
          h("input", {
            type: "text",
            className: "slds-input",
            style: this.state.isInternal ? {paddingRight: "2.5rem"} : {},
            placeholder: "All HTML Color Names, Hex code or external URL",
            value: nullToEmptyString(this.state.favicon),
            onChange: this.onChangeFavicon
          }),
          h("img", {
            ref: (el) => { this.colorIconRef = el; },
            src: "images/color-wheel.png",
            className: "color-picker-icon",
            onClick: (e) => {
              e.stopPropagation();
              this.toggleColorPicker();
            },
            title: "Click to open color picker"
          }),
          this.state.showColorPicker && h(ColorPicker, {
            value: this.state.favicon,
            position: this.state.colorPickerPosition,
            triggerRef: this.colorIconRef,
            onChange: this.handleColorSelect,
            onClose: () => this.setState({showColorPicker: false})
          })
        ),
        h("div", {className: "slds-form-element__control slds-col slds-size_2-of-12", style: {position: "relative"}},
          this.state.isInternal ? h("svg", {
            className: "icon"
          },
          h("circle", {r: "12", cx: "12", cy: "12", fill: this.state.favicon})
          ) : null
        )
      ),
      h("div", {className: "slds-col slds-size_2-of-12 slds-form-element slds-grid slds-grid_align-start slds-grid_vertical-align-center slds-gutters_small"},
        h("div", {dir: "ltr", className: "slds-form-element__control slds-col "},
          h("label", {className: "slds-checkbox_toggle slds-grid"},
            h("input", {type: "checkbox", required: true, className: "slds-input", checked: this.state.smartMode, onChange: this.onToogleSmartMode}),
            h("span", {className: "slds-checkbox_faux_container center-label"},
              h("span", {className: "slds-checkbox_faux"}),
              h("span", {className: "slds-checkbox_on", title: "Use favicon based on org name (DEV : blue, UAT :green ..)"}, "Smart"),
              h("span", {className: "slds-checkbox_off", title: "Use random favicon"}, "Random"),
            )
          )
        ),
        h("div", {className: "slds-form-element__control slds-col"},
          h("button", {className: "slds-button slds-button_brand", onClick: this.populateFaviconColors, title: "Use favicon for all orgs I've visited"}, "Populate All")
        )
      )
    );
  }
}

class MultiCheckboxButtonGroup extends React.Component {

  constructor(props) {
    super(props);
    this.handleCheckboxChange = this.handleCheckboxChange.bind(this);

    this.title = props.title;
    this.key = props.storageKey;
    this.unique = props.unique || false;
    this.requireSelection = props.requireSelection || false;
    this.length = props.length || 6;
    this.tooltip = props.tooltip;

    // Load checkboxes from localStorage or default to props.checkboxes
    const storedCheckboxes = localStorage.getItem(this.key) ? JSON.parse(localStorage.getItem(this.key)) : [];

    // Merge checkboxes only if the size is different
    const mergedCheckboxes = storedCheckboxes.length === props.checkboxes.length
      ? storedCheckboxes
      : this.mergeCheckboxes(storedCheckboxes, props.checkboxes);

    this.state = {checkboxes: mergedCheckboxes};
    if (storedCheckboxes.length !== props.checkboxes.length) {
      localStorage.setItem(this.key, JSON.stringify(mergedCheckboxes)); // Save the merged state to localStorage
    }
  }

  mergeCheckboxes = (storedCheckboxes, propCheckboxes) => propCheckboxes.map((checkbox) => {
    const storedCheckbox = storedCheckboxes.find((item) => item.name === checkbox.name);
    return storedCheckbox || checkbox;
  });

  handleCheckboxChange = (event) => {
    const {name, checked} = event.target;

    // Prevent unchecking the last item if selection is required
    if (this.requireSelection && !checked && !this.state.checkboxes.some(cb => cb.name !== name && cb.checked)) {
      return;
    }

    const updatedCheckboxes = this.state.checkboxes.map((checkbox) => ({
      ...checkbox,
      // Unique mode: uncheck others if selecting this one. Otherwise standard toggle.
      checked: this.unique && checked ? checkbox.name === name : checkbox.name === name ? checked : checkbox.checked
    }));

    localStorage.setItem(this.key, JSON.stringify(updatedCheckboxes));
    this.setState({checkboxes: updatedCheckboxes});
  };

  render() {
    return h("div", {className: "slds-grid slds-border_bottom slds-p-horizontal_small slds-p-vertical_xx-small"},
      h("div", {className: "slds-col slds-size_3-of-12 text-align-middle"},
        h("span", {}, this.title,
          this.tooltip && h(Tooltip, {tooltip: this.tooltip, idKey: this.key})
        )
      ),
      h("div", {className: "slds-col slds-size_" + this.length + "-of-12 slds-form-element slds-grid slds-grid_align-start slds-grid_vertical-align-center slds-gutters_small slds-m-left_xxx-small"},
        h("div", {className: "slds-form-element__control"},
          h("div", {className: "slds-checkbox_button-group"},
            this.state.checkboxes.map((checkbox, index) =>
              h("span", {className: "slds-button slds-checkbox_button", key: this.key + index},
                h("input", {type: "checkbox", id: `${this.key}-${checkbox.value}-${index}`, name: checkbox.name, checked: checkbox.checked, onChange: this.handleCheckboxChange, title: checkbox.tooltip ? undefined : checkbox.title}),
                h("label", {className: "slds-checkbox_button__label", htmlFor: `${this.key}-${checkbox.value}-${index}`, title: checkbox.tooltip ? undefined : checkbox.title},
                  h("span", {className: "slds-checkbox_faux", style: {display: "inline-flex", alignItems: "center", whiteSpace: "nowrap"}},
                    checkbox.label,
                    checkbox.tooltip && h("span", {onClick: (e) => e.stopPropagation(), style: {marginLeft: "4px", display: "inline-flex"}}, h(Tooltip, {tooltip: checkbox.tooltip, idKey: `${this.key}-${checkbox.name}`}))
                  )
                )
              )
            )
          )
        )
      )
    );
  }
}

class SObjectsCacheOptions extends React.Component {

  constructor(props) {
    super(props);
    this.model = props.model;
    this.appRef = props.appRef;
    this.onChangeCacheEnabled = this.onChangeCacheEnabled.bind(this);
    this.onChangeCacheDuration = this.onChangeCacheDuration.bind(this);
    this.onClearCache = this.onClearCache.bind(this);

    const cacheEnabledKey = Constants.ENABLE_SOBJECTS_LIST_CACHE;
    const cacheDurationKey = "cacheDuration_" + Constants.CACHE_SOBJECTS_LIST;

    const cacheEnabled = localStorage.getItem(cacheEnabledKey);
    const cacheDuration = localStorage.getItem(cacheDurationKey);

    this.state = {
      cacheEnabled: cacheEnabled !== null ? JSON.parse(cacheEnabled) : true,
      cacheDuration: cacheDuration !== null ? cacheDuration : "8"
    };
  }

  onChangeCacheEnabled(e) {
    const enabled = e.target.checked;
    this.setState({cacheEnabled: enabled});
    localStorage.setItem(Constants.ENABLE_SOBJECTS_LIST_CACHE, JSON.stringify(enabled));
  }

  onChangeCacheDuration(e) {
    const duration = e.target.value;
    this.setState({cacheDuration: duration});
    localStorage.setItem("cacheDuration_" + Constants.CACHE_SOBJECTS_LIST, duration);
  }

  async onClearCache() {
    await DataCache.clearCache(Constants.CACHE_SOBJECTS_LIST, this.model.sfHost, true, true);
    if (this.appRef) {
      this.appRef.setState({
        showToast: true,
        toastMessage: "SObjects List cache cleared successfully.",
        toastVariant: "success",
        toastTitle: "Success"
      });
      setTimeout(() => this.appRef.hideToast(), 3000);
    }
  }

  render() {
    return h("div", {className: "slds-grid slds-border_bottom slds-p-horizontal_small slds-p-vertical_xx-small"},
      h("div", {className: "slds-col slds-size_3-of-12 text-align-middle"},
        h("span", {}, "SObjects List Cache",
          h(Tooltip, {tooltip: "Enable caching of the SObjects list to improve popup loading performance.", idKey: "sobjectsCacheOption"})
        )
      ),
      h("div", {className: "slds-col slds-size_9-of-12"},
        h("div", {className: "slds-grid slds-grid_vertical-align-center slds-gutters_small"},
          h("div", {className: "slds-col slds-size_1-of-2"},
            h("div", {dir: "ltr", className: "slds-form-element__control"},
              h("label", {className: "slds-checkbox_toggle slds-grid"},
                h("input", {
                  type: "checkbox",
                  required: true,
                  id: "enableSobjectsCache",
                  "aria-describedby": "enableSobjectsCache",
                  className: "slds-input",
                  checked: this.state.cacheEnabled,
                  onChange: this.onChangeCacheEnabled
                }),
                h("span", {id: "enableSobjectsCache", className: "slds-checkbox_faux_container center-label"},
                  h("span", {className: "slds-checkbox_faux"}),
                  h("span", {className: "slds-checkbox_on"}, "Enabled"),
                  h("span", {className: "slds-checkbox_off"}, "Disabled")
                )
              )
            )
          ),
          h("div", {className: "slds-col slds-size_1-of-2"},
            h("div", {className: "slds-grid slds-grid_vertical-align-center slds-gutters_small"},
              h("div", {className: "slds-col slds-size_4-of-12"},
                h("label", {className: "slds-form-element__label", htmlFor: "sobjectsCacheDuration"}, "Duration (hours):",
                  h(Tooltip, {tooltip: "If 'Preload SObjects before popup opens' is enabled, recommended value is 8 (to force a refresh every 8 hours), else recommended value is 168 (7 days - refresh when the popup is opened in background)", idKey: "sobjectsCacheDurationTooltip"})),
              ),
              h("div", {className: "slds-col slds-size_3-of-12"},
                h("div", {className: "slds-form-element__control"},
                  h("input", {
                    type: "number",
                    id: "sobjectsCacheDuration",
                    className: "slds-input",
                    value: nullToEmptyString(this.state.cacheDuration),
                    onChange: this.onChangeCacheDuration,
                    min: 1
                  })
                )
              ),
              h("div", {className: "slds-col"},
                h("button", {
                  className: "slds-button slds-button_brand",
                  onClick: this.onClearCache,
                  title: "Clear SObjects List cache"
                }, "Clear Cache")
              )
            )
          )
        )
      )
    );
  }
}

class CSVSeparatorOption extends React.Component {

  constructor(props) {
    super(props);
    this.onChangeCSVSeparator = this.onChangeCSVSeparator.bind(this);
    this.state = {csvSeparator: localStorage.getItem("csvSeparator") ? localStorage.getItem("csvSeparator") : ","};
  }

  onChangeCSVSeparator(e) {
    let csvSeparator = e.target.value;
    this.setState({csvSeparator});
    localStorage.setItem("csvSeparator", csvSeparator);
  }

  render() {
    return h("div", {className: "slds-grid slds-border_bottom slds-p-horizontal_small slds-p-vertical_xx-small"},
      h("div", {className: "slds-col slds-size_3-of-12 text-align-middle"},
        h("span", {}, "CSV Separator")
      ),
      h("div", {className: "slds-col slds-size_1-of-12 slds-form-element slds-grid slds-grid_align-start slds-grid_vertical-align_center slds-gutters_small slds-m-left_xxx-small"},
        h("input", {type: "text", id: "csvSeparatorInput", className: "slds-input slds-text-align_right slds-m-right_small", placeholder: "CSV Separator", value: nullToEmptyString(this.state.csvSeparator), onChange: this.onChangeCSVSeparator})
      )
    );
  }
}

class enableLogsOption extends React.Component {

  constructor(props) {
    super(props);
    this.sfHost = props.model.sfHost;
    this.onChangeDebugLogTime = this.onChangeDebugLogTime.bind(this);
    this.onChangeDebugLevel = this.onChangeDebugLevel.bind(this);
    this.state = {
      debugLogDebugLevel: localStorage.getItem(this.sfHost + "_debugLogDebugLevel") ? localStorage.getItem(this.sfHost + "_debugLogDebugLevel") : "SFDC_DevConsole",
      debugLogTimeMinutes: localStorage.getItem("debugLogTimeMinutes") ? localStorage.getItem("debugLogTimeMinutes") : "15",
    };
  }

  onChangeDebugLevel(e) {
    let debugLogDebugLevel = e.target.value;
    this.setState({debugLogDebugLevel});
    localStorage.setItem(this.sfHost + "_debugLogDebugLevel", debugLogDebugLevel);
  }

  onChangeDebugLogTime(e) {
    let debugLogTimeMinutes = e.target.value;
    this.setState({debugLogTimeMinutes});
    localStorage.setItem("debugLogTimeMinutes", debugLogTimeMinutes);
  }

  render() {
    return h("div", {className: "slds-grid slds-grid_vertical"},
      h("div", {className: "slds-col slds-grid slds-wrap slds-border_bottom slds-p-horizontal_small slds-p-vertical_xx-small"},
        h("div", {className: "slds-col slds-size_3-of-12 text-align-middle"},
          h("span", {}, "Debug Level (DeveloperName)")
        ),
        h("div", {className: "slds-col slds-size_6-of-12 slds-form-element"}),
        h("div", {className: "slds-col slds-size_3-of-12 slds-form-element"},
          h("input", {type: "text", id: "debugLogDebugLevel", className: "slds-input slds-text-align_right slds-m-right_small", placeholder: "SFDC_DevConsole", value: nullToEmptyString(this.state.debugLogDebugLevel), onChange: this.onChangeDebugLevel})
        ),
      ),
      h("div", {className: "slds-col slds-grid slds-wrap slds-border_bottom slds-p-horizontal_small slds-p-vertical_xx-small"},
        h("div", {className: "slds-col slds-size_3-of-12 text-align-middle"},
          h("span", {}, "Debug Log Time (Minutes)")
        ),
        h("div", {className: "slds-col slds-size_6-of-12 slds-form-element"}),
        h("div", {className: "slds-col slds-size_3-of-12 slds-form-element"},
          h("input", {type: "number", id: "debugLogTimeMinutes", className: "slds-input slds-text-align_right slds-m-right_small", value: nullToEmptyString(this.state.debugLogTimeMinutes), onChange: this.onChangeDebugLogTime})
        ),
      )
    );
  }
}

class CustomShortcuts extends React.Component {

  constructor(props) {
    super(props);
    this.sfHost = props.model.sfHost;
    this.onAddShortcut = this.onAddShortcut.bind(this);
    this.onEditShortcut = this.onEditShortcut.bind(this);
    this.onDeleteShortcut = this.onDeleteShortcut.bind(this);
    this.onSaveShortcut = this.onSaveShortcut.bind(this);
    this.onCancelEdit = this.onCancelEdit.bind(this);
    this.onSort = this.onSort.bind(this);
    this.onSearch = this.onSearch.bind(this);
    this.state = {
      shortcuts: JSON.parse(localStorage.getItem(this.sfHost + "_orgLinks") || "[]"),
      editingIndex: -1,
      newShortcut: {label: "", link: "", section: "", isExternal: false},
      sortConfig: {
        key: null,
        direction: "asc"
      },
      searchTerm: ""
    };
  }

  onSearch(e) {
    this.setState({searchTerm: e.target.value.toLowerCase()});
  }

  getFilteredShortcuts() {
    const {shortcuts, searchTerm} = this.state;
    if (!searchTerm) return shortcuts;

    return shortcuts.filter(shortcut =>
      shortcut.label.toLowerCase().includes(searchTerm)
      || shortcut.link.toLowerCase().includes(searchTerm)
      || shortcut.section.toLowerCase().includes(searchTerm)
    );
  }

  onSort(key) {
    let direction = "asc";
    if (this.state.sortConfig.key === key && this.state.sortConfig.direction === "asc") {
      direction = "desc";
    }

    const sortedShortcuts = [...this.state.shortcuts].sort((a, b) => {
      if (a[key] === null) return 1;
      if (b[key] === null) return -1;
      if (a[key] === undefined) return 1;
      if (b[key] === undefined) return -1;

      const aValue = a[key].toString().toLowerCase();
      const bValue = b[key].toString().toLowerCase();

      if (aValue < bValue) {
        return direction === "asc" ? -1 : 1;
      }
      if (aValue > bValue) {
        return direction === "asc" ? 1 : -1;
      }
      return 0;
    });

    this.setState({
      shortcuts: sortedShortcuts,
      sortConfig: {key, direction}
    });
  }

  getSortIcon(key) {
    if (this.state.sortConfig.key !== key) {
      return null;
    }
    return this.state.sortConfig.direction === "asc" ? "up" : "down";
  }

  handleInputChange(field, value) {
    if (field === "link") {
      // Get the base domain without protocol
      const baseDomain = this.sfHost.split(".")[0];

      // Check if the link contains the base domain
      if (value.includes(baseDomain)) {
        // Extract the path part after the domain
        const urlParts = value.split(".com");
        if (urlParts.length > 1) {
          // Keep everything after the domain
          value = urlParts[1];
        }
      }
    }

    this.setState({
      newShortcut: {
        ...this.state.newShortcut,
        [field]: value,
        isExternal: field === "link" ? (value.startsWith("http") || value.startsWith("www")) : this.state.newShortcut.isExternal
      }
    });
  }

  onAddShortcut() {
    this.setState({
      editingIndex: this.state.shortcuts.length,
      newShortcut: {label: "", link: "", section: "", isExternal: false}
    });
  }

  onEditShortcut(index) {
    this.setState({
      editingIndex: index,
      newShortcut: {...this.state.shortcuts[index]}
    });
  }

  onDeleteShortcut(index) {
    const newShortcuts = [...this.state.shortcuts];
    newShortcuts.splice(index, 1);
    this.setState({shortcuts: newShortcuts});
    localStorage.setItem(this.sfHost + "_orgLinks", JSON.stringify(newShortcuts));
  }

  onSaveShortcut() {
    const {shortcuts, editingIndex, newShortcut} = this.state;
    const newShortcuts = [...shortcuts];

    // Ensure isExternal is set correctly before saving
    newShortcut.isExternal = newShortcut.link.startsWith("http") || newShortcut.link.startsWith("www");

    if (editingIndex === shortcuts.length) {
      newShortcuts.push(newShortcut);
    } else {
      newShortcuts[editingIndex] = newShortcut;
    }

    this.setState({
      shortcuts: newShortcuts,
      editingIndex: -1,
      newShortcut: {label: "", link: "", section: "", isExternal: false}
    });

    localStorage.setItem(this.sfHost + "_orgLinks", JSON.stringify(newShortcuts));
  }

  onCancelEdit() {
    this.setState({
      editingIndex: -1,
      newShortcut: {label: "", link: "", section: ""}
    });
  }

  render() {
    const {editingIndex, newShortcut} = this.state;
    const filteredShortcuts = this.getFilteredShortcuts();

    return h("div", {className: "slds-grid slds-grid_vertical"},
      h("div", {className: "slds-grid slds-p-horizontal_small slds-p-vertical_xx-small"},
        h("div", {className: "slds-col slds-size_12-of-12"},
          h("div", {className: "slds-form-element"},
            h("div", {className: "slds-form-element__control slds-input-has-icon slds-input-has-icon_left"},
              h("svg", {className: "slds-input__icon slds-input__icon_left slds-icon-text-default", "aria-hidden": true},
                h("use", {xlinkHref: "symbols.svg#search"})
              ),
              h("input", {
                type: "search",
                placeholder: "Search shortcuts...",
                className: "slds-input",
                value: this.state.searchTerm,
                onChange: this.onSearch
              })
            )
          )
        )
      ),
      h("table", {className: "slds-table slds-table_cell-buffer slds-table_bordered"},
        h("thead", {},
          h("tr", {className: "slds-line-height_reset"},
            h("th", {
              scope: "col",
              className: "slds-is-sortable",
              onClick: () => this.onSort("label")
            },
            h("div", {className: "slds-grid slds-grid_align-spread slds-truncate", title: "Label"},
              h("span", {}, "Label"),
              this.getSortIcon("label") && h("span", {className: "slds-icon_container slds-icon-utility-" + this.getSortIcon("label")},
                h("svg", {className: "slds-icon slds-icon_x-small slds-icon-text-default", "aria-hidden": true},
                  h("use", {xlinkHref: "symbols.svg#" + this.getSortIcon("label")})
                )
              )
            )
            ),
            h("th", {
              scope: "col",
              className: "slds-is-sortable",
              onClick: () => this.onSort("link")
            },
            h("div", {className: "slds-grid slds-grid_align-spread slds-truncate", title: "Link"},
              h("span", {}, "Link"),
              this.getSortIcon("link") && h("span", {className: "slds-icon_container slds-icon-utility-" + this.getSortIcon("link")},
                h("svg", {className: "slds-icon slds-icon_x-small slds-icon-text-default", "aria-hidden": true},
                  h("use", {xlinkHref: "symbols.svg#" + this.getSortIcon("link")})
                )
              )
            )
            ),
            h("th", {
              scope: "col",
              className: "slds-is-sortable",
              onClick: () => this.onSort("section")
            },
            h("div", {className: "slds-grid slds-grid_align-spread slds-truncate", title: "Section"},
              h("span", {}, "Section"),
              this.getSortIcon("section") && h("span", {className: "slds-icon_container slds-icon-utility-" + this.getSortIcon("section")},
                h("svg", {className: "slds-icon slds-icon_x-small slds-icon-text-default", "aria-hidden": true},
                  h("use", {xlinkHref: "symbols.svg#" + this.getSortIcon("section")})
                )
              )
            )
            ),
            h("th", {scope: "col"},
              h("div", {className: "slds-truncate", title: "External"}, "External")
            ),
            h("th", {scope: "col"},
              h("div", {className: "slds-truncate", title: "Actions"}, "Actions")
            )
          )
        ),
        h("tbody", {},
          [...filteredShortcuts, editingIndex === filteredShortcuts.length ? newShortcut : null].map((shortcut, index) =>
            shortcut && h("tr", {
              key: editingIndex === index ? `new-${index}` : `${shortcut.label}-${shortcut.link}-${index}`,
              className: "slds-hint-parent"
            },
            editingIndex === index ? [
              h("td", {key: "label", "data-label": "Label"},
                h("div", {className: "slds-truncate"},
                  h("input", {
                    type: "text",
                    className: "slds-input slds-m-right_small",
                    value: newShortcut.label,
                    onChange: (e) => this.handleInputChange("label", e.target.value)
                  })
                )
              ),
              h("td", {key: "link", "data-label": "Link"},
                h("div", {className: "slds-truncate"},
                  h("input", {
                    type: "text",
                    className: "slds-input slds-m-right_small",
                    value: newShortcut.link,
                    onChange: (e) => this.handleInputChange("link", e.target.value)
                  })
                )
              ),
              h("td", {key: "section", "data-label": "Section"},
                h("div", {className: "slds-truncate"},
                  h("input", {
                    type: "text",
                    className: "slds-input slds-m-right_small",
                    value: newShortcut.section,
                    onChange: (e) => this.handleInputChange("section", e.target.value)
                  })
                )
              ),
              h("td", {key: "external", "data-label": "External"},
                h("div", {className: "slds-truncate"},
                  newShortcut.isExternal && h("svg", {className: "slds-button__icon"},
                    h("use", {xlinkHref: "symbols.svg#check"})
                  )
                )
              ),
              h("td", {key: "actions", "data-label": "Actions"},
                h("div", {className: "slds-truncate"},
                  h("button", {
                    className: "slds-button slds-button_icon slds-button_icon-border-filled slds-m-right_x-small",
                    onClick: this.onSaveShortcut,
                    title: "Save"
                  }, h("svg", {className: "slds-button__icon"},
                    h("use", {xlinkHref: "symbols.svg#check"})
                  )),
                  h("button", {
                    className: "slds-button slds-button_icon slds-button_icon-border-filled",
                    onClick: this.onCancelEdit,
                    title: "Cancel"
                  }, h("svg", {className: "slds-button__icon"},
                    h("use", {xlinkHref: "symbols.svg#close"})
                  ))
                )
              )
            ] : [
              h("td", {key: "label", "data-label": "Label"},
                h("div", {className: "slds-truncate", title: shortcut.label}, shortcut.label)
              ),
              h("td", {key: "link", "data-label": "Link"},
                h("div", {className: "slds-truncate", title: shortcut.link}, shortcut.link)
              ),
              h("td", {key: "section", "data-label": "Section"},
                h("div", {className: "slds-truncate", title: shortcut.section}, shortcut.section)
              ),
              h("td", {key: "external", "data-label": "External"},
                h("div", {className: "slds-truncate"},
                  shortcut.isExternal && h("svg", {className: "slds-button__icon"},
                    h("use", {xlinkHref: "symbols.svg#check"})
                  )
                )
              ),
              h("td", {key: "actions", "data-label": "Actions"},
                h("div", {className: "slds-truncate"},
                  h("button", {
                    className: "slds-button slds-button_icon slds-button_icon-border-filled slds-m-right_x-small",
                    onClick: () => this.onEditShortcut(index),
                    title: "Edit"
                  }, h("svg", {className: "slds-button__icon"},
                    h("use", {xlinkHref: "symbols.svg#edit"})
                  )),
                  h("button", {
                    className: "slds-button slds-button_icon slds-button_icon-border-filled",
                    onClick: () => this.onDeleteShortcut(index),
                    title: "Delete"
                  }, h("svg", {className: "slds-button__icon"},
                    h("use", {xlinkHref: "symbols.svg#delete"})
                  ))
                )
              )
            ]
            )
          )
        )
      ),
      h("div", {className: "slds-grid slds-p-horizontal_small slds-p-vertical_xx-small"},
        h("div", {className: "slds-col slds-size_12-of-12"},
          h("button", {
            className: "slds-button slds-button_icon slds-button_icon-border-filled",
            onClick: this.onAddShortcut,
            title: "Add Shortcut"
          }, h("svg", {className: "slds-button__icon"},
            h("use", {xlinkHref: "symbols.svg#add"})
          ))
        )
      )
    );
  }
}

class FlowScannerRules extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      rules: [],
      loading: true,
      resetCounter: 0
    };
    this.loadRules = this.loadRules.bind(this);
    this.onRuleChange = this.onRuleChange.bind(this);
  }

  componentDidMount() {
    this.loadRules();
    // Set up reference for parent component interaction
    if (this.props.model) {
      this.props.model.flowScannerRulesRef = this;
    }
  }

  // Methods for external control by action buttons
  setAllRulesChecked(checked) {
    const updatedRules = this.state.rules.map(rule => ({...rule, checked}));
    this.setState(prevState => ({
      rules: updatedRules,
      resetCounter: prevState.resetCounter + 1
    }));
    localStorage.setItem(FLOW_SCANNER_RULES_STORAGE_KEY, JSON.stringify(updatedRules));
  }

  checkAllRules() {
    this.setAllRulesChecked(true);
  }

  uncheckAllRules() {
    this.setAllRulesChecked(false);
  }

  resetToDefaults() {
    // Remove stored rules to force reload with defaults
    localStorage.removeItem(FLOW_SCANNER_RULES_STORAGE_KEY);

    // Increment reset counter to force component recreation
    this.setState(prevState => ({
      resetCounter: prevState.resetCounter + 1
    }));

    this.loadRules();
  }

  async loadRules() {
    try {
      // Try to load the actual flow-scanner-core if available
      let flowScannerCore = null;

      if (typeof lightningflowscanner !== "undefined") {
        flowScannerCore = lightningflowscanner;
        const rules = getFlowScannerRules(flowScannerCore);
        this.setState({rules, loading: false});
      } else {
        // No flow scanner core available
        this.setState({rules: [], loading: false});
      }
    } catch (error) {
      console.error("Error loading Flow Scanner rules:", error);
      this.setState({rules: [], loading: false});
    }
  }

  onRuleChange(ruleName, field, value) {
    this.setState(prevState => {
      const updatedRules = prevState.rules.map(rule => {
        if (rule.name === ruleName) {
          if (field === "checked") {
            return {...rule, checked: value};
          } else if (field === "severity") {
            return {...rule, severity: value};
          } else if (field === "config") {
            // Update the main config object for the scanner, and configValue for the UI
            const newConfig = rule.configType ? {[rule.configType]: value} : {};
            return {...rule, config: newConfig, configValue: value};
          }
        }
        return rule;
      });

      // Save to localStorage
      localStorage.setItem(FLOW_SCANNER_RULES_STORAGE_KEY, JSON.stringify(updatedRules));

      return {rules: updatedRules};
    });
  }

  render() {
    const {rules, loading} = this.state;

    if (loading) {
      return h("div", {className: "slds-text-align_center slds-p-vertical_large"},
        h("div", {className: "slds-spinner slds-spinner_medium"},
          h("div", {className: "slds-spinner__dot-a"}),
          h("div", {className: "slds-spinner__dot-b"})
        ),
        h("p", {className: "slds-m-top_small"}, "Loading Flow Scanner rules...")
      );
    }

    if (rules.length === 0) {
      return h("div", {className: "slds-text-align_center slds-p-vertical_large"},
        h("p", {}, "No Flow Scanner rules available. Please ensure the Flow Scanner core library is loaded.")
      );
    }

    const sortedRules = [...rules].sort((a, b) => a.label.localeCompare(b.label));

    return h("div", {className: "flow-scanner-rules-container"},
      sortedRules
        .map(rule => {
        // Determine badge
          let badge = null;
          if (rule.isBeta) {
            badge = {label: "Beta", type: "beta"};
          }

          // Resolve config value from rule object
          let resolvedConfigValue = null;
          if (rule.isConfigurable) {
            if (rule.configValue !== undefined && rule.configValue !== null) {
              resolvedConfigValue = rule.configValue;
            } else if (rule.defaultValue !== undefined && rule.defaultValue !== null) {
              resolvedConfigValue = rule.defaultValue;
            } else if (rule.config !== undefined && rule.config !== null) {
              // Extract the specific config value based on configType
              if (rule.configType === "expression" && rule.config.expression !== undefined) {
                resolvedConfigValue = rule.config.expression;
              } else if (rule.configType === "threshold" && rule.config.threshold !== undefined) {
                resolvedConfigValue = rule.config.threshold;
              } else {
                // Fallback to the entire config object (shouldn't happen with well-formed rules)
                resolvedConfigValue = rule.config;
              }
            }
          }

          // Create enhanced option props
          const optionProps = {
            type: "toggle",
            enhancedTitle: rule.label,
            badge,
            severity: (rule.severity === "note" ? "info" : rule.severity) || "info",
            description: rule.description,
            // No storageKey - managed by FlowScannerRules component
            key: `flowScannerRule_${rule.name}_${this.state.resetCounter}`,
            checked: rule.checked !== undefined ? rule.checked : true,
            // Rule configuration properties
            isConfigurable: rule.isConfigurable,
            configType: rule.configType,
            configValue: resolvedConfigValue,
            onToggleChange: (checked) => {
              this.onRuleChange(rule.name, "checked", checked);
            },
            onSeverityChange: (key, newSeverity) => {
              this.onRuleChange(rule.name, "severity", newSeverity);
            },
            onConfigChange: (key, newConfig) => {
              this.onRuleChange(rule.name, "config", newConfig);
            }
          };

          return h(Option, optionProps);
        })
    );
  }
}

let h = React.createElement;

class App extends React.Component {

  constructor(props) {
    super(props);
    this.foo = undefined;

    this.exportOptions = this.exportOptions.bind(this);
    this.importOptions = this.importOptions.bind(this);
    this.hideToast = this.hideToast.bind(this);
    this.state = {};
  }

  exportOptions(filterKeys = null) {
    let localStorageData;
    let filename = "reloadedConfiguration.json";

    if (filterKeys) {
      // Filter only the specified keys
      localStorageData = {};
      for (let i = 0; i < localStorage.length; i++) {
        const key = localStorage.key(i);
        if (key && filterKeys.some(filter => key.startsWith(filter))) {
          localStorageData[key] = localStorage.getItem(key);
        }
      }
      filename = `${FLOW_SCANNER_RULES_STORAGE_KEY}.json`;
    } else {
      // Export all localStorage
      localStorageData = {...localStorage};
    }

    const jsonData = JSON.stringify(localStorageData, null, 2);
    const blob = new Blob([jsonData], {type: "application/json"});
    const link = document.createElement("a");
    const url = URL.createObjectURL(blob);
    link.href = url;
    link.download = filename;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }

  importOptions(filterKeys = null) {
    const fileInput = this.refs.fileInput;

    if (!fileInput.files.length) {
      console.error("No file selected.");
      return;
    }

    // Check if we have pending import filters (from Import Rules button)
    if (this.pendingImportFilters) {
      filterKeys = this.pendingImportFilters;
      this.pendingImportFilters = null; // Clear the flag
    }

    const file = fileInput.files[0];
    const reader = new FileReader();

    reader.onload = (event) => {
      try {
        const importedData = JSON.parse(event.target.result);

        for (const [key, value] of Object.entries(importedData)) {
          if (filterKeys && Array.isArray(filterKeys)) {
            // Only import keys that match the filter
            if (filterKeys.some(filter => key.startsWith(filter))) {
              localStorage.setItem(key, value);
            }
          } else {
            // Import all keys
            localStorage.setItem(key, value);
          }
        }

        // Force refresh of Flow Scanner rules if they exist
        const {model} = this.props;
        if (filterKeys && model && model.flowScannerRulesRef) {
          // Force component re-creation by incrementing reset counter
          model.flowScannerRulesRef.setState(prevState => ({
            resetCounter: prevState.resetCounter + 1
          }));
          // Reload rules from localStorage (which now has the imported data)
          model.flowScannerRulesRef.loadRules();
          // Force a re-render of the parent model
          model.didUpdate();
        }

        this.setState({
          showToast: true,
          toastMessage: Array.isArray(filterKeys) ? "Flow Scanner rules imported successfully!" : "Options Imported Successfully!",
          toastVariant: "success",
          toastTitle: "Success"
        });
        setTimeout(this.hideToast, 3000);
      } catch (error) {
        this.setState({
          showToast: true,
          toastMessage: "Import Failed",
          toastVariant: "error",
          toastTitle: "Error"
        });
        console.error("Error parsing JSON file:", error);
      }
    };
    reader.readAsText(file);
  }

  hideToast() {
    let {model} = this.props;
    this.state = {showToast: false, toastMessage: ""};
    model.didUpdate();
  }

  render() {
    const {showToast, toastMessage, toastVariant, toastTitle} = this.state;
    let {model} = this.props;

    // Define utility items for this page (injected as "slots")
    const utilityItems = [
      // Export Options button
      h("div", {className: "slds-builder-header__utilities-item slds-p-top_x-small slds-p-horizontal_x-small sfir-border-none"},
        h("button", {className: "slds-button slds-button_icon slds-button_icon-border-filled", onClick: () => this.exportOptions(), title: "Export Options"},
          h("svg", {className: "slds-button__icon"},
            h("use", {xlinkHref: "symbols.svg#download"})
          )
        )
      ),
      // Import Options button
      h("div", {className: "slds-builder-header__utilities-item slds-p-top_x-small slds-p-horizontal_x-small sfir-border-none"},
        h("button", {
          className: "slds-button slds-button_icon slds-button_icon-border-filled",
          onClick: () => this.refs.fileInput.click(),
          title: "Import Options"
        },
        h("svg", {className: "slds-button__icon"},
          h("use", {xlinkHref: "symbols.svg#upload"})
        )
        ),
        // Hidden file input for importing options
        h("input", {
          type: "file",
          style: {display: "none"},
          ref: "fileInput",
          onChange: this.importOptions,
          accept: "application/json"
        })
      )
    ];

    return h("div", {},
      h(PageHeader, {
        pageTitle: "Options",
        orgName: model.orgName,
        sfLink: model.sfLink,
        sfHost: model.sfHost,
        spinnerCount: model.spinnerCount,
        ...model.userInfoModel.getProps(),
        utilityItems
      }),
      this.state.showToast
        && h(Toast, {
          variant: this.state.toastVariant,
          title: this.state.toastTitle,
          message: this.state.toastMessage,
          onClose: this.hideToast
        }),
      h("div", {className: "slds-m-top_xx-large sfir-page-container"},
        h("div", {className: "slds-card slds-m-around_medium main-container", id: "main-container_header"},
          h(OptionsTabSelector, {model, appRef: this})
        )
      )
    );
  }
}

{

  let args = new URLSearchParams(location.search.slice(1));
  let sfHost = args.get("host");
  initButton(sfHost, true);
  sfConn.getSession(sfHost).then(() => {

    let root = document.getElementById("root");
    let model = new Model(sfHost);
    model.reactCallback = cb => {
      ReactDOM.render(h(App, {model}), root, cb);
    };
    ReactDOM.render(h(App, {model}), root);
  });
}