"use client";

import React from "react";
import { useAuth } from "@/components/auth/authContext";

/**
 * UserStatus (RHL-020)
 *
 * Responsibilities:
 * - Display minimal session info in the TopNav.
 *
 * Data source:
 * - AuthContext (provided by components/auth/AuthProvider.jsx)
 *
 * UX rule:
 * - All user-facing text must be German.
 */
export default function UserStatus() {
	const { status, user } = useAuth();

	function formatRole(role) {
		if (role === "branch") return "Niederlassung";
		if (role === "admin") return "Admin";
		if (role === "dev") return "Entwicklung";
		return role ? String(role) : "Unbekannt";
	}

	let text = "Nicht geladen";

	if (status === "loading") text = "Lädt…";
	if (status === "authenticated" && user) {
		const roleLabel = formatRole(user.role);
		text = user.branchId ? `${roleLabel} (${user.branchId})` : roleLabel;
	}
	if (status === "unauthenticated") text = "Abgemeldet";
	if (status === "error") text = "Fehler";

	return (
		<div className="hidden items-center gap-2 md:flex">
			<span className="text-xs text-muted-foreground">Benutzer:</span>
			<span className="text-xs">{text}</span>
		</div>
	);
}