import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { useBackupDashboard } from "../hooks/useBackups";

export default function BackupDashboardWidget() {
	const { data, isLoading } = useBackupDashboard();

	return (
		<Card>
			<CardHeader>
				<CardTitle>Backups</CardTitle>
			</CardHeader>
			<CardContent>
				{isLoading || !data ? (
					<p className="text-sm text-muted-foreground">Loading…</p>
				) : (
					<div className="flex flex-row flex-wrap gap-6">
						<div>
							<div className="text-2xl font-semibold">{data.total_jobs}</div>
							<div className="text-xs text-muted-foreground">Jobs</div>
						</div>
						<div>
							<div className="text-2xl font-semibold">
								{data.success_rate_24h}%
							</div>
							<div className="text-xs text-muted-foreground">24h Success</div>
						</div>
						<div>
							<div className="text-2xl font-semibold">
								{data.active_alerts > 0 ? (
									<Badge variant="destructive">{data.active_alerts}</Badge>
								) : (
									0
								)}
							</div>
							<div className="text-xs text-muted-foreground">Alerts</div>
						</div>
						{data.last_failed_at && (
							<div className="self-center text-xs text-destructive">
								Last failed:{" "}
								{new Date(data.last_failed_at * 1000).toLocaleString()}
							</div>
						)}
					</div>
				)}
			</CardContent>
		</Card>
	);
}