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

"use client";

import { Ban, Check, Circle, Loader2, RefreshCw, X } from "lucide-react";
import { memo } from "react";
import { Button } from "@/components/ui/button";
import type { BatchItemStatus, VerificationSummary } from "./studio-types";

const statusLabels: Record<BatchItemStatus["status"], string> = {
	pending: "Waiting",
	started: "Starting",
	downloading: "Downloading assets",
	converting: "Preparing assets",
	writing_db: "Saving",
	done: "Imported",
	failed: "Failed",
};

export const BatchProgress = memo(function BatchProgress({
	progress,
	done,
	succeeded,
	failed,
	cancelling,
	verification,
	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.values()];
	const completed = entries.filter(
		(item) => item.status === "done" || item.status === "failed",
	).length;
	const total = entries.length;
	const percent = total ? Math.round((completed / total) * 100) : 0;
	const imported = done
		? succeeded
		: entries.filter((item) => item.status === "done").length;
	const errors = done
		? failed
		: entries.filter((item) => item.status === "failed").length;
	const unfinished = Math.max(0, total - completed);
	const heading = !done
		? cancelling
			? "Stopping import…"
			: "Importing furniture…"
		: unfinished
			? "Import stopped"
			: errors
				? "Import completed with errors"
				: "Import completed";
	const issues = verification
		? verification.furniDataMissing + verification.furniDataConflicts
		: 0;
	return (
		<section
			aria-label="Import progress"
			className="max-h-[45%] shrink-0 overflow-auto border-t border-[var(--admin-border)] bg-[var(--admin-surface)] p-4"
		>
			<div className="flex flex-wrap items-center justify-between gap-3">
				<div role="status" aria-live="polite">
					<h2
						style={{ fontSize: 14, margin: 0 }}
						className="text-sm font-semibold"
					>
						{heading}
					</h2>
					<p className="mt-1 text-xs text-[var(--admin-text-muted)]">
						{imported} imported · {errors} failed
						{unfinished > 0 &&
							` · ${unfinished} ${done ? "not completed" : "remaining"}`}
					</p>
				</div>
				<div className="flex flex-wrap gap-2">
					{done ? (
						<>
							{!!failedClassnames?.length && onRetry && (
								<Button
									size="sm"
									variant="outline"
									onClick={() => onRetry(failedClassnames)}
								>
									<RefreshCw size={14} />
									Retry failed ({failedClassnames.length})
								</Button>
							)}
							<Button size="sm" variant="secondary" onClick={onDismiss}>
								<Check size={14} />
								Close summary
							</Button>
						</>
					) : (
						<Button
							size="sm"
							variant="outline"
							onClick={onCancel}
							disabled={cancelling}
						>
							{cancelling ? (
								<Loader2 className="animate-spin" size={14} />
							) : (
								<Ban size={14} />
							)}
							Stop import
						</Button>
					)}
				</div>
			</div>
			<div
				role="progressbar"
				aria-label="Furniture processed"
				aria-valuemin={0}
				aria-valuemax={total || 1}
				aria-valuenow={completed}
				className="my-3 h-2 overflow-hidden rounded-full bg-[var(--admin-accent)]/10"
			>
				<div
					className="h-full rounded-full bg-[var(--admin-accent)] transition-all"
					style={{ width: `${percent}%` }}
				/>
			</div>
			{done && verification && (
				<p className="mb-2 text-sm text-[var(--admin-text-muted)]">
					{issues
						? `${issues} catalog data issue(s) still need attention. Open Catalog audit to review them.`
						: "Catalog data verification completed."}
				</p>
			)}
			<details>
				<summary className="cursor-pointer text-xs font-medium">
					View item details ({total})
				</summary>
				<div className="mt-2 max-h-44 space-y-2 overflow-auto">
					{entries.map((item) => (
						<div
							key={item.classname}
							className="rounded-md bg-[var(--admin-canvas)] p-2 text-xs"
						>
							<div className="flex items-center gap-2">
								{item.status === "done" ? (
									<Check size={14} className="text-[var(--admin-success)]" />
								) : item.status === "failed" ? (
									<X size={14} className="text-[var(--admin-warning)]" />
								) : done || item.status === "pending" ? (
									<Circle size={12} />
								) : (
									<Loader2 size={14} className="animate-spin" />
								)}
								<span className="min-w-0 flex-1 break-all font-medium">
									{item.classname}
								</span>
								<span className="shrink-0 text-[var(--admin-text-muted)]">
									{done && item.status !== "done" && item.status !== "failed"
										? "Not completed"
										: statusLabels[item.status]}
								</span>
							</div>
							{item.message && (
								<p className="mt-1 break-words text-[var(--admin-text-muted)]">
									{item.message}
								</p>
							)}
							{[...new Set(item.warnings ?? [])].map((warning) => (
								<p
									key={warning}
									className="mt-1 break-words text-[var(--admin-warning)]"
								>
									{warning}
								</p>
							))}
						</div>
					))}
				</div>
			</details>
		</section>
	);
});