{% extends "base.html" %}
{% import 'components/macros.html' as ui %}

{% block title %}Bulk Import Progress{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/style.css">
    <style>
        body { background: #111827; color: #e5e7eb; font-family: Arial, sans-serif; }
        .container { max-width: 760px; margin: 40px auto; padding: 20px; }
        .card { background: #0f172a; padding: 24px; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.35); border: 1px solid #334155; }
        h2, p { color: #e5e7eb; }
        .progress { height: 18px; background: #1f2937; border-radius: 999px; overflow: hidden; border: 1px solid #374151; }
        .bar { height: 100%; width: {{ job.percent }}%; background: #22c55e; transition: width 180ms ease; }
        .stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 18px 0; }
        .stat { background: #1f2937; border: 1px solid #374151; border-radius: 6px; padding: 12px; }
        .label { color: #9ca3af; font-size: 13px; }
        .value { display: block; color: #f9fafb; font-size: 22px; font-weight: 700; margin-top: 4px; }
        .error { color: #fca5a5; background: rgba(127, 29, 29, 0.28); border: 1px solid rgba(248, 113, 113, 0.45); padding: 12px; border-radius: 6px; }
        a, button { color: white; }
        .actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
        .button { display: inline-block; background: #2563eb; border: none; border-radius: 6px; padding: 10px 14px; text-decoration: none; font-weight: 700; cursor: pointer; }
        .button.secondary { background: #374151; }
        .button:disabled { opacity: 0.6; cursor: not-allowed; }
        @media (max-width: 640px) {
            .stats { grid-template-columns: 1fr; }
        }
    </style>
{% endblock %}
{% block content %}
<div class="container">
    <div class="card">
        <h2>Bulk Import Progress</h2>
        <p id="statusText">Status: {{ job.status }}</p>
        <div class="progress" aria-label="Bulk import progress">
            <div class="bar" id="progressBar"></div>
        </div>
        <p id="rowText">{{ job.processed_rows }} of {{ job.total_rows }} rows processed</p>

        <div class="stats">
            <div class="stat"><span class="label">Inserted</span><span class="value" id="inserted">{{ job.inserted }}</span></div>
            <div class="stat"><span class="label">Updated / Restocked</span><span class="value" id="updated">{{ job.updated }}</span></div>
            <div class="stat"><span class="label">Skipped</span><span class="value" id="skipped">{{ job.skipped }}</span></div>
            <div class="stat"><span class="label">Errors</span><span class="value" id="errors">{{ job.errors }}</span></div>
        </div>

        <p class="error" id="errorBox" {% if not job.last_error %}style="display:none"{% endif %}>{{ job.last_error }}</p>

        <div class="actions">
            <button class="button" id="resumeButton" type="button">Continue Import</button>
            <a class="button secondary" href="/inventory">Open Inventory</a>
            <a class="button secondary" href="/bulk-import-products">Import Another CSV</a>
        </div>
    </div>
</div>

<script>
const jobId = {{ job.id }};
const csrfToken = "{{ csrf_token() }}";
const statusText = document.getElementById("statusText");
const rowText = document.getElementById("rowText");
const progressBar = document.getElementById("progressBar");
const inserted = document.getElementById("inserted");
const updated = document.getElementById("updated");
const skipped = document.getElementById("skipped");
const errors = document.getElementById("errors");
const errorBox = document.getElementById("errorBox");
const resumeButton = document.getElementById("resumeButton");
let running = false;

function renderJob(job) {
    statusText.textContent = `Status: ${job.status}`;
    rowText.textContent = `${job.processed_rows} of ${job.total_rows} rows processed`;
    progressBar.style.width = `${job.percent}%`;
    inserted.textContent = job.inserted;
    updated.textContent = job.updated;
    skipped.textContent = job.skipped;
    errors.textContent = job.errors;
    errorBox.textContent = job.last_error || "";
    errorBox.style.display = job.last_error ? "block" : "none";
    resumeButton.disabled = job.status === "completed" || job.status === "failed";
    resumeButton.textContent = job.status === "completed" ? "Import Complete" : "Continue Import";
}

async function processNextChunk() {
    if (running || resumeButton.disabled) return;
    running = true;
    resumeButton.disabled = true;
    try {
        const response = await fetch(`/bulk-import-products/jobs/${jobId}/process`, {
            method: "POST",
            headers: { "X-CSRF-Token": csrfToken }
        });
        const job = await response.json();
        if (!response.ok) throw new Error(job.error || "Bulk import failed.");
        renderJob(job);
        if (job.status !== "completed" && job.status !== "failed") {
            window.setTimeout(processNextChunk, 150);
        }
    } catch (error) {
        errorBox.textContent = error.message;
        errorBox.style.display = "block";
        resumeButton.disabled = false;
    } finally {
        running = false;
    }
}

resumeButton.addEventListener("click", processNextChunk);
if ("{{ job.status }}" !== "completed" && "{{ job.status }}" !== "failed") {
    window.setTimeout(processNextChunk, 150);
}
</script>
{% endblock %}