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

const styles = stylex.create({
	card: {
		borderRadius: "0.25rem",
		borderWidth: 1,
		borderStyle: "solid",
		borderColor: colors.border,
		backgroundColor: colors.surfaceRaised,
	},
	heading: {
		display: "flex",
		alignItems: "baseline",
		justifyContent: "space-between",
		paddingInline: "1rem",
		paddingTop: "0.75rem",
		fontSize: "0.875rem",
		lineHeight: "1.25rem",
		fontWeight: 600,
	},
	count: {
		fontSize: "0.75rem",
		lineHeight: "1rem",
		fontWeight: 400,
		color: colors.textMuted,
	},
	empty: {
		paddingInline: "1rem",
		paddingBlock: "0.75rem",
		fontSize: "0.875rem",
		lineHeight: "1.25rem",
		color: colors.textMuted,
	},
	tableWrap: {
		overflowX: "auto",
	},
	table: {
		marginTop: "0.5rem",
		width: "100%",
		fontSize: "0.875rem",
		lineHeight: "1.25rem",
	},
	headRow: {
		borderBottomWidth: 1,
		borderBottomStyle: "solid",
		borderBottomColor: colors.border,
		textAlign: "left",
		fontSize: "0.75rem",
		lineHeight: "1rem",
		color: colors.textMuted,
	},
	th: {
		paddingInline: "1rem",
		paddingBlock: "0.5rem",
		fontWeight: 500,
	},
	thRight: {
		textAlign: "right",
	},
	/** No hairline under the last row: the card border already closes the table. */
	row: {
		borderBottomWidth: { default: 1, ":last-child": 0 },
		borderBottomStyle: "solid",
		borderBottomColor: colors.border,
	},
	cell: {
		paddingInline: "1rem",
		paddingBlock: "0.5rem",
	},
	cellRight: {
		textAlign: "right",
	},
	small: {
		fontSize: "0.75rem",
		lineHeight: "1rem",
	},
	muted: {
		color: colors.textMuted,
	},
	bad: {
		color: colors.danger,
	},
});

function YesNo({ value, badValue }: { value: boolean; badValue: boolean }) {
	const bad = value === badValue;
	return <span {...stylex.props(bad && styles.bad)}>{value ? "yes" : "no"}</span>;
}

export default function UpstreamHealthTable({ health }: { health: UpstreamHealth }) {
	return (
		<section {...stylex.props(styles.card)}>
			<h2 {...stylex.props(styles.heading)}>
				Upstreams
				<span {...stylex.props(styles.count, shared.tabularNums)}>
					{health.available}/{health.total} available
				</span>
			</h2>
			{health.upstreams.length === 0 ? (
				<p {...stylex.props(styles.empty)}>No upstreams configured.</p>
			) : (
				<div {...stylex.props(styles.tableWrap)}>
					<table {...stylex.props(styles.table)}>
						<thead>
							<tr {...stylex.props(styles.headRow)}>
								<th scope="col" {...stylex.props(styles.th)}>
									URL
								</th>
								<th scope="col" {...stylex.props(styles.th)}>
									Enabled
								</th>
								<th scope="col" {...stylex.props(styles.th)}>
									Available
								</th>
								<th scope="col" {...stylex.props(styles.th, styles.thRight)}>
									Failures
								</th>
								<th scope="col" {...stylex.props(styles.th, styles.thRight)}>
									Success rate
								</th>
								<th scope="col" {...stylex.props(styles.th)}>
									Last error
								</th>
							</tr>
						</thead>
						<tbody>
							{health.upstreams.map((upstream) => (
								<tr key={upstream.url} {...stylex.props(styles.row)}>
									<td {...stylex.props(styles.cell, styles.small, shared.mono)}>{upstream.url}</td>
									<td {...stylex.props(styles.cell)}>
										<YesNo value={upstream.enabled} badValue={false} />
									</td>
									<td {...stylex.props(styles.cell)}>
										<YesNo value={upstream.available} badValue={false} />
									</td>
									<td {...stylex.props(styles.cell, styles.cellRight, shared.tabularNums)}>
										{upstream.total_failures}
									</td>
									<td {...stylex.props(styles.cell, styles.cellRight, shared.tabularNums)}>
										{(upstream.success_rate * 100).toFixed(1)}%
									</td>
									<td {...stylex.props(styles.cell, styles.small, styles.muted)}>
										{upstream.last_error || "—"}
									</td>
								</tr>
							))}
						</tbody>
					</table>
				</div>
			)}
		</section>
	);
}
