function parseHash() {
	const h = (location.hash || "#/home").replace(/^#\/?/, "");
	const parts = h.split("/").filter(Boolean);
	if (parts[0] === "rule" && parts[1])
		return { route: "rule", ruleId: parts[1], topicFilter: null };
	if (parts[0] === "topics")
		return { route: "topics", ruleId: null, topicFilter: parts[1] || null };
	if (["home", "faq", "file", "conflicts"].includes(parts[0]))
		return { route: parts[0], ruleId: null, topicFilter: null };
	return { route: "home", ruleId: null, topicFilter: null };
}
function App() {
	const [state, setState] = React.useState(parseHash());
	React.useEffect(() => {
		const onHash = () => {
			setState(parseHash());
			window.scrollTo(0, 0);
		};
		window.addEventListener("hashchange", onHash);
		return () => window.removeEventListener("hashchange", onHash);
	}, []);
	const [query, setQuery] = React.useState("");
	const go = (r) => {
		location.hash = "#/" + r;
	};
	const goTopic = (id) => {
		location.hash = "#/topics/" + (id || "");
	};
	const openRule = (id) => {
		location.hash = "#/rule/" + id;
	};
	const { route, ruleId, topicFilter } = state;
	return (
		<Shell
			route={route}
			go={go}
			withSearch={route !== "home"}
			query={query}
			setQuery={setQuery}
		>
			{route === "home" && (
				<HomeScreen
					go={go}
					goTopic={goTopic}
					query={query}
					setQuery={setQuery}
					openRule={openRule}
				/>
			)}
			{route === "topics" && (
				<TopicsScreen
					key={topicFilter || "all"}
					openRule={openRule}
					goTopic={goTopic}
					go={go}
					initialTopic={topicFilter}
				/>
			)}
			{route === "rule" && (
				<RuleScreen
					ruleId={ruleId || "fence"}
					go={go}
					goTopic={goTopic}
					openRule={openRule}
				/>
			)}
			{route === "file" && <FileRequestScreen go={go} />}
			{route === "faq" && <FaqScreen />}
			{route === "conflicts" && <ConflictsScreen />}
		</Shell>
	);
}
ReactDOM.createRoot(document.getElementById("root")).render(<App />);