import * as stylex from "@stylexjs/stylex";
import { formatBytes } from "@/lib/format";
import type { Health } from "@/lib/types";
import { styles as shared } from "@/ui/styles";
import { colors } from "@/ui/tokens.stylex";

const DARK = "@media (prefers-color-scheme: dark)";

const styles = stylex.create({
	card: {
		borderRadius: "0.25rem",
		borderWidth: 1,
		borderStyle: "solid",
		borderColor: colors.border,
		backgroundColor: colors.surfaceRaised,
		paddingInline: "1rem",
		paddingBlock: "0.75rem",
	},
	heading: {
		display: "flex",
		alignItems: "center",
		justifyContent: "space-between",
		fontSize: "0.875rem",
		lineHeight: "1.25rem",
		fontWeight: 600,
	},
	badge: {
		borderRadius: "0.25rem",
		paddingInline: "0.5rem",
		paddingBlock: "0.125rem",
		fontSize: "0.75rem",
		lineHeight: "1rem",
		fontWeight: 500,
	},
	/**
	 * The badge fills are their own three-step scale, not the `danger`/`warn`
	 * banner tokens: they read as a tinted chip against a raised card, where a
	 * banner fill would be too heavy.
	 */
	ok: {
		backgroundColor: { default: "oklch(95% 0.052 163.051)", [DARK]: "oklch(26.2% 0.051 172.552)" },
		color: { default: "oklch(43.2% 0.095 166.913)", [DARK]: "oklch(84.5% 0.143 164.978)" },
	},
	warn: {
		backgroundColor: { default: "oklch(96.2% 0.059 95.617)", [DARK]: "oklch(27.9% 0.077 45.635)" },
		color: { default: "oklch(47.3% 0.137 46.201)", [DARK]: "oklch(87.9% 0.169 91.605)" },
	},
	critical: {
		backgroundColor: { default: "oklch(93.6% 0.032 17.717)", [DARK]: "oklch(25.8% 0.092 26.042)" },
		color: { default: "oklch(44.4% 0.177 26.899)", [DARK]: "oklch(80.8% 0.114 19.571)" },
	},
	list: {
		display: "flex",
		flexDirection: "column",
		gap: "0.5rem",
		marginTop: "0.75rem",
		fontSize: "0.875rem",
		lineHeight: "1.25rem",
	},
	row: {
		display: "flex",
		justifyContent: "space-between",
	},
	term: {
		color: colors.textMuted,
	},
});

function stateStyle(state: Health["disk"]["state"]) {
	if (state === "critical") return styles.critical;
	return state === "warn" ? styles.warn : styles.ok;
}

export default function DiskCard({ disk }: { disk: Health["disk"] }) {
	return (
		<section {...stylex.props(styles.card)}>
			{/* Live state, unlike the ranged widgets around it; the title says so
			    rather than a section rule the picker would have to disown. */}
			<h2 {...stylex.props(styles.heading)}>
				Storage now
				<span {...stylex.props(styles.badge, stateStyle(disk.state))}>{disk.state}</span>
			</h2>
			<dl {...stylex.props(styles.list)}>
				<div {...stylex.props(styles.row)}>
					<dt {...stylex.props(styles.term)}>Free</dt>
					<dd {...stylex.props(shared.tabularNums)}>{formatBytes(disk.free_bytes)}</dd>
				</div>
				<div {...stylex.props(styles.row)}>
					<dt {...stylex.props(styles.term)}>Database</dt>
					<dd {...stylex.props(shared.tabularNums)}>{formatBytes(disk.db_bytes)}</dd>
				</div>
				<div {...stylex.props(styles.row)}>
					<dt {...stylex.props(styles.term)}>Logs</dt>
					<dd {...stylex.props(shared.tabularNums)}>{formatBytes(disk.log_bytes)}</dd>
				</div>
			</dl>
		</section>
	);
}
