/**
 * Advanced Features JavaScript
 * Author: RSK World (https://rskworld.in)
 * Founded by: Molla Samser
 * Designer & Tester: Rima Khatun
 * Contact: info@rskworld.com, +91 93305 39277
 * Year: 2026
 */

class AdvancedFeaturesManager {
    constructor() {
        this.voiceAssistant = null;
        this.arMode = false;
        this.vrMode = false;
        this.currentLanguage = 'en';
        this.initializeFeatures();
    }

    initializeFeatures() {
        this.initializeVoiceAssistant();
        this.initializeARSupport();
        this.initializeVRSupport();
        this.initializeMultiLanguage();
        this.initializeImageEnhancement();
        this.initializeVirtualTours();
    }

    // Voice Assistant Integration
    initializeVoiceAssistant() {
        if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {
            this.setupVoiceRecognition();
        }
    }

    setupVoiceRecognition() {
        const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
        this.recognition = new SpeechRecognition();
        this.recognition.continuous = true;
        this.recognition.interimResults = true;
        this.recognition.lang = 'en-US';

        this.recognition.onresult = (event) => {
            const transcript = event.results[event.results.length - 1][0].transcript;
            this.processVoiceCommand(transcript);
        };

        this.recognition.onerror = (event) => {
            console.error('Voice recognition error:', event.error);
        };
    }

    startVoiceAssistant() {
        if (this.recognition) {
            this.recognition.start();
            this.showVoiceIndicator();
        }
    }

    stopVoiceAssistant() {
        if (this.recognition) {
            this.recognition.stop();
            this.hideVoiceIndicator();
        }
    }

