import * as stylex from "@stylexjs/stylex";
import { formatTime } from "@/lib/format";
import type { Coverage } from "@/lib/types";
import { colors } from "@/ui/tokens.stylex";

const styles = stylex.create({
	notice: {
		marginTop: "0.75rem",
		borderRadius: "0.25rem",
		borderWidth: 1,
		borderStyle: "solid",
		borderColor: colors.border,
		backgroundColor: colors.surfaceHover,
		paddingInline: "0.75rem",
		paddingBlock: "0.5rem",
		fontSize: "0.875rem",
		lineHeight: "1.25rem",
		color: colors.textSecondary,
	},
});

/**
 * How far back the numbers on this page can reach.
 *
 * Rendered whenever a response says its window is incomplete, which includes
 * the common case of a request with no lower bound at all. The line states the
 * watermark and nothing more: the same incompleteness covers a log retention
 * has pruned and one that simply has not been running long enough, and the
 * response does not say which.
 */
export default function CoverageNotice({ coverage }: { coverage: Coverage }) {
	if (coverage.complete) return null;
	return (
		<p role="status" {...stylex.props(styles.notice)}>
			Query history is available from {formatTime(coverage.available_since)}.
		</p>
	);
}
