{% extends "pos/base.html" %}
{% load static %}

{% block title %}Remove Duplicate Products{% endblock title %}
{% block heading %}Remove Duplicate Products{% endblock heading %}

{% block stylesheets %}
{{ block.super }}
<style>
    .stats-card {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 20px;
    }
    .stats-card h2 {
        font-size: 2.5rem;
        margin: 0;
    }
    .stats-card p {
        margin: 0;
        opacity: 0.9;
    }
    .duplicate-group {
        border: 1px solid #e3e6f0;
        border-radius: 8px;
        margin-bottom: 15px;
        overflow: hidden;
    }
    .duplicate-group-header {
        background: #f8f9fc;
        padding: 12px 15px;
        border-bottom: 1px solid #e3e6f0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .duplicate-group-header h6 {
        margin: 0;
        font-weight: 600;
    }
    .badge-duplicate {
        background: #e74a3b;
        color: white;
        padding: 4px 10px;
        border-radius: 20px;
        font-size: 0.8rem;
    }
    .original-row {
        background: #d4edda !important;
    }
    .original-badge {
        background: #1cc88a;
        color: white;
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 0.75rem;
    }
    .duplicate-badge {
        background: #e74a3b;
        color: white;
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 0.75rem;
    }
    .loading-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
    }
    .loading-spinner {
        background: white;
        padding: 30px 50px;
        border-radius: 10px;
        text-align: center;
    }
    .empty-state {
        text-align: center;
        padding: 60px 20px;
        color: #858796;
    }
    .empty-state i {
        font-size: 4rem;
        margin-bottom: 20px;
        color: #1cc88a;
    }
    .btn-remove-single {
        padding: 2px 8px;
        font-size: 0.8rem;
    }
    .action-buttons {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin-bottom: 20px;
    }
    .table-sm td, .table-sm th {
        padding: 0.4rem 0.5rem;
        font-size: 0.85rem;
    }
</style>
{% endblock stylesheets %}

{% block content %}

<!-- Back Button -->
<div class="row ml-0 mb-3">
    <a href="{% url 'products:products_list' %}">
        <button type="button" class="btn btn-info font-weight-bold">
            <i class="fas fa-long-arrow-alt-left mr-2"></i> Back to Products
        </button>
    </a>
</div>

<!-- Stats Cards -->
<div class="row mb-4">
    <div class="col-md-4">
        <div class="stats-card">
            <h2 id="statsGroups">-</h2>
            <p>Duplicate Groups</p>
        </div>
    </div>
    <div class="col-md-4">
        <div class="stats-card" style="background: linear-gradient(135deg, #e74a3b 0%, #be2617 100%);">
            <h2 id="statsItems">-</h2>
            <p>Total Duplicate Items</p>
        </div>
    </div>
    <div class="col-md-4">
        <div class="stats-card" style="background: linear-gradient(135deg, #1cc88a 0%, #13855c 100%);">
            <h2 id="statsOriginals">-</h2>
            <p>Original Items (Will Keep)</p>
        </div>
    </div>
</div>

<!-- Action Buttons -->
<div class="action-buttons">
    <button type="button" class="btn btn-primary font-weight-bold" id="btnLoadDuplicates">
        <i class="fas fa-search mr-2"></i> Load Duplicate Items
    </button>
    <button type="button" class="btn btn-danger font-weight-bold" id="btnRemoveAll" disabled>
        <i class="fas fa-trash-alt mr-2"></i> Remove ALL Duplicates Globally
    </button>
    <button type="button" class="btn btn-secondary" id="btnRefresh" style="display:none;">
        <i class="fas fa-sync-alt mr-2"></i> Refresh
    </button>
</div>

<!-- Info Alert -->
<div class="alert alert-info">
    <i class="fas fa-info-circle mr-2"></i>
    <strong>How it works:</strong> 
    Products with the same <code>product_code</code> AND <code>name</code> are considered duplicates. 
    The <span class="badge badge-success">ORIGINAL</span> (first created) item will be kept, 
    and all <span class="badge badge-danger">DUPLICATE</span> items will be removed along with their 
    stock history and sub-product records.
</div>

<!-- Duplicates Container -->
<div id="duplicatesContainer">
    <div class="empty-state" id="emptyState">
        <i class="fas fa-check-circle"></i>
        <h4>Click "Load Duplicate Items" to scan for duplicates</h4>
        <p>All duplicate products will be shown here grouped by product code and name.</p>
    </div>
