"use client";

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

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

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
	Card,
	CardHeader,
	CardTitle,
	CardDescription,
	CardContent,
	CardFooter,
} 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 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">User ID</span>
						<span className="truncate">{userIdLabel}</span>
					</div>
				</CardContent>
			</Card>

			<Card>
				<CardHeader>
					<CardTitle>E-Mail</CardTitle>
					<CardDescription>
						Die Änderung der E-Mail-Adresse wird in einem späteren Ticket
						aktiviert.
					</CardDescription>
				</CardHeader>

				<CardContent className="grid gap-2">
					<Label htmlFor="email">E-Mail-Adresse</Label>
					<Input
						id="email"
						type="email"
						placeholder="name@firma.de"
						disabled
						aria-disabled="true"
					/>
				</CardContent>

				<CardFooter className="flex justify-end">
					<Button
						type="button"
						disabled
						aria-disabled="true"
						title="Kommt später"
					>
						Speichern
					</Button>
				</CardFooter>
			</Card>

			<ChangePasswordCard />

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