initiative/apps/web/src/components/source-manager.tsx

import { Database, Trash2 } from "lucide-react";
import { useCallback, useEffect, useOptimistic, useState } from "react";
import type { CachedSourceInfo } from "../adapters/bestiary-cache.js";
import * as bestiaryCache from "../adapters/bestiary-cache.js";
import { Button } from "./ui/button.js";

interface SourceManagerProps {
	onCacheCleared: () => void;
}

export function SourceManager({ onCacheCleared }: SourceManagerProps) {
	const [sources, setSources] = useState<CachedSourceInfo[]>([]);
	const [optimisticSources, applyOptimistic] = useOptimistic(
		sources,
		(
			state,
			action: { type: "remove"; sourceCode: string } | { type: "clear" },
		) =>
			action.type === "clear"
				? []
				: state.filter((s) => s.sourceCode !== action.sourceCode),
	);

	const loadSources = useCallback(async () => {
		const cached = await bestiaryCache.getCachedSources();
		setSources(cached);
	}, []);

	useEffect(() => {
		loadSources();
	}, [loadSources]);

	const handleClearSource = async (sourceCode: string) => {
		applyOptimistic({ type: "remove", sourceCode });
		await bestiaryCache.clearSource(sourceCode);
		await loadSources();
		onCacheCleared();
	};

	const handleClearAll = async () => {
		applyOptimistic({ type: "clear" });
		await bestiaryCache.clearAll();
		await loadSources();
		onCacheCleared();
	};

	if (optimisticSources.length === 0) {
		return (
			<div className="flex flex-col items-center gap-2 py-8 text-center">
				<Database className="h-8 w-8 text-muted-foreground" />
				<p className="text-sm text-muted-foreground">No cached sources</p>
			</div>
		);
	}

	return (
		<div className="flex flex-col gap-3">
			<div className="flex items-center justify-between">
				<span className="text-sm font-semibold text-foreground">
					Cached Sources
				</span>
				<Button
					variant="outline"
					className="hover:text-hover-destructive hover:border-hover-destructive"
					onClick={handleClearAll}
				>
					<Trash2 className="mr-1 h-3 w-3" />
					Clear All
				</Button>
			</div>
			<ul className="flex flex-col gap-1">
				{optimisticSources.map((source) => (
					<li
						key={source.sourceCode}
						className="flex items-center justify-between rounded-md border border-border px-3 py-2"
					>
						<div>
							<span className="text-sm text-foreground">
								{source.displayName}
							</span>
							<span className="ml-2 text-xs text-muted-foreground">
								{source.creatureCount} creatures
							</span>
						</div>
						<button
							type="button"
							onClick={() => handleClearSource(source.sourceCode)}
							className="rounded-md p-1 text-muted-foreground transition-colors hover:bg-hover-destructive-bg hover:text-hover-destructive"
						>
							<Trash2 className="h-3.5 w-3.5" />
						</button>
					</li>
				))}
			</ul>
		</div>
	);
}