{% extends "base.html" %}
{% block title %}Create Warehouse Locations{% endblock %}

{% block head %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/warehouse.css') }}">
{% endblock %}

{% block content %}
<div class="warehouse-page-container">
    <!-- Container 1: Add Location (1 part width) -->
    <div class="warehouse-container-1">
        <h3>Add Warehouse Location</h3>
        {% if message %}
        <div class="form-message">{{ message }}</div>
        {% endif %}
        <form method="POST" class="form-centered">
            <label>Location Code:</label>
            <input type="text" name="location_code" maxlength="12" required><br>
            <label>Size:</label>
            <input type="number" name="size"><br>
            <label>Description:</label>
            <input type="text" name="description" maxlength="250"><br>
            <button type="submit" class="btn">Add Location</button>
        </form>
        <!-- Import from CSV section -->
        <div style="margin-top: 24px;">
            <h3 style="font-size: 1.1em;">Import Locations from CSV</h3>
            <div style="display: flex; flex-direction: row; gap: 16px; align-items: center;">
                <span style="font-size: 0.95em;">Bulk import warehouse locations using a CSV file.</span>
                <a href="{{ url_for('warehouse.import_locations_csv') }}" class="btn" style="padding: 4px 12px; font-size: 0.95em;">Go to Import Page</a>
            </div>
        </div>
    </div>

    <!-- Container 2: Warehouse Locations Table (2 parts width) -->
    <div class="warehouse-container-2">
        <h3>Warehouse Locations</h3>
        <div id="location-selection-hint" style="margin-bottom: 10px; font-size: 11px; color: #666; text-align: center;">
            Click on a row to select a location for printing
        </div>
        <div class="warehouse-table-scroll">
            <table class="scan-table" id="locations-table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Location Code</th>
                        <th>Size</th>
                        <th>Description</th>
                    </tr>
                </thead>
                <tbody>
                    {% for loc in locations %}
                    <tr class="location-row" data-location-code="{{ loc[1] }}" 
                        data-location-id="{{ loc[0] }}" 
                        data-location-size="{{ loc[2] or '' }}" 
                        data-location-description="{{ loc[3] or '' }}">
                        <td>{{ loc[0] }}</td>
                        <td>{{ loc[1] }}</td>
                        <td>{{ loc[2] or '' }}</td>
                        <td>{{ loc[3] or '' }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <!-- Container 3: Edit/Delete and Print (1 part width) -->
    <div class="warehouse-container-3">
            <div class="edit-delete-card">
                <h3>Edit/Delete Selected Location</h3>
                <div id="no-selection-message" class="selection-message">
                    Select a location from the table to edit or delete it.
                </div>
                <div id="selected-location-info" class="selection-info" style="display: none;">
                    <strong>Selected:</strong> <span id="selected-location-display"></span>
                </div>
                <div class="button-group">
                    <button id="edit-location-btn" class="btn btn-info" disabled>
                        ✏️ Edit Selected Location
                    </button>
                    <button id="delete-location-btn" class="btn btn-danger" disabled>
                        🗑️ Delete Selected Location
                    </button>
                </div>
            </div>
            {% if session['role'] in ['administrator', 'management'] %}
            <div style="margin-top: 32px; padding: 12px; border-top: 1px solid #eee;">
                <label style="font-weight:bold;">Delete location from table</label>
                <div style="font-size:0.95em; margin-bottom:8px;">To delete a location, enter the ID of the location and press delete.<br>To delete 2 or multiple locations, enter the IDs separated by "," and then press delete.</div>
                <form method="POST" style="display:flex; gap:8px; align-items:center;" onsubmit="return confirmDeleteLocations();">
                    <input type="text" name="delete_ids" placeholder="e.g. 5,7,12" style="width:160px;">
                    <button type="submit" name="delete_locations" value="1" class="btn" style="padding:4px 16px;">Delete Locations</button>
                </form>
                <script>
                function confirmDeleteLocations() {
                    return confirm('Do you really want to delete the selected locations?');
                }
                </script>
            </div>
            {% endif %}
            <hr style="margin: 32px 0 24px 0;">
            <h3 style="font-size: 1.1em; margin-bottom: 12px;">Print Location Barcode</h3>
            <!-- Label Preview -->
            <div id="barcode-label-preview" style="display: flex; align-items: center; justify-content: center;">
                <div style="width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;">
                    <div class="location-text">
                        <div id="location-code-display">Select a location</div>
                    </div>
                    <canvas id="location-barcode" style="display: none;"></canvas>
                    <div id="barcode-placeholder" style="color: #999; font-style: italic; text-align: center;">No location selected</div>
                </div>
            </div>
            <!-- Print Controls -->
            <div style="text-align: center; margin-top: 15px;">
                <div style="margin-bottom: 10px;">
                    <label for="printer-select" style="font-size: 11px; font-weight: 600;">Select Printer:</label>
                    <select id="printer-select" class="form-control form-control-sm" style="width: 200px; margin: 5px auto; font-size: 11px;">
                        <option value="">Loading printers...</option>
                    </select>
                </div>
                <button id="print-barcode-btn" class="btn btn-success" style="font-size: 12px; padding: 6px 20px;" disabled>
                    🖨️ Print Location Barcode
                </button>
                <button onclick="testQZConnection()" class="btn btn-info" style="font-size: 11px; padding: 4px 12px; margin-left: 8px;">
                    🔧 Test QZ Tray
                </button>
                <div id="print-status" style="margin-top: 8px; font-size: 11px;"></div>
            </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div id="delete-modal" class="modal" style="display: none;">
    <div class="modal-content">
        <div class="modal-header">
            <h3>Confirm Delete</h3>
            <span class="close" onclick="closeDeleteModal()">&times;</span>
        </div>
        <div class="modal-body">
            <p>Are you sure you want to delete the following location?</p>
            <table class="confirm-table">
                <tr><td><strong>ID:</strong></td><td id="delete-confirm-id"></td></tr>
                <tr><td><strong>Location Code:</strong></td><td id="delete-confirm-code"></td></tr>
                <tr><td><strong>Size:</strong></td><td id="delete-confirm-size"></td></tr>
                <tr><td><strong>Description:</strong></td><td id="delete-confirm-description"></td></tr>
            </table>
            <div class="modal-buttons">
                <button type="button" class="btn btn-secondary" onclick="closeDeleteModal()">Cancel</button>
                <button type="button" class="btn btn-danger" onclick="confirmDelete()">Delete Location</button>
            </div>
        </div>
    </div>
</div>

<!-- Include required JS libraries -->
<script src="{{ url_for('static', filename='JsBarcode.all.min.js') }}"></script>
<script src="{{ url_for('static', filename='qz-tray.js') }}"></script>
<script src="{{ url_for('static', filename='html2canvas.min.js') }}"></script>

<script>
// Simplified notification system (matching print module)
function showNotification(message, type = 'info') {
    const existingNotifications = document.querySelectorAll('.notification');
    existingNotifications.forEach(n => n.remove());
    
    const notification = document.createElement('div');
    notification.className = `notification alert alert-${type === 'error' ? 'danger' : type === 'success' ? 'success' : type === 'warning' ? 'warning' : 'info'}`;
    notification.style.cssText = `
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 9999;
        max-width: 450px;
        padding: 15px;
        border-radius: 5px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    `;
    
    const formattedMessage = message.replace(/\n/g, '<br>');
    
    notification.innerHTML = `
        <div style="display: flex; align-items: flex-start; justify-content: space-between;">
            <span style="flex: 1; padding-right: 10px; white-space: pre-wrap; font-family: monospace; font-size: 12px;">${formattedMessage}</span>
            <button type="button" onclick="this.parentElement.parentElement.remove()" style="background: none; border: none; font-size: 20px; cursor: pointer; flex-shrink: 0;">&times;</button>
        </div>
    `;
    
    document.body.appendChild(notification);
    
    const timeout = type === 'error' ? 15000 : 5000;
    setTimeout(() => {
        if (notification.parentNode) {
            notification.remove();
        }
    }, timeout);
}

let selectedLocationCode = null;
let qzTray = null;
let availablePrinters = [];

// Initialize QZ Tray connection (matching print module implementation)
async function initializeQZTray() {
    try {
        console.log('🔍 Checking for QZ Tray...');
        
        // Check if QZ Tray library is loaded
        if (typeof qz === 'undefined') {
            console.error('❌ QZ Tray library not loaded');
            const errorMsg = '❌ QZ Tray Library Not Loaded\n\n' +
                           'The QZ Tray JavaScript library failed to load.\n' +
                           'Check the browser console for errors and refresh the page.\n\n' +
                           'Path: /static/qz-tray.js';
            document.getElementById('print-status').textContent = 'Library Error';
            showNotification(errorMsg, 'error');
            return false;
        }
        
        console.log('✅ QZ Tray library loaded');
        console.log('🔒 Using patched qz-tray.js for pairing-key authentication...');
        
        console.log('🔌 Attempting to connect to QZ Tray on client PC...');

        // Set connection closed callback
        qz.websocket.setClosedCallbacks(function() {
            console.warn('⚠️ QZ Tray connection closed');
            document.getElementById('print-status').textContent = 'QZ Tray Disconnected';
        });

        // Connect to QZ Tray running on client PC
        console.log('⏳ Connecting...');
        await qz.websocket.connect();
        qzTray = qz;
        
        const version = await qz.api.getVersion();
        console.log('✅ QZ Tray connected successfully');
        console.log('📋 QZ Tray Version:', version);
        
        document.getElementById('print-status').textContent = 'QZ Tray Connected';
        
        // Load printers
        await loadQZTrayPrinters();
        
        return true;
        
    } catch (error) {
        console.error('❌ QZ Tray connection failed:', error);
        
        let errorMsg = '❌ QZ Tray Connection Failed\n\n';
        let statusText = 'Connection Failed';
        
        if (error.message && error.message.includes('certificate')) {
            errorMsg += '🔒 Certificate Trust Required\n\n';
            errorMsg += 'QZ Tray requires you to trust its certificate:\n';
            errorMsg += '1. Open: https://localhost:8182\n';
            errorMsg += '2. Accept/Trust the security certificate\n';
            errorMsg += '3. Refresh this page and try again\n\n';
            errorMsg += '🔍 This is normal and safe for QZ Tray';
            statusText = 'Certificate Error';
        } else {
            errorMsg += '⚠️ Troubleshooting:\n';
            errorMsg += '1. Make sure QZ Tray is running\n';
            errorMsg += '2. Check firewall settings\n';
            errorMsg += '3. Try restarting QZ Tray\n';
            errorMsg += '4. Restart your browser\n\n';
            errorMsg += 'Error: ' + error.message;
        }
        
        document.getElementById('print-status').textContent = statusText;
        showNotification(errorMsg, 'error');
        return false;
    }
}

// Load available printers from QZ Tray (matching print module)
async function loadQZTrayPrinters() {
    try {
        if (!qzTray) return;
        
        const printers = await qzTray.printers.find();
        availablePrinters = printers;
        
        const printerSelect = document.getElementById('printer-select');
        printerSelect.innerHTML = '<option value="">Select a printer...</option>';
        
        printers.forEach(printer => {
            const option = document.createElement('option');
            option.value = printer;
            option.textContent = printer;
            printerSelect.appendChild(option);
        });
        
        console.log(`📄 Found ${printers.length} printers:`, printers);
        
        // Auto-select first thermal printer if available
        const thermalPrinter = printers.find(p => 
            p.toLowerCase().includes('thermal') || 
            p.toLowerCase().includes('label') ||
            p.toLowerCase().includes('zebra') ||
            p.toLowerCase().includes('epson')
        );
        
        if (thermalPrinter) {
            printerSelect.value = thermalPrinter;
            console.log('🏷️ Auto-selected thermal printer:', thermalPrinter);
        } else if (printers.length > 0) {
            printerSelect.value = printers[0];
            console.log('🖨️ Auto-selected first printer:', printers[0]);
        }
        
        showNotification(`✅ Found ${printers.length} printer(s)`, 'success');
        
    } catch (error) {
        console.error('Error loading printers:', error);
        document.getElementById('printer-select').innerHTML = '<option value="">Failed to load printers</option>';
        showNotification('⚠️ Failed to load printers: ' + error.message, 'warning');
    }
}

// Generate barcode for location
function generateLocationBarcode(locationCode) {
    const canvas = document.getElementById('location-barcode');
    const placeholder = document.getElementById('barcode-placeholder');
    
    if (locationCode) {
        try {
            JsBarcode(canvas, locationCode, {
                format: "CODE128",
                width: 2,
                height: 80,
                displayValue: true,
                fontSize: 12,
                margin: 5
            });
            canvas.style.display = 'block';
            placeholder.style.display = 'none';
        } catch (error) {
            console.error('Error generating barcode:', error);
            canvas.style.display = 'none';
            placeholder.style.display = 'block';
            placeholder.textContent = 'Barcode generation failed';
        }
    } else {
        canvas.style.display = 'none';
        placeholder.style.display = 'block';
        placeholder.textContent = 'No location selected';
    }
}

// Handle location row selection
document.addEventListener('DOMContentLoaded', function() {
    const locationRows = document.querySelectorAll('.location-row');
    const locationCodeDisplay = document.getElementById('location-code-display');
    const printButton = document.getElementById('print-barcode-btn');
    const editButton = document.getElementById('edit-location-btn');
    const deleteButton = document.getElementById('delete-location-btn');
    const noSelectionMessage = document.getElementById('no-selection-message');
    const selectedLocationInfo = document.getElementById('selected-location-info');
    const selectedLocationDisplay = document.getElementById('selected-location-display');
    
    let selectedLocation = null;
    
    locationRows.forEach(row => {
        row.addEventListener('click', function() {
            // Remove selection from other rows
            locationRows.forEach(r => r.classList.remove('selected'));
            
            // Select this row
            this.classList.add('selected');
            
            // Get location data
            selectedLocationCode = this.dataset.locationCode;
            selectedLocation = {
                id: this.cells[0].textContent,
                code: this.cells[1].textContent,
                size: this.cells[2].textContent,
                description: this.cells[3].textContent
            };
            
            // Update display
            locationCodeDisplay.textContent = selectedLocationCode;
            selectedLocationDisplay.textContent = `${selectedLocation.code} (ID: ${selectedLocation.id})`;
            
            // Show/hide selection info
            noSelectionMessage.style.display = 'none';
            selectedLocationInfo.style.display = 'block';
            
            // Generate barcode
            generateLocationBarcode(selectedLocationCode);
            
            // Enable buttons
            printButton.disabled = false;
            editButton.disabled = false;
            deleteButton.disabled = false;
            
            showNotification(`📍 Selected location: ${selectedLocationCode}`, 'info');
        });
    });
    
    // Edit button functionality
    editButton.addEventListener('click', function() {
        if (selectedLocation) {
            openEditModal(selectedLocation);
        }
    });
    
    // Delete button functionality
    deleteButton.addEventListener('click', function() {
        if (selectedLocation) {
            openDeleteModal(selectedLocation);
        }
    });
    
    // Initialize QZ Tray
    initializeQZTray();
});

// Print barcode function with enhanced QZ Tray support
async function printLocationBarcode() {
    if (!selectedLocationCode) {
        showNotification('❌ Please select a location first', 'error');
        return;
    }
    
    const selectedPrinter = document.getElementById('printer-select').value;
    if (!selectedPrinter) {
        showNotification('❌ Please select a printer', 'error');
        return;
    }
    
    const printButton = document.getElementById('print-barcode-btn');
    const printStatus = document.getElementById('print-status');
    
    try {
        printButton.disabled = true;
        printStatus.textContent = 'Generating label...';
        
        // Generate PDF for the 4x8cm label
        const response = await fetch('/generate_location_label_pdf', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                location_code: selectedLocationCode
            })
        });
        
        if (!response.ok) {
            throw new Error('Failed to generate PDF');
        }
        
        const pdfBlob = await response.blob();
        const pdfArrayBuffer = await pdfBlob.arrayBuffer();
        const pdfBase64 = btoa(String.fromCharCode(...new Uint8Array(pdfArrayBuffer)));
        
        printStatus.textContent = 'Sending to printer...';
        
        // Configure QZ Tray for PDF printing with 4x8cm size
        const config = qzTray.configs.create(selectedPrinter, {
            size: { width: 4, height: 8, units: 'cm' },
            margins: { top: 0, right: 0, bottom: 0, left: 0 },
            orientation: 'portrait'
        });
        
        const data = [{
            type: 'pdf',
            format: 'base64',
            data: pdfBase64
        }];
        
        await qzTray.print(config, data);
        
        printStatus.textContent = 'Label printed successfully!';
        showNotification(`✅ Location barcode printed successfully!\n📍 Location: ${selectedLocationCode}\n🖨️ Printer: ${selectedPrinter}`, 'success');
        
        setTimeout(() => {
            printStatus.textContent = '';
        }, 3000);
        
    } catch (error) {
        console.error('Print error:', error);
        printStatus.textContent = 'Print failed: ' + error.message;
        showNotification('❌ Print failed: ' + error.message, 'error');
    } finally {
        printButton.disabled = false;
    }
}

