script.js

document.addEventListener('DOMContentLoaded', function() {
    const fileInput = document.getElementById('file-upload');
    const fileInfo = document.getElementById('file-info');
    const fileName = document.getElementById('file-name');
    const fileSize = document.getElementById('file-size');
    const removeFileBtn = document.getElementById('remove-file');
    const analysisSection = document.getElementById('analysis-section');
    const resultsSection = document.getElementById('results-section');
    const analyzeBtn = document.getElementById('analyze-btn');
    const exportExcelBtn = document.getElementById('export-excel');
    const resultsTable = document.getElementById('results-table');
    
    // Drag and drop functionality
    const dropZone = document.querySelector('.border-dashed');
    
    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
        dropZone.addEventListener(eventName, preventDefaults, false);
});

// Helper function to format timber dimensions
function formatTimberDimensions(width, height) {
    return `${(width*1000).toFixed(0)}x${(height*1000).toFixed(0)}`;
}
function preventDefaults(e) {
        e.preventDefault();
        e.stopPropagation();
    }
    
    ['dragenter', 'dragover'].forEach(eventName => {
        dropZone.addEventListener(eventName, highlight, false);
    });
    
    ['dragleave', 'drop'].forEach(eventName => {
        dropZone.addEventListener(eventName, unhighlight, false);
    });
    
    function highlight() {
        dropZone.classList.add('border-blue-500');
        dropZone.classList.add('bg-blue-50');
    }
    
    function unhighlight() {
        dropZone.classList.remove('border-blue-500');
        dropZone.classList.remove('bg-blue-50');
    }
    
    dropZone.addEventListener('drop', handleDrop, false);
    
    function handleDrop(e) {
        const dt = e.dataTransfer;
        const files = dt.files;
        handleFiles(files);
    }
    
    fileInput.addEventListener('change', function() {
        handleFiles(this.files);
    });
    
    function handleFiles(files) {
        if (files.length > 0) {
            const file = files[0];
            if (file.name.endsWith('.ifc')) {
                fileName.textContent = file.name;
                fileSize.textContent = formatFileSize(file.size);
                fileInfo.classList.remove('hidden');
                analysisSection.classList.remove('hidden');
                resultsSection.classList.add('hidden');
            } else {
                alert('Please upload a valid .ifc file');
            }
        }
    }
    
    removeFileBtn.addEventListener('click', function() {
        fileInput.value = '';
        fileInfo.classList.add('hidden');
        analysisSection.classList.add('hidden');
        resultsSection.classList.add('hidden');
    });
    
    function formatFileSize(bytes) {
        if (bytes === 0) return '0 Bytes';
        const k = 1024;
        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
    }
    analyzeBtn.addEventListener('click', function() {
        // Simulate analysis (in a real app, this would use an IFC parser library)
        analyzeBtn.innerHTML = '<span class="loading-spinner mr-2">🌀</span> Analyzing...';
        analyzeBtn.disabled = true;
        
        setTimeout(() => {
            // Enhanced mock data with more detailed analysis
            const mockData = {
                elements: 156,
                properties: 412,
                materials: 24,
                quantities: 67,
                totalArea: 0,
                totalVolume: 0,
                groups: {
                    'Walls': [],
                    'Doors': [],
                    'Windows': [],
                    'Structural': [],
                    'Furniture': [],
                    'Plumbing': [],
                    'Electrical': [],
                    'HVAC': [],
                    'Other': [],
                    'Timber': []
                },
                timberTypes: {
                    'C24 45x195': [],
                    'C24 70x195': [],
                    'C24 95x195': [],
                    'GL24h 120x120': [],
                    'GL24h 160x160': [],
                    'GL24h 200x200': []
                },
items: [
                    { 
                        id: '12345', 
                        type: 'Wall', 
                        name: 'Interior Wall 1', 
                        properties: 15,
                        width: 0.2,
                        height: 2.7,
                        depth: 5.8,
                        area: 15.66,
                        volume: 3.132,
                        material: 'Gypsum Board',
                        group: 'Walls',
                        location: 'Level 1',
                        classification: 'Interior Partition',
                        propertiesList: [
                            {name: 'Fire Rating', value: '60 min'},
                            {name: 'STC Rating', value: '45'},
                            {name: 'U-Value', value: '0.35 W/m²K'}
                        ]
                    },
                    { 
                        id: '12346', 
                        type: 'Door', 
                        name: 'Main Entrance', 
                        properties: 12,
                        width: 1.0,
                        height: 2.1,
                        depth: 0.1,
                        area: 2.1,
                        volume: 0.21,
                        material: 'Wood',
                        group: 'Doors',
                        location: 'Level 1',
                        classification: 'Fire Exit',
                        propertiesList: [
                            {name: 'Fire Rating', value: '90 min'},
                            {name: 'Material', value: 'Solid Core'},
                            {name: 'Swing', value: 'Double'},
                            {name: 'Finish', value: 'Stained Oak'}
                        ]
},
                    { 
                        id: '12347', 
                        type: 'Window', 
                        name: 'Living Room Window', 
                        properties: 14,
                        width: 1.5,
                        height: 1.2,
                        depth: 0.2,
                        area: 1.8,
                        volume: 0.36,
                        material: 'Aluminum/Glass',
                        group: 'Windows',
                        location: 'Level 1',
                        classification: 'Fixed Glazing',
                        propertiesList: [
                            {name: 'U-Value', value: '1.4 W/m²K'},
                            {name: 'SHGC', value: '0.35'},
                            {name: 'Glazing', value: 'Double Low-E'},
                            {name: 'Frame', value: 'Thermal Break'}
                        ]
                    },
                    { 
                        id: '12348', 
                        type: 'Slab', 
                        name: 'First Floor', 
                        properties: 18,
                        width: 12.0,
                        height: 0.3,
                        depth: 8.0,
                        area: 96.0,
                        volume: 28.8,
                        material: 'Concrete',
                        group: 'Structural',
                        location: 'Level 1',
                        classification: 'Composite Deck',
                        propertiesList: [
                            {name: 'Concrete Strength', value: '4000 psi'},
                            {name: 'Reinforcement', value: '#4 @ 12" OC'},
                            {name: 'Fire Rating', value: '2 hr'},
                            {name: 'Topping', value: '2" Lightweight'}
                        ]
                    },
                    { 
                        id: '12349', 
                        type: 'Column', 
                        name: 'Structural Column A', 
                        properties: 16,
                        width: 0.4,
                        height: 3.0,
                        depth: 0.4,
                        area: 4.8,
                        volume: 0.48,
                        material: 'Steel',
                        group: 'Structural',
                        location: 'Grid A-1',
                        classification: 'HSS Column',
                        propertiesList: [
                            {name: 'Shape', value: 'HSS6x6x1/4'},
                            {name: 'Material Grade', value: 'A500 Gr.B'},
                            {name: 'Fireproofing', value: 'Spray-applied'},
                            {name: 'Connection Type', value: 'Moment'}
                        ]
                    },
                    { 
                        id: '12350', 
                        type: 'Timber', 
                        name: 'Roof Beam 1', 
                        properties: 14,
                        width: 0.045,
                        height: 0.195,
                        length: 4.8,
                        area: 0.936,
                        volume: 0.042,
                        material: 'C24 45x195',
                        group: 'Timber',
                        location: 'Roof Level',
                        classification: 'Structural Timber',
                        propertiesList: [
                            {name: 'Grade', value: 'C24'},
                            {name: 'Section', value: '45x195 mm'},
                            {name: 'Moisture Content', value: '18%'},
                            {name: 'Treatment', value: 'Tanalith E'}
                        ]
                    },
                    { 
                        id: '12351', 
                        type: 'Timber', 
                        name: 'Floor Joist 1', 
                        properties: 14,
                        width: 0.07,
                        height: 0.195,
                        length: 3.6,
                        area: 0.702,
                        volume: 0.049,
                        material: 'C24 70x195',
                        group: 'Timber',
                        location: 'First Floor',
                        classification: 'Structural Timber',
                        propertiesList: [
                            {name: 'Grade', value: 'C24'},
                            {name: 'Section', value: '70x195 mm'},
                            {name: 'Moisture Content', value: '18%'},
                            {name: 'Treatment', value: 'Tanalith E'}
                        ]
                    },
                    { 
                        id: '12352', 
                        type: 'Timber', 
                        name: 'Wall Stud 1', 
                        properties: 14,
                        width: 0.045,
                        height: 0.195,
                        length: 2.7,
                        area: 0.526,
                        volume: 0.024,
                        material: 'C24 45x195',
                        group: 'Timber',
                        location: 'Wall A',
                        classification: 'Structural Timber',
                        propertiesList: [
                            {name: 'Grade', value: 'C24'},
                            {name: 'Section', value: '45x195 mm'},
                            {name: 'Moisture Content', value: '18%'},
                            {name: 'Treatment', value: 'Tanalith E'}
                        ]
                    },
                    { 
                        id: '12353', 
                        type: 'Timber', 
                        name: 'Glulam Beam', 
                        properties: 14,
                        width: 0.16,
                        height: 0.16,
                        length: 5.4,
                        area: 0.864,
                        volume: 0.138,
                        material: 'GL24h 160x160',
                        group: 'Timber',
                        location: 'Main Hall',
                        classification: 'Structural Timber',
                        propertiesList: [
                            {name: 'Grade', value: 'GL24h'},
                            {name: 'Section', value: '160x160 mm'},
                            {name: 'Moisture Content', value: '12%'},
                            {name: 'Fire Rating', value: 'R30'}
                        ]
                    },
]
            };
            // Calculate totals and group items
            mockData.items.forEach(item => {
                mockData.totalArea += item.area;
                mockData.totalVolume += item.volume;
                mockData.groups[item.group].push(item);
                
                // Group timber by type
                if (item.group === 'Timber' && mockData.timberTypes[item.material]) {
                    mockData.timberTypes[item.material].push(item);
                }
            });
            
            // Calculate timber summaries
            const timberSummaries = {};
            for (const [type, items] of Object.entries(mockData.timberTypes)) {
                if (items.length > 0) {
                    const totalLength = items.reduce((sum, item) => sum + item.length, 0);
                    timberSummaries[type] = {
                        count: items.length,
                        totalLength: totalLength.toFixed(2),
                        totalVolume: items.reduce((sum, item) => sum + item.volume, 0).toFixed(3),
                        section: items[0].width*1000 + 'x' + items[0].height*1000 + ' mm'
                    };
                }
            }
            // Update counts and totals
            document.getElementById('elements-count').textContent = mockData.elements;
            document.getElementById('properties-count').textContent = mockData.properties;
            document.getElementById('materials-count').textContent = mockData.materials;
            document.getElementById('quantities-count').textContent = mockData.quantities;
            document.getElementById('total-volume').textContent = mockData.totalVolume.toFixed(3) + ' m³';
            
            // Add timber summary section
            if (Object.keys(timberSummaries).length > 0) {
                const resultsContainer = document.querySelector('#results-section .max-w-4xl');
                let timberHTML = `
                    <div class="bg-white rounded-lg p-4 shadow-sm mb-4">
                        <h4 class="text-lg font-semibold mb-3">Timber Summary</h4>
                        <div class="overflow-x-auto">
                            <table class="min-w-full">
                                <thead class="bg-gray-100">
                                    <tr>
                                        <th class="py-2 px-3 text-left">Type</th>
                                        <th class="py-2 px-3 text-left">Section</th>
                                        <th class="py-2 px-3 text-left">Count</th>
                                        <th class="py-2 px-3 text-left">Total Length</th>
                                        <th class="py-2 px-3 text-left">Total Volume</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-gray-200">
                `;
                
                for (const [type, summary] of Object.entries(timberSummaries)) {
                    timberHTML += `
                        <tr>
                            <td class="py-2 px-3">${type}</td>
                            <td class="py-2 px-3">${summary.section}</td>
                            <td class="py-2 px-3">${summary.count}</td>
                            <td class="py-2 px-3">${summary.totalLength} m</td>
                            <td class="py-2 px-3">${summary.totalVolume} m³</td>
                        </tr>
                    `;
                }
                
                timberHTML += `
                                </tbody>
                            </table>
                        </div>
                    </div>
                `;
                
                if (resultsContainer.querySelector('#timber-summary')) {
                    resultsContainer.querySelector('#timber-summary').innerHTML = timberHTML;
                } else {
                    const timberDiv = document.createElement('div');
                    timberDiv.id = 'timber-summary';
                    timberDiv.innerHTML = timberHTML;
                    resultsContainer.insertBefore(timberDiv, resultsContainer.querySelector('.overflow-x-auto'));
                }
            }
// Populate detailed table
            resultsTable.innerHTML = '';
            mockData.items.forEach(item => {
                const row = document.createElement('tr');
                row.className = 'hover:bg-gray-50 cursor-pointer';
                row.innerHTML = `
                    <td class="py-3 px-4">${item.id}</td>
                    <td class="py-3 px-4">${item.type}</td>
                    <td class="py-3 px-4">${item.name}</td>
                    <td class="py-3 px-4">
                        <div class="flex flex-col">
                            <span>${item.material}</span>
                            <span class="text-xs text-gray-500">${item.location}</span>
                        </div>
                    </td>
                    <td class="py-3 px-4">${item.properties}</td>
                    <td class="py-3 px-4">
                        <span class="inline-block px-2 py-1 rounded-full text-xs ${item.group === 'Walls' ? 'bg-blue-100 text-blue-800' : 
                            item.group === 'Structural' ? 'bg-gray-100 text-gray-800' :
                            item.group === 'Doors' ? 'bg-green-100 text-green-800' :
                            item.group === 'Windows' ? 'bg-purple-100 text-purple-800' : 'bg-yellow-100 text-yellow-800'}">
                            ${item.group}
                        </span>
                    </td>
                    <td class="py-3 px-4">
                        <button class="details-btn text-blue-500 hover:text-blue-700" data-id="${item.id}">
                            <i data-feather="chevron-down" class="w-4 h-4"></i>
                        </button>
                    </td>
                `;
                resultsTable.appendChild(row);
                
                // Add details row
                const detailsRow = document.createElement('tr');
                detailsRow.id = `details-${item.id}`;
                detailsRow.className = 'hidden bg-gray-50';
                const propertiesHTML = item.propertiesList.map(prop => 
                    `<div class="grid grid-cols-2 gap-2 py-1">
                        <span class="font-medium text-gray-700">${prop.name}:</span>
                        <span>${prop.value}</span>
                    </div>`
                ).join('');
                
                detailsRow.innerHTML = `
                    <td colspan="7" class="p-4">
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                            <div>
                                <h6 class="font-medium text-gray-700 mb-2">Dimensions</h6>
                                <div class="space-y-1">
                                    <div class="grid grid-cols-2 gap-2">
                                        <span>Width:</span>
                                        <span>${item.width.toFixed(2)} m</span>
                                    </div>
                                    <div class="grid grid-cols-2 gap-2">
                                        <span>Height:</span>
                                        <span>${item.height.toFixed(2)} m</span>
                                    </div>
                                    <div class="grid grid-cols-2 gap-2">
                                        <span>Depth:</span>
                                        <span>${item.depth.toFixed(2)} m</span>
                                    </div>
                                    <div class="grid grid-cols-2 gap-2">
                                        <span>Area:</span>
                                        <span>${item.area.toFixed(2)} m²</span>
                                    </div>
                                    <div class="grid grid-cols-2 gap-2">
                                        <span>Volume:</span>
                                        <span>${item.volume.toFixed(2)} m³</span>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <h6 class="font-medium text-gray-700 mb-2">Classification</h6>
                                <div class="space-y-1">
                                    <div class="grid grid-cols-2 gap-2">
                                        <span>Location:</span>
                                        <span>${item.location}</span>
                                    </div>
                                    <div class="grid grid-cols-2 gap-2">
                                        <span>Type:</span>
                                        <span>${item.classification}</span>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <h6 class="font-medium text-gray-700 mb-2">Properties</h6>
                                ${propertiesHTML}
                            </div>
                        </div>
                    </td>
                `;
                resultsTable.appendChild(detailsRow);
            });

            // Add event listeners for details toggles
            document.querySelectorAll('.details-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    const id = this.getAttribute('data-id');
                    const detailsRow = document.getElementById(`details-${id}`);
                    const icon = this.querySelector('i');
                    
                    if (detailsRow.classList.contains('hidden')) {
                        detailsRow.classList.remove('hidden');
                        icon.setAttribute('data-feather', 'chevron-up');
                    } else {
                        detailsRow.classList.add('hidden');
                        icon.setAttribute('data-feather', 'chevron-down');
                    }
                    feather.replace();
                });
            });

            analyzeBtn.innerHTML = '<i data-feather="activity" class="w-5 h-5 mr-2"></i><span>Analyze IFC File</span>';
            analyzeBtn.disabled = false;
            resultsSection.classList.remove('hidden');
            feather.replace();
}, 2000);
    });
    exportExcelBtn.addEventListener('click', function() {
        // In a real app, this would generate an Excel file from the IFC data
        const btn = this;
        btn.innerHTML = '<span class="loading-spinner mr-2">🌀</span> Exporting...';
        btn.disabled = true;
        
        setTimeout(() => {
            // Mock Excel data structure with timber summary
            const excelData = {
                summary: [
                    ['IFC Analysis Report', '', '', '', ''],
                    ['Generated on', new Date().toLocaleString(), '', '', ''],
                    ['', '', '', '', ''],
                    ['Summary Metrics', '', '', '', ''],
                    ['Total Elements', mockData.elements, '', '', ''],
                    ['Total Properties', mockData.properties, '', '', ''],
                    ['Total Materials', mockData.materials, '', '', ''],
                    ['Total Volume', mockData.totalVolume.toFixed(3) + ' m³', '', '', '']
                ],
                timberSummary: [
                    ['Timber Summary', '', '', '', ''],
                    ['Type', 'Section', 'Count', 'Total Length (m)', 'Total Volume (m³)'],
                    ...Object.entries(timberSummaries).map(([type, summary]) => [
                        type, 
                        summary.section, 
                        summary.count, 
                        summary.totalLength, 
                        summary.totalVolume
                    ])
                ],
                elements: [
                    ['Element Details', '', '', '', '', '', '', ''],
                    ['ID', 'Type', 'Name', 'Material', 'Location', 'Length (m)', 'Volume (m³)', 'Properties'],
                    ...mockData.items.map(item => [
                        item.id,
                        item.type,
                        item.name,
                        item.material,
                        item.location,
                        item.length ? item.length.toFixed(2) : '',
                        item.volume ? item.volume.toFixed(3) : '',
                        item.properties
                    ])
                ]
            };

            console.log('Excel data prepared:', excelData); // For demo purposes
            
            // In a real implementation, we would use SheetJS to generate the Excel file
            alert('Excel export would generate:\n- Summary sheet\n- Timber summary by type\n- Detailed elements list');
            
            btn.innerHTML = '<i data-feather="download" class="w-4 h-4 mr-2"></i><span>Export to Excel</span>';
            btn.disabled = false;
            feather.replace();
        }, 1500);
    });
});