/**
 * Enhanced Upload Functionality with Device Labeling
 *
 * Features:
 * - Real-time .sub file parsing in browser
 * - Manual device identification for training data
 * - Device search and autocomplete
 * - Photo upload for unknown devices
 * - Batch labeling for multiple files
 */

// Import .sub parser
// Assumes sub_parser.js is loaded first

let selectedFiles = [];
let parsedMetadata = new Map();  // filename -> SignalMetadata
let manualLabels = new Map();  // filename -> {device_id, manufacturer, model, ...}

// Device database cache (fetched from API)
let deviceDatabase = [];

// Initialize
document.addEventListener('DOMContentLoaded', async () => {
    await loadDeviceDatabase();
    setupEnhancedUpload();
});

/**
 * Load device database from API for autocomplete
 */
async function loadDeviceDatabase() {
    try {
        const response = await fetch('/api/v1/devices?limit=1000');
        if (response.ok) {
            const data = await response.json();
            deviceDatabase = data.devices || [];
            console.log(`Loaded ${deviceDatabase.length} devices for autocomplete`);
        }
    } catch (error) {
        console.warn('Failed to load device database:', error);
    }
}

/**
 * Setup enhanced upload functionality
 */
function setupEnhancedUpload() {
    const dropZone = document.getElementById('drop-zone');
    const fileInput = document.getElementById('file-input');

    // Drag & drop
    dropZone.addEventListener('click', () => fileInput.click());
    dropZone.addEventListener('dragover', (e) => {
        e.preventDefault();
        dropZone.classList.add('drag-over');
    });
    dropZone.addEventListener('dragleave', () => {
        dropZone.classList.remove('drag-over');
    });
    dropZone.addEventListener('drop', async (e) => {
        e.preventDefault();
        dropZone.classList.remove('drag-over');
        const files = Array.from(e.dataTransfer.files).filter(f => f.name.endsWith('.sub'));
        await addFilesWithParsing(files);
    });

    // File input
    fileInput.addEventListener('change', async (e) => {
        const files = Array.from(e.target.files);
        await addFilesWithParsing(files);
    });
}

/**
 * Add files and parse them immediately
 */
async function addFilesWithParsing(files) {
    if (files.length === 0) {
        alert('Please select .sub files');
        return;
    }

    // Show loading indicator
    showParsingIndicator(files.length);

    for (const file of files) {
        selectedFiles.push(file);

        // Parse .sub file in browser
        try {
            const content = await file.text();
            const metadata = SubParser.parseSubFile(content);
            parsedMetadata.set(file.name, metadata);

            console.log(`Parsed ${file.name}:`, metadata);
        } catch (error) {
            console.error(`Failed to parse ${file.name}:`, error);
        }
    }

    hideParsingIndicator();

    // Show file list with device labeling UI
    document.getElementById('file-list').style.display = 'block';
    renderEnhancedFileList();
}

/**
 * Render file list with device labeling options
 */
function renderEnhancedFileList() {
    const container = document.getElementById('files-container');

    container.innerHTML = selectedFiles.map((file, index) => {
        const metadata = parsedMetadata.get(file.name);
        const label = manualLabels.get(file.name);

        return `
            <div class="file-item-enhanced" data-index="${index}">
                <div class="file-header">
                    <div class="file-info">
                        <div class="file-name">${file.name}</div>
                        <div class="file-meta">
                            ${formatFileSize(file.size)}
                            ${metadata ? ` | ${(metadata.frequency / 1e6).toFixed(2)} MHz` : ''}
                            ${metadata?.protocol ? ` | ${metadata.protocol}` : ''}
                        </div>
                    </div>
                    <button type="button" class="btn btn-sm btn-danger" onclick="removeFileEnhanced(${index})">
                        Remove
                    </button>
                </div>

                ${metadata ? renderSignalDetails(metadata) : ''}
                ${renderDeviceLabelingUI(file.name, index, label)}
            </div>
        `;
    }).join('');

    // Setup autocomplete for each file
    selectedFiles.forEach((file, index) => {
        setupDeviceAutocomplete(file.name, index);
    });
}

