Epicnabbo-Catalogus-Updated-Daily/src/app/admin/radio/page.tsx

import { getTranslations } from "next-intl/server";
import { deleteShout } from "@/actions/admin-radio-moderation";
import { StatusCard } from "@/components/admin/dashboard";
import { prisma } from "@/lib/prisma";

export const dynamic = "force-dynamic";

type Shout = {
	id: bigint;
	userId: bigint;
	message: string;
	createdAt: Date | null;
};

type Application = {
	id: bigint;
	userId: bigint;
	realName: string;
	age: number;
	status: string;
	musicStyle: string | null;
	discordUsername: string | null;
	createdAt: Date | null;
};

type Schedule = {
	id: bigint;
	userId: bigint;
	day: string;
	startTime: Date;
	endTime: Date;
	showName: string | null;
	isActive: boolean;
};

function formatDate(d: Date | null): string {
	return d ? d.toISOString().slice(0, 16).replace("T", " ") : "\u2014";
}

function formatTime(d: Date | null): string {
	return d ? d.toISOString().slice(11, 16) : "\u2014";
}

function statusBadgeClass(status: string): string {
	const s = status.toLowerCase();
	if (s === "approved" || s === "accepted") return "ok";
	if (s === "rejected" || s === "denied") return "danger";
	return "";
}

export default async function AdminRadioPage() {
	const t = await getTranslations("pages.admin.radio");

	let shouts: Shout[] = [];
	let applications: Application[] = [];
	let schedules: Schedule[] = [];

	try {
		shouts = await prisma.radioShouts.findMany({
			select: { id: true, userId: true, message: true, createdAt: true },
			orderBy: { id: "desc" },
			take: 25,
		});
	} catch {
		shouts = [];
	}

	try {
		applications = await prisma.radioApplications.findMany({
			select: {
				id: true,
				userId: true,
				realName: true,
				age: true,
				status: true,
				musicStyle: true,
				discordUsername: true,
				createdAt: true,
			},
			orderBy: { id: "desc" },
			take: 25,
		});
	} catch {
		applications = [];
	}

	try {
		schedules = await prisma.radioSchedules.findMany({
			select: {
				id: true,
				userId: true,
				day: true,
				startTime: true,
				endTime: true,
				showName: true,
				isActive: true,
			},
			orderBy: { id: "desc" },
			take: 25,
		});
	} catch {
		schedules = [];
	}

	const pendingApps = applications.filter(
		(a) => a.status.toLowerCase() === "pending",
	).length;
	const activeSchedules = schedules.filter((sc) => sc.isActive).length;

	return (
		<main>
			<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
				<StatusCard
					label={t("shouts")}
					value={shouts.length}
					icon="📣"
				/>
				<StatusCard
					label={t("pendingApplications")}
					value={pendingApps}
					state={pendingApps > 0 ? "warn" : "ok"}
					icon="📝"
				/>
				<StatusCard
					label={t("schedules")}
					value={schedules.length}
					icon="🗓️"
				/>
				<StatusCard
					label={t("activeSchedules")}
					value={activeSchedules}
					state={activeSchedules > 0 ? "ok" : "neutral"}
					icon="🎙️"
				/>
			</div>

			<section className="mt-6">
				<h2>
					{t("shouts")} ({shouts.length})
				</h2>
				{shouts.length === 0 ? (
					<p className="text-xs theme-text-muted dark:theme-text-muted">
						{t("noShouts")}
					</p>
				) : (
					<table>
						<thead>
							<tr>
								<th>ID</th>
								<th>{t("user")}</th>
								<th>{t("message")}</th>
								<th>{t("posted")}</th>
								<th />
							</tr>
						</thead>
						<tbody>
							{shouts.map((s) => (
								<tr key={String(s.id)}>
									<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
										{String(s.id)}
									</td>
									<td>{String(s.userId)}</td>
									<td>{s.message}</td>
									<td className="text-sm theme-text-muted dark:theme-text-muted">
										{formatDate(s.createdAt)}
									</td>
									<td>
										<form action={deleteShout}>
											<input type="hidden" name="id" value={String(s.id)} />
											<button type="submit" className="btn btn-danger">
												{t("deleteShout")}
											</button>
										</form>
									</td>
								</tr>
							))}
						</tbody>
					</table>
				)}
			</section>

			<section className="mt-6">
				<h2>
					{t("applications")} ({applications.length})
				</h2>
				{applications.length === 0 ? (
					<p className="text-xs theme-text-muted dark:theme-text-muted">
						{t("noApplications")}
					</p>
				) : (
					<table>
						<thead>
							<tr>
								<th>ID</th>
								<th>{t("user")}</th>
								<th>{t("realName")}</th>
								<th>{t("age")}</th>
								<th>{t("style")}</th>
								<th>Discord</th>
								<th>{t("status")}</th>
								<th>{t("applied")}</th>
							</tr>
						</thead>
						<tbody>
							{applications.map((a) => (
								<tr key={String(a.id)}>
									<td>{String(a.id)}</td>
									<td>{String(a.userId)}</td>
									<td>{a.realName}</td>
									<td>{a.age}</td>
									<td>{a.musicStyle ?? "\u2014"}</td>
									<td>{a.discordUsername ?? "\u2014"}</td>
									<td>
										<span
											className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${statusBadgeClass(a.status) === "ok" ? "bg-[var(--admin-success-subtle)] text-[var(--admin-text)]" : statusBadgeClass(a.status) === "danger" ? "bg-[var(--admin-error-subtle)] text-[var(--admin-text)]" : "bg-[var(--admin-accent)]/18 text-[var(--admin-text)]"}`}
										>
											{a.status}
										</span>
									</td>
									<td className="text-sm theme-text-muted dark:theme-text-muted">
										{formatDate(a.createdAt)}
									</td>
								</tr>
							))}
						</tbody>
					</table>
				)}
			</section>

			<section className="mt-6">
				<h2>
					{t("schedules")} ({schedules.length})
				</h2>
				{schedules.length === 0 ? (
					<p className="text-xs theme-text-muted dark:theme-text-muted">
						{t("noSchedules")}
					</p>
				) : (
					<table>
						<thead>
							<tr>
								<th>ID</th>
								<th>{t("user")}</th>
								<th>{t("day")}</th>
								<th>{t("start")}</th>
								<th>{t("end")}</th>
								<th>{t("show")}</th>
								<th>{t("active")}</th>
							</tr>
						</thead>
						<tbody>
							{schedules.map((sc) => (
								<tr key={String(sc.id)}>
									<td>{String(sc.id)}</td>
									<td>{String(sc.userId)}</td>
									<td>{sc.day}</td>
									<td>{formatTime(sc.startTime)}</td>
									<td>{formatTime(sc.endTime)}</td>
									<td>{sc.showName ?? "\u2014"}</td>
									<td>
										<span
											className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${sc.isActive ? "bg-[var(--admin-success-subtle)] text-[var(--admin-text)]" : "bg-[var(--admin-error-subtle)] text-[var(--admin-text)]"}`}
										>
											{sc.isActive ? t("active") : t("inactive")}
										</span>
									</td>
								</tr>
							))}
						</tbody>
					</table>
				)}
			</section>
		</main>
	);
}