Epicnabbo-Catalogus-Updated-Daily/src/components/admin/studio/furniture-jobs.tsx

"use client";
import Link from "next/link";
import { useFormatter, useTranslations } from "next-intl";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { retryableJobItems } from "@/lib/furni/import-job-retry";
import type { useFurnitureJobs } from "./use-furniture-jobs";
export function FurnitureJobHistory({
	state,
	expanded = false,
}: {
	state: ReturnType<typeof useFurnitureJobs>;
	expanded?: boolean;
}) {
	const t = useTranslations("pages.admin.importHistory");
	const format = useFormatter();
	const [limits, setLimits] = useState<Record<string, number>>({});
	return (
		<details
			open={expanded || undefined}
			className="shrink-0 border-b border-[var(--admin-border)] bg-[var(--admin-surface)] px-4 py-2 text-sm"
		>
			<summary className="cursor-pointer">
				{t("summary", {
					count: state.jobs.filter(
						(job) => job.state === "queued" || job.state === "running",
					).length,
				})}
			</summary>
			<div
				className={
					expanded ? "space-y-2 py-2" : "max-h-72 space-y-2 overflow-auto py-2"
				}
			>
				{state.error && <p role="alert">{state.error}</p>}
				<p className="text-xs text-[var(--admin-text-muted)]">
					{state.paginated ? t("ownerHistory") : t("historyLimit")}
				</p>
				<Button variant="outline" onClick={() => void state.refresh()}>
					{t("refreshHistory")}
				</Button>
				{state.paginated && (
					<div className="flex items-center gap-3">
						<Button
							variant="outline"
							disabled={state.loading || state.page === 1}
							onClick={() => void state.navigate("previous")}
						>
							{t("previousPage")}
						</Button>
						<span>{t("page", { page: state.page })}</span>
						<Button
							variant="outline"
							disabled={state.loading || !state.nextCursor}
							onClick={() => void state.navigate("next")}
						>
							{t("nextPage")}
						</Button>
					</div>
				)}
				{!state.jobs.length && !state.loading && !state.error && (
					<p>{t("empty")}</p>
				)}
				{state.jobs.map((job) => {
					const retryItems = retryableJobItems(job);
					const done = job.items.filter((i) => i.state === "done"),
						failed = job.items.filter((i) => i.state === "failed");
					return (
						<details
							key={job.id}
							className="rounded border border-[var(--admin-border)] p-2"
						>
							<summary className="cursor-pointer">
								{format.dateTime(new Date(job.createdAt), {
									dateStyle: "short",
									timeStyle: "short",
								})}{" "}
								· {t(job.state)} ·{" "}
								{t("result", {
									done: done.length,
									total: job.items.length,
									failed: failed.length,
								})}
							</summary>
							<progress
								className="mt-2 h-2 w-full"
								value={done.length + failed.length}
								max={Math.max(1, job.items.length)}
								aria-label={t("progress")}
							/>
							<ul className="space-y-1 py-2">
								{job.items.slice(0, limits[job.id] ?? 50).map((item) => (
									<li key={item.classname}>
										<strong>{item.classname}</strong> · {t(item.state)}
										{item.itemId ? ` · ID ${item.itemId}` : ""}
										{item.error && (
											<p className="text-[var(--admin-warning)]">
												{item.error}
											</p>
										)}
										{[...new Set(item.warnings ?? [])].map((warning) => (
											<p
												key={warning}
												className="text-xs text-[var(--admin-text-muted)]"
											>
												{warning}
											</p>
										))}
									</li>
								))}
							</ul>
							{job.items.length > (limits[job.id] ?? 50) && (
								<Button
									variant="outline"
									onClick={() =>
										setLimits((current) => ({
											...current,
											[job.id]: (current[job.id] ?? 50) + 50,
										}))
									}
								>
									{t("showMoreItems")}
								</Button>
							)}
							{(job.state === "queued" || job.state === "running") && (
								<div className="space-y-2 py-2">
									<p className="text-xs text-[var(--admin-text-muted)]">
										{t(job.cancelRequested ? "cancelRequested" : "cancelHint")}
									</p>
									<Button
										variant="outline"
										disabled={state.cancelling !== null || job.cancelRequested}
										onClick={() => void state.cancel(job.id)}
									>
										{t("cancelRemaining")}
									</Button>
								</div>
							)}
							{job.items.some(
								(item) =>
									item.state === "interrupted" ||
									item.error?.startsWith("Server restarted during import.") ||
									(item.state === "running" && job.state === "interrupted"),
							) && (
								<p role="alert" className="py-2 text-[var(--admin-warning)]">
									{t("uncertainOutcome")}{" "}
									<Link href="/admin/studio/audit" className="underline">
										{t("reviewLocalData")}
									</Link>
								</p>
							)}
							{retryItems.length > 0 && (
								<Button
									variant="outline"
									disabled={state.busy}
									onClick={() => void state.retry(job.id)}
								>
									{t(
										job.state === "interrupted" || job.state === "cancelled"
											? "retryUnfinished"
											: "retryFailed",
									)}
								</Button>
							)}
						</details>
					);
				})}
			</div>
		</details>
	);
}