{# Wavelength Slider Component #}
<div class="section" id="wavelength-section">
    <div
        class="section-title"
        style="
            display: flex;
            justify-content: space-between;
            align-items: center;
        "
    >
        <div style="display: flex; align-items: center; gap: 8px">
            <i class="fas fa-ruler-horizontal"></i>
            <span id="range-title">Wavelength Range</span>
        </div>
        <div style="display: flex; gap: 8px; align-items: center">
            <span style="font-size: 12px; color: var(--text-secondary)">λ</span>
            <div class="toggle-switch" id="wavelength-frequency-toggle"></div>
            <span style="font-size: 12px; color: var(--text-secondary)">f</span>
        </div>
    </div>
    <div style="display: flex; gap: 20px; align-items: center">
        <div id="wavelength-container" style="flex: 1">
            {# Slider will be rendered here #}
        </div>
        <div class="input-group" style="margin-top: -15px">
            <label for="wavelength-points">Points:</label>
            <input
                type="number"
                id="wavelength-points"
                value="1000"
                min="10"
                max="10000"
                style="width: 80px"
            />
        </div>
    </div>
</div>

<style>
    /* Toggle switch styles */
    .toggle-switch {
        position: relative;
        width: 50px;
        height: 24px;
        background-color: var(--bg-input);
        border: 1px solid var(--border);
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .toggle-switch.active {
        background-color: var(--accent);
        border-color: var(--accent);
    }

    .toggle-switch::before {
        content: "";
        position: absolute;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background-color: var(--text-secondary);
        top: 2px;
        left: 2px;
        transition: all 0.2s ease;
    }

    .toggle-switch.active::before {
        left: 28px;
        background-color: #000;
    }

    /* Range slider styles */
    .range-slider-container {
        position: relative;
        width: 100%;
        height: 40px;
        margin: 8px 0;
    }

    .range-slider {
        position: absolute;
        width: 100%;
        height: 6px;
        background-color: var(--bg-input);
        border: 1px solid var(--border);
        border-radius: 3px;
        top: 17px;
    }

    .range-track {
        position: absolute;
        height: 4px;
        background-color: var(--accent);
        border-radius: 2px;
        top: 18px;
    }

    .range-handle {
        position: absolute;
        width: 16px;
        height: 16px;
        background-color: var(--accent);
        border: 2px solid var(--text-primary);
        border-radius: 50%;
        cursor: pointer;
        top: 12px;
        transform: translateX(-50%);
    }

    .range-handle:hover {
        background-color: var(--accent-hover);
    }

    .range-label {
        position: absolute;
        font-size: 10px;
        color: var(--text-secondary);
        top: 0px;
        transform: translateX(-50%);
        white-space: nowrap;
    }
</style>

<script>
    // Wavelength Slider Component
    const WavelengthSlider = (function () {
        const SPEED_OF_LIGHT = 299.792458; // μm·THz

        let isFrequencyMode = false;
        let minWl = 1.5;
        let maxWl = 1.6;
        let sliderMinWl = 1.4;
        let sliderMaxWl = 1.7;
        let modeChangeCallbacks = [];
        let changeCallbacks = [];

        function wavelengthToFrequency(wl) {
            return SPEED_OF_LIGHT / wl;
        }

        function frequencyToWavelength(f) {
            return SPEED_OF_LIGHT / f;
        }

        function formatValue(value, isFreq) {
            if (isFreq) {
                if (value < 1) {
                    // Sub-THz: show in GHz
                    const ghz = value * 1000;
                    const precision = ghz >= 100 ? 1 : ghz >= 10 ? 2 : 3;
                    return ghz.toFixed(precision) + " GHz";
                }
                const precision = value >= 100 ? 1 : value >= 10 ? 2 : 3;
                return value.toFixed(precision) + " THz";
            } else {
                const precision = value >= 10 ? 2 : 3;
                return value.toFixed(precision) + " μm";
            }
        }

        function createSlider(container, wlMin, wlMax) {
            minWl = wlMin;
            maxWl = wlMax;

            if (isFrequencyMode) {
                // Calculate padding in frequency space to avoid distortion
                // from the nonlinear f = c/λ relationship.
                const fMin = wavelengthToFrequency(maxWl);
                const fMax = wavelengthToFrequency(minWl);
                const fWidth = fMax - fMin;
                const sliderFMin = Math.max(fMin / 2, fMin - 0.2 * fWidth);
                const sliderFMax = fMax + 0.2 * fWidth;
                // Convert back (swap: min freq → max wavelength)
                sliderMinWl = frequencyToWavelength(sliderFMax);
                sliderMaxWl = frequencyToWavelength(sliderFMin);
            } else {
                // Calculate slider limits in wavelength space (20% padding)
                const wlWidth = maxWl - minWl;
                sliderMinWl = Math.max(0.1, minWl - 0.2 * wlWidth);
                sliderMaxWl = maxWl + 0.2 * wlWidth;
            }

            container.innerHTML = "";

            const sliderContainer = document.createElement("div");
            sliderContainer.className = "range-slider-container";

            const slider = document.createElement("div");
            slider.className = "range-slider";

            const track = document.createElement("div");
            track.className = "range-track";

            const minHandle = document.createElement("div");
            minHandle.className = "range-handle";
            minHandle.dataset.type = "min";

            const maxHandle = document.createElement("div");
            maxHandle.className = "range-handle";
            maxHandle.dataset.type = "max";

            const minLabel = document.createElement("div");
            minLabel.className = "range-label";
            minLabel.id = "wl-min-label";

            const maxLabel = document.createElement("div");
            maxLabel.className = "range-label";
            maxLabel.id = "wl-max-label";

            sliderContainer.appendChild(slider);
            sliderContainer.appendChild(track);
            sliderContainer.appendChild(minHandle);
            sliderContainer.appendChild(maxHandle);
            sliderContainer.appendChild(minLabel);
            sliderContainer.appendChild(maxLabel);
            container.appendChild(sliderContainer);

            function updateDisplay() {
                let minVal, maxVal, sliderMin, sliderMax;

                if (isFrequencyMode) {
                    minVal = wavelengthToFrequency(maxWl);
                    maxVal = wavelengthToFrequency(minWl);
                    sliderMin = wavelengthToFrequency(sliderMaxWl);
                    sliderMax = wavelengthToFrequency(sliderMinWl);
                } else {
                    minVal = minWl;
                    maxVal = maxWl;
                    sliderMin = sliderMinWl;
                    sliderMax = sliderMaxWl;
                }

                const minPercent =
                    ((minVal - sliderMin) / (sliderMax - sliderMin)) * 100;
                const maxPercent =
                    ((maxVal - sliderMin) / (sliderMax - sliderMin)) * 100;

                track.style.left = minPercent + "%";
                track.style.width = maxPercent - minPercent + "%";

                minHandle.style.left = minPercent + "%";
                maxHandle.style.left = maxPercent + "%";

                minLabel.style.left = minPercent + "%";
                maxLabel.style.left = maxPercent + "%";

                // Store wavelengths in data attributes
                minLabel.dataset.wavelength = minWl.toString();
                maxLabel.dataset.wavelength = maxWl.toString();

                minLabel.textContent = formatValue(minVal, isFrequencyMode);
                maxLabel.textContent = formatValue(maxVal, isFrequencyMode);
            }

            // Drag handling
            let isDragging = false;
            let dragTarget = null;

            function handleMouseDown(e, handle) {
                isDragging = true;
                dragTarget = handle;
                e.preventDefault();
            }

            function handleMouseMove(e) {
                if (!isDragging || !dragTarget) return;

                const rect = slider.getBoundingClientRect();
                const percent = Math.max(
                    0,
                    Math.min(100, ((e.clientX - rect.left) / rect.width) * 100),
                );

                let sliderMin, sliderMax;
                if (isFrequencyMode) {
                    sliderMin = wavelengthToFrequency(sliderMaxWl);
                    sliderMax = wavelengthToFrequency(sliderMinWl);
                } else {
                    sliderMin = sliderMinWl;
                    sliderMax = sliderMaxWl;
                }

                const newValue =
                    sliderMin + (percent / 100) * (sliderMax - sliderMin);

                let newWl;
                if (isFrequencyMode) {
                    newWl = frequencyToWavelength(newValue);
                } else {
                    newWl = newValue;
                }

                if (dragTarget.dataset.type === "min") {
                    if (isFrequencyMode) {
                        maxWl = Math.max(newWl, minWl + 0.001);
                    } else {
                        minWl = Math.min(newWl, maxWl - 0.001);
                    }
                } else {
                    if (isFrequencyMode) {
                        minWl = Math.min(newWl, maxWl - 0.001);
                    } else {
                        maxWl = Math.max(newWl, minWl + 0.001);
                    }
                }

                updateDisplay();
            }

            function handleMouseUp() {
                if (isDragging) {
                    // Trigger change callbacks when drag ends
                    changeCallbacks.forEach((cb) => cb());
                }
                isDragging = false;
                dragTarget = null;
            }

            minHandle.addEventListener("mousedown", (e) =>
                handleMouseDown(e, minHandle),
            );
            maxHandle.addEventListener("mousedown", (e) =>
                handleMouseDown(e, maxHandle),
            );
            document.addEventListener("mousemove", handleMouseMove);
            document.addEventListener("mouseup", handleMouseUp);

            updateDisplay();

            return { updateDisplay };
        }

        function init(wlMin = 1.5, wlMax = 1.6, num = 1000, isFreq = false) {
            const container = document.getElementById("wavelength-container");
            const toggle = document.getElementById(
                "wavelength-frequency-toggle",
            );
            const rangeTitle = document.getElementById("range-title");
            const pointsInput = document.getElementById("wavelength-points");

            // Set initial values
            if (num) pointsInput.value = num;

            // Set initial frequency mode
            if (isFreq) {
                isFrequencyMode = true;
                toggle.classList.add("active");
                rangeTitle.textContent = "Frequency Range";
            }

            const sliderInstance = createSlider(container, wlMin, wlMax);

            toggle.addEventListener("click", () => {
                isFrequencyMode = !isFrequencyMode;
                toggle.classList.toggle("active");
                rangeTitle.textContent = isFrequencyMode
                    ? "Frequency Range"
                    : "Wavelength Range";
                sliderInstance.updateDisplay();

                // Notify listeners
                modeChangeCallbacks.forEach((cb) => cb(isFrequencyMode));
            });

            // Listen for points changes
            pointsInput.addEventListener("change", () => {
                changeCallbacks.forEach((cb) => cb());
            });

            return sliderInstance;
        }

        function getWavelengths() {
            const minLabel = document.getElementById("wl-min-label");
            const maxLabel = document.getElementById("wl-max-label");
            const pointsInput = document.getElementById("wavelength-points");

            return {
                min: parseFloat(minLabel?.dataset.wavelength || "1.5"),
                max: parseFloat(maxLabel?.dataset.wavelength || "1.6"),
                num: parseInt(pointsInput?.value || "1000"),
            };
        }

        function isFrequency() {
            return isFrequencyMode;
        }

        function onModeChange(callback) {
            modeChangeCallbacks.push(callback);
        }

        function onChange(callback) {
            changeCallbacks.push(callback);
        }

        return {
            init,
            getWavelengths,
            isFrequency,
            onModeChange,
            onChange,
        };
    })();
</script>