EpicNext-Cms/src/app/admin/ads/page.tsx

import { Megaphone } from "lucide-react";
import Link from "next/link";
import { getTranslations } from "next-intl/server";
import { StatusCard } from "@/components/admin/dashboard";
import { prisma } from "@/lib/prisma";
import { redirect } from "next/navigation";
import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";

export const dynamic = "force-dynamic";

export default async function AdminAds() {
	const { session, permissions } = await getAdminContext();
	if (!canAccess(permissions, PERMS.PAGES_VIEW, session.user.rank)) {
		redirect("/admin");
	}

	const t = await getTranslations("pages.admin.ads");
	let ads: Awaited<ReturnType<typeof prisma.websiteAds.findMany>>;
	try {
		ads = await prisma.websiteAds.findMany({
			orderBy: { id: "desc" },
			take: 500,
		});
	} catch {
		ads = [];
	}

	const latest = ads[0]?.createdAt
		? ads[0].createdAt.toISOString().slice(0, 10)
		: "—";

	return (
		<main>
			<div className="flex items-center gap-3 mb-6">
				<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--admin-accent)]/20 to-[var(--admin-accent)]/5 grid place-items-center">
					<Megaphone size={20} className="text-[var(--admin-accent)]" />
				</div>
				<div className="flex-1">
					<h1 className="m-0 text-xl font-extrabold text-[var(--admin-text)]">
						{t("title")}
					</h1>
					<p className="m-0 text-xs text-[var(--admin-text-muted)] mt-0.5">
						{t("subtitle")}
					</p>
				</div>
				<Link href="/admin/ads/new" className="btn btn-primary">
					+ {t("newAd")}
				</Link>
			</div>

			<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
				<StatusCard label={t("adsCount")} value={ads.length} icon="🖼️" />
				<StatusCard
					label={t("latest")}
					value={latest}
					hint={t("mostRecentAd")}
					icon="🕒"
				/>
			</div>

			<section className="mt-6">
				<h2 className="admin-section-title">{t("allAds")}</h2>
				{ads.length === 0 ? (
					<div className="admin-empty">{t("noAds")}</div>
				) : (
					<table>
						<thead>
							<tr>
								<th>{t("colPreview")}</th>
								<th>{t("colImage")}</th>
								<th>{t("colCreated")}</th>
								<th />
							</tr>
						</thead>
						<tbody>
							{ads.map((ad) => (
								<tr key={String(ad.id)}>
									<td>
										{/* eslint-disable-next-line @next/next/no-img-element */}
										<img
											src={ad.image}
											alt=""
											style={{ maxHeight: 40, maxWidth: 120 }}
										/>
									</td>
									<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
										<code>{ad.image}</code>
									</td>
									<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
										{ad.createdAt
											? ad.createdAt.toISOString().slice(0, 10)
											: "—"}
									</td>
									<td>
										<Link href={`/admin/ads/${ad.id}`}>{t("edit")}</Link>
									</td>
								</tr>
							))}
						</tbody>
					</table>
				)}
			</section>
		</main>
	);
}