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,
	},
	/** The same sentence with no box, for a results footer that already has one. */
	note: {
		fontSize: "0.875rem",
		lineHeight: "1.25rem",
		color: colors.textMuted,
	},
});

/**
 * 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.
 *
 * `note` is the same sentence without the panel, for a place that already sits
 * under the data it qualifies — a results footer states the reach of the count
 * beside it, where a full-width banner would announce a limit as news.
 */
export default function CoverageNotice({
	coverage,
	variant = "banner",
}: {
	coverage: Coverage;
	variant?: "banner" | "note";
}) {
	if (coverage.complete) return null;
	return (
		<p role="status" {...stylex.props(variant === "note" ? styles.note : styles.notice)}>
			Query history is available from {formatTime(coverage.available_since)}.
		</p>
	);
}