document.addEventListener('DOMContentLoaded', function() {
    const kitchenContainer = document.getElementById('kitchen-container');
    const layoutBtns = document.querySelectorAll('.layout-btn');
    const colorBtns = document.querySelectorAll('.color-btn');
    const materialBtns = document.querySelectorAll('.material-btn');
    const applianceBtns = document.querySelectorAll('.appliance-btn');
    const resetBtn = document.getElementById('reset-kitchen');
    const saveBtn = document.getElementById('save-design');
    
    let currentLayout = 'l-shape';
    let currentAppliances = [];
    
    // Initialize kitchen with default layout
    renderKitchen(currentLayout);
    
    // Layout selection
    layoutBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            currentLayout = this.dataset.layout;
            renderKitchen(currentLayout);
        });
    });
    
    // Color selection
    colorBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            const target = this.dataset.target;
            const color = this.dataset.color;
            updateElementStyle(target, 'background-color', color);
        });
    });
    
    // Material selection
    materialBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            const target = this.dataset.target;
            const material = this.dataset.material;
            // In a real app, this would update textures/patterns
            updateElementStyle(target, 'background-color', getMaterialColor(material));
        });
    });
    
    // Appliance selection
    applianceBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            const appliance = this.dataset.appliance;
            addAppliance(appliance);
        });
    });
    
    // Reset kitchen
    resetBtn.addEventListener('click', function() {
        currentLayout = 'l-shape';
        currentAppliances = [];
        renderKitchen(currentLayout);
    });
    
    // Save design
    saveBtn.addEventListener('click', function() {
        alert('Design saved! (This would connect to a backend in a real app)');
    });
    
    function renderKitchen(layout) {
        kitchenContainer.innerHTML = '';
        
        // Base kitchen structure
        const kitchenBase = document.createElement('div');
        kitchenBase.className = 'absolute inset-0 flex items-center justify-center';
        
        // Walls
        const walls = document.createElement('div');
        walls.className = 'absolute inset-0 bg-amber-50';
        kitchenBase.appendChild(walls);
        
        // Floor
        const floor = document.createElement('div');
        floor.className = 'absolute bottom-0 left-0 right-0 h-1/3 bg-gray-300';
        kitchenBase.appendChild(floor);
        
        // Layout-specific elements
        if (layout === 'l-shape') {
            // L-Shape cabinets
            const leftCabinets = document.createElement('div');
            leftCabinets.className = 'absolute left-0 bottom-0 w-1/3 h-2/3 bg-amber-100 border-r-2 border-amber-200';
            leftCabinets.dataset.element = 'cabinets';
            kitchenBase.appendChild(leftCabinets);
            
            const bottomCabinets = document.createElement('div');
            bottomCabinets.className = 'absolute bottom-0 right-0 h-1/3 w-2/3 bg-amber-100 border-t-2 border-amber-200';
            bottomCabinets.dataset.element = 'cabinets';
            kitchenBase.appendChild(bottomCabinets);
            
            // Countertop
            const countertop = document.createElement('div');
            countertop.className = 'absolute left-0 bottom-1/3 w-1/3 h-8 bg-gray-200';
            countertop.dataset.element = 'countertop';
            kitchenBase.appendChild(countertop);
            
            const countertop2 = document.createElement('div');
            countertop2.className = 'absolute bottom-1/3 right-0 h-8 w-2/3 bg-gray-200';
            countertop2.dataset.element = 'countertop';
            kitchenBase.appendChild(countertop2);
            
            // Backsplash
            const backsplash = document.createElement('div');
            backsplash.className = 'absolute left-0 bottom-1/3 w-1/3 h-1/3 bg-gray-100';
            backsplash.dataset.element = 'backsplash';
            kitchenBase.appendChild(backsplash);
            
        } else if (layout === 'u-shape') {
            // U-Shape implementation would go here
        }
        // Other layouts would be implemented similarly
        
        kitchenContainer.appendChild(kitchenBase);
        
        // Re-add any appliances
        currentAppliances.forEach(appliance => {
            addAppliance(appliance);
        });
    }
    
    function updateElementStyle(target, property, value) {
        const elements = document.querySelectorAll(`[data-element="${target}"]`);
        elements.forEach(el => {
            el.style[property] = value;
        });
    }
    
    function addAppliance(appliance) {
        if (!currentAppliances.includes(appliance)) {
            currentAppliances.push(appliance);
        }
        
        const applianceEl = document.createElement('div');
        applianceEl.className = 'absolute flex items-center justify-center bg-white rounded-lg shadow-md';
        applianceEl.dataset.appliance = appliance;
        
        // Position appliances based on layout
        if (currentLayout === 'l-shape') {
            // Simple positioning logic - in a real app this would be more sophisticated
            const positions = {
                'refrigerator': { left: '10%', top: '20%', width: '15%', height: '30%' },
                'oven': { left: '30%', bottom: '35%', width: '15%', height: '20%' },
                'sink': { right: '30%', bottom: '35%', width: '15%', height: '15%' }
            };
            
            const pos = positions[appliance] || { left: '50%', top: '50%', width: '15%', height: '15%' };
            
            Object.entries(pos).forEach(([prop, value]) => {
                applianceEl.style[prop] = value;
            });
        }
        
        // Add icon
        const icon = document.createElement('i');
        icon.className = getApplianceIcon(appliance);
        applianceEl.appendChild(icon);
        
        kitchenContainer.appendChild(applianceEl);
    }
    
    function getApplianceIcon(appliance) {
        const icons = {
            'refrigerator': 'fas fa-refrigerator text-3xl',
            'oven': 'fas fa-oven text-3xl',
            'microwave': 'fas fa-microwave text-3xl',
            'sink': 'fas fa-sink text-3xl',
            'dishwasher': 'fas fa-dishwasher text-3xl',
            'coffee-maker': 'fas fa-coffee-pot text-3xl'
        };
        return icons[appliance] || 'fas fa-question text-3xl';
    }
    
    function getMaterialColor(material) {
        const colors = {
            'quartz': '#f3f4f6',
            'granite': '#d1d5db',
            'marble': '#9ca3af',
            'butcher-block': '#f59e0b',
            'concrete': '#10b981',
            'subway-tile': '#f8fafc',
            'glass-tile': '#e2e8f0',
            'mosaic': '#cbd5e1',
            'stone': '#94a3b8',
            'metal': '#64748b'
        };
        return colors[material] || '#ffffff';
    }
});