/**
 * Render parsed signal details
 */
function renderSignalDetails(metadata) {
    return `
        <div class="signal-details">
            <div class="signal-param">
                <span class="label">Frequency:</span>
                <span class="value">${(metadata.frequency / 1e6).toFixed(3)} MHz</span>
            </div>
            <div class="signal-param">
                <span class="label">Modulation:</span>
                <span class="value">${metadata.modulation || 'Unknown'}</span>
            </div>
            ${metadata.protocol ? `
                <div class="signal-param">
                    <span class="label">Protocol:</span>
                    <span class="value">${metadata.protocol}</span>
                </div>
            ` : ''}
            ${metadata.bit_length ? `
                <div class="signal-param">
                    <span class="label">Bit Length:</span>
                    <span class="value">${metadata.bit_length} bits</span>
                </div>
            ` : ''}
            ${metadata.raw_format === 'RAW' ? `
                <div class="signal-param">
                    <span class="label">Format:</span>
                    <span class="value">RAW (${metadata.pulse_count || 0} pulses)</span>
                </div>
            ` : ''}
        </div>
    `;
}

/**
 * Render device labeling UI for a file
 */
function renderDeviceLabelingUI(filename, index, existingLabel) {
    return `
        <div class="device-labeling">
            <h4>Device Identification (Optional - Helps Train AI)</h4>
            <p class="help-text">Know what device this is? Help us improve identification accuracy!</p>

            <div class="labeling-options">
                <!-- Option 1: Search existing devices -->
                <div class="label-option">
                    <label>
                        <input type="radio" name="label-type-${index}" value="existing"
                               ${existingLabel?.type === 'existing' ? 'checked' : ''}
                               onchange="showLabelingSection(${index}, 'existing')">
                        Select from known devices
                    </label>
                    <div id="existing-device-${index}" class="label-section"
                         style="display: ${existingLabel?.type === 'existing' ? 'block' : 'none'};">
                        <input type="text"
                               id="device-search-${index}"
                               class="device-search-input"
                               placeholder="Search device (e.g., Chamberlain, LaCrosse, Oregon Scientific...)"
                               value="${existingLabel?.search || ''}">
                        <div id="device-suggestions-${index}" class="device-suggestions"></div>
                        <input type="hidden" id="selected-device-id-${index}" value="${existingLabel?.device_id || ''}">
                    </div>
                </div>

                <!-- Option 2: Add new device -->
                <div class="label-option">
                    <label>
                        <input type="radio" name="label-type-${index}" value="new"
                               ${existingLabel?.type === 'new' ? 'checked' : ''}
                               onchange="showLabelingSection(${index}, 'new')">
                        Add new device (not in database)
                    </label>
                    <div id="new-device-${index}" class="label-section"
                         style="display: ${existingLabel?.type === 'new' ? 'block' : 'none'};">
                        <div class="form-group">
                            <label>Device Type:</label>
                            <select id="device-type-${index}" class="form-control">
                                <option value="">-- Select --</option>
                                <option value="Garage Door Opener">Garage Door Opener</option>
                                <option value="Gate Opener">Gate Opener</option>
                                <option value="Weather Sensor">Weather Sensor</option>
                                <option value="Doorbell">Doorbell</option>
                                <option value="Door Sensor">Door Sensor</option>
                                <option value="Motion Sensor">Motion Sensor</option>
                                <option value="Remote Control">Remote Control</option>
                                <option value="Car Key Fob">Car Key Fob</option>
                                <option value="TPMS">TPMS (Tire Pressure)</option>
                                <option value="Security System">Security System</option>
                                <option value="Other">Other</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Manufacturer:</label>
                            <input type="text" id="manufacturer-${index}"
                                   placeholder="e.g., Chamberlain, LaCrosse, Oregon Scientific"
                                   class="form-control"
                                   value="${existingLabel?.manufacturer || ''}">
                        </div>
                        <div class="form-group">
                            <label>Model:</label>
                            <input type="text" id="model-${index}"
                                   placeholder="e.g., 891LM, TX141TH-Bv2"
                                   class="form-control"
                                   value="${existingLabel?.model || ''}">
                        </div>
                        <div class="form-group">
                            <label>Notes (optional):</label>
                            <textarea id="notes-${index}"
                                      placeholder="Any additional information..."
                                      class="form-control"
                                      rows="2">${existingLabel?.notes || ''}</textarea>
                        </div>
                        <div class="form-group">
                            <label>Photo (optional):</label>
                            <input type="file" id="photo-${index}" accept="image/*" class="form-control">
                            <small>Upload a photo of the physical device to help verification</small>
                        </div>
                    </div>
                </div>

                <!-- Option 3: Skip labeling -->
                <div class="label-option">
                    <label>
                        <input type="radio" name="label-type-${index}" value="skip"
                               ${!existingLabel || existingLabel.type === 'skip' ? 'checked' : ''}
                               onchange="showLabelingSection(${index}, 'skip')">
                        Skip labeling (let AI identify automatically)
                    </label>
                </div>
            </div>
        </div>
    `;
}