    processVoiceCommand(command) {
        // Send voice command to backend
        fetch('/api/voice/command', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                command: command,
                user_id: this.getUserId()
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                this.speakResponse(data.response);
            }
        })
        .catch(error => {
            console.error('Voice command error:', error);
        });
    }

    speakResponse(text) {
        if ('speechSynthesis' in window) {
            const utterance = new SpeechSynthesisUtterance(text);
            utterance.lang = this.currentLanguage;
            speechSynthesis.speak(utterance);
        }
    }

    showVoiceIndicator() {
        const indicator = document.createElement('div');
        indicator.id = 'voice-indicator';
        indicator.className = 'voice-indicator';
        indicator.innerHTML = `
            <div class="voice-pulse"></div>
            <span>Listening...</span>
        `;
        document.body.appendChild(indicator);
    }

    hideVoiceIndicator() {
        const indicator = document.getElementById('voice-indicator');
        if (indicator) {
            indicator.remove();
        }
    }

    // AR Support
    initializeARSupport() {
        if ('xr' in navigator) {
            navigator.xr.isSessionSupported('immersive-ar').then((supported) => {
                if (supported) {
                    this.enableARFeatures();
                }
            });
        }
    }

    enableARFeatures() {
        // Add AR button to interface
        this.addARButton();
        this.setupARCamera();
    }

    addARButton() {
        const arButton = document.createElement('button');
        arButton.className = 'ar-button';
        arButton.innerHTML = '🥽 AR View';
        arButton.onclick = () => this.startARMode();
        document.querySelector('.chat-input-container').appendChild(arButton);
    }

    async startARMode() {
        try {
            const session = await navigator.xr.requestSession('immersive-ar');
            this.arMode = true;
            this.setupARSession(session);
        } catch (error) {
            console.error('AR session error:', error);
            this.showARFallback();
        }
    }

    setupARSession(session) {
        // Initialize AR session
        session.requestAnimationFrame(this.renderARFrame.bind(this));
    }

    renderARFrame(time, frame) {
        // AR rendering logic
        if (this.arMode) {
            frame.session.requestAnimationFrame(this.renderARFrame.bind(this));
        }
    }

    showARFallback() {
        // Show AR features using device camera
        this.startCameraAR();
    }

    async startCameraAR() {
        try {
            const stream = await navigator.mediaDevices.getUserMedia({ 
                video: { facingMode: 'environment' } 
            });
            this.displayCameraAR(stream);
        } catch (error) {
            console.error('Camera access error:', error);
        }
    }

    displayCameraAR(stream) {
        const videoElement = document.createElement('video');
        videoElement.srcObject = stream;
        videoElement.autoplay = true;
        videoElement.className = 'ar-camera-view';
        
        const arContainer = document.createElement('div');
        arContainer.className = 'ar-container';
        arContainer.appendChild(videoElement);
        
        document.body.appendChild(arContainer);
    }

    // VR Support
    initializeVRSupport() {
        if ('xr' in navigator) {
            navigator.xr.isSessionSupported('immersive-vr').then((supported) => {
                if (supported) {
                    this.enableVRFeatures();
                }
            });
        }
    }

    enableVRFeatures() {
        this.addVRButton();
        this.setupVRScene();
    }

    addVRButton() {
        const vrButton = document.createElement('button');
        vrButton.className = 'vr-button';
        vrButton.innerHTML = '🕶️ VR Tour';
        vrButton.onclick = () => this.startVRMode();
        document.querySelector('.chat-input-container').appendChild(vrButton);
    }

    async startVRMode() {
        try {
            const session = await navigator.xr.requestSession('immersive-vr');
            this.vrMode = true;
            this.setupVRSession(session);
        } catch (error) {
            console.error('VR session error:', error);
            this.showVRFallback();
        }
    }

    setupVRSession(session) {
        // Initialize VR session
        this.renderVRScene(session);
    }

    renderVRScene(session) {
        // VR rendering logic
        if (this.vrMode) {
            session.requestAnimationFrame(() => this.renderVRScene(session));
        }
    }

    showVRFallback() {
        // Show 360° virtual tour
        this.start360Tour();
    }

    start360Tour() {
        // Initialize 360° tour using A-Frame
        this.create360Scene();
    }

    create360Scene() {
        const scene = document.createElement('a-scene');
        scene.embedded = true;
        
        const sky = document.createElement('a-sky');
        sky.src = 'property-360.jpg';
        
        scene.appendChild(sky);
        document.body.appendChild(scene);
    }

    // Multi-Language Support
    initializeMultiLanguage() {
        this.addLanguageSelector();
        this.loadTranslations();
    }

    addLanguageSelector() {
        const selector = document.createElement('select');
        selector.className = 'language-selector';
        selector.innerHTML = `
            <option value="en">English</option>
            <option value="hi">हिन्दी</option>
            <option value="bn">বাংলা</option>
            <option value="ta">தமிழ்</option>
            <option value="te">తెలుగు</option>
        `;
        
        selector.onchange = (e) => {
            this.changeLanguage(e.target.value);
        };
        
        document.querySelector('.chat-header').appendChild(selector);
    }

    async changeLanguage(language) {
        this.currentLanguage = language;
        await this.translateInterface(language);
    }

    async translateInterface(language) {
        const response = await fetch('/api/translate/interface', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                language: language,
                text_elements: this.getTranslatableElements()
            })
        });
        
        const translations = await response.json();
        this.applyTranslations(translations);
    }

    getTranslatableElements() {
        const elements = document.querySelectorAll('[data-translate]');
        return Array.from(elements).map(el => ({
            id: el.id,
            text: el.textContent,
            tag: el.tagName
        }));
    }

    applyTranslations(translations) {
        translations.forEach(translation => {
            const element = document.getElementById(translation.id);
            if (element) {
                element.textContent = translation.translated_text;
            }
        });
    }

    // Image Enhancement
    initializeImageEnhancement() {
        this.addEnhanceImageButton();
    }

    addEnhanceImageButton() {
        const button = document.createElement('button');
        button.className = 'enhance-image-btn';
        button.innerHTML = '✨ Enhance';
        button.onclick = () => this.enhanceCurrentImage();
        
        // Add to property images when displayed
        this.observePropertyImages();
    }

    observePropertyImages() {
        const observer = new MutationObserver((mutations) => {
            mutations.forEach((mutation) => {
                mutation.addedNodes.forEach((node) => {
                    if (node.classList && node.classList.contains('property-image')) {
                        this.addEnhanceButtonToImage(node);
                    }
                });
            });
        });

        observer.observe(document.body, {
            childList: true,
            subtree: true
        });
    }

    addEnhanceButtonToImage(imageElement) {
        const button = document.createElement('button');
        button.className = 'enhance-image-overlay';
        button.innerHTML = '✨';
        button.onclick = () => this.enhanceImage(imageElement.src);
        
        imageElement.parentElement.appendChild(button);
    }

    async enhanceImage(imageSrc) {
        try {
            const response = await fetch('/api/image/enhance', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    image_url: imageSrc,
                    enhancement_type: 'auto'
                })
            });
            
            const result = await response.json();
            
            if (result.success) {
                this.replaceImageWithEnhanced(imageSrc, result.enhanced_url);
            }
        } catch (error) {
            console.error('Image enhancement error:', error);
        }
    }

    replaceImageWithEnhanced(originalSrc, enhancedSrc) {
        const images = document.querySelectorAll(`img[src="${originalSrc}"]`);
        images.forEach(img => {
            img.src = enhancedSrc;
            img.classList.add('enhanced');
        });
    }

    // Virtual Tours
    initializeVirtualTours() {
        this.addVirtualTourButton();
        this.setupTourControls();
    }

    addVirtualTourButton() {
        const button = document.createElement('button');
        button.className = 'virtual-tour-btn';
        button.innerHTML = '🌐 Virtual Tour';
        button.onclick = () => this.startVirtualTour();
        
        document.querySelector('.quick-actions').appendChild(button);
    }

    async startVirtualTour() {
        try {
            const response = await fetch('/api/virtual-tour/start', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    property_id: this.getCurrentPropertyId()
                })
            });
            
            const tourData = await response.json();
            
            if (tourData.success) {
                this.displayVirtualTour(tourData.tour_url);
            }
        } catch (error) {
            console.error('Virtual tour error:', error);
        }
    }

    displayVirtualTour(tourUrl) {
        const modal = document.createElement('div');
        modal.className = 'virtual-tour-modal';
        modal.innerHTML = `
            <div class="tour-content">
                <button class="close-tour" onclick="this.parentElement.parentElement.remove()">×</button>
                <iframe src="${tourUrl}" frameborder="0" allowfullscreen></iframe>
                <div class="tour-controls">
                    <button onclick="this.previousElementSibling.previousElementSibling.contentWindow.postMessage('play', '*')">▶️ Play</button>
                    <button onclick="this.previousElementSibling.previousElementSibling.contentWindow.postMessage('pause', '*')">⏸️ Pause</button>
                    <button onclick="this.previousElementSibling.previousElementSibling.contentWindow.postMessage('fullscreen', '*')">🔳 Fullscreen</button>
                </div>
            </div>
        `;
        
        document.body.appendChild(modal);
    }

    // Utility Functions
    getUserId() {
        return localStorage.getItem('user_id') || 'anonymous';
    }

    getCurrentPropertyId() {
        // Get current property ID from context
        return window.currentPropertyId || null;
    }

    loadTranslations() {
        // Load translations from backend
        fetch('/api/translations')
            .then(response => response.json())
            .then(translations => {
                this.translations = translations;
            });
    }
}

