rhl-lieferscheine/components/app-shell/UserStatus.jsx

"use client";

import React from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { LifeBuoy, LogOut, User, Users } from "lucide-react";

import { cn } from "@/lib/utils";

import { useAuth } from "@/components/auth/authContext";
import { logout } from "@/lib/frontend/apiClient";
import { buildLoginUrl, LOGIN_REASONS } from "@/lib/frontend/authRedirect";
import { canManageUsers as canManageUsersRole } from "@/lib/frontend/auth/roles";
import { buildSupportMailto } from "@/lib/frontend/support/supportMailto";

import { Button } from "@/components/ui/button";
import {
	DropdownMenu,
	DropdownMenuContent,
	DropdownMenuItem,
	DropdownMenuLabel,
	DropdownMenuSeparator,
	DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
	Tooltip,
	TooltipContent,
	TooltipTrigger,
} from "@/components/ui/tooltip";

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

export default function UserStatus() {
	const pathname = usePathname() || "/";
	const { status, user } = useAuth();

	const isAuthenticated = status === "authenticated" && user;
	const canManageUsers = isAuthenticated && canManageUsersRole(user.role);

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

	const currentUrl = typeof window !== "undefined" ? window.location.href : "";
	const userAgent = typeof navigator !== "undefined" ? navigator.userAgent : "";

	const supportMailto = buildSupportMailto({
		user,
		currentUrl,
		pathname,
		userAgent,
	});

	const isProfileActive =
		pathname === "/profile" || pathname.startsWith("/profile/");

	async function handleLogout() {
		try {
			await logout();
		} catch (err) {
			console.error("[UserStatus] logout failed:", err);
		}

		const loginUrl = buildLoginUrl({ reason: LOGIN_REASONS.LOGGED_OUT });
		window.location.replace(loginUrl);
	}

	return (
		<DropdownMenu>
			<Tooltip>
				<TooltipTrigger asChild>
					<DropdownMenuTrigger asChild>
						<Button
							type="button"
							variant="ghost"
							size="sm"
							aria-label="Benutzermenü öffnen"
							className={cn(
								"gap-2",
								"px-2 md:px-3",
								isProfileActive ? "bg-accent" : "",
							)}
						>
							<User className="h-4 w-4" aria-hidden="true" />
							<span className="hidden text-xs md:inline">{text}</span>
						</Button>
					</DropdownMenuTrigger>
				</TooltipTrigger>

				<TooltipContent side="bottom">Benutzermenü</TooltipContent>
			</Tooltip>

			<DropdownMenuContent align="end" className="min-w-56">
				<DropdownMenuLabel>Benutzer</DropdownMenuLabel>

				<div className="px-2 pb-2 text-xs text-muted-foreground">
					{isAuthenticated
						? `Angemeldet als: ${text}`
						: "Keine aktive Sitzung."}
				</div>

				<DropdownMenuSeparator />

				<DropdownMenuItem asChild disabled={!isAuthenticated}>
					<Link href="/profile" className="flex w-full items-center gap-2">
						<User className="h-4 w-4" aria-hidden="true" />
						Profil
					</Link>
				</DropdownMenuItem>

				{canManageUsers ? (
					<DropdownMenuItem asChild>
						<Link
							href="/admin/users"
							className="flex w-full items-center gap-2"
						>
							<Users className="h-4 w-4" aria-hidden="true" />
							Benutzerverwaltung
						</Link>
					</DropdownMenuItem>
				) : null}

				<DropdownMenuItem asChild>
					<a href={supportMailto} className="flex w-full items-center gap-2">
						<LifeBuoy className="h-4 w-4" aria-hidden="true" />
						Support
					</a>
				</DropdownMenuItem>

				<DropdownMenuSeparator />

				<DropdownMenuItem
					variant="destructive"
					disabled={!isAuthenticated}
					onSelect={(e) => {
						e.preventDefault();
						handleLogout();
					}}
				>
					<LogOut className="h-4 w-4" aria-hidden="true" />
					Abmelden
				</DropdownMenuItem>
			</DropdownMenuContent>
		</DropdownMenu>
	);
}