/**
 * Show/hide labeling sections based on selected option
 */
function showLabelingSection(index, type) {
    document.getElementById(`existing-device-${index}`).style.display =
        type === 'existing' ? 'block' : 'none';
    document.getElementById(`new-device-${index}`).style.display =
        type === 'new' ? 'block' : 'none';
}

/**
 * Setup device autocomplete for search input
 */
function setupDeviceAutocomplete(filename, index) {
    const searchInput = document.getElementById(`device-search-${index}`);
    if (!searchInput) return;

    const suggestionsDiv = document.getElementById(`device-suggestions-${index}`);

    searchInput.addEventListener('input', (e) => {
        const query = e.target.value.toLowerCase().trim();

        if (query.length < 2) {
            suggestionsDiv.innerHTML = '';
            return;
        }

        // Filter devices
        const matches = deviceDatabase.filter(device => {
            const searchStr = `${device.manufacturer} ${device.model} ${device.device_type}`.toLowerCase();
            return searchStr.includes(query);
        }).slice(0, 10);  // Top 10 results

        if (matches.length === 0) {
            suggestionsDiv.innerHTML = '<div class="no-results">No devices found</div>';
            return;
        }

        // Render suggestions
        suggestionsDiv.innerHTML = matches.map(device => `
            <div class="device-suggestion" onclick="selectDevice(${index}, ${device.id}, '${escapeHtml(device.manufacturer)}', '${escapeHtml(device.model)}')">
                <div class="device-name">
                    <strong>${escapeHtml(device.manufacturer || 'Unknown')}</strong> ${escapeHtml(device.model || 'Unknown')}
                </div>
                <div class="device-type">${escapeHtml(device.device_type || '')}</div>
            </div>
        `).join('');
    });

    // Hide suggestions when clicking outside
    document.addEventListener('click', (e) => {
        if (!searchInput.contains(e.target) && !suggestionsDiv.contains(e.target)) {
            suggestionsDiv.innerHTML = '';
        }
    });
}

/**
 * Select a device from autocomplete
 */
function selectDevice(index, deviceId, manufacturer, model) {
    const filename = selectedFiles[index].name;

    // Update hidden input
    document.getElementById(`selected-device-id-${index}`).value = deviceId;

    // Update search input
    document.getElementById(`device-search-${index}`).value = `${manufacturer} ${model}`;

    // Clear suggestions
    document.getElementById(`device-suggestions-${index}`).innerHTML = '';

    // Store label
    manualLabels.set(filename, {
        type: 'existing',
        device_id: deviceId,
        manufacturer,
        model,
        search: `${manufacturer} ${model}`
    });

    console.log(`Selected device for ${filename}:`, deviceId);
}