// Initialize advanced features when DOM is ready
document.addEventListener('DOMContentLoaded', () => {
    window.advancedFeatures = new AdvancedFeaturesManager();
});

// Add CSS for advanced features
const advancedFeaturesCSS = `
.voice-indicator {
    position: fixed;
    top: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 10px 20px;
    border-radius: 25px;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 10px;
}

.voice-pulse {
    width: 10px;
    height: 10px;
    background: #4CAF50;
    border-radius: 50%;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}

.ar-button, .vr-button, .enhance-image-btn, .virtual-tour-btn {
    background: linear-gradient(45deg, #2196F3, #21CBF3);
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 20px;
    cursor: pointer;
    margin: 5px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.ar-button:hover, .vr-button:hover, .enhance-image-btn:hover, .virtual-tour-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.language-selector {
    margin-left: 10px;
    padding: 5px 10px;
    border-radius: 5px;
    border: 1px solid #ddd;
}

.ar-camera-view {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
}

.enhance-image-overlay {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    padding: 8px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
}

.virtual-tour-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tour-content {
    position: relative;
    width: 90%;
    height: 90%;
    background: black;
}

.close-tour {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    padding: 10px 15px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 1001;
}

.tour-content iframe {
    width: 100%;
    height: calc(100% - 60px);
}

.tour-controls {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}

.tour-controls button {
    background: rgba(255, 255, 255, 0.9);
    border: none;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
}
`;

// Inject CSS
const styleSheet = document.createElement('style');
styleSheet.textContent = advancedFeaturesCSS;
document.head.appendChild(styleSheet);