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

"use client";

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

import { useAuth } from "@/components/auth/authContext";
import { logout } from "@/lib/frontend/apiClient";
import { buildLoginUrl, LOGIN_REASONS } from "@/lib/frontend/authRedirect";

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

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

/**
 * Build a mailto link using encodeURIComponent (NOT URLSearchParams).
 *
 * Reason:
 * - Some mail clients treat "+" literally in mailto query strings.
 * - encodeURIComponent produces "%20" for spaces, which is handled reliably.
 */
function buildSupportMailto({ user, currentUrl }) {
	const to = "info@attus.de";
	const subject = "Support – RHL Lieferscheine";

	const roleLabel = user ? formatRole(user.role) : "Unbekannt";
	const userLabel = user?.branchId
		? `${roleLabel} (${user.branchId})`
		: roleLabel;

	const urlLine = currentUrl ? `URL: ${currentUrl}` : "URL: (bitte einfügen)";

	const body = [
		"Hallo attus Support,",
		"",
		"bitte beschreibt hier kurz euer Anliegen:",
		"",
		"- Was wollten Sie tun?",
		"- Was ist passiert?",
		"- (Optional) Screenshot / Zeitpunkt",
		"",
		urlLine,
		`Benutzer: ${userLabel}`,
		"",
		"Vielen Dank.",
	].join("\r\n");

	return `mailto:${to}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(
		body,
	)}`;
}

export default function UserStatus() {
	const { status, user } = useAuth();

	const isAuthenticated = status === "authenticated" && user;

	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 supportMailto = buildSupportMailto({ user, currentUrl });

	async function handleLogout() {
		try {
			await logout();
		} catch (err) {
			// Logout is idempotent; we still redirect for predictable UX.
			console.error("[UserStatus] logout failed:", err);
		}

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

	return (
		<DropdownMenu>
			<DropdownMenuTrigger asChild>
				<Button
					type="button"
					variant="ghost"
					size="sm"
					className="gap-2"
					aria-label="Benutzermenü öffnen"
					title="Benutzermenü"
				>
					<User className="h-4 w-4" aria-hidden="true" />
					<span className="hidden text-xs md:inline">{text}</span>
				</Button>
			</DropdownMenuTrigger>

			<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>

				<DropdownMenuItem asChild>
					<a
						href={supportMailto}
						className="flex w-full items-center gap-2"
						title="Support kontaktieren"
					>
						<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>
	);
}