import * as stylex from "@stylexjs/stylex";
import { useAuthority } from "@/features/configuration/authority";
import { colors } from "@/ui/tokens.stylex";

const styles = stylex.create({
	notice: {
		borderBottomWidth: 1,
		borderBottomStyle: "solid",
		borderBottomColor: colors.warnBorder,
		backgroundColor: colors.warnSurface,
		color: colors.warnText,
		paddingInline: "1rem",
		paddingBlock: "0.5rem",
		fontSize: "0.875rem",
		lineHeight: "1.25rem",
	},
	unavailable: {
		display: "flex",
		alignItems: "center",
		gap: "0.5rem",
		borderBottomWidth: 1,
		borderBottomStyle: "solid",
		borderBottomColor: colors.border,
		backgroundColor: colors.surfaceHover,
		color: colors.textSecondary,
		paddingInline: "1rem",
		paddingBlock: "0.25rem",
		fontSize: "0.75rem",
		lineHeight: "1rem",
	},
});

/**
 * What `/api/config/status` says, on every route.
 *
 * The restart notice has no dismiss control on purpose: `restart_pending` is
 * process state the server owns, so a reload cannot clear it and neither
 * should a click. It goes away when the process it describes does.
 *
 * The unavailable indicator is the other half. A dead status endpoint would
 * otherwise hide both file authority and a pending restart from every page
 * outside configuration, and silence would read as "nothing to report".
 */
export default function ConfigStatusNotices() {
	const authority = useAuthority();

	if (authority.state === "failed") {
		return (
			<div role="status" {...stylex.props(styles.unavailable)}>
				Configuration status unavailable — file authority and pending restarts cannot be shown.
			</div>
		);
	}

	if (authority.state !== "resolved" || !authority.status.restart_pending) return null;

	return (
		<div role="status" {...stylex.props(styles.notice)}>
			Saved changes are not running yet. Restart nxdns to apply them.
		</div>
	);
}