"use client";

import React from "react";
import { useOverviewBranchTarget } from "@/lib/frontend/overview/useOverviewBranchTarget";
import { buildOverviewCards } from "@/lib/frontend/overview/cardsConfig";
import OverviewCard from "@/components/overview/OverviewCard";
import { getOverviewCardsLayoutClasses } from "@/components/overview/layoutClasses";

export default function OverviewHomePage() {
	const {
		isAuthenticated,
		canManageUsers,
		explorerHref,
		searchHref,
		disabledHint,
	} = useOverviewBranchTarget();

	if (!isAuthenticated) return null;

	const cards = buildOverviewCards({
		explorerHref,
		searchHref,
		canManageUsers,
		disabledHint,
	});

	const { cardsRowClassName, cardItemClassName } =
		getOverviewCardsLayoutClasses({
			cardCount: cards.length,
		});

	return (
		<div className="min-h-[calc(100dvh-9rem)] py-4">
			<div className="mx-auto flex h-full w-full flex-col">
				<div className="space-y-1 text-left">
					<h1 className="text-2xl font-semibold tracking-tight">Übersicht</h1>
					<p className="text-sm text-muted-foreground">
						Schnellzugriff auf die wichtigsten Bereiche.
					</p>
				</div>

				<div className="flex flex-1 items-center justify-center pt-20 pb-10">
					<div className={cardsRowClassName}>
						{cards.map((card) => (
							<OverviewCard
								key={card.key}
								title={card.title}
								description={card.description}
								imageSrc={card.imageSrc}
								href={card.href}
								disabledHint={card.disabledHint}
								containerClassName={cardItemClassName}
							/>
						))}
					</div>
				</div>
			</div>
		</div>
	);
}