import { Loader2 } from "lucide-react";
import { 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,
}: BulkImportPromptProps) {
	const [baseUrl, setBaseUrl] = useState(DEFAULT_BASE_URL);
	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-sm text-green-400">
					All sources loaded
				</div>
				<Button size="sm" 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 size="sm" 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-sm text-muted-foreground">
					<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="text-sm font-semibold text-foreground">
					Bulk Import Sources
				</h3>
				<p className="mt-1 text-xs text-muted-foreground">
					Load stat block data for all {totalSources} sources at once. This will
					download approximately 12.5 MB of data.
				</p>
			</div>

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

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