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

{% block title %}TikTok — Stock Hold Report{% endblock %}

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

    <div class="d-flex align-items-center justify-content-between mb-4 flex-wrap">
        <div>
            <h4 class="mb-1 font-weight-bold" style="color:#25242b;">
                <i class="fas fa-exclamation-triangle text-danger mr-2"></i>Stock Hold Report
            </h4>
            <p class="text-muted mb-0">Orders waiting on missing SKUs, unmatched products, or insufficient stock.</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>

    <!-- ── Shop filter ── -->
    <div class="card border-0 shadow-sm mb-4" style="border-radius:14px;">
        <div class="card-body p-3">
            <form method="get" class="form-inline">
                <label class="mr-2 font-weight-bold small text-muted">Shop</label>
                <select name="shop" class="form-control form-control-sm mr-2" onchange="this.form.submit()">
                    <option value="">All Shops</option>
                    {% for s in all_shops %}
                    <option value="{{ s.id }}" {% if selected_shop == s.id|stringformat:"s" %}selected{% endif %}>{{ s.shop_name }}</option>
                    {% endfor %}
                </select>
            </form>
        </div>
    </div>

    {% if not orders %}
        <div class="alert alert-success"><i class="fas fa-check-circle mr-2"></i>No orders on Stock Hold right now.</div>
    {% else %}

    <!-- ── Bulk action bar ── -->
    <div class="card border-0 shadow-sm mb-3" style="border-radius:14px; position:sticky; top:8px; z-index:10;">
        <div class="card-body p-3 d-flex align-items-center justify-content-between flex-wrap">
            <div class="d-flex align-items-center">
                <input type="checkbox" id="selectAllChk" class="mr-2" style="width:18px; height:18px;">
                <label for="selectAllChk" class="mb-0 font-weight-bold">Select All</label>
                <span class="badge badge-secondary ml-3" id="selectedCount">0 selected</span>
            </div>
            <div class="d-flex align-items-center" style="min-width:260px;">
                <div id="repostProgressWrap" class="mr-3 flex-grow-1" style="display:none; max-width:220px;">
                    <div class="progress" style="height:8px; border-radius:6px;">
                        <div id="repostProgressBar" class="progress-bar bg-success progress-bar-striped progress-bar-animated" style="width:0%;"></div>
                    </div>
                </div>
                <button type="button" id="repostSelectedBtn" class="btn btn-success font-weight-bold" disabled>
                    <i class="fas fa-redo mr-1"></i> Repost Selected (<span id="repostBtnCount">0</span>)
                </button>
            </div>
        </div>
    </div>

    <div id="resultBanner" style="display:none;" class="alert mb-3"></div>

    <!-- ── Orders table ── -->
    <div class="card border-0 shadow-sm" style="border-radius:14px;">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover mb-0" id="ordersTable">
                    <thead class="thead-light">
                        <tr>
                            <th style="width:40px;"></th>
                            <th>Order ID</th>
                            <th>Shop</th>
                            <th>Order Date</th>
                            <th>Hold Reason</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for order in orders %}
                        <tr data-order-row="{{ order.pk }}">
                            <td>
                                <input type="checkbox" class="order-chk" value="{{ order.pk }}" style="width:16px; height:16px;">
                            </td>
                            <td class="font-weight-bold">{{ order.tiktok_order_id }}</td>
                            <td>{{ order.shop.shop_name }}</td>
                            <td>{{ order.order_date|date:"d M Y" }}</td>
                            <td>
                                <span class="small text-danger" style="white-space:pre-line;">{{ order.stock_hold_reason }}</span>
                            </td>
                            <td class="text-right">
                                <a href="{% url 'integrate:order_detail' order.pk %}" class="btn btn-sm btn-outline-primary">View</a>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    {% endif %}
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    var selectAllChk    = document.getElementById('selectAllChk');
    var orderChks        = Array.prototype.slice.call(document.querySelectorAll('.order-chk'));
    var selectedCountEl  = document.getElementById('selectedCount');
    var repostBtnCountEl = document.getElementById('repostBtnCount');
    var repostBtn         = document.getElementById('repostSelectedBtn');
    var progressWrap      = document.getElementById('repostProgressWrap');
    var progressBar       = document.getElementById('repostProgressBar');
    var resultBanner       = document.getElementById('resultBanner');

    if (!orderChks.length) return;

    function updateCount() {
        var checked = orderChks.filter(function (c) { return c.checked; });
        selectedCountEl.textContent = checked.length + ' selected';
        repostBtnCountEl.textContent = checked.length;
        repostBtn.disabled = checked.length === 0;
    }

    selectAllChk.addEventListener('change', function () {
        orderChks.forEach(function (c) { c.checked = selectAllChk.checked; });
        updateCount();
    });

    orderChks.forEach(function (c) {
        c.addEventListener('change', function () {
            if (!c.checked) selectAllChk.checked = false;
            else if (orderChks.every(function (x) { return x.checked; })) selectAllChk.checked = true;
            updateCount();
        });
    });

    repostBtn.addEventListener('click', function () {
        var ids = orderChks.filter(function (c) { return c.checked; }).map(function (c) { return c.value; });
        if (!ids.length) return;

        repostBtn.disabled = true;
        repostBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> Reposting…';
        progressWrap.style.display = 'block';
        resultBanner.style.display = 'none';

        var simulated = 0;
        progressBar.style.width = '0%';
        var fakeInterval = setInterval(function () {
            if (simulated < 90) {
                simulated += Math.random() * 10;
                if (simulated > 90) simulated = 90;
                progressBar.style.width = simulated + '%';
            }
        }, 200);

        var formData = new FormData();
        ids.forEach(function (id) { formData.append('order_ids[]', id); });
        var csrfToken = document.querySelector('[name=csrfmiddlewaretoken]');
        if (csrfToken) formData.append('csrfmiddlewaretoken', csrfToken.value);

        fetch('{% url "integrate:bulk_repost_orders" %}', {
            method: 'POST',
            headers: { 'X-Requested-With': 'XMLHttpRequest' },
            body: formData,
        })
        .then(function (r) { return r.json(); })
        .then(function (data) {
            clearInterval(fakeInterval);
            progressBar.style.width = '100%';

            setTimeout(function () {
                progressWrap.style.display = 'none';
                repostBtn.innerHTML = '<i class="fas fa-redo mr-1"></i> Repost Selected (<span id="repostBtnCount">0</span>)';

                if (!data.ok) {
                    resultBanner.className = 'alert alert-danger mb-3';
                    resultBanner.textContent = data.error || 'Repost failed.';
                    resultBanner.style.display = 'block';
                    repostBtn.disabled = false;
                    return;
                }

                var msg = data.posted + ' posted successfully. ' +
                          data.still_held + ' still on hold (stock/SKU issue remains).';
                resultBanner.className = 'alert ' + (data.still_held > 0 ? 'alert-warning' : 'alert-success') + ' mb-3';

                if (data.still_held_orders && data.still_held_orders.length) {
                    msg += '<ul class="mb-0 mt-2 small">' +
                        data.still_held_orders.map(function (o) {
                            return '<li><strong>' + o.order_id + '</strong>: ' + o.reason + '</li>';
                        }).join('') + '</ul>';
                }
                resultBanner.innerHTML = msg;
                resultBanner.style.display = 'block';

                // Reload after a short delay so the list reflects the new
                // STOCK_HOLD state accurately (posted orders disappear,
                // still-held ones stay with their current reason).
                setTimeout(function () { window.location.reload(); }, 1800);
            }, 400);
        })
        .catch(function () {
            clearInterval(fakeInterval);
            progressWrap.style.display = 'none';
            repostBtn.disabled = false;
            repostBtn.innerHTML = '<i class="fas fa-redo mr-1"></i> Repost Selected (<span id="repostBtnCount">0</span>)';
            resultBanner.className = 'alert alert-danger mb-3';
            resultBanner.textContent = 'Network error — please try again.';
            resultBanner.style.display = 'block';
        });
    });
});
</script>
{% endblock content %}