// Add event listener for print button
document.getElementById('print-barcode-btn').addEventListener('click', printLocationBarcode);

// Test QZ Tray connection function (for debugging)
async function testQZConnection() {
    console.log('🔍 ========== QZ TRAY CONNECTION TEST ==========');
    
    const printStatus = document.getElementById('print-status');
    const originalStatus = printStatus.textContent;
    printStatus.textContent = 'Testing QZ Tray...';
    
    let testResults = [];
    
    try {
        // Test 1: Check if library is loaded
        if (typeof qz === 'undefined') {
            testResults.push('❌ Test 1: Library NOT loaded');
            throw new Error('QZ Tray library not loaded');
        }
        testResults.push('✅ Test 1: Library loaded successfully');
        
        // Test 2: Test connection
        if (!qzTray) {
            await initializeQZTray();
        }
        testResults.push('✅ Test 2: Connection successful');
        
        // Test 3: Test printer discovery
        await loadQZTrayPrinters();
        testResults.push(`✅ Test 3: Found ${availablePrinters.length} printers`);
        
        const resultMsg = 'QZ Tray Connection Test Results:\n\n' + testResults.join('\n');
        showNotification(resultMsg, 'success');
        printStatus.textContent = 'Test completed successfully';
        
    } catch (error) {
        testResults.push(`❌ Test failed: ${error.message}`);
        const resultMsg = 'QZ Tray Connection Test Results:\n\n' + testResults.join('\n');
        showNotification(resultMsg, 'error');
        printStatus.textContent = 'Test failed';
    }
    
    setTimeout(() => {
        printStatus.textContent = originalStatus;
    }, 3000);
}

