{
  "widgettype": "VBox",
  "options": {
    "width": "100%",
    "height": "100%",
    "padding": "20px"
  },
  "subwidgets": [
    {
      "widgettype": "Text",
      "options": {
        "text": "Settings",
        "fontSize": "24px",
        "fontWeight": "bold",
        "color": "#F8FAFC",
        "marginBottom": "20px"
      }
    },
    {
      "widgettype": "Tabs",
      "id": "settings-tabs",
      "options": {
        "width": "100%",
        "height": "calc(100% - 60px)",
        "tabs": [
          {
            "label": "General",
            "id": "general-tab"
          },
          {
            "label": "AI Models", 
            "id": "models-tab"
          },
          {
            "label": "Security",
            "id": "security-tab"
          },
          {
            "label": "Appearance",
            "id": "appearance-tab"
          }
        ]
      },
      "subwidgets": [
        {
          "widgettype": "VBox",
          "id": "general-tab",
          "options": {
            "width": "100%",
            "height": "100%",
            "padding": "20px"
          },
          "subwidgets": [
            {
              "widgettype": "Form",
              "options": {
                "width": "100%",
                "maxWidth": "600px"
              },
              "subwidgets": [
                {
                  "widgettype": "Input",
                  "id": "default-model",
                  "options": {
                    "label": "Default AI Model",
                    "placeholder": "Select default model...",
                    "width": "100%",
                    "marginBottom": "16px"
                  }
                },
                {
                  "widgettype": "Input",
                  "id": "session-timeout",
                  "options": {
                    "label": "Session Timeout (minutes)",
                    "type": "number",
                    "placeholder": "Enter timeout in minutes...",
                    "width": "100%",
                    "marginBottom": "16px"
                  }
                },
                {
                  "widgettype": "Checkbox",
                  "id": "auto-save",
                  "options": {
                    "label": "Auto-save sessions",
                    "checked": true,
                    "marginBottom": "24px"
                  }
                },
                {
                  "widgettype": "Button",
                  "options": {
                    "label": "Save General Settings",
                    "bgcolor": "#22C55E",
                    "color": "#FFFFFF",
                    "border": "none",
                    "borderRadius": "6px",
                    "padding": "10px 20px",
                    "fontWeight": "600"
                  },
                    "binds": [
                      {
                        "wid": "self",
                        "event": "click",
                        "actiontype": "registerfunction",
                        "target": "self",
                        "rfname": "save_general_settings",
                        "params": {
                          "default_model": "{{form.default-model}}",
                          "session_timeout": "{{form.session-timeout}}",
                          "auto_save": "{{form.auto-save}}"
                        }
                      }
                    ]
                }
              ]
            }
          ]
        },
        {
          "widgettype": "VBox",
          "id": "models-tab",
          "options": {
            "width": "100%",
            "height": "100%",
            "padding": "20px"
          },
          "subwidgets": [
            {
              "widgettype": "Text",
              "options": {
                "text": "Configure AI Models",
                "fontSize": "18px",
                "fontWeight": "600",
                "color": "#F8FAFC",
                "marginBottom": "16px"
              }
            },
            {
              "widgettype": "List",
              "id": "models-list",
              "options": {
                "width": "100%",
                "height": "calc(100% - 80px)",
                "itemHeight": "120px",
                "items": []
              },
              "subwidgets": [
                {
                  "widgettype": "VBox",
                  "options": {
                    "width": "100%",
                    "height": "100%",
                    "padding": "16px",
                    "border": "1px solid #334155",
                    "borderRadius": "8px",
                    "bgcolor": "#1E293B",
                    "marginBottom": "12px"
                  },
                  "subwidgets": [
                    {
                      "widgettype": "Input",
                      "options": {
                        "label": "Model Name",
                        "value": "{{data.name}}",
                        "width": "100%",
                        "marginBottom": "8px"
                      }
                    },
                    {
                      "widgettype": "Input",
                      "options": {
                        "label": "Provider",
                        "value": "{{data.provider}}",
                        "width": "100%",
                        "marginBottom": "8px"
                      }
                    },
                    {
                      "widgettype": "HBox",
                      "options": {
                        "width": "100%",
                        "gap": "12px"
                      },
                      "subwidgets": [
                        {
                          "widgettype": "Button",
                          "options": {
                            "label": "Update",
                            "bgcolor": "#3B82F6",
                            "color": "#FFFFFF",
                            "border": "none",
                            "borderRadius": "4px",
                            "padding": "6px 12px",
                            "fontSize": "12px"
                          },
                          "binds": [
                            {
                              "wid": "self",
                              "event": "click",
                              "actiontype": "registerfunction",
                              "target": "self",
                              "rfname": "update_model",
                              "params": {
                                "model_id": "{{data.id}}",
                                "model_name": "{{data.name}}",
                                "model_provider": "{{data.provider}}"
                              }
                            }
                          ]
                        },
                        {
                          "widgettype": "Button",
                          "options": {
                            "label": "Remove",
                            "bgcolor": "#EF4444",
                            "color": "#FFFFFF",
                            "border": "none",
                            "borderRadius": "4px",
                            "padding": "6px 12px",
                            "fontSize": "12px"
                          },
                          "binds": [
                            {
                              "wid": "self",
                              "event": "click",
                              "actiontype": "registerfunction",
                              "target": "self",
                              "rfname": "remove_model",
                              "params": {
                                "model_id": "{{data.id}}"
                              }
                            }
                          ]
                        }
                      ]
                    }
                  ]
                }
              ]
            },
            {
              "widgettype": "Button",
              "options": {
                "label": "Add New Model",
                "bgcolor": "#22C55E",
                "color": "#FFFFFF",
                "border": "none",
                "borderRadius": "6px",
                "padding": "8px 16px",
                "marginTop": "12px"
              },
              "binds": [
                {
                  "wid": "self",
                  "event": "click",
                  "actiontype": "registerfunction",
                  "target": "self",
                  "rfname": "add_model",
                  "params": {}
                }
              ]
            }
          ]
        },
        {
          "widgettype": "VBox",
          "id": "security-tab",
          "options": {
            "width": "100%",
            "height": "100%",
            "padding": "20px"
          },
          "subwidgets": [
            {
              "widgettype": "Text",
              "options": {
                "text": "Security Settings",
                "fontSize": "18px",
                "fontWeight": "600",
                "color": "#F8FAFC",
                "marginBottom": "16px"
              }
            },
            {
              "widgettype": "Checkbox",
              "id": "require-auth",
              "options": {
                "label": "Require authentication for web access",
                "checked": false,
                "marginBottom": "12px"
              }
            },
            {
              "widgettype": "Checkbox",
              "id": "encrypt-storage",
              "options": {
                "label": "Encrypt local storage",
                "checked": false,
                "marginBottom": "24px"
              }
            },
            {
              "widgettype": "Button",
              "options": {
                "label": "Save Security Settings",
                "bgcolor": "#22C55E",
                "color": "#FFFFFF",
                "border": "none",
                "borderRadius": "6px",
                "padding": "10px 20px",
                "fontWeight": "600"
              },
                  "binds": [
                    {
                      "wid": "self",
                      "event": "click",
                      "actiontype": "registerfunction",
                      "target": "self",
                      "rfname": "save_security_settings",
                      "params": {
                        "require_auth": "{{form.require-auth}}",
                        "encrypt_storage": "{{form.encrypt-storage}}"
                      }
                    }
                  ]
            }
          ]
        },
        {
          "widgettype": "VBox",
          "id": "appearance-tab",
          "options": {
            "width": "100%",
            "height": "100%",
            "padding": "20px"
          },
          "subwidgets": [
            {
              "widgettype": "Text",
              "options": {
                "text": "Appearance Settings",
                "fontSize": "18px",
                "fontWeight": "600",
                "color": "#F8FAFC",
                "marginBottom": "16px"
              }
            },
            {
              "widgettype": "Select",
              "id": "theme-select",
              "options": {
                "label": "Theme",
                "items": [
                  {"label": "Dark", "value": "dark"},
                  {"label": "Light", "value": "light"},
                  {"label": "System", "value": "system"}
                ],
                "value": "dark",
                "width": "200px",
                "marginBottom": "24px"
              }
            },
            {
              "widgettype": "Button",
              "options": {
                "label": "Save Appearance Settings",
                "bgcolor": "#22C55E",
                "color": "#FFFFFF",
                "border": "none",
                "borderRadius": "6px",
                "padding": "10px 20px",
                "fontWeight": "600"
              },
                  "binds": [
                    {
                      "wid": "self",
                      "event": "click",
                      "actiontype": "registerfunction",
                      "target": "self",
                      "rfname": "save_appearance_settings",
                      "params": {
                        "theme": "{{form.theme-select}}"
                      }
                    }
                  ]
            }
          ]
        }
      ]
    }
  ]
}