Orders Synched
<style>
	:root {
		--test-bg: #f4f5f7;
		--test-ink: #14171a;
		--test-muted: #5b6770;
		--test-border: #d7dce1;
		--test-accent: #0ea5e9;
	}

	.test-page {
		background: var(--test-bg);
		color: var(--test-ink);
		padding: 48px 16px 72px;
		font-family: "Segoe UI", Arial, sans-serif;
	}

	.test-wrap {
		max-width: 820px;
		margin: 0 auto;
		background: #fff;
		border: 1px solid var(--test-border);
		border-radius: 12px;
		padding: 24px;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
	}

	.test-wrap h1 {
		margin: 0 0 8px;
		font-size: 26px;
	}

	.test-wrap p {
		margin: 0 0 20px;
		color: var(--test-muted);
		font-size: 14px;
	}

	.test-actions {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}

	.test-btn {
		padding: 10px 14px;
		border-radius: 8px;
		border: 1px solid var(--test-border);
		background: #fff;
		color: var(--test-ink);
		text-decoration: none;
		font-weight: 600;
		font-size: 13px;
		cursor: pointer;
	}

	.test-btn.primary {
		background: var(--test-accent);
		border-color: var(--test-accent);
		color: #fff;
	}

	.test-btn[disabled] {
		opacity: 0.6;
		cursor: not-allowed;
	}

	.test-status {
		margin-top: 16px;
		padding: 12px 14px;
		border-radius: 8px;
		border: 1px solid var(--test-border);
		font-size: 13px;
		color: var(--test-muted);
		background: #fbfbfc;
	}

	.test-status.success {
		border-color: #16a34a;
		background: #ecfdf3;
		color: #14532d;
	}

	.test-log {
		margin-top: 12px;
		border: 1px solid var(--test-border);
		border-radius: 8px;
		background: #fff;
		max-height: 220px;
		overflow: auto;
		padding: 10px 12px;
		font-size: 12px;
		color: #2d3a40;
		white-space: pre-wrap;
	}

	.test-progress {
		margin-top: 12px;
		background: #eef2f6;
		border-radius: 999px;
		padding: 4px;
		overflow: hidden;
		border: 1px solid var(--test-border);
	}

	.test-progress__bar {
		height: 10px;
		width: 0%;
		border-radius: 999px;
		background: var(--test-accent);
		transition: width 0.3s ease;
	}

	.test-progress__text {
		margin-top: 8px;
		font-size: 12px;
		color: var(--test-muted);
		text-align: right;
	}
</style>

<main class="test-page">
	<div class="test-wrap">
		<h1>Test Tools</h1>
		<p>Simple controls for Shopify sync and quick checks.</p>
		<div class="test-actions">
			<button class="test-btn primary" id="sync-products-batched" type="button">Sync Products</button>
			<a class="test-btn" href="/test?syncProductsLocations=1">Sync Locations</a>
			<a class="test-btn" href="/test?syncOrders=1">Sync Orders</a>
			<a class="test-btn" href="/test?testQuote=1">Test Quote</a>
		</div>
		<div class="test-status" id="sync-status" aria-live="polite">
			Ready.
		</div>
		<div class="test-progress" id="sync-progress" hidden>
			<div class="test-progress__bar" id="sync-progress-bar"></div>
			<div class="test-progress__text" id="sync-progress-text">Starting...</div>
		</div>
		<div class="test-log" id="sync-log" hidden></div>
		<div class="test-status">
			Use query flags for other endpoints (example: <code>?testInfoSingleOrder=ID</code>).
		</div>
	</div>
</main>