// Add test button functionality (for debugging - can be removed in production)
console.log('🔧 QZ Tray test function available: testQZConnection()');

// Modal Functions for Edit/Delete
function openEditModal(location) {
    document.getElementById('edit-location-id').value = location.id;
    document.getElementById('edit-location-code').value = location.code;
    document.getElementById('edit-size').value = location.size || '';
    document.getElementById('edit-description').value = location.description || '';
    document.getElementById('edit-modal').style.display = 'flex';
}

function closeEditModal() {
    document.getElementById('edit-modal').style.display = 'none';
}

function openDeleteModal(location) {
    document.getElementById('delete-confirm-id').textContent = location.id;
    document.getElementById('delete-confirm-code').textContent = location.code;
    document.getElementById('delete-confirm-size').textContent = location.size || '-';
    document.getElementById('delete-confirm-description').textContent = location.description || '-';
    document.getElementById('delete-modal').style.display = 'flex';
}

function closeDeleteModal() {
    document.getElementById('delete-modal').style.display = 'none';
}

// Handle edit form submission
document.getElementById('edit-form').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    const data = {
        location_id: formData.get('location_id'),
        location_code: formData.get('location_code'),
        size: formData.get('size'),
        description: formData.get('description')
    };
    
    // Send update request
    fetch('/update_location', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(result => {
        if (result.success) {
            showNotification('✅ Location updated successfully!', 'success');
            closeEditModal();
            // Reload page to show changes
            setTimeout(() => window.location.reload(), 1000);
        } else {
            showNotification('❌ Error updating location: ' + result.error, 'error');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showNotification('❌ Error updating location: ' + error.message, 'error');
    });
});

// Handle delete confirmation
function confirmDelete() {
    const locationId = document.getElementById('delete-confirm-id').textContent;
    
    // Send delete request
    fetch('/delete_location', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ location_id: locationId })
    })
    .then(response => response.json())
    .then(result => {
        if (result.success) {
            showNotification('✅ Location deleted successfully!', 'success');
            closeDeleteModal();
            // Reload page to show changes
            setTimeout(() => window.location.reload(), 1000);
        } else {
            showNotification('❌ Error deleting location: ' + result.error, 'error');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showNotification('❌ Error deleting location: ' + error.message, 'error');
    });
}

// Close modals when clicking outside
window.addEventListener('click', function(event) {
    const editModal = document.getElementById('edit-modal');
    const deleteModal = document.getElementById('delete-modal');
    
    if (event.target === editModal) {
        closeEditModal();
    }
    if (event.target === deleteModal) {
        closeDeleteModal();
    }
});
</script>
    </div>
</div>
{% endblock %}