</div>

<!-- Loading Overlay -->
<div class="loading-overlay" id="loadingOverlay" style="display:none;">
    <div class="loading-spinner">
        <div class="spinner-border text-primary mb-3" role="status">
            <span class="sr-only">Loading...</span>
        </div>
        <p id="loadingText">Loading duplicates...</p>
    </div>
</div>

<!-- Confirm Remove All Modal -->
<div class="modal fade" id="confirmRemoveAllModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title">
                    <i class="fas fa-exclamation-triangle mr-2"></i>
                    Confirm Remove ALL Duplicates
                </h5>
                <button type="button" class="close text-white" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p><strong>Warning!</strong> This action will:</p>
                <ul>
                    <li>Remove <strong id="confirmCount">0</strong> duplicate products</li>
                    <li>Delete all related <strong>stock history</strong> records</li>
                    <li>Delete all related <strong>sub-product</strong> records</li>
                    <li>Delete all related <strong>variants</strong> and <strong>stock</strong> records</li>
                </ul>
                <p class="text-danger"><strong>This action cannot be undone!</strong></p>
                <div class="form-group">
                    <label>Type <code>CONFIRM</code> to proceed:</label>
                    <input type="text" class="form-control" id="confirmInput" placeholder="Type CONFIRM">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger" id="btnConfirmRemoveAll" disabled>
                    <i class="fas fa-trash-alt mr-1"></i> Remove All Duplicates
                </button>
            </div>
        </div>
    </div>
</div>

{% endblock content %}

