// sc-settings-location.js
import { LocationTrackingCoordinator } from './loc-tracking-co.js';

let scSettingsLocationInstance = null;

export class ScSettingsLocation {
    constructor(parentElement) {
        this._locTrackingCoordinator = LocationTrackingCoordinator.getInstance();
        this._parentElement = parentElement;

        this._injectHTML();
        this._injectCSS();
        this._cacheElements();

        if (this._locTrackingCoordinator) {
            this._addEventListeners();
            this._locTrackingCoordinator.onTrackingStateChange(isActive => {
                this._updateUIState(isActive);
            });
            this._updateUIState(this._locTrackingCoordinator.isTrackingActive());
        }
    }

    _injectHTML() {
        const htmlContent = `
            <div class="location-settings-row">
                <label for="location-toggle-slider">Standortfreigabe</label>
                <div class="location-control-group">
                    <div id="location-toggle-slider" class="custom-on-off-toggle">
                        <div class="custom-toggle-handle"></div>
                    </div>
                    <span id="location-toggle-value" class="slider-value">Aus</span>
                </div>
            </div>
        `;
        if (this._parentElement) {
            this._parentElement.insertAdjacentHTML('beforeend', htmlContent);
        }
    }

    _injectCSS() {
        const cssContent = `
            .location-settings-row {
                display: flex;
                align-items: center;
                justify-content: space-between;
                width: 100%;
                margin: 0 !important;
                padding: 0 !important;
            }

            .location-control-group {
                display: flex;
                align-items: center;
                gap: 10px;
            }

            .location-settings-row label {
                font-size: 15px;
                color: #333;
                cursor: pointer;
                font-weight: 500;
            }

            .custom-on-off-toggle {
                height: 24px;
                width: 46px;
                border-radius: 12px;
                background: #ccc;
                cursor: pointer;
                position: relative;
                transition: background-color 0.2s ease;
            }

            .custom-on-off-toggle.active {
                background: #4CAF50;
            }

            .custom-toggle-handle {
                width: 20px;
                height: 20px;
                background: #fff;
                border-radius: 50%;
                position: absolute;
                top: 2px;
                left: 2px;
                transition: left 0.2s ease;
                box-shadow: 0 1px 2px rgba(0,0,0,0.2);
            }

            .custom-on-off-toggle.active .custom-toggle-handle {
                left: 24px;
            }

            .slider-value {
                min-width: 30px;
                font-size: 14px;
                color: #8e8e93;
                text-align: right;
            }
        `;

        if (!document.getElementById('sc-location-settings-styles')) {
            const styleElement = document.createElement('style');
            styleElement.id = 'sc-location-settings-styles';
            styleElement.textContent = cssContent;
            document.head.appendChild(styleElement);
        }
    }

    _cacheElements() {
        this._mainSliderElement = this._parentElement.querySelector('#location-toggle-slider');
        this._locationToggleValueDisplayElement = this._parentElement.querySelector('#location-toggle-value');
    }

    _addEventListeners() {
        if (this._mainSliderElement) {
            this._mainSliderElement.onclick = () => this._handleSliderClick();
        }
    }

    _handleSliderClick() {
        if (!this._locTrackingCoordinator) return;

        if (this._locTrackingCoordinator.isTrackingActive()) {
            this._locTrackingCoordinator._stopTracking();
        } else {
            this._locTrackingCoordinator.startTrackingAndHandlePermission();
        }
    }

    _updateUIState(isActive) {
        if (this._mainSliderElement) {
            if (isActive) {
                this._mainSliderElement.classList.add('active');
            } else {
                this._mainSliderElement.classList.remove('active');
            }
        }
        if (this._locationToggleValueDisplayElement) {
            this._locationToggleValueDisplayElement.textContent = isActive ? 'An' : 'Aus';
        }
    }

    setLocationToggle(isEnabled) {
        this._updateUIState(isEnabled);
    }

    getLocationToggleState() {
        return this._locTrackingCoordinator ? this._locTrackingCoordinator.isTrackingActive() : null;
    }
}

export function initializeLocationSettings(parentElement) {
    if (!scSettingsLocationInstance) {
        scSettingsLocationInstance = new ScSettingsLocation(parentElement);
    }
    return scSettingsLocationInstance;
}

export function getLocationToggleState() {
    if (!scSettingsLocationInstance) return null;
    return scSettingsLocationInstance.getLocationToggleState();
}