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

{% block title %}TikTok — Monthly Excel Import{% endblock %}

{% block content %}
<div class="container-fluid py-4">

    <div class="d-flex align-items-center justify-content-between mb-4">
        <div>
            <h4 class="mb-1 font-weight-bold" style="color:#25242b;">
                <i class="fas fa-file-excel text-success mr-2"></i>TikTok Monthly Excel Import
            </h4>
            <p class="text-muted mb-0">Upload → Analyze → Review → Post. Nothing is posted until you confirm.</p>
        </div>
        <a href="{% url 'integrate:dashboard' %}" class="btn btn-outline-secondary">
            <i class="fas fa-arrow-left mr-1"></i> Back to Dashboard
        </a>
    </div>

    <!-- ══════════════════ STEP 1: UPLOAD ══════════════════ -->
    <div id="uploadCard" class="row">
        <div class="col-lg-6 mb-4">
            <div class="card shadow-sm border-0 h-100" style="border-radius:14px;">
                <div class="card-body p-4">

                    {% if not has_shops %}
                        <div class="alert alert-warning d-flex align-items-center" role="alert">
                            <i class="fas fa-exclamation-triangle mr-2"></i>
                            No TikTok shop found. Please add a shop first.
                        </div>
                    {% endif %}

                    <form id="excelUploadForm">
                        {% csrf_token %}

                        <div class="form-group">
                            <label class="font-weight-bold">Select TikTok Shop</label>
                            <select name="shop_id" id="shopSelect" class="form-control" {% if not has_shops %}disabled{% endif %} required>
                                {% for row in shop_stats %}
                                    <option value="{{ row.shop.id }}" {% if forloop.first %}selected{% endif %}>
                                        {{ row.shop.shop_name }}
                                    </option>
                                {% endfor %}
                            </select>
                        </div>

                        <div class="form-group">
                            <label class="font-weight-bold">Excel File (.xlsx)</label>
                            <div class="custom-file">
                                <input type="file" name="excel_file" id="excelFileInput"
                                       class="custom-file-input" accept=".xlsx,.xlsm"
                                       {% if not has_shops %}disabled{% endif %} required>
                                <label class="custom-file-label" for="excelFileInput">Choose file…</label>
                            </div>
                            <small class="text-muted">Export "All Orders" (OrderSKUList) from TikTok Seller Center.</small>
                        </div>

                        <!-- Upload progress bar (real byte-level %) -->
                        <div id="uploadProgressWrap" class="mb-3" style="display:none;">
                            <div class="d-flex justify-content-between small mb-1">
                                <span id="uploadProgressLabel">Uploading…</span>
                                <span id="uploadProgressPct">0%</span>
                            </div>
                            <div class="progress" style="height:10px; border-radius:6px;">
                                <div id="uploadProgressBar" class="progress-bar bg-success" role="progressbar" style="width:0%;"></div>
                            </div>
                        </div>

                        <button type="submit" id="analyzeBtn" class="btn btn-primary btn-block mt-2"
                                {% if not has_shops %}disabled{% endif %}>
                            <i class="fas fa-search mr-1"></i> Upload &amp; Analyze
                        </button>
                    </form>

                </div>
            </div>
        </div>

        <div class="col-lg-6 mb-4">
            <div class="card shadow-sm border-0 h-100" style="border-radius:14px;">
                <div class="card-body p-4">
                    <h6 class="font-weight-bold mb-3"><i class="fas fa-calendar-check text-primary mr-2"></i>Last Posted Order — Per Shop</h6>
                    <p class="text-muted small mb-3">Avoid overlapping export date ranges.</p>
                    {% if shop_stats %}
                        <table class="table table-sm table-borderless mb-0">
                            <tbody>
                            {% for row in shop_stats %}
                                <tr class="border-top">
                                    <td class="py-2 font-weight-bold">{{ row.shop.shop_name }}</td>
                                    <td class="py-2 text-right">
                                        {% if row.last_order_date %}
                                            <span class="badge badge-success px-2 py-1">{{ row.last_order_date|date:"d M Y" }}</span>
                                        {% else %}
                                            <span class="badge badge-secondary px-2 py-1">No orders posted yet</span>
                                        {% endif %}
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- ══════════════════ STEP 2: ANALYSIS RESULT ══════════════════ -->
    <div id="analysisCard" style="display:none;">
        <div class="card border-0 shadow-sm mb-4" style="border-radius:14px;">
            <div class="card-body p-4">
                <h5 class="font-weight-bold mb-4"><i class="fas fa-clipboard-list text-primary mr-2"></i>Analysis Result</h5>

                <div class="row text-center mb-4">
                    <div class="col-6 col-md-2 mb-3">
                        <div class="h3 font-weight-bold mb-0" id="stat_total">0</div>
                        <small class="text-muted text-uppercase">Total Orders</small>
                    </div>
                    <div class="col-6 col-md-2 mb-3">
                        <div class="h3 font-weight-bold text-success mb-0" id="stat_new">0</div>
                        <small class="text-muted text-uppercase">New — Will Post</small>
                    </div>
                    <div class="col-6 col-md-2 mb-3">
                        <div class="h3 font-weight-bold text-info mb-0" id="stat_updates">0</div>
                        <small class="text-muted text-uppercase">Update Only</small>
                    </div>
                    <div class="col-6 col-md-2 mb-3">
                        <div class="h3 font-weight-bold text-warning mb-0" id="stat_refunds">0</div>
                        <small class="text-muted text-uppercase">Cancelled → Refund</small>
                    </div>
                    <div class="col-6 col-md-2 mb-3">
                        <div class="h3 font-weight-bold text-danger mb-0" id="stat_sku">0</div>
                        <small class="text-muted text-uppercase">SKU Not Found</small>
                    </div>
                    <div class="col-6 col-md-2 mb-3">
                        <div class="h3 font-weight-bold text-danger mb-0" id="stat_stock">0</div>
                        <small class="text-muted text-uppercase">Stock Short</small>
                    </div>
                </div>

                <div id="unmatchedProductsBox" class="alert alert-warning" style="display:none;">
                    <div class="d-flex align-items-center justify-content-between flex-wrap">
                        <div>
                            <i class="fas fa-box-open mr-2"></i>
                            <strong><span id="unmatchedCount">0</span></strong> product(s) from this file don't exist in your product list yet.
                        </div>
                        <a id="createProductsBtn" href="#" target="_blank" class="btn btn-sm btn-warning font-weight-bold mt-2 mt-md-0">
                            Create Missing Products
                        </a>
                    </div>
                    <div class="small text-muted mt-2">
                        These orders will stay on Stock Hold until the matching products exist — you can still Post everything
                        else now, then Repost these from the dashboard after creating the products.
                    </div>
                </div>

                <!-- Post progress bar -->
                <div id="postProgressWrap" class="mb-3" style="display:none;">
                    <div class="d-flex justify-content-between small mb-1">
                        <span>Posting to POS…</span>
                        <span id="postProgressPct">0%</span>
                    </div>
                    <div class="progress" style="height:10px; border-radius:6px;">
                        <div id="postProgressBar" class="progress-bar bg-primary progress-bar-striped progress-bar-animated" role="progressbar" style="width:0%;"></div>
                    </div>
                </div>

                <div class="d-flex justify-content-between">
                    <button type="button" id="startOverBtn" class="btn btn-outline-secondary">
                        <i class="fas fa-arrow-left mr-1"></i> Upload a Different File
                    </button>
                    <button type="button" id="postBtn" class="btn btn-success btn-lg font-weight-bold px-4">
                        <i class="fas fa-check-circle mr-1"></i> Post <span id="postCount">0</span> Orders to POS
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- ══════════════════ STEP 3: FINAL RESULT ══════════════════ -->
    <div id="resultCard" style="display:none;">
        <div class="card border-0 shadow-sm mb-4" style="border-radius:14px;">
            <div class="card-body p-4 text-center">
                <i class="fas fa-check-circle text-success mb-3" style="font-size:48px;"></i>
                <h5 class="font-weight-bold mb-3">Import Complete</h5>
                <p id="finalSummaryText" class="text-muted"></p>
                <div id="finalErrorsBox" class="alert alert-warning text-left mt-3" style="display:none; max-height:200px; overflow-y:auto;"></div>
                <a href="{% url 'integrate:dashboard' %}" class="btn btn-primary mt-2">
                    <i class="fas fa-th-large mr-1"></i> Go to Dashboard
                </a>
                <button type="button" id="uploadAnotherBtn" class="btn btn-outline-secondary mt-2 ml-2">
                    Upload Another File
                </button>
            </div>
        </div>
    </div>

    <!-- ── How it works ── -->
    <div id="howItWorksCard" class="card border-0 shadow-sm" style="border-radius:14px;">
        <div class="card-body p-4">
            <h6 class="font-weight-bold mb-3"><i class="fas fa-info-circle text-info mr-2"></i>How This Import Works</h6>
            <ul class="mb-0 small text-muted" style="line-height:1.9;">
                <li><strong>Step 1 — Analyze:</strong> file is parsed and orders are categorized. Nothing is posted yet.</li>
                <li><strong>Step 2 — Review:</strong> see exactly how many orders are new, updates, refunds, or held.</li>
                <li><strong>Step 3 — Post:</strong> click Post to actually create invoices, stock movements, and refunds.</li>
                <li>Orders held for missing SKU/product/stock stay in <strong>Stock Hold</strong> — fix and Repost from the dashboard.</li>
            </ul>
        </div>
    </div>

