class UIManager {
    constructor(roomManager, wallManager) {
        this.roomManager = roomManager;
        this.wallManager = wallManager;
        this.selectedElement = null;
    }

    // Set selected element
    setSelectedElement(element) {
        this.selectedElement = element;
        this.updatePropertiesPanel();
    }

    // Clear selection
    clearSelection() {
        this.selectedElement = null;
        this.updatePropertiesPanel();
    }

    // Update properties panel
    updatePropertiesPanel() {
        const panel = document.getElementById('propertiesPanel');
        if (this.selectedElement) {
            let propertiesHTML = this.getBasicPropertiesHTML();
            
            if (this.selectedElement.type === 'wall') {
                propertiesHTML += this.getWallPropertiesHTML();
            } else if (this.selectedElement.type === 'room') {
                propertiesHTML += this.getRoomPropertiesHTML();
            }

            propertiesHTML += this.getDeleteButtonHTML();
            panel.innerHTML = propertiesHTML;
        } else {
            panel.innerHTML = this.getDefaultPanelHTML();
        }
    }

    // Get basic properties HTML
    getBasicPropertiesHTML() {
        return `
            <div class="bg-white p-4 rounded-lg border border-gray-200 shadow-sm">
                <div class="space-y-3">
                    <div class="flex justify-between items-center">
                        <span class="text-sm text-gray-600">Type:</span>
                        <span class="text-sm font-medium text-gray-800">${this.selectedElement.type}</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-sm text-gray-600">Material:</span>
                        <span class="text-sm font-medium text-gray-800">${this.selectedElement.material}</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-sm text-gray-600">Color:</span>
                        <div class="flex items-center space-x-2">
                            <div class="w-4 h-4 rounded border border-gray-300" style="background-color: ${this.selectedElement.color}"></div>
                            <span class="text-sm font-medium text-gray-800">${this.selectedElement.color}</span>
                        </div>
                    </div>`;
    }

    // Get wall properties HTML
    getWallPropertiesHTML() {
        const wallProps = this.wallManager.getWallProperties(this.selectedElement);
        return `
                    <div class="flex justify-between items-center">
                        <span class="text-sm text-gray-600">Length:</span>
                        <span class="text-sm font-medium text-gray-800">${wallProps.length}px</span>
                    </div>
                    <div class="space-y-2">
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-600">Thickness:</span>
                            <span class="text-sm font-medium text-gray-800">${wallProps.thickness}px</span>
                        </div>
                        <input type="range" min="5" max="50" value="${wallProps.thickness}" 
                               onchange="app.updateWallThickness(this.value)"
                               class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
                    </div>`;
    }

    // Get room properties HTML
    getRoomPropertiesHTML() {
        const roomProps = this.roomManager.getRoomProperties(this.selectedElement);
        return `
                    <div class="flex justify-between items-center">
                        <span class="text-sm text-gray-600">Name:</span>
                        <input type="text" value="${roomProps.name}" 
                               onchange="app.updateRoomName(this.value)"
                               class="text-sm font-medium text-gray-800 bg-transparent border-b border-gray-300 focus:border-blue-500 outline-none">
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-sm text-gray-600">Area:</span>
                        <span class="text-sm font-medium text-gray-800">${roomProps.area} sq px</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-sm text-gray-600">Dimensions:</span>
                        <span class="text-sm font-medium text-gray-800">${roomProps.dimensions}</span>
                    </div>`;
    }

    // Get delete button HTML
    getDeleteButtonHTML() {
        return `
                    <button onclick="app.deleteElement()" class="w-full bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg transition-colors text-sm">
                        🗑️ Delete Element
                    </button>
                </div>
            </div>`;
    }

    // Get default panel HTML
    getDefaultPanelHTML() {
        return `
            <div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
                <p class="text-sm text-gray-600 mb-3">Select an element to edit properties</p>
                <div class="space-y-2 text-sm">
                    <h4 class="font-medium text-gray-700">Keyboard Shortcuts:</h4>
                    <p><strong>G</strong> - Toggle Grid</p>
                    <p><strong>M</strong> - Toggle Measurements</p>
                    <p><strong>S</strong> - Toggle Snap to Grid</p>
                    <p><strong>+/-</strong> - Zoom In/Out</p>
                    <p><strong>0</strong> - Reset Zoom</p>
                    <p><strong>Ctrl+Drag</strong> - Pan Canvas</p>
                    <p><strong>Delete</strong> - Delete Selected</p>
                </div>
            </div>`;
    }

