Epicnabbo-Catalogus-Updated-Daily/src/components/admin/studio/batch-progress.tsx

"use client";

import { Ban, Check, Loader2, ShieldCheck, X } from "lucide-react";
import { useEffect, useState } from "react";

import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import type { BatchItemStatus, VerificationSummary } from "./studio-types";

function SummaryRow({
	label,
	value,
	tone,
}: {
	label: string;
	value: string | number;
	tone?: "ok" | "warn";
}) {
	return (
		<div className="flex items-center justify-between gap-2 text-xs">
			<span className="text-[var(--admin-text-muted)]">{label}</span>
			<span
				className={cn(
					"font-mono font-semibold",
					tone === "warn"
						? "text-[var(--admin-warning)]"
						: "text-[var(--admin-success)]",
				)}
			>
				{value}
			</span>
		</div>
	);
}

function formatEta(ms: number): string {
	if (ms < 60_000) return `${Math.ceil(ms / 1000)}s`;
	const min = Math.floor(ms / 60_000);
	const sec = Math.ceil((ms % 60_000) / 1000);
	return `${min}m ${sec}s`;
}

export function BatchProgress({
	progress,
	done,
	succeeded,
	failed,
	cancelling,
	verification,
	startTime,
	failedClassnames,
	onCancel,
	onDismiss,
	onRetry,
}: {
	progress: Map<string, BatchItemStatus>;
	done: boolean;
	succeeded: number;
	failed: number;
	cancelling?: boolean;
	verification?: VerificationSummary | null;
	startTime?: number;
	failedClassnames?: string[];
	onCancel?: () => void;
	onDismiss?: () => void;
	onRetry?: (classnames: string[]) => void;
}) {
	const entries = [...progress.entries()];
	const total = entries.length;
	const completed = entries.filter(
		([, s]) => s.status === "done" || s.status === "failed",
	).length;
	const percent = total > 0 ? Math.round((completed / total) * 100) : 0;

	// Live ETA calculation
	const [eta, setEta] = useState<string | null>(null);
	useEffect(() => {
		if (done || !startTime || completed === 0) {
			setEta(null);
			return;
		}
		const elapsed = Date.now() - startTime;
		const avgPerItem = elapsed / completed;
		const remaining = (total - completed) * avgPerItem;
		setEta(formatEta(remaining));

		const interval = setInterval(() => {
			const elapsed = Date.now() - startTime;
			const avgPerItem = elapsed / completed;
			const remaining = (total - completed) * avgPerItem;
			setEta(formatEta(remaining));
		}, 2000);
		return () => clearInterval(interval);
	}, [done, startTime, completed, total]);

	return (
		<div className="border-t border-[var(--admin-border)] p-3">
			<div className="mb-2 flex items-center justify-between gap-3">
				<span className="text-xs font-bold uppercase tracking-wider text-[var(--admin-text-muted)]">
					{done ? "Import finished" : "Importing…"}
				</span>
				{done ? (
					<span
						className={cn(
							"text-xs font-bold",
							failed > 0
								? "text-[var(--admin-warning)]"
								: "text-[var(--admin-success)]",
						)}
					>
						{completed}/{total} · {succeeded} ok
						{failed > 0 ? ` · ${failed} failed` : ""}
					</span>
				) : (
					<span className="flex items-center gap-2">
						<span className="text-xs font-mono text-[var(--admin-text-muted)]">
							{completed}/{total}
						</span>
						{eta && (
							<span className="text-xs font-mono text-[var(--admin-accent)]">
								~{eta}
							</span>
						)}
						<Loader2
							size={14}
							className="animate-spin text-[var(--admin-accent)]"
						/>
					</span>
				)}
			</div>

			{!done && (
				<div className="mb-2 flex items-center gap-2">
					<div className="h-1.5 flex-1 overflow-hidden rounded-full bg-[var(--admin-accent)]/10">
						<div
							className="h-full rounded-full bg-[var(--admin-accent)] transition-all duration-300"
							style={{ width: `${percent}%` }}
						/>
					</div>
					<span className="text-xs font-mono font-bold text-[var(--admin-text)]">
						{percent}%
					</span>
				</div>
			)}

			<div className="max-h-44 space-y-1 overflow-y-auto pr-1">
				{entries.map(([classname, s]) => (
					<div key={classname} className="flex items-center gap-2 text-xs">
						{s.status === "done" ? (
							<Check
								size={12}
								className="shrink-0 text-[var(--admin-success)]"
							/>
						) : s.status === "failed" ? (
							<X size={12} className="shrink-0 text-[var(--admin-warning)]" />
						) : (
							<Loader2
								size={12}
								className="shrink-0 animate-spin text-[var(--admin-accent)]"
							/>
						)}
						<span className="min-w-0 flex-1 truncate font-mono">
							{classname}
						</span>
						<span className="shrink-0 capitalize text-[var(--admin-text-muted)]">
							{s.status.replace(/_/g, " ")}
						</span>
					</div>
				))}
			</div>

			{done && verification && (
				<div className="mt-2 space-y-1.5 rounded-lg border border-[var(--admin-border)] bg-[var(--admin-canvas)] p-2.5">
					<div className="flex items-center gap-1.5 text-xs font-bold uppercase tracking-wider text-[var(--admin-text-muted)]">
						<ShieldCheck size={13} className="text-[var(--admin-success)]" />
						Post-import verification
					</div>
					<SummaryRow
						label="Catalog offer_id fixed"
						value={verification.offerIdsFixed}
					/>
					<SummaryRow
						label="Furnidata ids fixed"
						value={verification.furniDataFixedIds}
					/>
					<SummaryRow
						label="Furnidata entries missing"
						value={verification.furniDataMissing}
						tone={verification.furniDataMissing > 0 ? "warn" : "ok"}
					/>
					<SummaryRow
						label="Furnidata id conflicts"
						value={verification.furniDataConflicts}
						tone={verification.furniDataConflicts > 0 ? "warn" : "ok"}
					/>
					<SummaryRow
						label="Nitros synced"
						value={verification.nitrosSynced.length}
					/>
					<SummaryRow
						label="Icons synced"
						value={verification.iconsSynced.length}
					/>
					<SummaryRow
						label="Folders chowned"
						value={verification.ownershipFixed.length}
					/>
				</div>
			)}

			<div className="mt-2 flex justify-end gap-2">
				{done ? (
					<>
						{failedClassnames && failedClassnames.length > 0 && onRetry && (
							<Button
								size="sm"
								variant="outline"
								onClick={() => onRetry(failedClassnames)}
							>
								<Loader2 size={14} />
								Retry {failedClassnames.length} failed
							</Button>
						)}
						<Button size="sm" variant="secondary" onClick={onDismiss}>
							<Check size={14} />
							Dismiss
						</Button>
					</>
				) : (
					<Button
						size="sm"
						variant="outline"
						onClick={onCancel}
						disabled={cancelling}
					>
						{cancelling ? (
							<Loader2 size={14} className="animate-spin" />
						) : (
							<Ban size={14} />
						)}
						Cancel
					</Button>
				)}
			</div>
		</div>
	);
}