const { Card, Badge } = window.GlenAbbeyRulebookDesignSystem_08052d;
const SEVERITY = {
	conflict: {
		label: "Conflict",
		tone: "no",
		desc: "Two sources actively disagree.",
	},
	undocumented: {
		label: "Undocumented",
		tone: "ask",
		desc: "A real, binding rule exists but isn't published anywhere a resident can find it.",
	},
	ambiguous: {
		label: "Ambiguous",
		tone: "neutral",
		desc: "The rule is technically consistent but easy to misread.",
	},
};
function ConflictsScreen() {
	const d = window.GA_DATA;
	const items = d.conflicts || [];
	const counts = items.reduce((acc, c) => {
		acc[c.severity] = (acc[c.severity] || 0) + 1;
		return acc;
	}, {});
	return (
		<div>
			<PageHead
				eyebrow="Open questions"
				title="Where the published rules disagree with each other"
				lead="Every item here came out of cross-referencing the public site, the member portal, the Document Library, and resident emails against each other. Per this project's own rule, conflicts get flagged for a human to resolve — never quietly resolved by whoever wrote the entry."
			/>
			<div
				style={{
					display: "flex",
					gap: 8,
					flexWrap: "wrap",
					marginBottom: "var(--space-8)",
				}}
			>
				{Object.entries(SEVERITY).map(([key, s]) => (
					<div
						key={key}
						style={{
							display: "flex",
							alignItems: "center",
							gap: 8,
							padding: "6px 12px",
							borderRadius: "var(--radius-pill)",
							border: "1px solid var(--border-hairline)",
							background: "var(--surface-card)",
							fontSize: "var(--text-body-sm)",
						}}
					>
						<Badge tone={s.tone}>{s.label}</Badge>
						<span style={{ color: "var(--text-muted)" }}>
							{counts[key] || 0}
						</span>
					</div>
				))}
			</div>
			<div
				style={{
					display: "flex",
					flexDirection: "column",
					gap: "var(--space-4)",
				}}
			>
				{items.map((c, i) => {
					const s = SEVERITY[c.severity] || SEVERITY.ambiguous;
					return (
						<Card key={c.id} padding="lg">
							<div
								style={{
									display: "flex",
									alignItems: "baseline",
									gap: 10,
									marginBottom: 10,
								}}
							>
								<span
									className="ga-eyebrow"
									style={{ color: "var(--text-muted)" }}
								>
									{String(i + 1).padStart(2, "0")}
								</span>
								<Badge tone={s.tone}>{s.label}</Badge>
							</div>
							<h3
								style={{ margin: "0 0 8px", fontSize: "var(--text-subtitle)" }}
							>
								{c.title}
							</h3>
							<p
								style={{
									margin: "0 0 12px",
									fontSize: "var(--text-body-md)",
									color: "var(--text-body)",
								}}
							>
								{c.body}
							</p>
							<div
								style={{
									borderLeft: "3px solid var(--sand-300)",
									paddingLeft: "var(--space-4)",
									fontSize: "var(--text-body-sm)",
									color: "var(--text-muted)",
								}}
							>
								<strong style={{ color: "var(--text-body)" }}>Resolve: </strong>
								{c.resolve}
							</div>
						</Card>
					);
				})}
			</div>
		</div>
	);
}
Object.assign(window, { ConflictsScreen });