    // Update tool button states
    updateToolButtons(currentTool) {
        // Update top toolbar buttons
        document.querySelectorAll('.toolbar-btn').forEach(btn => {
            btn.classList.remove('bg-blue-100');
            btn.classList.add('hover:bg-gray-100');
        });
        
        const activeTopBtn = document.getElementById(currentTool + 'ToolTop');
        if (activeTopBtn) {
            activeTopBtn.classList.add('bg-blue-100');
            activeTopBtn.classList.remove('hover:bg-gray-100');
        }

        // Update sidebar tool buttons if they exist
        document.querySelectorAll('.tool-btn').forEach(btn => {
            btn.classList.remove('bg-primary', 'text-white', 'border-primary');
            btn.classList.add('bg-gray-100', 'hover:bg-gray-200', 'border-gray-300');
        });
        const activeBtn = document.getElementById(currentTool + 'Tool');
        if (activeBtn) {
            activeBtn.classList.remove('bg-gray-100', 'hover:bg-gray-200', 'border-gray-300');
            activeBtn.classList.add('bg-primary', 'text-white', 'border-primary');
        }

        // Show/hide element properties in top toolbar
        this.updateTopToolbarProperties(currentTool);
        
        // Show/hide type selection sections in sidebar
        const doorSection = document.getElementById('doorTypeSection');
        const windowSection = document.getElementById('windowTypeSection');
        
        if (doorSection) doorSection.classList.toggle('hidden', currentTool !== 'door');
        if (windowSection) windowSection.classList.toggle('hidden', currentTool !== 'window');
    }
    
    // Update top toolbar element properties
    updateTopToolbarProperties(currentTool) {
        const doorProps = document.getElementById('doorPropsTop');
        const windowProps = document.getElementById('windowPropsTop');
        const wallProps = document.getElementById('wallPropsTop');
        
        // Hide all property sections
        if (doorProps) doorProps.classList.add('hidden');
        if (windowProps) windowProps.classList.add('hidden');
        if (wallProps) wallProps.classList.add('hidden');
        
        // Show relevant property section
        if (currentTool === 'door' && doorProps) {
            doorProps.classList.remove('hidden');
        } else if (currentTool === 'window' && windowProps) {
            windowProps.classList.remove('hidden');
        } else if (currentTool === 'wall' && wallProps) {
            wallProps.classList.remove('hidden');
        }
    }

    // Update instruction text
    updateInstructionText(tool) {
        const instructionText = document.querySelector('.absolute.top-4.left-4 p');
        if (instructionText) {
            const toolNames = {
                'pointer': 'Pointer Tool Active: Click to select objects',
                'hand': 'Hand Tool Active: Drag to pan the view',
                'move': 'Move Tool Active: Drag to move objects',
                'rotate': 'Rotate Tool Active: Drag to rotate objects',
                'wall': 'Wall Tool Active: Click and drag to create walls',
                'room': 'Room Tool Active: Click and drag to create rooms',
                'door': 'Door Tool Active: Click to place doors',
                'window': 'Window Tool Active: Click to place windows'
            };
            instructionText.innerHTML = `<span class="font-medium">${toolNames[tool] || 'Tool Active'}</span>`;
        }
    }

    // Update instruction text for 3D view
    update3DInstructionText() {
        const instructionText = document.querySelector('.absolute.top-4.left-4 p');
        if (instructionText) {
            instructionText.innerHTML = `<span class="font-medium">3D View Active:</span> Left-drag: rotate, Right-drag: pan, Scroll: zoom, R: reset camera`;
        }
    }

    // Update instruction text for 2D view
    update2DInstructionText(tool) {
        this.updateInstructionText(tool);
    }

    // Show modal
    showModal(title, body) {
        const modal = document.getElementById('modal');
        const modalTitle = document.getElementById('modalTitle');
        const modalBody = document.getElementById('modalBody');
        
        if (modal && modalTitle && modalBody) {
            modalTitle.textContent = title;
            modalBody.innerHTML = body;
            modal.classList.remove('hidden');
        }
    }

    // Hide modal
    hideModal() {
        const modal = document.getElementById('modal');
        if (modal) {
            modal.classList.add('hidden');
        }
    }

    // Show alert
    showAlert(message, type = 'info') {
        alert(message); // Simple implementation, could be enhanced with custom modal
    }

    // Show confirmation
    showConfirmation(message) {
        return confirm(message);
    }

    // Get selected element
    getSelectedElement() {
        return this.selectedElement;
    }

    // Update room name
    updateRoomName(newName) {
        if (this.selectedElement && this.roomManager.updateRoomName(this.selectedElement, newName)) {
            return true;
        }
        return false;
    }

    // Update wall thickness
    updateWallThickness(thickness) {
        if (this.selectedElement && this.wallManager.updateWallThickness(this.selectedElement, thickness)) {
            return true;
        }
        return false;
    }
}