/**
 * Collect manual labels from all files before upload
 */
function collectManualLabels() {
    const labels = [];

    selectedFiles.forEach((file, index) => {
        const labelType = document.querySelector(`input[name="label-type-${index}"]:checked`)?.value;

        if (labelType === 'existing') {
            const deviceId = document.getElementById(`selected-device-id-${index}`).value;
            if (deviceId) {
                labels.push({
                    filename: file.name,
                    device_id: parseInt(deviceId),
                    source: 'manual_existing'
                });
            }
        } else if (labelType === 'new') {
            const deviceType = document.getElementById(`device-type-${index}`).value;
            const manufacturer = document.getElementById(`manufacturer-${index}`).value.trim();
            const model = document.getElementById(`model-${index}`).value.trim();
            const notes = document.getElementById(`notes-${index}`).value.trim();

            if (deviceType && manufacturer && model) {
                labels.push({
                    filename: file.name,
                    device_type: deviceType,
                    manufacturer: manufacturer,
                    model: model,
                    notes: notes,
                    source: 'manual_new'
                });
            }
        }
        // 'skip' type: no label added
    });

    return labels;
}

/**
 * Enhanced upload function with manual labels
 */
async function uploadFilesEnhanced() {
    if (selectedFiles.length === 0) {
        alert('Please select files to upload');
        return;
    }

    // Validate GPS
    const lat = parseFloat(document.getElementById('default-lat').value);
    const lon = parseFloat(document.getElementById('default-lon').value);

    if (isNaN(lat) || isNaN(lon) || lat < -90 || lat > 90 || lon < -180 || lon > 180) {
        alert('Please provide valid GPS coordinates');
        return;
    }

    // Collect manual labels
    const manualLabels = collectManualLabels();

    // Show progress
    document.getElementById('file-list').style.display = 'none';
    document.getElementById('upload-progress').style.display = 'block';

    try {
        // Build manifest
        const sessionUuid = document.getElementById('session-uuid').value || generateUUID();
        const accuracy = parseFloat(document.getElementById('default-accuracy').value) || 5.0;
        const altitude = parseFloat(document.getElementById('default-altitude').value) || null;

        const manifest = {
            session_uuid: sessionUuid,
            captures: selectedFiles.map(file => ({
                filename: file.name,
                latitude: lat,
                longitude: lon,
                accuracy: accuracy,
                altitude: altitude,
                timestamp: new Date().toISOString()
            })),
            manual_labels: manualLabels  // Include manual device labels
        };

        // Build FormData
        const formData = new FormData();
        formData.append('manifest', JSON.stringify(manifest));

        selectedFiles.forEach(file => {
            formData.append('files', file);
        });

        // Upload photos (if any)
        for (let i = 0; i < selectedFiles.length; i++) {
            const photoInput = document.getElementById(`photo-${i}`);
            if (photoInput && photoInput.files.length > 0) {
                formData.append(`photo_${selectedFiles[i].name}`, photoInput.files[0]);
            }
        }

        // Upload
        updateProgress(0, 'Uploading files...');

        const response = await fetch('/api/v1/captures/upload', {
            method: 'POST',
            body: formData
        });

        updateProgress(100, 'Processing...');

        if (!response.ok) {
            const error = await response.json();
            throw new Error(error.detail || 'Upload failed');
        }

        const result = await response.json();

        // Show results with device identification
        showEnhancedUploadResults(result);

    } catch (error) {
        console.error('Upload error:', error);
        alert(`Upload failed: ${error.message}`);

        // Reset
        document.getElementById('upload-progress').style.display = 'none';
        document.getElementById('file-list').style.display = 'block';
    }
}

/**
 * Show upload results with device matches
 */
