"use client";

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

import ChangePasswordCard from "@/components/profile/ChangePasswordCard";

import {
	Card,
	CardHeader,
	CardTitle,
	CardDescription,
	CardContent,
} from "@/components/ui/card";

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

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

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

	const roleLabel = isAuthenticated ? formatRole(user.role) : "—";
	const branchLabel = isAuthenticated ? user.branchId || "—" : "—";
	const emailLabel = isAuthenticated ? user.email || "—" : "—";
	const userIdLabel = isAuthenticated ? user.userId || "—" : "—";

	return (
		<div className="space-y-4">
			<div className="space-y-1">
				<h1 className="text-2xl font-semibold tracking-tight">Profil</h1>
				<p className="text-sm text-muted-foreground">
					Konto- und Zugangseinstellungen.
				</p>
			</div>

			<Card>
				<CardHeader>
					<CardTitle>Konto</CardTitle>
					<CardDescription>Aktuelle Sitzungsinformationen.</CardDescription>
				</CardHeader>

				<CardContent className="grid gap-3 text-sm">
					<div className="flex items-center justify-between gap-4">
						<span className="text-muted-foreground">Rolle</span>
						<span>{roleLabel}</span>
					</div>

					<div className="flex items-center justify-between gap-4">
						<span className="text-muted-foreground">Niederlassung</span>
						<span>{branchLabel}</span>
					</div>

					<div className="flex items-center justify-between gap-4">
						<span className="text-muted-foreground">E-Mail</span>
						<span className="truncate">{emailLabel}</span>
					</div>

					<div className="flex items-center justify-between gap-4">
						<span className="text-muted-foreground">User ID</span>
						<span className="truncate">{userIdLabel}</span>
					</div>

					<p className="pt-1 text-xs text-muted-foreground">
						Die E-Mail wird zentral verwaltet. Für Änderungen wenden Sie sich an
						die IT.
					</p>
				</CardContent>
			</Card>

			<ChangePasswordCard />

			{!isAuthenticated ? (
				<p className="text-xs text-muted-foreground">
					Hinweis: Profilfunktionen sind nur verfügbar, wenn Sie angemeldet
					sind.
				</p>
			) : null}
		</div>
	);
}