// Filename: frontend/js/pages/chat/chatSettings.js

export class ChatSettings {
    constructor(elements) {
        // [MODIFIED] Store the root elements passed from ChatPage
        this.elements = {};
        this.elements.root = elements; // Keep a reference to all elements

        // [MODIFIED] Query for specific elements this class controls, relative to their panels
        this._initScopedDOMElements();
        
        // Initialize panel states to ensure they are collapsed on load
        this.elements.quickSettingsPanel.style.gridTemplateRows = '0fr';
        this.elements.sessionParamsPanel.style.gridTemplateRows = '0fr';
    }

    // [NEW] A dedicated method to find elements within their specific panels
    _initScopedDOMElements() {
        this.elements.quickSettingsPanel = this.elements.root.quickSettingsPanel;
        this.elements.sessionParamsPanel = this.elements.root.sessionParamsPanel;
        this.elements.toggleQuickSettingsBtn = this.elements.root.toggleQuickSettingsBtn;
        this.elements.toggleSessionParamsBtn = this.elements.root.toggleSessionParamsBtn;

        // Query elements within the quick settings panel
        this.elements.btnGroups = this.elements.quickSettingsPanel.querySelectorAll('.btn-group');
        this.elements.directRoutingOptions = this.elements.quickSettingsPanel.querySelector('#direct-routing-options');
        
        // Query elements within the session params panel
        this.elements.temperatureSlider = this.elements.sessionParamsPanel.querySelector('#temperature-slider');
        this.elements.temperatureValue = this.elements.sessionParamsPanel.querySelector('#temperature-value');
        this.elements.contextSlider = this.elements.sessionParamsPanel.querySelector('#context-slider');
        this.elements.contextValue = this.elements.sessionParamsPanel.querySelector('#context-value');
    }

    init() {
        if (!this.elements.toggleQuickSettingsBtn) {
            console.warn("ChatSettings: Aborting initialization, required elements not found.");
            return;
        }
        this._initPanelToggleListeners();
        this._initButtonGroupListeners();
        this._initSliderListeners();
    }

    _initPanelToggleListeners() {
        this.elements.toggleQuickSettingsBtn.addEventListener('click', () => 
            this._togglePanel(this.elements.quickSettingsPanel, this.elements.toggleQuickSettingsBtn)
        );
        this.elements.toggleSessionParamsBtn.addEventListener('click', () => 
            this._togglePanel(this.elements.sessionParamsPanel, this.elements.toggleSessionParamsBtn)
        );
    }

    _initButtonGroupListeners() {
        // [FIXED] This logic is now guaranteed to work with the correctly scoped elements.
        this.elements.btnGroups.forEach(group => {
            group.addEventListener('click', (e) => {
                const button = e.target.closest('.btn-group-item');
                if (!button) return;

                group.querySelectorAll('.btn-group-item').forEach(btn => btn.removeAttribute('data-active'));
                button.setAttribute('data-active', 'true');

                if (button.dataset.group === 'routing-mode') {
                    this._handleRoutingModeChange(button.dataset.value);
                }
            });
        });
    }

    _initSliderListeners() {
        // [FIXED] Add null checks for robustness, now that elements are queried scoped.
        if (this.elements.temperatureSlider) {
            this.elements.temperatureSlider.addEventListener('input', () => {
                this.elements.temperatureValue.textContent = parseFloat(this.elements.temperatureSlider.value).toFixed(1);
            });
        }
        if (this.elements.contextSlider) {
            this.elements.contextSlider.addEventListener('input', () => {
                this.elements.contextValue.textContent = `${this.elements.contextSlider.value}k`;
            });
        }
    }

    _handleRoutingModeChange(selectedValue) {
        // [FIXED] This logic now correctly targets the scoped element.
        if (this.elements.directRoutingOptions) {
            if (selectedValue === 'direct') {
                this.elements.directRoutingOptions.classList.remove('hidden');
            } else {
                this.elements.directRoutingOptions.classList.add('hidden');
            }
        }
    }

    _togglePanel(panel, button) {
        const isExpanded = panel.hasAttribute('data-expanded');

        this.elements.quickSettingsPanel.removeAttribute('data-expanded');
        this.elements.sessionParamsPanel.removeAttribute('data-expanded');
        this.elements.toggleQuickSettingsBtn.removeAttribute('data-active');
        this.elements.toggleSessionParamsBtn.removeAttribute('data-active');
        
        this.elements.quickSettingsPanel.style.gridTemplateRows = '0fr';
        this.elements.sessionParamsPanel.style.gridTemplateRows = '0fr';

        if (!isExpanded) {
            panel.setAttribute('data-expanded', 'true');
            button.setAttribute('data-active', 'true');
            panel.style.gridTemplateRows = '1fr';
        }
    }
}