{% block javascripts %}
{{ block.super }}
<script>
$(document).ready(function() {
    const csrfToken = '{{ csrf_token }}';
    let duplicatesData = [];
    
    // ═══════════════════════════════════════════════════════════════════════════
    // LOAD DUPLICATES
    // ═══════════════════════════════════════════════════════════════════════════
    
    $('#btnLoadDuplicates').on('click', loadDuplicates);
    $('#btnRefresh').on('click', loadDuplicates);
    
    function loadDuplicates() {
        showLoading('Scanning for duplicate products...');
        
        $.ajax({
            url: "{% url 'pos:load_duplicate_products' %}",
            type: 'GET',
            success: function(response) {
                hideLoading();
                if (response.ok) {
                    duplicatesData = response.duplicates;
                    renderDuplicates(response);
                    $('#btnRefresh').show();
                } else {
                    showError(response.message || 'Failed to load duplicates');
                }
            },
            error: function(xhr) {
                hideLoading();
                showError('Network error. Please try again.');
            }
        });
    }
    
    function renderDuplicates(response) {
        const totalGroups = response.total_duplicate_groups;
        const totalDuplicates = response.total_duplicate_items;
        
        // Update stats
        $('#statsGroups').text(totalGroups);
        $('#statsItems').text(totalDuplicates);
        $('#statsOriginals').text(totalGroups); // One original per group
        
        // Enable/disable remove all button
        $('#btnRemoveAll').prop('disabled', totalDuplicates === 0);
        
        if (totalGroups === 0) {
            $('#duplicatesContainer').html(`
                <div class="empty-state">
                    <i class="fas fa-check-circle"></i>
                    <h4>No Duplicates Found!</h4>
                    <p>All your products have unique product_code + name combinations.</p>
                </div>
            `);
            return;
        }
        
        let html = '';
        
        response.duplicates.forEach((group, idx) => {
            html += `
                <div class="duplicate-group" id="group-${idx}">
                    <div class="duplicate-group-header">
                        <div>
                            <h6>
                                <i class="fas fa-box mr-2"></i>
                                ${escapeHtml(group.product_code)} — ${escapeHtml(group.name)}
                            </h6>
                        </div>
                        <div>
                            <span class="badge-duplicate">
                                ${group.duplicate_count} items (${group.duplicate_count - 1} duplicates)
                            </span>
                            <button class="btn btn-sm btn-outline-danger ml-2 btn-remove-group"
                                    data-name="${escapeAttr(group.name)}"
                                    data-original="${group.original_id}"
                                    data-group="${idx}">
                                <i class="fas fa-trash mr-1"></i> Remove ${group.duplicate_count - 1} Duplicates
                            </button>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-sm table-hover mb-0">
                            <thead class="thead-light">
                                <tr>
                                    <th style="width:5%">#</th>
                                    <th style="width:10%">ID</th>
                                    <th style="width:10%">Prod ID</th>
                                    <th style="width:15%">Code</th>
                                    <th style="width:20%">Name</th>
                                    <th style="width:10%">Stock</th>
                                    <th style="width:10%">Purchase</th>
                                    <th style="width:10%">Sale</th>
                                    <th style="width:10%">Action</th>
                                </tr>
                            </thead>
                            <tbody>
            `;
            
            group.items.forEach((item, itemIdx) => {
                const rowClass = item.is_original ? 'original-row' : '';
                const badge = item.is_original 
                    ? '<span class="original-badge">ORIGINAL</span>' 
                    : '<span class="duplicate-badge">DUPLICATE</span>';
                const actionBtn = item.is_original 
                    ? '<span class="text-muted">Keep</span>'
                    : `<button class="btn btn-danger btn-remove-single btn-remove-one"
                               data-id="${item.id}" data-group="${idx}">
                           <i class="fas fa-times"></i> Remove
                       </button>`;
                
                html += `
                    <tr class="${rowClass}" id="row-${item.id}">
                        <td>${itemIdx + 1}</td>
                        <td>${item.id} ${badge}</td>
                        <td>${item.prod_id}</td>
                        <td>${escapeHtml(item.product_code)}</td>
                        <td>${escapeHtml(item.name)}</td>
                        <td>${item.present_stock}</td>
                        <td>${item.purchase_price}</td>
                        <td>${item.l_sale_price}</td>
                        <td>${actionBtn}</td>
                    </tr>
                `;
            });
            
            html += `
                            </tbody>
                        </table>
                    </div>
                </div>
            `;
        });
        
        $('#duplicatesContainer').html(html);
    }
    
    // ═══════════════════════════════════════════════════════════════════════════
    // REMOVE SINGLE DUPLICATE
    // ═══════════════════════════════════════════════════════════════════════════
    
    $(document).on('click', '.btn-remove-one', function() {
        const btn = $(this);
        const productId = btn.data('id');
        const groupIdx = btn.data('group');
        
        if (!confirm('Are you sure you want to remove this duplicate? This will also remove its stock history and sub-products.')) {
            return;
        }
        
        btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i>');
        
        $.ajax({
            url: "{% url 'pos:remove_duplicate_product' %}",
            type: 'POST',
            contentType: 'application/json',
            headers: {'X-CSRFToken': csrfToken},
            data: JSON.stringify({product_id: productId}),
            success: function(response) {
                if (response.ok) {
                    // Remove the row with animation
                    $(`#row-${productId}`).fadeOut(300, function() {
                        $(this).remove();
                        checkGroupEmpty(groupIdx);
                    });
                    showSuccess(response.message);
                    updateStatsAfterRemoval(1);
                } else {
                    showError(response.message);
                    btn.prop('disabled', false).html('<i class="fas fa-times"></i> Remove');
                }
            },
            error: function() {
                showError('Network error');
                btn.prop('disabled', false).html('<i class="fas fa-times"></i> Remove');
            }
        });
    });
    
    // ═══════════════════════════════════════════════════════════════════════════
    // REMOVE GROUP DUPLICATES
    // ═══════════════════════════════════════════════════════════════════════════
    
    $(document).on('click', '.btn-remove-group', function() {
        const btn = $(this);
        const productCode = btn.data('code');
        const name = btn.data('name');
        const originalId = btn.data('original');
        const groupIdx = btn.data('group');
        
        if (!confirm(`Remove all duplicates for "${productCode}"? Only the original will be kept.`)) {
            return;
        }
        
        btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Removing...');
        
        $.ajax({
            url: "{% url 'pos:remove_group_duplicates' %}",
            type: 'POST',
            contentType: 'application/json',
            headers: {'X-CSRFToken': csrfToken},
            data: JSON.stringify({
                name: name,
                original_id: originalId
            }),
            success: function(response) {
                if (response.ok) {
                    // Remove non-original rows
                    $(`#group-${groupIdx} tbody tr:not(.original-row)`).fadeOut(300, function() {
                        $(this).remove();
                    });
                    // Update header
                    $(`#group-${groupIdx} .badge-duplicate`).text('1 item (0 duplicates)');
                    btn.remove();
                    showSuccess(response.message);
                    updateStatsAfterRemoval(response.removed_count);
                } else {
                    showError(response.message);
                    btn.prop('disabled', false).html('<i class="fas fa-trash mr-1"></i> Remove Duplicates');
                }
            },
            error: function() {
                showError('Network error');
                btn.prop('disabled', false).html('<i class="fas fa-trash mr-1"></i> Remove Duplicates');
            }
        });
    });
    
    // ═══════════════════════════════════════════════════════════════════════════
    // REMOVE ALL DUPLICATES GLOBALLY
    // ═══════════════════════════════════════════════════════════════════════════
    
    $('#btnRemoveAll').on('click', function() {
        const count = parseInt($('#statsItems').text()) || 0;
        $('#confirmCount').text(count);
        $('#confirmInput').val('');
        $('#btnConfirmRemoveAll').prop('disabled', true);
        $('#confirmRemoveAllModal').modal('show');
    });
    
    $('#confirmInput').on('input', function() {
        $('#btnConfirmRemoveAll').prop('disabled', $(this).val() !== 'CONFIRM');
    });
    
    $('#btnConfirmRemoveAll').on('click', function() {
        const btn = $(this);
        btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Removing...');
        
        showLoading('Removing all duplicates globally...');
        $('#confirmRemoveAllModal').modal('hide');
        
        $.ajax({
            url: "{% url 'pos:remove_all_duplicates' %}",
            type: 'POST',
            contentType: 'application/json',
            headers: {'X-CSRFToken': csrfToken},
            data: JSON.stringify({}),
            success: function(response) {
                hideLoading();
                if (response.ok) {
                    showSuccess(response.message);
                    // Reload to show clean state
                    loadDuplicates();
                } else {
                    showError(response.message);
                }
                btn.prop('disabled', false).html('<i class="fas fa-trash-alt mr-1"></i> Remove All Duplicates');
            },
            error: function() {
                hideLoading();
                showError('Network error');
                btn.prop('disabled', false).html('<i class="fas fa-trash-alt mr-1"></i> Remove All Duplicates');
            }
        });
    });
    
    // ═══════════════════════════════════════════════════════════════════════════
    // HELPERS
    // ═══════════════════════════════════════════════════════════════════════════
    
    function checkGroupEmpty(groupIdx) {
        const group = $(`#group-${groupIdx}`);
        const remaining = group.find('tbody tr').length;
        if (remaining <= 1) {
            // Only original left, remove the remove-group button
            group.find('.btn-remove-group').remove();
            group.find('.badge-duplicate').text('1 item (0 duplicates)');
        } else {
            // Update badge
            group.find('.badge-duplicate').text(`${remaining} items (${remaining - 1} duplicates)`);
        }
    }
    
    function updateStatsAfterRemoval(count) {
        const current = parseInt($('#statsItems').text()) || 0;
        const newCount = Math.max(0, current - count);
        $('#statsItems').text(newCount);
        
        if (newCount === 0) {
            $('#btnRemoveAll').prop('disabled', true);
        }
    }
    
    function showLoading(text) {
        $('#loadingText').text(text || 'Loading...');
        $('#loadingOverlay').fadeIn(200);
    }
    
    function hideLoading() {
        $('#loadingOverlay').fadeOut(200);
    }
    
    function showSuccess(msg) {
        // Bootstrap alert
        const alertHtml = `
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <i class="fas fa-check-circle mr-2"></i>${msg}
                <button type="button" class="close" data-dismiss="alert">
                    <span>&times;</span>
                </button>
            </div>
        `;
        $('#duplicatesContainer').before(alertHtml);
        // Auto remove after 5 seconds
        setTimeout(() => $('.alert-success').first().alert('close'), 5000);
    }

    function showError(msg) {
        const alertHtml = `
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <i class="fas fa-exclamation-circle mr-2"></i>${msg}
                <button type="button" class="close" data-dismiss="alert">
                    <span>&times;</span>
                </button>
            </div>
        `;
        $('#duplicatesContainer').before(alertHtml);
        // Auto remove after 5 seconds
        setTimeout(() => $('.alert-danger').first().alert('close'), 5000);
    }
    
    function escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text || '';
        return div.innerHTML;
    }
    
    function escapeAttr(text) {
        return (text || '').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
    }
});
</script>
{% endblock javascripts %}