{% extends "pos/base.html" %}
{% block title %}{% if mode == 'edit' %}Edit{% else %}New{% endif %} Stock Adjustment{% endblock title %}
{% block heading %}{% if mode == 'edit' %}Edit Stock Adjustment #{{ adjustment.adjustment_no }}{% else %}New Stock Adjustment{% endif %}{% endblock heading %}

{% block stylesheets %}
{{ block.super }}

<style>
.select2-container { width: 100% !important; }
.table-lines th, .table-lines td { vertical-align: middle; padding: 0.5rem; }
.table-lines input, .table-lines select { font-size: 0.9rem; }
.qty-input { width: 100px; text-align: center; }
.price-input { width: 100px; }
.btn-remove-row { padding: 0.25rem 0.5rem; }
.variant-select { min-width: 120px; }
.stock-info { font-size: 0.8rem; color: #6c757d; }
.stock-warning { color: #dc3545; font-weight: bold; }
#lines-table tbody tr:hover { background-color: #f8f9fa; }
.product-search { min-width: 200px; }
</style>
{% endblock %}

{% block content %}
<div class="row mb-3">
    <div class="col-12">
        <a href="{% url 'products:stock_adjustment_list' %}" class="btn btn-secondary">
            <i class="fas fa-arrow-left mr-1"></i> Back to List
        </a>
    </div>
</div>

<div class="card">
    <div class="card-body">
        <!-- Header Fields -->
        <div class="form-row mb-4">
            <div class="form-group col-md-3">
                <label>Adjustment #</label>
                <input type="text" class="form-control" id="adjustment_no" 
                       value="{% if mode == 'edit' %}{{ adjustment.adjustment_no }}{% else %}{{ next_adjustment_no }}{% endif %}" 
                       readonly>
            </div>
            <div class="form-group col-md-3">
                <label>Date <span class="text-danger">*</span></label>
                <input type="date" class="form-control" id="adjustment_date" 
                       value="{% if mode == 'edit' %}{{ adjustment.adjustment_date|date:'Y-m-d' }}{% else %}{{ today }}{% endif %}" 
                       required>
            </div>
            <div class="form-group col-md-6">
                <label>Remarks</label>
                <input type="text" class="form-control" id="remarks" 
                       placeholder="Optional description/reason" 
                       value="{% if mode == 'edit' %}{{ adjustment.remarks }}{% endif %}">
            </div>
        </div>

        <!-- Lines Table -->
        <div class="table-responsive">
            <table class="table table-bordered table-lines" id="lines-table">
                <thead class="thead-light">
                    <tr>
                        <th style="width:50px;">#</th>
                        <th style="width:250px;">Product Name</th>
                        <th style="width:150px;">Variant</th>
                        <th style="width:100px;">Stock</th>
                        <th style="width:120px;">Qty (+/-)</th>
                        <th style="width:110px;">P.Price</th>
                        <th style="width:110px;">S.Price</th>
                        <th>Notes</th>
                        <th style="width:50px;"></th>
                    </tr>
                </thead>
                <tbody id="lines-body">
                    <!-- Rows added dynamically -->
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="9">
                            <button type="button" class="btn btn-outline-primary btn-sm" id="btn-add-row">
                                <i class="fas fa-plus mr-1"></i> Add Row
                            </button>
                        </td>
                    </tr>
                </tfoot>
            </table>
        </div>

        <!-- Warnings -->
        <div id="warnings-container" class="alert alert-warning d-none mt-3">
            <strong><i class="fas fa-exclamation-triangle"></i> Warnings:</strong>
            <ul id="warnings-list" class="mb-0 mt-2"></ul>
        </div>

        <!-- Action Buttons -->
        <div class="mt-4">
            <button type="button" class="btn btn-success btn-lg" id="btn-save">
                <i class="fas fa-save mr-1"></i> 
                {% if mode == 'edit' %}Update{% else %}Save{% endif %} Adjustment
            </button>
            <button type="button" class="btn btn-secondary btn-lg ml-2" id="btn-cancel">
                Cancel
            </button>
        </div>
    </div>
</div>
{% endblock content %}

{% block javascripts %}
{{ block.super }}

<script>
document.addEventListener('DOMContentLoaded', function() {
    const csrf = '{{ csrf_token }}';
    const mode = '{{ mode }}';
    const adjustmentId = {% if mode == 'edit' %}{{ adjustment.id }}{% else %}null{% endif %};
    
    // Existing lines data (for edit mode) - FIX: use |safe and handle boolean properly
    const existingLines = JSON.parse('{{ lines_data|escapejs|default:"[]" }}');
    
    let lineCounter = 0;
    const linesBody = document.getElementById('lines-body');
    
    // ================================================================
    // ROW TEMPLATE
    // ================================================================
    function createRow(data = null) {
        lineCounter++;
        const rowId = `row-${lineCounter}`;
        const lineUid = (data && data.line_uid) ? data.line_uid : generateUUID();
        
        const tr = document.createElement('tr');
        tr.id = rowId;
        tr.dataset.lineUid = lineUid;
        
        tr.innerHTML = `
            <td class="text-center">${lineCounter}</td>
            <td>
                <select class="form-control product-search" data-row="${rowId}">
                    <option value="">Search by name...</option>
                </select>
            </td>
            <td>
                <select class="form-control variant-select" data-row="${rowId}" disabled>
                    <option value="">-</option>
                </select>
            </td>
            <td class="stock-cell text-center">
                <span class="stock-info">-</span>
            </td>
            <td>
                <input type="number" class="form-control qty-input" step="any" placeholder="0" data-row="${rowId}">
            </td>
            <td>
                <input type="number" class="form-control price-input" step="any" placeholder="0" data-row="${rowId}" data-field="purchase">
            </td>
            <td>
                <input type="number" class="form-control price-input" step="any" placeholder="0" data-row="${rowId}" data-field="sale">
            </td>
            <td>
                <input type="text" class="form-control remarks-input" placeholder="Optional" data-row="${rowId}" data-field="remarks">
            </td>
            <td class="text-center">
                <button type="button" class="btn btn-danger btn-sm btn-remove-row" data-row="${rowId}">
                    <i class="fas fa-times"></i>
                </button>
            </td>
        `;
        
        // Store hidden data
        tr.dataset.productId = (data && data.product_id) ? data.product_id : '';
        tr.dataset.prodId = (data && data.prod_id) ? data.prod_id : '';
        tr.dataset.isMultiVariant = (data && data.is_multi_variant) ? 'true' : 'false';
        tr.dataset.variants = JSON.stringify((data && data.variants) ? data.variants : []);
        
        linesBody.appendChild(tr);
        
        // Initialize Select2
        const $productSelect = $(tr).find('.product-search');
        initProductSearch($productSelect);
        
        // If edit mode with data, populate
        if (data && data.product_id) {
            populateRow(tr, data);
        }
        
        // Bind events
        bindRowEvents(tr);
        
        return tr;
    }
    
    // ================================================================
    // INITIALIZE SELECT2 FOR PRODUCT SEARCH (search by NAME)
    // ================================================================
    function initProductSearch($select) {
        $select.select2({
            ajax: {
                url: '{% url "products:adjustment_search_product" %}',
                type: 'POST',
                headers: { 'X-CSRFToken': csrf },
                dataType: 'json',
                delay: 250,
                data: function(params) {
                    return { term: params.term || '' };
                },
                processResults: function(data) {
                    return {
                        results: data.map(item => ({
                            id: item.id,
                            text: item.text,
                            data: item
                        }))
                    };
                }
            },
            placeholder: 'Search by name...',
            allowClear: true,
            minimumInputLength: 1
        });
        
        // On product select - fill prices and move to Qty
        $select.on('select2:select', function(e) {
            const row = document.getElementById($(this).data('row'));
            const productData = e.params.data.data;
            onProductSelected(row, productData);
        });
        
        // On clear
        $select.on('select2:clear', function(e) {
            const row = document.getElementById($(this).data('row'));
            clearRow(row);
        });
    }
    
    // ================================================================
    // ON PRODUCT SELECTED - FIX: Properly load prices
    // ================================================================
    function onProductSelected(row, data) {
        row.dataset.productId = data.id;
        row.dataset.prodId = data.prod_id;
        row.dataset.isMultiVariant = data.is_multi_variant ? 'true' : 'false';
        row.dataset.variants = JSON.stringify(data.variants || []);
        
        // FIX: Fill prices properly
        const purchaseInput = row.querySelector('[data-field="purchase"]');
        const saleInput = row.querySelector('[data-field="sale"]');
        
        purchaseInput.value = parseFloat(data.purchase_price) || 0;
        saleInput.value = parseFloat(data.l_sale_price) || 0;
        
        // Handle variant dropdown
        const variantSelect = row.querySelector('.variant-select');
        const stockCell = row.querySelector('.stock-cell');
        
        if (data.is_multi_variant && data.variants && data.variants.length > 0) {
            // Enable and populate variant dropdown
            variantSelect.disabled = false;
            variantSelect.innerHTML = '<option value="">Select variant...</option>';
            
            data.variants.forEach(v => {
                const opt = document.createElement('option');
                opt.value = v.id;
                opt.textContent = `${v.spec_a} (${v.stock})`;
                opt.dataset.stock = v.stock;
                variantSelect.appendChild(opt);
            });
            
            stockCell.innerHTML = '<span class="stock-info">Select variant</span>';
            
            // Focus on variant dropdown (multi-variant product)
            setTimeout(() => {
                variantSelect.focus();
            }, 100);
        } else {
            // Single variant / default
            variantSelect.disabled = true;
            variantSelect.innerHTML = '<option value="">-</option>';
            stockCell.innerHTML = `<span class="stock-info">${data.present_stock || 0}</span>`;
            
            // Focus qty input (single variant product)
            setTimeout(() => {
                row.querySelector('.qty-input').focus();
            }, 100);
        }
    }
    
    // ================================================================
    // POPULATE ROW (for edit mode) - FIX: Handle booleans properly
    // ================================================================
    function populateRow(row, data) {
        // Set product in Select2
        const $select = $(row).find('.product-search');
        const option = new Option(`${data.product_code} — ${data.product_name}`, data.product_id, true, true);
        $select.append(option).trigger('change');
        
        // Set stored data - FIX: Convert boolean to string
        row.dataset.productId = data.product_id || '';
        row.dataset.prodId = data.prod_id || '';
        row.dataset.isMultiVariant = data.is_multi_variant ? 'true' : 'false';
        row.dataset.variants = JSON.stringify(data.variants || []);
        
        // Variant dropdown
        const variantSelect = row.querySelector('.variant-select');
        const stockCell = row.querySelector('.stock-cell');
        
        if (data.is_multi_variant && data.variants && data.variants.length > 0) {
            variantSelect.disabled = false;
            variantSelect.innerHTML = '<option value="">Select variant...</option>';
            
            data.variants.forEach(v => {
                const opt = document.createElement('option');
                opt.value = v.id;
                opt.textContent = `${v.spec_a} (${v.stock})`;
                opt.dataset.stock = v.stock;
                if (v.id === data.variant_id) opt.selected = true;
                variantSelect.appendChild(opt);
            });
            
            // Show selected variant stock
            const selVar = data.variants.find(v => v.id === data.variant_id);
            if (selVar) {
                stockCell.innerHTML = `<span class="stock-info">${selVar.stock}</span>`;
            }
        } else {
            variantSelect.disabled = true;
            let defaultStock = 0;
            if (data.variants && data.variants.length > 0) {
                const defaultVar = data.variants.find(v => v.is_default);
                defaultStock = defaultVar ? defaultVar.stock : 0;
            }
            stockCell.innerHTML = `<span class="stock-info">${defaultStock}</span>`;
        }
        
        // Fill other fields
        row.querySelector('.qty-input').value = data.qty || '';
        row.querySelector('[data-field="purchase"]').value = data.purchase_price || 0;
        row.querySelector('[data-field="sale"]').value = data.sale_price || 0;
        row.querySelector('[data-field="remarks"]').value = data.line_remarks || '';
    }
    
    // ================================================================
    // BIND ROW EVENTS - FIX: Add Enter key navigation
    // ================================================================
    function bindRowEvents(row) {
        const variantSelect = row.querySelector('.variant-select');
        const stockCell = row.querySelector('.stock-cell');
        
        // Variant change - update stock display
        variantSelect.addEventListener('change', function() {
            const selectedOpt = this.options[this.selectedIndex];
            if (selectedOpt && selectedOpt.dataset.stock !== undefined) {
                stockCell.innerHTML = `<span class="stock-info">${selectedOpt.dataset.stock}</span>`;
            }
        });
        
        // Variant select Enter key - move to Qty
        variantSelect.addEventListener('keydown', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                row.querySelector('.qty-input').focus();
            }
        });
        
        // Qty change - check for negative warning
        row.querySelector('.qty-input').addEventListener('change', function() {
            const qty = parseFloat(this.value) || 0;
            const currentStock = parseFloat(stockCell.textContent) || 0;
            
            if (qty < 0 && Math.abs(qty) > currentStock) {
                const stockInfo = stockCell.querySelector('.stock-info');
                if (stockInfo) stockInfo.classList.add('stock-warning');
            } else {
                const stockInfo = stockCell.querySelector('.stock-info');
                if (stockInfo) stockInfo.classList.remove('stock-warning');
            }
        });
        
        // Remove button
        row.querySelector('.btn-remove-row').addEventListener('click', function() {
            row.remove();
            renumberRows();
        });
        
        // ============================================================
        // ENTER KEY NAVIGATION: Qty → P.Price → S.Price → Notes → New Row
        // ============================================================
        const qtyInput = row.querySelector('.qty-input');
        const purchaseInput = row.querySelector('[data-field="purchase"]');
        const saleInput = row.querySelector('[data-field="sale"]');
        const remarksInput = row.querySelector('[data-field="remarks"]');
        
        qtyInput.addEventListener('keydown', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                purchaseInput.focus();
                purchaseInput.select();
            }
        });
        
        purchaseInput.addEventListener('keydown', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                saleInput.focus();
                saleInput.select();
            }
        });
        
        saleInput.addEventListener('keydown', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                remarksInput.focus();
            }
        });
        
        remarksInput.addEventListener('keydown', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                // Create new row and open its select2 with focus
                const newRow = createRow();
                setTimeout(() => {
                    const $newSelect = $(newRow).find('.product-search');
                    $newSelect.select2('open');
                    // Focus on search input inside select2 dropdown
                    setTimeout(() => {
                        const searchField = document.querySelector('.select2-container--open .select2-search__field');
                        if (searchField) searchField.focus();
                    }, 50);
                }, 100);
            }
        });
    }
    
    // ================================================================
    // CLEAR ROW
    // ================================================================
    function clearRow(row) {
        row.dataset.productId = '';
        row.dataset.prodId = '';
        row.dataset.isMultiVariant = 'false';
        row.dataset.variants = '[]';
        
        row.querySelector('.variant-select').disabled = true;
        row.querySelector('.variant-select').innerHTML = '<option value="">-</option>';
        row.querySelector('.stock-cell').innerHTML = '<span class="stock-info">-</span>';
        row.querySelector('.qty-input').value = '';
        row.querySelector('[data-field="purchase"]').value = '';
        row.querySelector('[data-field="sale"]').value = '';
        row.querySelector('[data-field="remarks"]').value = '';
    }
    
    // ================================================================
    // RENUMBER ROWS
    // ================================================================
    function renumberRows() {
        const rows = linesBody.querySelectorAll('tr');
        rows.forEach((row, idx) => {
            row.querySelector('td:first-child').textContent = idx + 1;
        });
    }
    
    // ================================================================
    // GENERATE UUID
    // ================================================================
    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);
        });
    }
    
    // ================================================================
    // COLLECT LINES DATA
    // ================================================================
    function collectLinesData() {
        const lines = [];
        const rows = linesBody.querySelectorAll('tr');
        
        rows.forEach(row => {
            const productId = row.dataset.productId;
            if (!productId) return; // skip empty rows
            
            const variantSelect = row.querySelector('.variant-select');
            const variantId = variantSelect.value || null;
            
            lines.push({
                line_uid: row.dataset.lineUid,
                product_id: parseInt(productId),
                variant_id: variantId ? parseInt(variantId) : null,
                qty: parseFloat(row.querySelector('.qty-input').value) || 0,
                purchase_price: parseFloat(row.querySelector('[data-field="purchase"]').value) || 0,
                sale_price: parseFloat(row.querySelector('[data-field="sale"]').value) || 0,
                line_remarks: row.querySelector('[data-field="remarks"]').value || ''
            });
        });
        
        return lines;
    }
    
    // ================================================================
    // VALIDATE
    // ================================================================
    function validate() {
        const date = document.getElementById('adjustment_date').value;
        if (!date) {
            alert('Date is required');
            return false;
        }
        
        const lines = collectLinesData();
        if (lines.length === 0) {
            alert('At least one line item is required');
            return false;
        }
        
        for (let i = 0; i < lines.length; i++) {
            if (!lines[i].product_id) {
                alert(`Line ${i+1}: Product is required`);
                return false;
            }
            if (lines[i].qty === 0) {
                alert(`Line ${i+1}: Qty cannot be zero`);
                return false;
            }
        }
        
        return true;
    }
    
    // ================================================================
    // SAVE
    // ================================================================
    function save() {
        if (!validate()) return;
        
        const payload = {
            adjustment_id: adjustmentId,
            adjustment_date: document.getElementById('adjustment_date').value,
            remarks: document.getElementById('remarks').value,
            lines: collectLinesData()
        };
        
        const saveBtn = document.getElementById('btn-save');
        saveBtn.disabled = true;
        saveBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> Saving...';
        
        fetch('{% url "products:stock_adjustment_save" %}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': csrf,
                'X-Requested-With': 'XMLHttpRequest'
            },
            body: JSON.stringify(payload)
        })
        .then(res => res.json())
        .then(data => {
            if (data.ok) {
                // Show warnings if any
                if (data.warnings && data.warnings.length > 0) {
                    const warnContainer = document.getElementById('warnings-container');
                    const warnList = document.getElementById('warnings-list');
                    warnList.innerHTML = data.warnings.map(w => `<li>${w}</li>`).join('');
                    warnContainer.classList.remove('d-none');
                }
                
                // Redirect to detail page
                window.location.href = `/products/stock-adjustment/${data.adjustment_id}/`;
            } else {
                alert(data.message || 'Save failed');
                saveBtn.disabled = false;
                saveBtn.innerHTML = '<i class="fas fa-save mr-1"></i> Save Adjustment';
            }
        })
        .catch(err => {
            console.error(err);
            alert('Network error');
            saveBtn.disabled = false;
            saveBtn.innerHTML = '<i class="fas fa-save mr-1"></i> Save Adjustment';
        });
    }
    
    // ================================================================
    // EVENT BINDINGS
    // ================================================================
    document.getElementById('btn-add-row').addEventListener('click', function() {
        const newRow = createRow();
        setTimeout(() => {
            const $newSelect = $(newRow).find('.product-search');
            $newSelect.select2('open');
            setTimeout(() => {
                const searchField = document.querySelector('.select2-container--open .select2-search__field');
                if (searchField) searchField.focus();
            }, 50);
        }, 100);
    });
    
    document.getElementById('btn-save').addEventListener('click', save);
    document.getElementById('btn-cancel').addEventListener('click', () => {
        if (confirm('Discard changes?')) {
            window.location.href = '{% url "products:stock_adjustment_list" %}';
        }
    });
    
    // Ctrl+S shortcut
    document.addEventListener('keydown', function(e) {
        if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 's') {
            e.preventDefault();
            save();
        }
    });
    
    // ================================================================
    // INIT
    // ================================================================
    if (mode === 'edit' && existingLines && existingLines.length > 0) {
        existingLines.forEach(lineData => createRow(lineData));
    } else if (mode !== 'edit') {
        // Add only 1 empty row for new adjustment
        createRow();
    }
    
    // Focus on first product search with proper Select2 focus (only for new adjustment)
    if (mode !== 'edit') {
        setTimeout(() => {
            const firstSearch = document.querySelector('.product-search');
            if (firstSearch) {
                $(firstSearch).select2('open');
                // Focus on search input inside select2 dropdown
                setTimeout(() => {
                    const searchField = document.querySelector('.select2-container--open .select2-search__field');
                    if (searchField) searchField.focus();
                }, 50);
            }
        }, 300);
    }
});
</script>
{% endblock %}