<script>
	(function () {
		var btn = document.getElementById('sync-products-batched');
		var btnSecondary = document.getElementById('sync-products-batched-secondary');
		var statusEl = document.getElementById('sync-status');
		var progressWrap = document.getElementById('sync-progress');
		var progressBar = document.getElementById('sync-progress-bar');
		var progressText = document.getElementById('sync-progress-text');
		var logEl = document.getElementById('sync-log');

		if (!btn || !progressBar) {
			return;
		}

		var totalProducts = null;
		var processed = 0;
		var matched = 0;
		var inFlight = false;
		var jobId = '';

		function setButtonsDisabled(disabled) {
			btn.disabled = disabled;
			if (btnSecondary) {
				btnSecondary.disabled = disabled;
			}
		}

		function appendLog(text) {
			if (!logEl || !text) {
				return;
			}
			logEl.hidden = false;
			var clean = String(text).replace(/<br\s*\/?>/gi, '\n');
			clean = clean.replace(/\r\n/g, '\n');
			var lines = clean.split('\n').map(function (line) {
				return line.trim();
			}).filter(function (line) {
				return line.length > 0;
			});
			if (!lines.length) {
				return;
			}
			var prefix = logEl.textContent ? '\n' : '';
			logEl.textContent += prefix + lines.join('\n');
			logEl.scrollTop = logEl.scrollHeight;
		}

		function updateProgress(done) {
			if (totalProducts) {
				var percent = Math.min(100, Math.round((processed / totalProducts) * 100));
				progressBar.style.width = percent + '%';
				progressText.textContent = percent + '% - ' + processed + ' of ' + totalProducts + ' products scanned, ' + matched + ' matched.';
			} else {
				progressBar.style.width = done ? '100%' : '60%';
				progressText.textContent = processed + ' products scanned, ' + matched + ' matched.';
			}
		}

		function setStatus(text) {
			statusEl.textContent = text;
		}

		function fetchBatch(cursor) {
			if (inFlight) {
				return;
			}
			inFlight = true;
			progressWrap.hidden = false;
			statusEl.classList.remove('success');
			setStatus('Sync running...');

			var url = '/test?syncProductsBatch=1&limit=50&collections=' + (cursor ? '0' : '1');
			if (jobId) {
				url += '&job_id=' + encodeURIComponent(jobId);
			}
			if (cursor) {
				url += '&cursor=' + encodeURIComponent(cursor);
			}

			fetch(url, { credentials: 'same-origin' })
				.then(function (response) {
					return response.json();
				})
				.then(function (data) {
					inFlight = false;
					if (!data || data.error) {
						setStatus('Sync failed. Check logs.');
						setButtonsDisabled(false);
						return;
					}

					if (data.log) {
						appendLog(data.log);
					}

					if (data.job_id && !jobId) {
						jobId = data.job_id;
					}

					if (data.total_products && !totalProducts) {
						totalProducts = data.total_products;
					}

					processed += data.processed || 0;
					matched += data.matched || 0;
					updateProgress(!!data.done);

					if (data.done) {
						statusEl.classList.add('success');
						setStatus('Sync complete. Any missing images or console output are listed in the log below.');
						if (data.missing_skus && data.missing_skus.length) {
							appendLog('--- Missing SKUs ---');
							data.missing_skus.forEach(function (sku) {
								appendLog('SKU not found: ' + sku);
							});
						}
						setButtonsDisabled(false);
						return;
					}

					setStatus('Sync running... Next batch starting.');
					fetchBatch(data.next_page_info || '');
				})
				.catch(function () {
					inFlight = false;
					setStatus('Sync failed. Check console/logs.');
					setButtonsDisabled(false);
				});
		}

		function startSync() {
			if (inFlight) {
				return;
			}
			totalProducts = null;
			processed = 0;
			matched = 0;
			jobId = '';
			progressBar.style.width = '0%';
			progressText.textContent = 'Starting...';
			statusEl.classList.remove('success');
			if (logEl) {
				logEl.textContent = '';
				logEl.hidden = true;
			}
			setButtonsDisabled(true);
			fetchBatch('');
		}

		btn.addEventListener('click', startSync);
		if (btnSecondary) {
			btnSecondary.addEventListener('click', startSync);
		}
	})();
</script>