<!--
/**
 * ============================================================================
 * M_R CLASSES ENUMERATION
 * ============================================================================
 * 
 * A web-based tool for systematic enumeration and classification of Collatz 
 * sequences by their m_r value (the parameter whose second occurrence appears
 * earliest in the sequence, per Definition 6.1). This tool demonstrates 
 * the remarkable finiteness of the classification structure: computational 
 * verification reveals that all positive integers tested up to 2^40 partition 
 * into exactly 42 distinct structural classes S(m_r), with all 42 classes 
 * discovered before n < 2^13 (specifically at n = 7287).
 * 
 * MATHEMATICAL FOUNDATION:
 * Based on "On the Convergence of Collatz Sequences: A New Algebraic Framework"
 * by Javier Hernandez (2026).
 * https://doi.org/10.5281/zenodo.15546925
 *
 * CORE CONCEPTS:
 * - First Repeated Parameter (Definition 6.1): For each Collatz sequence, 
 *   the m-value whose second occurrence appears earliest in the sequence
 *   determines its classification (not necessarily the first to appear)
 * - Exhaustive Partition (Lemma 6.5): The classes {S(m_r) : m_r ∈ M_rep} 
 *   partition Z^+ completely - every n belongs to exactly one class
 * - Computational Finiteness (Remark 6.17): All n < 2^40 fall into only 
 *   42 distinct classes, suggesting |M_rep| = 42
 * - Discovery Threshold: All 42 values found before n = 7287 (< 2^13)
 * 
 * ENUMERATION ALGORITHM:
 * For each n from 1 to specified maximum:
 * 1. Compute m-sequence via tuple-based transform φ_1
 * 2. Identify m_r (parameter whose second occurrence appears earliest)
 * 3. Check if m_r is newly discovered
 * 4. If new: Store n as representative of S(m_r)
 * 5. Track discovery order and thresholds
 * 
 * VISUALIZATION FEATURES:
 * 1. Live Progress Display: Shows current n being processed
 * 2. Discovery Grid: Lists each m_r card with its first occurrence as tooltip
 * 3. Statistics Panel:
 *    - Current n value being analyzed
 *    - Current m_r value
 *    - Total unique m_r classes found
 * 
 * CLASSIFICATION OUTPUT:
 * For each discovered m_r class:
 * - m_r value: The repeated parameter defining the class
 * - First n: Smallest positive integer in S(m_r) (shown as card tooltip)
 * 
 * COMPUTATIONAL RESULTS:
 * Testing Range: n < 2^40 (> 1 trillion values)
 * Classes Found: Exactly 42 distinct m_r values
 * Discovery Completion: All 42 found before n = 7287
 * Largest m_r: m_r = 3643 (discovered at n = 7287)
 * 
 * KNOWN M_REP SET (|M_rep| = 42):
 * {0, 1, 2, 3, 6, 7, 8, 9, 12, 16, 19, 25, 45, 53, 60, 79, 91, 121, 125, 
 *  141, 166, 188, 205, 243, 250, 324, 333, 432, 444, 487, 576, 592, 649, 
 *  667, 683, 865, 889, 1153, 1214, 1821, 2428, 3643}
 * 
 * IMPLICATIONS:
 * - Finite Classification: Despite infinite domain, only 42 classes
 * - Early Discovery: All classes found within first 7287 integers
 * - Stability: No new classes from n = 7287 to n = 2^40
 * - Open Question: Is |M_rep| = 42 provably finite, or could additional 
 *   classes exist for n > 2^40?
 * 
 * INTERACTIVE DEMONSTRATION:
 * 1. Set maximum enumeration value (default: 100)
 * 2. Click "Start" to begin processing
 * 3. Watch live discovery of m_r classes
 * 4. Observe completion at specific threshold
 * 5. Verify that same 42 classes appear regardless of range
 * 
 * PERFORMANCE NOTES:
 * - Optimized for ranges up to 2^20 (~1 million)
 * - Batch processing (BATCH_SIZE=100) prevents UI blocking
 * - Progress updates after every batch
 * - Results stored incrementally
 * 
 * THEORETICAL SIGNIFICANCE:
 * This tool provides computational evidence for Theorem 9.5: the convergence 
 * proof is independent of |M_rep| finiteness. Even if new m_r values existed 
 * beyond 2^40, each would form another class whose wormhole W(m_r) terminates 
 * at m = 0, preserving universal convergence.
 * 
 * AUTHOR: Javier Hernandez
 * EMAIL: 271314@pm.me
 * LICENSE: https://github.com/hhvvjj/a-new-algebraic-framework-for-the-collatz-conjecture/blob/main/LICENSE
 * REPOSITORY: https://github.com/hhvvjj/a-new-algebraic-framework-for-the-collatz-conjecture/tree/main/step03-mr-classes-enumeration
 * 
 * ============================================================================
 */
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mr Classes Enumeration</title>
    
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            background: #2a2a2a;
            min-height: 100vh;
            padding: 0;
            color: #e0e0e0;
            overflow-x: hidden;
            overflow-y: hidden;
        }

        .header {
            background: #000000;
            box-shadow: 0 4px 20px rgba(0,0,0,0.4);
            padding: 20px 40px;
            border-radius: 12px;
            position: fixed;
            top: 20px;
            left: 20px;
            right: 20px;
            z-index: 1000;
            backdrop-filter: blur(15px);
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 20px;
        }

        h1 {
            text-align: left;
            color: #ffffff;
            margin: 0;
            font-size: 28px;
            font-weight: 700;
            text-shadow: 0 2px 15px rgba(102, 126, 234, 0.4);
        }

        .input-section {
            display: flex;
            gap: 10px;
            align-items: center;
            flex-wrap: wrap;
        }

        input[type="number"] {
            padding: 12px 20px;
            font-size: 16px;
            border: 2px solid #667eea;
            border-radius: 8px;
            width: 200px;
            background: rgba(255, 255, 255, 0.05);
            color: #e0e0e0;
            transition: all 0.3s;
        }

        input[type="number"]:focus {
            outline: none;
            border-color: #7c8ef5;
            background: rgba(255, 255, 255, 0.08);
            box-shadow: 0 0 15px rgba(102, 126, 234, 0.3);
        }

        button {
            padding: 12px 30px;
            font-size: 16px;
            background: #4caf50;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 600;
            transition: background-color 0.3s;
            min-width: 120px;
        }

        button:hover {
            background: #45a049;
        }

        button:disabled {
            background: #4a4a4a;
            cursor: not-allowed;
            opacity: 0.5;
        }

        .content {
            margin-top: 90px;
            margin-bottom: 10px;
            padding: 40px;
            display: none;
            flex-direction: column;
            gap: 30px;
        }

        .current-section {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 10px;
            padding: 25px;
            backdrop-filter: blur(10px);
        }

        .section-title {
            font-size: 1.3em;
            color: #ffffff;
            margin-bottom: 15px;
            font-weight: bold;
        }

        .progress {
            background: rgba(0, 0, 0, 0.3);
            border-radius: 8px;
            padding: 15px;
            margin-top: 15px;
        }

        .progress-bar {
            width: 100%;
            height: 30px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 5px;
            overflow: hidden;
            margin-top: 10px;
        }

        .progress-fill {
            height: 100%;
            background: #667eea;
            transition: width 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
        }

        .mr-list-section {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 10px;
            padding: 25px;
            backdrop-filter: blur(10px);
        }

        .mr-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 15px;
            margin-top: 15px;
        }

        .mr-card {
            background: rgba(102, 126, 234, 0.2);
            border: 2px solid #667eea;
            border-radius: 8px;
            padding: 5px 0px;
            text-align: center;
            transition: all 0.3s;
        }

        .mr-card.new {
            animation: highlight 0.6s ease-in-out;
        }

        @keyframes highlight {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); background: rgba(76, 175, 80, 0.4); }
        }

        .mr-value {
            font-size: 1.5em;
            font-weight: bold;
            color: #ffffff;
            margin: 0;
        }

        .stats {
            display: flex;
            gap: 20px;
            margin-top: 15px;
            flex-wrap: wrap;
        }

        .stat-box {
            flex: 1;
            min-width: 150px;
            background: rgba(0, 0, 0, 0.3);
            padding: 10px;
            border-radius: 8px;
            text-align: center;
        }

        .stat-value {
            font-size: 2em;
            color: #4caf50;
            font-weight: bold;
        }

        .stat-label {
            font-size: 0.9em;
            color: #d0d0d0;
            margin-top: 5px;
        }

        #error {
            margin-top: 120px;
            padding: 0 40px;
        }

        .error-message {
            background: #7f1d1d;
            color: #fee;
            border: 1px solid #fcc;
            padding: 15px;
            border-radius: 8px;
            margin: 20px 0;
            text-align: center;
        }

        .author-info {
            position: fixed;
            bottom: 20px;
            left: 20px;
            right: 20px;
            text-align: center;
            padding: 20px;
            background: rgba(0, 0, 0, 0.6);
            font-size: 0.9em;
            color: #999;
            border-radius: 12px;
            backdrop-filter: blur(10px);
            z-index: 1000;
        }

        .author-info a {
            color: #667eea;
            text-decoration: none;
        }

        .author-info a:hover {
            text-decoration: underline;
            color: #7c8ef5;
        }
    </style>
