initiative/apps/web/src/components/bulk-import-prompt.tsx

import { Loader2 } from "lucide-react";
import { useId, useState } from "react";
import { getAllSourceCodes } from "../adapters/bestiary-index-adapter.js";
import type { BulkImportState } from "../hooks/use-bulk-import.js";
import { Button } from "./ui/button.js";
import { Input } from "./ui/input.js";

const DEFAULT_BASE_URL =
	"https://raw.githubusercontent.com/5etools-mirror-3/5etools-src/main/data/bestiary/";

interface BulkImportPromptProps {
	importState: BulkImportState;
	onStartImport: (baseUrl: string) => void;
	onDone: () => void;
}

export function BulkImportPrompt({
	importState,
	onStartImport,
	onDone,
}: Readonly<BulkImportPromptProps>) {
	const [baseUrl, setBaseUrl] = useState(DEFAULT_BASE_URL);
	const baseUrlId = useId();
	const totalSources = getAllSourceCodes().length;

	if (importState.status === "complete") {
		return (
			<div className="flex flex-col gap-4">
				<div className="rounded-md border border-green-500/50 bg-green-500/10 px-3 py-2 text-green-400 text-sm">
					All sources loaded
				</div>
				<Button onClick={onDone}>Done</Button>
			</div>
		);
	}

	if (importState.status === "partial-failure") {
		return (
			<div className="flex flex-col gap-4">
				<div className="rounded-md border border-yellow-500/50 bg-yellow-500/10 px-3 py-2 text-sm text-yellow-400">
					Loaded {importState.completed}/{importState.total} sources (
					{importState.failed} failed)
				</div>
				<Button onClick={onDone}>Done</Button>
			</div>
		);
	}

	if (importState.status === "loading") {
		const processed = importState.completed + importState.failed;
		const pct =
			importState.total > 0
				? Math.round((processed / importState.total) * 100)
				: 0;

		return (
			<div className="flex flex-col gap-4">
				<div className="flex items-center gap-2 text-muted-foreground text-sm">
					<Loader2 className="h-4 w-4 animate-spin" />
					Loading sources... {processed}/{importState.total}
				</div>
				<div className="h-2 overflow-hidden rounded-full bg-muted">
					<div
						className="h-full rounded-full bg-primary transition-all"
						style={{ width: `${pct}%` }}
					/>
				</div>
			</div>
		);
	}

	// idle state
	const isDisabled = !baseUrl.trim() || importState.status !== "idle";

	return (
		<div className="flex flex-col gap-4">
			<div>
				<h3 className="font-semibold text-foreground text-sm">
					Import All Sources
				</h3>
				<p className="mt-1 text-muted-foreground text-xs">
					Load stat block data for all {totalSources} sources at once.
				</p>
			</div>

			<div className="flex flex-col gap-2">
				<label htmlFor={baseUrlId} className="text-muted-foreground text-xs">
					Base URL
				</label>
				<Input
					id={baseUrlId}
					type="url"
					value={baseUrl}
					onChange={(e) => setBaseUrl(e.target.value)}
					className="text-xs"
				/>
			</div>

			<Button onClick={() => onStartImport(baseUrl)} disabled={isDisabled}>
				Load All
			</Button>
		</div>
	);
}