</div>
{% endblock %}

{% block javascripts %}
<script>
document.addEventListener('DOMContentLoaded', function () {
    var csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;

    var uploadCard      = document.getElementById('uploadCard');
    var analysisCard    = document.getElementById('analysisCard');
    var resultCard      = document.getElementById('resultCard');
    var howItWorksCard  = document.getElementById('howItWorksCard');

    var form            = document.getElementById('excelUploadForm');
    var fileInput       = document.getElementById('excelFileInput');
    var shopSelect      = document.getElementById('shopSelect');
    var analyzeBtn      = document.getElementById('analyzeBtn');

    var uploadWrap  = document.getElementById('uploadProgressWrap');
    var uploadBar   = document.getElementById('uploadProgressBar');
    var uploadPct   = document.getElementById('uploadProgressPct');
    var uploadLabel = document.getElementById('uploadProgressLabel');

    var currentBatchId = null;
    var currentShopId  = null;

    // Bootstrap 4 custom-file label update
    fileInput.addEventListener('change', function (e) {
        var fileName = e.target.files.length ? e.target.files[0].name : 'Choose file…';
        var label = document.querySelector('label[for="excelFileInput"]');
        if (label) label.textContent = fileName;
    });

    // ══════════════════ STEP 1: Upload + Analyze (real progress via XHR) ══════════════════
    form.addEventListener('submit', function (e) {
        e.preventDefault();

        var file = fileInput.files[0];
        if (!file) return;

        currentShopId = shopSelect.value;

        var formData = new FormData();
        formData.append('shop_id', currentShopId);
        formData.append('excel_file', file);
        formData.append('csrfmiddlewaretoken', csrfToken);

        analyzeBtn.disabled = true;
        analyzeBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> Analyzing…';
        uploadWrap.style.display = 'block';
        uploadLabel.textContent = 'Uploading…';

        var xhr = new XMLHttpRequest();
        xhr.open('POST', '{% url "integrate:excel_analyze" %}', true);
        xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

        xhr.upload.onprogress = function (evt) {
            if (evt.lengthComputable) {
                var pct = Math.round((evt.loaded / evt.total) * 100);
                uploadBar.style.width = pct + '%';
                uploadPct.textContent = pct + '%';
                if (pct >= 100) {
                    uploadLabel.textContent = 'Analyzing file… (this can take a moment for large exports)';
                }
            }
        };

        xhr.onload = function () {
            analyzeBtn.disabled = false;
            analyzeBtn.innerHTML = '<i class="fas fa-search mr-1"></i> Upload &amp; Analyze';
            uploadWrap.style.display = 'none';

            var data;
            try { data = JSON.parse(xhr.responseText); } catch (err) { data = null; }

            if (!data || !data.ok) {
                var errMsg = (data && data.error) ? data.error : 'Analysis failed. Please try again.';
                if (typeof Swal !== 'undefined') {
                    Swal.fire({ icon: 'error', title: 'Analysis Failed', text: errMsg });
                } else {
                    alert(errMsg);
                }
                return;
            }

            showAnalysis(data);
        };

        xhr.onerror = function () {
            analyzeBtn.disabled = false;
            analyzeBtn.innerHTML = '<i class="fas fa-search mr-1"></i> Upload &amp; Analyze';
            uploadWrap.style.display = 'none';
            if (typeof Swal !== 'undefined') {
                Swal.fire({ icon: 'error', title: 'Upload Failed', text: 'Network error — please try again.' });
            }
        };

        xhr.send(formData);
    });

    // ══════════════════ STEP 2: Show analysis, wire Post button ══════════════════
    function showAnalysis(data) {
        currentBatchId = data.batch_id;

        document.getElementById('stat_total').textContent    = data.total_orders;
        document.getElementById('stat_new').textContent       = data.new_orders;
        document.getElementById('stat_updates').textContent   = data.updates_only;
        document.getElementById('stat_refunds').textContent   = data.refunds;
        document.getElementById('stat_sku').textContent       = data.sku_not_found;
        document.getElementById('stat_stock').textContent     = data.stock_short;
        document.getElementById('postCount').textContent      = data.new_orders + data.refunds;

        var unmatchedBox = document.getElementById('unmatchedProductsBox');
        if (data.unmatched_products && data.unmatched_products.length) {
            unmatchedBox.style.display = 'block';
            document.getElementById('unmatchedCount').textContent = data.unmatched_products.length;
            document.getElementById('createProductsBtn').href =
                '/integrate/tiktok/bulk-create-products/' + data.batch_id + '/?shop=' + data.shop_id;
        } else {
            unmatchedBox.style.display = 'none';
        }

        uploadCard.style.display     = 'none';
        howItWorksCard.style.display = 'none';
        analysisCard.style.display   = 'block';
    }

    // ══════════════════ STEP 3: Commit / Post ══════════════════
    var postBtn      = document.getElementById('postBtn');
    var postWrap     = document.getElementById('postProgressWrap');
    var postBar      = document.getElementById('postProgressBar');
    var postPct      = document.getElementById('postProgressPct');
    var fakeInterval = null;

    postBtn.addEventListener('click', function () {
        postBtn.disabled = true;
        postBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> Posting…';
        postWrap.style.display = 'block';

        // Simulated progress (server posts synchronously — this gives visual
        // feedback while the request is in flight, then snaps to 100% on completion).
        var simulated = 0;
        postBar.style.width = '0%';
        postPct.textContent = '0%';
        fakeInterval = setInterval(function () {
            if (simulated < 90) {
                simulated += Math.random() * 8;
                if (simulated > 90) simulated = 90;
                postBar.style.width = simulated + '%';
                postPct.textContent = Math.round(simulated) + '%';
            }
        }, 250);

        fetch('{% url "integrate:excel_commit" %}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': csrfToken,
                'X-Requested-With': 'XMLHttpRequest',
            },
            body: JSON.stringify({ shop_id: currentShopId, batch_id: currentBatchId }),
        })
        .then(function (resp) { return resp.json(); })
        .then(function (data) {
            clearInterval(fakeInterval);
            postBar.style.width = '100%';
            postPct.textContent = '100%';

            setTimeout(function () {
                postBtn.disabled = false;
                postBtn.innerHTML = '<i class="fas fa-check-circle mr-1"></i> Post to POS';
                postWrap.style.display = 'none';

                if (!data.ok) {
                    if (typeof Swal !== 'undefined') {
                        Swal.fire({ icon: 'error', title: 'Post Failed', text: data.error || 'Unknown error.' });
                    }
                    return;
                }
                showFinalResult(data);
            }, 400);
        })
        .catch(function () {
            clearInterval(fakeInterval);
            postBtn.disabled = false;
            postBtn.innerHTML = '<i class="fas fa-check-circle mr-1"></i> Post to POS';
            postWrap.style.display = 'none';
            if (typeof Swal !== 'undefined') {
                Swal.fire({ icon: 'error', title: 'Network Error', text: 'Please try again.' });
            }
        });
    });

    function showFinalResult(data) {
        analysisCard.style.display = 'none';
        resultCard.style.display   = 'block';

        document.getElementById('finalSummaryText').textContent =
            data.total_orders + ' orders processed — ' +
            data.posted + ' posted, ' + data.refunded + ' refunded, ' +
            data.updated_only + ' updated, ' + data.stock_hold + ' on stock-hold, ' +
            data.skipped + ' skipped.';

        if (data.errors && data.errors.length) {
            var box = document.getElementById('finalErrorsBox');
            box.style.display = 'block';
            box.innerHTML = '<strong>Some issues occurred:</strong><ul class="mb-0 mt-2">' +
                data.errors.map(function (e) { return '<li>' + e + '</li>'; }).join('') + '</ul>';
        }
    }

    // ══════════════════ Reset flows ══════════════════
    function resetToUpload() {
        analysisCard.style.display   = 'none';
        resultCard.style.display     = 'none';
        uploadCard.style.display     = 'flex';
        howItWorksCard.style.display = 'block';
        form.reset();
        document.querySelector('label[for="excelFileInput"]').textContent = 'Choose file…';
        currentBatchId = null;
    }

    document.getElementById('startOverBtn').addEventListener('click', resetToUpload);
    document.getElementById('uploadAnotherBtn').addEventListener('click', resetToUpload);
});
</script>
{% endblock %}