---
import AdminLayout from "../../layouts/AdminLayout.astro";
import RegistryManager from "../../components/RegistryManager.tsx";
import SignIn from "../../components/SignIn.tsx";
import SignOut from "../../components/SignOut.tsx";
---

<AdminLayout title="Registry Manager">
	<div class="flex flex-col gap-4">
		<div class="text-center text-4xl">Registry Manager</div>

		<div id="auth-container">
			<SignIn client:load onSuccess={() => {}} requiredRole="admin" />
		</div>

		<div id="manager-container" class="hidden">
			<RegistryManager client:load />
			<div class="flex flex-row gap-2 justify-center items-center mt-4">
				<a class="btn btn-primary" href="/">Back to Home</a>
				<SignOut client:load />
			</div>
		</div>
	</div>
</AdminLayout>

<script>
	import { hasRole } from "../../utils/auth-client";

	function updateVisibility() {
		const authContainer = document.getElementById("auth-container");
		const managerContainer = document.getElementById("manager-container");

		if (hasRole("admin")) {
			authContainer?.classList.add("hidden");
			managerContainer?.classList.remove("hidden");
		} else {
			authContainer?.classList.remove("hidden");
			managerContainer?.classList.add("hidden");
		}
	}

	// Check auth state on page load
	updateVisibility();

	// Add event listener for custom event from SignIn component
	document.addEventListener("auth-success", updateVisibility);
</script>