import { formatBytes } from "@/lib/format";
import type { Health } from "@/lib/types";

function Banner({ tone, children }: { tone: "warn" | "critical"; children: React.ReactNode }) {
	const classes =
		tone === "critical"
			? "border-red-300 bg-red-50 text-red-900 dark:border-red-900 dark:bg-red-950 dark:text-red-200"
			: "border-amber-300 bg-amber-50 text-amber-900 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-200";
	return (
		<p role="alert" className={`rounded border px-4 py-2 text-sm ${classes}`}>
			{children}
		</p>
	);
}

export default function HealthBanners({ health }: { health: Health }) {
	const banners: React.ReactNode[] = [];
	if (health.disk.state !== "ok") {
		banners.push(
			<Banner key="disk" tone={health.disk.state === "critical" ? "critical" : "warn"}>
				{health.disk.state === "critical"
					? `Disk critically low: ${formatBytes(health.disk.free_bytes)} free. Blocklist updates and log flushes are stopped.`
					: `Disk space low: ${formatBytes(health.disk.free_bytes)} free.`}
			</Banner>,
		);
	}
	if (health.writer_failed) {
		banners.push(
			<Banner key="writer" tone="critical">
				Query log writer failed; new queries are not being persisted.
			</Banner>,
		);
	}
	if (health.queries_dropped > 0) {
		banners.push(
			<Banner key="dropped" tone="warn">
				{health.queries_dropped.toLocaleString()} queries dropped from the log buffer.
			</Banner>,
		);
	}
	if (banners.length === 0) return null;
	return <div className="space-y-2">{banners}</div>;
}