function showEnhancedUploadResults(result) {
    document.getElementById('upload-progress').style.display = 'none';
    const resultsDiv = document.getElementById('upload-results');
    const container = document.getElementById('results-container');

    resultsDiv.style.display = 'block';

    const successCount = result.successful?.length || 0;
    const errorCount = result.failed?.length || 0;

    let html = `
        <div class="result-summary">
            <h3>Upload Complete!</h3>
            <p>Successfully uploaded: <strong>${successCount}</strong> files</p>
            ${errorCount > 0 ? `<p>Failed: <strong>${errorCount}</strong> files</p>` : ''}
        </div>
    `;

    if (result.successful && result.successful.length > 0) {
        html += '<h4>Device Identification Results:</h4>';
        result.successful.forEach(item => {
            const bestMatch = item.matches?.[0];  // Highest confidence match

            html += `
                <div class="result-item ${bestMatch ? 'matched' : 'unmatched'}">
                    <div class="file-name">${item.filename}</div>
                    <div class="signal-info">
                        ${(item.frequency / 1e6).toFixed(2)} MHz | ${item.protocol || 'RAW'}
                    </div>
                    ${bestMatch ? `
                        <div class="device-match">
                            <span class="confidence-badge confidence-${getConfidenceLevelClass(bestMatch.confidence)}">
                                ${(bestMatch.confidence * 100).toFixed(0)}% confidence
                            </span>
                            <span class="device-name">
                                ${bestMatch.manufacturer || 'Unknown'} ${bestMatch.model || 'Unknown'}
                            </span>
                            <span class="device-type">${bestMatch.device_type || ''}</span>
                        </div>
                    ` : `
                        <div class="device-match unknown">
                            <span class="no-match">Unknown Device</span>
                            ${item.manual_label ? '<span class="manual-label">✓ Manually labeled</span>' : ''}
                        </div>
                    `}
                </div>
            `;
        });
    }

    container.innerHTML = html;
}

/**
 * Get CSS class for confidence level
 */
function getConfidenceLevelClass(confidence) {
    if (confidence >= 0.85) return 'high';
    if (confidence >= 0.65) return 'medium';
    if (confidence >= 0.40) return 'low';
    return 'very-low';
}

/**
 * Remove file from enhanced list
 */
function removeFileEnhanced(index) {
    const filename = selectedFiles[index].name;
    selectedFiles.splice(index, 1);
    parsedMetadata.delete(filename);
    manualLabels.delete(filename);

    if (selectedFiles.length === 0) {
        document.getElementById('file-list').style.display = 'none';
    } else {
        renderEnhancedFileList();
    }
}

/**
 * Show parsing indicator
 */
function showParsingIndicator(fileCount) {
    const indicator = document.createElement('div');
    indicator.id = 'parsing-indicator';
    indicator.style.cssText = `
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: white;
        padding: 2rem;
        border-radius: 0.5rem;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        z-index: 10000;
        text-align: center;
    `;
    indicator.innerHTML = `
        <div class="spinner"></div>
        <p>Parsing ${fileCount} file${fileCount > 1 ? 's' : ''}...</p>
    `;
    document.body.appendChild(indicator);
}

/**
 * Hide parsing indicator
 */
function hideParsingIndicator() {
    const indicator = document.getElementById('parsing-indicator');
    if (indicator) indicator.remove();
}

/**
 * Utility functions
 */
function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

function updateProgress(percent, text) {
    document.getElementById('progress-fill').style.width = `${percent}%`;
    document.getElementById('progress-text').textContent = text;
}

function generateUUID() {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        const r = Math.random() * 16 | 0;
        const v = c === 'x' ? r : (r & 0x3 | 0x8);
        return v.toString(16);
    });
}

function formatFileSize(bytes) {
    if (bytes < 1024) return bytes + ' B';
    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
    return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
}

// Export for global access
window.uploadFilesEnhanced = uploadFilesEnhanced;
window.removeFileEnhanced = removeFileEnhanced;
window.showLabelingSection = showLabelingSection;
window.selectDevice = selectDevice;