"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.
 * Keeps UX consistent for invalid route params and unknown pages in the protected area.
 */
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>Not found</CardTitle>
				<CardDescription>
					The page or resource you requested does not exist.
				</CardDescription>
			</CardHeader>

			<CardContent className="space-y-2">
				<p className="text-sm text-muted-foreground">
					This can happen when route parameters are invalid (e.g.
					year/month/day) or the URL is mistyped.
				</p>
			</CardContent>

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

				{ownBranchHref ? (
					<Button asChild>
						<Link href={ownBranchHref}>Go to my branch</Link>
					</Button>
				) : null}
			</CardFooter>
		</Card>
	);
}