"use client";

import React from "react";
import Link from "next/link";

import { useAuth } from "@/components/auth/authContext";
import { branchPath, homePath } from "@/lib/frontend/routes";

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

/**
 * NotFoundView (RHL-021)
 *
 * Used by (protected)/not-found.jsx.
 *
 * UX rule:
 * - All user-facing text must be German.
 */
export default function NotFoundView() {
	const { status, user } = useAuth();

	const isAuthed = status === "authenticated" && user;
	const ownBranchHref =
		isAuthed && user.role === "branch" && user.branchId
			? branchPath(user.branchId)
			: null;

	return (
		<Card>
			<CardHeader>
				<CardTitle>Nicht gefunden</CardTitle>
				<CardDescription>
					Die angeforderte Seite oder Ressource wurde nicht gefunden.
				</CardDescription>
			</CardHeader>

			<CardContent className="space-y-2">
				<p className="text-sm text-muted-foreground">
					Dies kann passieren, wenn Routenparameter ungültig sind (z. B.
					Jahr/Monat/Tag) oder die URL falsch eingegeben wurde.
				</p>
			</CardContent>

			<CardFooter className="flex flex-col gap-2 sm:flex-row sm:justify-end">
				<Button variant="outline" asChild>
					<Link href={homePath()}>Zur Übersicht</Link>
				</Button>

				{ownBranchHref ? (
					<Button asChild>
						<Link href={ownBranchHref}>Zu meiner Niederlassung</Link>
					</Button>
				) : null}
			</CardFooter>
		</Card>
	);
}