</head>

<body>
    <div class="header">
        <div>
            <h1>m<sub>r</sub> Classes Enumeration</h1>
        </div>
        
        <div class="input-section">
            <input type="number" id="maxN" min="1" placeholder="Max n value" value="100">
            <button onclick="startDiscovery()" id="startBtn">Start</button>
            <button onclick="stopDiscovery()" id="stopBtn" disabled>Stop</button>
        </div>
    </div>

    <div id="error" style="display: none;"></div>

    <div class="content" id="content">
        <div class="current-section">
            <div class="section-title">Discovery Status</div>
            
            <div class="progress">
                <div>Progress: <span id="progressText">0 / 0</span></div>
                <div class="progress-bar">
                    <div class="progress-fill" id="progressFill" style="width: 0%">0%</div>
                </div>
            </div>

            <div class="stats">
                <div class="stat-box">
                    <div class="stat-value" id="currentN">-</div>
                    <div class="stat-label">Current n value</div>
                </div>
                <div class="stat-box">
                    <div class="stat-value" id="currentMR">?</div>
                    <div class="stat-label">Current m<sub>r</sub> value</div>
                </div>
                <div class="stat-box">
                    <div class="stat-value" id="uniqueCount">0</div>
                    <div class="stat-label">Unique m<sub>r</sub> values</div>
                </div>
            </div>
        </div>

        <div class="mr-list-section">
            <div class="section-title">Discovered m<sub>r</sub> Classes</div>
            <div class="mr-grid" id="mrGrid">
                <div style="grid-column: 1 / -1; text-align: center; color: #999; padding: 40px;">
                    No m<sub>r</sub> values discovered yet. Click "Start" to begin discovery.
                </div>
            </div>
        </div>
    </div>

    <div class="author-info">
        <p><strong>Author:</strong> Javier Hernandez | <strong>Email:</strong> 271314@pm.me</p>
        <a href="https://github.com/hhvvjj/a-new-algebraic-framework-for-the-collatz-conjecture/tree/main/step03-mr-classes-enumeration" target="_blank">Go To GitHub Repository</a> |
        <a href="https://github.com/hhvvjj/a-new-algebraic-framework-for-the-collatz-conjecture/blob/main/LICENSE" target="_blank">License</a> | 
        <a href="https://doi.org/10.5281/zenodo.15546925" target="_blank">Research Reference</a>
    </div>

    <script>

        /**
         * Application configuration constants.
         * @namespace CONFIG
         */
        const CONFIG = {
            /** @type {number} Maximum allowed n value to prevent excessively long runs */
            MAX_N: 1000000,
            /** @type {number} Maximum Collatz iterations before error (prevents infinite loops) */
            MAX_STEPS: 10000,
            /** @type {number} Number of n values processed per batch before yielding to the UI */
            BATCH_SIZE: 100,
            /** @type {number} Milliseconds between batches to allow UI updates */
            UI_DELAY: 10
        };

        /**
         * Application initial values.
         */

        /** @type {boolean} Discovery loop active flag */
        let isRunning = false;

        /** @type {number} Current n value being processed */
        let currentN = 1;

        /** @type {number} Maximum n value to process */
        let maxN = 100;

        /** @type {Set<number>} Unique m_r values discovered (O(1) lookup) */
        let mrSet = new Set();

        /** @type {Array<number>} Ordered list of discovered m_r values */
        let mrList = [];

        /** @type {Map<number, number>} Map of m_r → first n where discovered */
        let mrFirstN = new Map();

        /**
         * Applies the Collatz function to a positive integer.
         * 
         * The Collatz function is defined as:
         * - f(n) = n/2     if n is even
         * - f(n) = 3n+1    if n is odd
         * 
         * @param {number} n - A positive integer
         * @returns {number} The result of applying the Collatz function
         * 
         * @example
         * collatzFunction(6);  // returns 3
         * collatzFunction(5);  // returns 16
         */        
        function collatzFunction(n) {
            return n % 2 === 0 ? n / 2 : 3 * n + 1;
        }

        /**
         * Generates the complete Collatz sequence starting from n until reaching 1,
         * then appends exactly 3 more steps to enable m=0 repetition detection.
         * 
         * @param {number} n - The starting positive integer (n > 0)
         * @returns {Array<number>} Collatz sequence ending with …2, 1, 4, 2 (3 steps past 1)
         * 
         * @throws {Error} If sequence exceeds CONFIG.MAX_STEPS iterations
         * 
         * @description
         * Appending 3 steps after the first arrival at 1 guarantees that the
         * m-sequence contains m=0 at least twice, allowing {@link findFirstMR}
         * to detect m_r = 0 for sequences that reach 1 without any earlier pair
         * closing (e.g. n=2, n=5, powers of 2).
         * 
         * For most sequences the tail ends …2, 1, so m(2)=0 and m(1)=0 already
         * appear consecutively; the 3 extra steps reinforce this. For n=1, which
         * starts at the trivial cycle, the suffix alone provides the repetition.
         * 
         * Without these extra steps those sequences would return null from
         * {@link findFirstMR}, violating the exhaustive partition of Lemma 6.5.
         * 
         * Safety limit: Maximum {@link CONFIG.MAX_STEPS} iterations to prevent infinite loops
         * 
         * @example
         * generateCollatzSequence(5);
         * // Returns: [5, 16, 8, 4, 2, 1, 4, 2]
         * 
         * @example
         * generateCollatzSequence(2);
         * // Returns: [2, 1, 4, 2]
         */
        function generateCollatzSequence(n) {
            const sequence = [n];
            let current = n;
            let steps = 0;
            let stepsAfterOne = -1;
            
            while (steps < CONFIG.MAX_STEPS) {
                current = collatzFunction(current);
                sequence.push(current);
                steps++;
                
                // On first arrival at 1, start counting extra steps.
                // 3 extra steps append {1, 4, 2} to the sequence. Together
                // with the …2, 1 tail already present (or in n=1's case the
                // cycle itself), the m-sequence contains m=0 at least twice,
                // allowing findFirstMR to detect m_r = 0 for sequences that
                // reach 1 without any earlier pair closing.
                if (current === 1 && stepsAfterOne === -1) {
                    stepsAfterOne = 0;
                }
                if (stepsAfterOne >= 0) {
                    stepsAfterOne++;
                    if (stepsAfterOne >= 3) {
                        break;
                    }
                }
            }
            
            if (steps >= CONFIG.MAX_STEPS) {
                throw new Error(`Sequence exceeded maximum steps for n=${n}`);
            }
            
            return sequence;
        }

        /**
         * Computes the m-sequence from a Collatz sequence using algebraic decomposition.
         * 
         * @param {Array<number>} collatzSeq - The complete Collatz sequence
         * @returns {Array<number>} The m-sequence (length = collatzSeq.length - 1)
         * 
         * @description
         * Extracts m values from the algebraic decomposition: c_i = 2m + p
         * 
         * For each consecutive pair (c_i, c_{i+1}):
         * - Determines p based on parity: p = 2 if c_i is even, p = 1 if c_i is odd
         * - Calculates m = (c_i - p) / 2
         * 
         * Note: The resulting m-sequence has one fewer element than the input sequence
         * 
         * @example
         * const collatzSeq = [5, 16, 8, 4, 2, 1];
         * computeMSequence(collatzSeq);
         * // Returns: [2, 7, 3, 1, 0]
         * // Because: m=(5-1)/2=2, m=(16-2)/2=7, m=(8-2)/2=3, m=(4-2)/2=1, m=(2-2)/2=0
         */
        function computeMSequence(collatzSeq) {
            const mSeq = [];
            
            for (let i = 0; i < collatzSeq.length - 1; i++) {
                const ci = collatzSeq[i];
                const p = ci % 2 === 0 ? 2 : 1;
                const m = (ci - p) / 2;
                mSeq.push(m);
            }
            
            return mSeq;
        }

        /**
         * Finds the first repeated value in the m-sequence (m_r) per Definition 6.1.
         * 
         * @param {Array<number>} mSeq - The m-sequence to analyze
         * @returns {number|null} The m_r value for this sequence, or null if none found
         * 
         * @description
         * Per Definition 6.1, m_r is the value whose **second occurrence appears
         * earliest** in the sequence — not necessarily the value that appears first
         * chronologically. For example, in n=27 the value m=30 appears before m=60,
         * but m=60 closes its pair first, so m_r = 60.
         * 
         * Scanning left-to-right and returning the first value already seen is
         * equivalent to this definition: the moment a value is seen for the second
         * time, its pair is closed, and no earlier-closing pair can exist.
         * 
         * **Special case:** m_r = 0 occurs when no other value closes its pair before
         * reaching the trivial cycle (1 → 4 → 2 → 1), where m = 0 repeats.
         * 
         * @returns {null} Only if the sequence is invalid or incomplete (should not
         *                 happen for properly generated Collatz sequences)
         * 
         * @example
         * findFirstMR([2, 7, 3, 1, 0, 0, 1]);
         * // Returns: 0  (m=0 closes its pair first; no other value repeats before it)
         * 
         * @example
         * // n=27: m=30 appears at positions 5 and 93, m=60 at positions 17 and 92.
         * // m=60 closes its pair first (position 92 < 93), so m_r = 60.
         * findFirstMR(computeMSequence(generateCollatzSequence(27)));
         * // Returns: 60
         */
        function findFirstMR(mSeq) {
            const seen = new Set();
            
            for (const m of mSeq) {
                if (seen.has(m)) {
                    return m;
                }
                seen.add(m);
            }
            
            return null;
        }

        /**
         * Processes a single positive integer through the complete m_r discovery pipeline.
         * 
         * @param {number} n - The positive integer to analyze (n > 0)
         * @returns {number|null} The m_r value for this n, or null on error
         * 
         * @description
         * Orchestrates the complete pipeline:
         * 1. {@link generateCollatzSequence} - Generate complete Collatz sequence with cycle
         * 2. {@link computeMSequence} - Extract m-sequence from algebraic decomposition
         * 3. {@link findFirstMR} - Identify m_r (parameter whose second occurrence appears earliest)
         * 
         * Errors are caught internally and logged to console, returning null to allow
         * enumeration to continue.
         * 
         * @example
         * processSingleN(27);
         * // Returns: 60 (m=60 closes its pair first, per Definition 6.1)
         * 
         * @example
         * processSingleN(5);
         * // Returns: 0 (no pair closes before m=0 repeats)
         */
        function processSingleN(n) {
            try {
                const collatzSeq = generateCollatzSequence(n);
                const mSeq = computeMSequence(collatzSeq);
                const mr = findFirstMR(mSeq);
                
                return mr;
            } catch (error) {
                console.error(`Error processing n=${n}:`, error);
                return null;
            }
        }

        /**
         * Updates the user interface with the current discovery progress.
         * 
         * @param {number} n - The current value being processed
         * @param {number|null} mr - The m_r value discovered for n (null if not found)
         * 
         * @description
         * Updates the following UI elements:
         * - Current n value being analyzed
         * - Current m_r value discovered (shows '?' if null)
         * - Progress bar width and percentage
         * - Progress text showing "current / maximum"
         * 
         * @example
         * updateUI(50, 0);
         * // Updates UI to show: n=50, m_r=0, progress=50% (if maxN=100)
         * 
         * updateUI(75, null);
         * // Updates UI to show: n=75, m_r=?, progress=75%
         * 
         * @requires DOM elements with IDs: 'currentN', 'currentMR', 'progressFill', 'progressText'
         * @requires Global variable: {@link maxN}
         */
        function updateUI(n, mr) {
            document.getElementById('currentN').textContent = n;
            document.getElementById('currentMR').textContent = mr !== null ? mr : '?';
            
            const progress = (n / maxN) * 100;
            document.getElementById('progressFill').style.width = progress.toFixed(1) + '%';
            document.getElementById('progressFill').textContent = progress.toFixed(1) + '%';
            document.getElementById('progressText').textContent = `${n} / ${maxN}`;
        }

        /**
         * Adds a newly discovered m_r value to the visual grid display.
         * 
         * @param {number} mr - The m_r value to add to the grid
         * 
         * @description
         * Creates and displays a visual card for the discovered m_r value:
         * - Clears placeholder text on first discovery
         * - Creates a card element with the m_r value
         * - Shows tooltip with the first n value where this m_r was discovered
         * - Applies highlight animation for 600ms
         * 
         * @example
         * addMRToGrid(60);
         * // Creates a card showing "60" with animation
         * // Tooltip shows: "First time discovered when n = 27"
         * 
         * @requires DOM element with ID: 'mrGrid'
         * @requires Global variables: {@link mrList}, {@link mrFirstN}
         */
        function addMRToGrid(mr) {
            const grid = document.getElementById('mrGrid');
            
            // Clear placeholder
            if (mrList.length === 0) {
                grid.innerHTML = '';
            }
            
            const firstN = mrFirstN.get(mr);
            const card = document.createElement('div');

            card.className = 'mr-card new';
            card.title = `First time discovered when n = ${firstN}`;
            card.innerHTML = `
                <div class="mr-value">${mr}</div>
            `;
            
            grid.appendChild(card);
            
            // Remove animation class after animation completes
            setTimeout(() => {
                card.classList.remove('new');
            }, 600);
        }

        /**
         * Main asynchronous discovery loop for enumerating m_r equivalence classes.
         * 
         * @async
         * @returns {Promise<void>} Resolves when all n values are processed or stopped
         * 
         * @description
         * Systematically processes integers from {@link currentN} to {@link maxN}
         * in batches of {@link CONFIG.BATCH_SIZE} for efficiency:
         * 
         * **For each batch:**
         * 1. Process {@link CONFIG.BATCH_SIZE} consecutive n values
         * 2. For each n, compute m_r using {@link processSingleN}
         * 3. If m_r is new (not in {@link mrSet}), record it as a discovered class
         * 4. Update {@link mrSet}, {@link mrList}, {@link mrFirstN}
         * 5. Update UI with {@link updateUI} and {@link addMRToGrid}
         * 6. Wait {@link CONFIG.UI_DELAY}ms between batches to allow UI updates
         * 
         * **Stopping conditions:**
         * - User calls {@link stopDiscovery} (sets {@link isRunning} = false)
         * - Reaches maxN
         * 
         * @example
         * // Start discovery for n = 1 to 100
         * currentN = 1;
         * maxN = 100;
         * isRunning = true;
         * await discoveryLoop();
         * // Discovers all unique m_r values in range [1, 100]
         * 
         * @see Remark 6.17 — all 42 known m_r values are discovered before n = 7287
         */
        async function discoveryLoop() {
            while (isRunning && currentN <= maxN) {
                const batchEnd = Math.min(currentN + CONFIG.BATCH_SIZE - 1, maxN);
                let lastMR = null;

                for (let n = currentN; n <= batchEnd; n++) {
                    const mr = processSingleN(n);
                    lastMR = mr;

                    if (mr !== null && !mrSet.has(mr)) {
                        mrSet.add(mr);
                        mrList.push(mr);
                        mrFirstN.set(mr, n);
                        addMRToGrid(mr);
                        document.getElementById('uniqueCount').textContent = mrList.length;
                    }
                }

                currentN = batchEnd + 1;
                updateUI(currentN - 1, lastMR);

                await new Promise(resolve => setTimeout(resolve, CONFIG.UI_DELAY));
            }

            if (!isRunning || currentN > maxN) {
                stopDiscovery();
            }
        }

        /**
         * Initializes and starts the m_r class discovery process.
         * 
         * @returns {void}
         * 
         * @description
         * **Validation:**
         * - Checks that maxN is a valid positive integer
         * - Shows error message if validation fails
         * 
         * **Initialization:**
         * 1. Clears previous discovery state:
         *    - {@link mrSet} - Set for O(1) uniqueness lookup
         *    - {@link mrList} - Ordered array preserving discovery order
         *    - {@link mrFirstN} - Map storing first n for each m_r
         * 2. Resets UI components (grid, unique count)
         * 3. Sets {@link currentN} = 1
         * 4. Disables "Start" button, enables "Stop" button
         * 5. Launches {@link discoveryLoop}
         * 
         * @example
         * // User enters maxN = 1000, clicks "Start"
         * startDiscovery();
         * // Validates input, resets state, begins discovery loop
         * 
         * @requires DOM elements: 'maxN', 'error', 'content', 'mrGrid', 'uniqueCount'
         * @requires Buttons: 'startBtn', 'stopBtn'
         */
        function startDiscovery() {
            const errorDiv = document.getElementById('error');
            const contentDiv = document.getElementById('content');
            const input = document.getElementById('maxN').value;

            maxN = parseInt(input);
            
            if (!maxN || maxN < 1) {
                errorDiv.innerHTML = '<div class="error-message">Please enter a valid positive integer for max n</div>';
                errorDiv.style.display = 'block';
                return;
            }
            
            if (maxN > CONFIG.MAX_N) {
                errorDiv.innerHTML = `<div class="error-message">Max n cannot exceed ${CONFIG.MAX_N.toLocaleString()}</div>`;
                errorDiv.style.display = 'block';
                return;
            }

            // Clear error and show content if valid
            errorDiv.style.display = 'none';
            contentDiv.style.display = 'flex';
            
            currentN = 1;
            mrSet.clear();
            mrList = [];
            mrFirstN.clear();
            document.getElementById('mrGrid').innerHTML = '';
            document.getElementById('uniqueCount').textContent = '0';
            
            isRunning = true;
            document.getElementById('startBtn').disabled = true;
            document.getElementById('stopBtn').disabled = false;
            document.getElementById('maxN').disabled = true;
            
            discoveryLoop();
        }

        /**
         * Stops the ongoing m_r class discovery process and resets UI controls.
         * 
         * @returns {void}
         * 
         * @description
         * Halts the discovery loop and restores the UI to its initial state:
         * 1. Sets {@link isRunning} = false (stops {@link discoveryLoop})
         * 2. Re-enables "Start" button
         * 3. Disables "Stop" button
         * 4. Re-enables maxN input field
         * 
         * @example
         * // User clicks "Stop" during discovery
         * stopDiscovery();
         * // Discovery loop will exit at next batch boundary
         * 
         * @requires DOM elements: 'startBtn', 'stopBtn', 'maxN'
         * @requires Global variable: {@link isRunning}
         */
        function stopDiscovery() {
            isRunning = false;
            document.getElementById('startBtn').disabled = false;
            document.getElementById('stopBtn').disabled = true;
            document.getElementById('maxN').disabled = false;
        }

        /**
         * Initializes the application when the DOM is fully loaded.
         * 
         * @listens DOMContentLoaded
         * 
         * @description
         * Performs initial setup and attaches event listeners:
         * 
         * 1. **Clears the maxN input field** to ensure clean state on page load
         * 2. **Attaches Enter key listener** to maxN input for quick start
         * 
         * @example
         * // On page load:
         * // - maxN input is cleared
         * // - User can type "1000" and press Enter to start discovery
         * 
         * @requires DOM element: 'maxN' (input field)
         * @requires Function: {@link startDiscovery}
         */
        document.addEventListener('DOMContentLoaded', function() {

            /**
             * Clears the maxN input field on page load.
             * Ensures the user starts with an empty field.
             */
            document.getElementById('maxN').value = '';

            /**
             * Enables starting discovery by pressing Enter in the maxN input field.
             * 
             * @param {KeyboardEvent} e - The keyboard event
             */
            document.getElementById('maxN').addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    startDiscovery();
                }
            });
        });
    </script>
</body>
</html>