#include <Arduino.h>
#include <WiFi.h>
#include <WiFiManager.h> // https://github.com/tzapu/WiFiManager
#include <Preferences.h>
 
//Define the pin for the factory reset button. 
//This should be a pin that can trigger an interrupt (like GPIO3).
#define RESET_BUTTON_PIN 3 // GPIO3
 
//We will also use the built-in LED to indicate when the device is in configuration mode.
#define LED_PIN 8 // GPIO8 typically connected to onboard LED or use an external LED if not available
 
// We use a volatile variable to indicate that the factory reset button was pressed. 
//This is set in the ISR and checked in the main loop.
volatile bool factoryResetRequested = false;
 
// --- Global variables for our custom data ---
// We will populate these from the web interface
 
Preferences prefs;
 
char web_server[40] = ""; 
char api_token[34]   = "";
 
// This is our Interrupt Service Routine (ISR)
// It must be as fast as possible!
void IRAM_ATTR onFactoryReset() 
{
    factoryResetRequested = true;
}
 
// This callback is called when the ESP enters configuration mode (i.e., when it creates the Access Point).
void configModeCallback(WiFiManager *wiFiManager) 
{
    Serial.println("Entered config mode!");
    Serial.println(WiFi.softAPIP());
    
    // Turn on a physical LED so the user knows to look at their phone!
    digitalWrite(LED_PIN, HIGH); // Turn on the LED to indicate we're in config mode
}
 
