upload.js

// Upload page functionality
document.addEventListener('DOMContentLoaded', function() {
    // Selected failure types storage
    let selectedTypes = new Set();
    let uploadedFiles = [];
    let metadataCount = 0;

    // File Upload Functionality
    const uploadArea = document.getElementById('uploadArea');
    const fileInput = document.getElementById('fileInput');
    const fileList = document.getElementById('fileList');

    // Click to upload
    uploadArea.addEventListener('click', () => {
        fileInput.click();
    });

    // File input change
    fileInput.addEventListener('change', (e) => {
        handleFiles(e.target.files);
    });

    // Drag and drop
    uploadArea.addEventListener('dragover', (e) => {
        e.preventDefault();
        uploadArea.classList.add('drag-over');
    });

    uploadArea.addEventListener('dragleave', () => {
        uploadArea.classList.remove('drag-over');
    });

    uploadArea.addEventListener('drop', (e) => {
        e.preventDefault();
        uploadArea.classList.remove('drag-over');
        handleFiles(e.dataTransfer.files);
    });

    function handleFiles(files) {
        Array.from(files).forEach(file => {
            if (!uploadedFiles.find(f => f.name === file.name)) {
                uploadedFiles.push(file);
                addFileToList(file);
            }
        });
    }

    function addFileToList(file) {
        const fileItem = document.createElement('div');
        fileItem.className = 'file-item';
        
        const fileInfo = document.createElement('div');
        fileInfo.className = 'file-info';
        
        const fileIcon = document.createElement('span');
        fileIcon.className = 'file-icon';
        fileIcon.textContent = getFileIcon(file.name);
        
        const fileDetails = document.createElement('span');
        const fileName = document.createElement('span');
        fileName.className = 'file-name';
        fileName.textContent = file.name;
        
        const fileSize = document.createElement('span');
        fileSize.className = 'file-size';
        fileSize.textContent = formatFileSize(file.size);
        
        fileDetails.appendChild(fileName);
        fileDetails.appendChild(fileSize);
        
        fileInfo.appendChild(fileIcon);
        fileInfo.appendChild(fileDetails);
        
        const removeBtn = document.createElement('button');
        removeBtn.className = 'remove-file-btn';
        removeBtn.textContent = '×';
        removeBtn.onclick = () => {
            uploadedFiles = uploadedFiles.filter(f => f.name !== file.name);
            fileItem.remove();
        };
        
        fileItem.appendChild(fileInfo);
        fileItem.appendChild(removeBtn);
        fileList.appendChild(fileItem);
    }

    function getFileIcon(filename) {
        const ext = filename.split('.').pop().toLowerCase();
        const icons = {
            'pdf': '📄',
            'doc': '📝',
            'docx': '📝',
            'txt': '📃',
            'csv': '📊',
            'xlsx': '📊',
            'json': '📋'
        };
        return icons[ext] || '📎';
    }

    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 Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
    }

    // Failure Type Selection
    const typeCards = document.querySelectorAll('.type-card');
    const selectedTypesContainer = document.getElementById('selectedTypes');
    const typeError = document.getElementById('typeError');

    typeCards.forEach(card => {
        card.addEventListener('click', () => {
            const type = card.getAttribute('data-type');
            
            if (card.classList.contains('selected')) {
                card.classList.remove('selected');
                selectedTypes.delete(type);
                removeTypeTag(type);
            } else {
                card.classList.add('selected');
                selectedTypes.add(type);
                addTypeTag(type);
            }
            
            updateTypeError();
        });
    });

    function addTypeTag(type) {
        const tag = document.createElement('div');
        tag.className = 'selected-type-tag';
        tag.setAttribute('data-type', type);
        
        const tagText = document.createElement('span');
        tagText.textContent = type;
        
        const removeBtn = document.createElement('button');
        removeBtn.className = 'remove-type-btn';
        removeBtn.textContent = '×';
        removeBtn.onclick = () => {
            selectedTypes.delete(type);
            tag.remove();
            document.querySelector(`.type-card[data-type="${type}"]`)?.classList.remove('selected');
            updateTypeError();
        };
        
        tag.appendChild(tagText);
        tag.appendChild(removeBtn);
        selectedTypesContainer.appendChild(tag);
    }

    function removeTypeTag(type) {
        const tag = selectedTypesContainer.querySelector(`[data-type="${type}"]`);
        if (tag) tag.remove();
    }

    function updateTypeError() {
        if (selectedTypes.size === 0) {
            typeError.style.display = 'block';
        } else {
            typeError.style.display = 'none';
        }
    }

    // Custom Type Addition
    const addCustomBtn = document.getElementById('addCustomBtn');
    const customTypeInput = document.getElementById('customTypeInput');
    const customTypeText = document.getElementById('customTypeText');
    const confirmCustomBtn = document.getElementById('confirmCustomBtn');

    addCustomBtn.addEventListener('click', () => {
        customTypeInput.style.display = 'flex';
        customTypeText.focus();
    });

    confirmCustomBtn.addEventListener('click', () => {
        const customType = customTypeText.value.trim();
        if (customType && !selectedTypes.has(customType)) {
            selectedTypes.add(customType);
            addTypeTag(customType);
            customTypeText.value = '';
            customTypeInput.style.display = 'none';
            updateTypeError();
        }
    });

    customTypeText.addEventListener('keypress', (e) => {
        if (e.key === 'Enter') {
            confirmCustomBtn.click();
        }
    });

    // Metadata Management
    const addMetadataBtn = document.getElementById('addMetadataBtn');
    const metadataContainer = document.getElementById('metadataContainer');

    addMetadataBtn.addEventListener('click', () => {
        addMetadataField();
    });

    function addMetadataField() {
        metadataCount++;
        const metadataItem = document.createElement('div');
        metadataItem.className = 'metadata-item';
        metadataItem.setAttribute('data-id', metadataCount);
        
        const metadataInputs = document.createElement('div');
        metadataInputs.className = 'metadata-inputs';
        
        const keyInput = document.createElement('input');
        keyInput.type = 'text';
        keyInput.placeholder = '키 (예: 발생일시)';
        keyInput.className = 'metadata-key';
        
        const valueInput = document.createElement('input');
        valueInput.type = 'text';
        valueInput.placeholder = '값 (예: 2024-01-15)';
        valueInput.className = 'metadata-value';
        
        const removeBtn = document.createElement('button');
        removeBtn.className = 'remove-metadata-btn';
        removeBtn.textContent = '×';
        removeBtn.type = 'button';
        removeBtn.onclick = () => {
            metadataItem.remove();
        };
        
        metadataInputs.appendChild(keyInput);
        metadataInputs.appendChild(valueInput);
        metadataInputs.appendChild(removeBtn);
        
        metadataItem.appendChild(metadataInputs);
        metadataContainer.appendChild(metadataItem);
    }

    // Form Submission
    const uploadForm = document.getElementById('uploadForm');
    
    uploadForm.addEventListener('submit', (e) => {
        e.preventDefault();
        
        // Validate failure types
        if (selectedTypes.size === 0) {
            typeError.style.display = 'block';
            document.getElementById('selectedTypes').scrollIntoView({ behavior: 'smooth', block: 'center' });
            return;
        }

        // Collect form data
        const formData = {
            files: uploadedFiles.map(f => ({ name: f.name, size: f.size })),
            failureTypes: Array.from(selectedTypes),
            metadata: {},
            description: document.getElementById('description').value
        };

        // Collect metadata
        const metadataItems = document.querySelectorAll('.metadata-item');
        metadataItems.forEach(item => {
            const key = item.querySelector('.metadata-key').value.trim();
            const value = item.querySelector('.metadata-value').value.trim();
            if (key && value) {
                formData.metadata[key] = value;
            }
        });

        // Show success message
        showSuccessMessage();
        
        // Log form data (in production, this would be sent to server)
        console.log('Form submitted:', formData);
    });

    function showSuccessMessage() {
        const message = document.createElement('div');
        message.style.cssText = `
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 40px 60px;
            border-radius: 20px;
            font-size: 1.3rem;
            font-weight: 600;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
            z-index: 1000;
            text-align: center;
        `;
        message.innerHTML = `
            <div style="font-size: 3rem; margin-bottom: 15px;">🎉</div>
            <div>AI 분석이 시작되었습니다!</div>
            <div style="font-size: 1rem; margin-top: 10px; opacity: 0.9;">곧 인사이트를 받으실 수 있습니다.</div>
        `;
        document.body.appendChild(message);

        setTimeout(() => {
            message.style.transition = 'opacity 0.5s ease';
            message.style.opacity = '0';
            setTimeout(() => {
                message.remove();
                // In production, redirect to results page
                // window.location.href = 'results.html';
            }, 500);
        }, 3000);
    }

    // Fade-in animations (same as main page)
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -100px 0px'
    };

    const observer = new IntersectionObserver(function(entries) {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('visible');
            }
        });
    }, observerOptions);

    const fadeElements = document.querySelectorAll('.fade-in');
    fadeElements.forEach(element => {
        observer.observe(element);
    });
});