void setup() 
{
    // Set up the reset button with an interrupt
    pinMode(RESET_BUTTON_PIN, INPUT);
    attachInterrupt(digitalPinToInterrupt(RESET_BUTTON_PIN), onFactoryReset, RISING);
 
    pinMode(LED_PIN, OUTPUT);// initialize digital pin LED_BUILTIN as an output.
    digitalWrite(LED_PIN, LOW); // Start with the LED off. We will turn it on in config mode.
 
    // Start serial communication
    Serial.begin(115200);
    Serial.println("--- Starting Custom WiFiManager ---");
 
    Serial.println("Loading custom parameters from NVS...");
    prefs.begin("my-app", false); // Open namespace in read/write mode
    
    // Read saved strings. If they don't exist yet, it returns an empty string ("")
    String saved_web = prefs.getString("web", "");
    String saved_token = prefs.getString("token", "");
    prefs.end(); // Close preferences for now
 
    // Copy the loaded Strings into our global char arrays
    strncpy(web_server, saved_web.c_str(), sizeof(web_server));
    strncpy(api_token, saved_token.c_str(), sizeof(api_token));
 
    // Initialize WiFiManager
    // Local intialization. There is no need to keep it in memory after setup() has finished.
    WiFiManager wm;
 
    wm.setAPCallback(configModeCallback);// Set the callback that will run when we enter configuration mode
 
    // Set a timeout so the ESP doesn't hang forever if nobody configures the WiFi
    wm.setConfigPortalTimeout(300); // Auto close portal after 5 minutes
 
    // Print debug info to the Serial monitor (helpful for troubleshooting)
    wm.setDebugOutput(true); 
    // -------------------------
 
    // Wifi Manager CUSTOMISATIONS: 
 
    // ==========================================================
    // 1. CUSTOMIZE THE MENU
    // ==========================================================
    // Available options: "wifi", "wifinoscan", "info", "param", "close", "sep", "erase", "restart", "exit"
    // Let's remove all but the configuration and exit options to simplify the user experience.
    std::vector<const char *> menu = {"wifi", "sep", "exit"};
    wm.setMenu(menu);
 
    //Custom Title
    wm.setTitle("My Custom Device Setup");
 
    // ==========================================================
    // 2. CUSTOMIZE THE STYLING (CSS / HTML)
    // ==========================================================
    // You can inject custom CSS directly into the <head> of the webpage.
    // Let's create a "Dark Mode" theme with blue buttons.
    const char* custom_css = 
        "<style>"
        "body { background-color: #121212; color: #ffffff; font-family: sans-serif; }"
        "button { background-color: #007bff; color: white; border: none; border-radius: 5px; padding: 10px 20px; }"
        "button:hover { background-color: #0056b3; }"
        "input { background-color: #333; color: #fff; border: 1px solid #555; border-radius: 3px; }"
        "a { color: #ffffff; text-decoration: none; font-weight: bold; }" /* <-- Forces WiFi network names to be white */
        "a:hover { color: #007bff; }"                                     /* <-- Turns them blue when tapped/hovered */
        ".msg { color: #4caf50; }" 
        "</style>";
 
    // ==========================================================
    // 3. ADD CUSTOM PARAMETERS (Input Fields)
    // ==========================================================
    // Syntax: WiFiManagerParameter(id, label, default_value, max_length, custom_html_attributes)
 
    WiFiManagerParameter custom_web_server("web", "Web Server", web_server, 40);
    WiFiManagerParameter custom_web_server_text("<p>Please enter your Web Server URL carefully.</p>");
    
    // A password box for an API token
    WiFiManagerParameter custom_api_token("token", "API Token", api_token, 34);
    WiFiManagerParameter custom_api_token_text("<p>Do not include spaces.</p>");
 
    // Add the parameters to the WiFiManager instance
    wm.addParameter(&custom_web_server);
    wm.addParameter(&custom_web_server_text);
    wm.addParameter(&custom_api_token);
    wm.addParameter(&custom_api_token_text);
    
    wm.setCustomHeadElement(custom_css);
 
    Serial.println("Starting WiFiManager...");
    Serial.println("If no valid WiFi is saved, it will create an Access Point.");
 
    // autoConnect() performs the magic.
    // It tries to connect to the last saved WiFi. 
    //    - WiFiManager stores the SSID/password as key/value pairs via NVS and reads them back on boot.
    // If it fails or no WiFi is saved, it sets up an Access Point.
    // AP Name: "ESP32_Config_AP", AP Password: "pizza4tree"
    bool res;
    res = wm.autoConnect("ESP32_Config_AP", "pizza4tree");
 
    // Check the result
    if(!res) 
    {
        Serial.println("Failed to connect or hit timeout.");
        Serial.println("Rebooting to try again...");
        delay(3000);
        ESP.restart();
    } 
    else 
    {
        digitalWrite(LED_PIN, LOW); // Turn off the LED since we're no longer in config mode
 
        // If the user typed new values into the portal, we need to copy 
        // them out of the WiFiManager into our global variables.
        const char* new_web = custom_web_server.getValue();
        const char* new_token = custom_api_token.getValue();
 
        // Check if the values from the portal are different from our saved globals
        if (strcmp(web_server, new_web) != 0 || strcmp(api_token, new_token) != 0) 
        {
            Serial.println("Parameters changed! Saving new values to NVS...");
            
            // Update global variables
            strncpy(web_server, new_web, sizeof(web_server));
            strncpy(api_token, new_token, sizeof(api_token));
 
            // Save to NVS
            prefs.begin("my-app", false);
            prefs.putString("web", web_server);
            prefs.putString("token", api_token);
            prefs.end();
        }
 
        // If you get here, you have successfully connected to the local router!
        Serial.println("");
        Serial.println("SUCCESS! Connected to WiFi.");
 
        Serial.println("--- Current Configuration ---");
        Serial.print("Assigned IP: ");
        Serial.println(WiFi.localIP());
        Serial.print("Web Server: ");
        Serial.println(web_server);
        Serial.print("API Token: ");
        Serial.println(api_token);
        Serial.println("-----------------------------");
    }
}
 
void loop() 
{
    // Check if the factory reset button was pressed
    if (factoryResetRequested) 
    {
        // do the heavy lifting outside of interrupt context
        WiFiManager wm;
        wm.resetSettings();        // clears WifiManager NVS
        prefs.begin("my-app", false);
        prefs.clear();             // clears Custom Parameters NVS
        prefs.end();
        delay(100);                // give NVS a moment to commit
        ESP.restart();             // now reboot
    }
 
    // Your main project code goes here.
    
    // For demonstration, we just print a heartbeat every 5 seconds
    if (WiFi.status() == WL_CONNECTED) 
    {
        Serial.println("Running normally... WiFi is connected.");
    } 
    else 
    {
        Serial.println("WiFi is disconnected! Attempting to reconnect...");
        WiFi.reconnect(); 
    }
    
    delay(5000);
}
Setup ESP32 WiFi From Your Phone! (Ultimate WiFiManager Tutorial)
