import { Shield } from "lucide-react";
import Link from "next/link";
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;
	updatedAt: Date | null;
};

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

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

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

	return (
		<main>
			<nav className="text-xs theme-text-muted dark:theme-text-muted mb-2">
				<Link href="/admin/radio">{t("title")}</Link> ·{" "}
				<Link href="/admin/radio/moderation">{t("moderation")}</Link> ·{" "}
				<Link href="/admin/radio/settings">{t("settings")}</Link> ·{" "}
				<Link href="/admin/radio/banners">{t("banners.title")}</Link> ·{" "}
				<Link href="/admin/radio/ranks">{t("ranks")}</Link> ·{" "}
				<Link href="/admin/radio/history">{t("history")}</Link>
			</nav>

			<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">
					<Shield size={20} className="text-[var(--admin-accent)]" />
				</div>
				<div>
					<h1 className="m-0 text-xl font-extrabold text-[var(--admin-text)]">
						{t("moderationPage.title")}
					</h1>
					<p className="m-0 text-xs text-[var(--admin-text-muted)] mt-0.5">
						{t("moderationPage.subtitle")}
					</p>
				</div>
			</div>

			<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
				<StatusCard
					label={t("shouts")}
					value={shouts.length}
					icon="📣"
				/>
			</div>

			<section className="mt-6">
				<h2 className="admin-section-title">
					{t("moderationPage.recentShouts", { count: shouts.length })}
				</h2>
				{shouts.length === 0 ? (
					<div className="admin-empty">{t("noShouts")}</div>
				) : (
					<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>{String(s.id)}</td>
									<td>{String(s.userId)}</td>
									<td>{s.message}</td>
									<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
										{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>
		</main>
	);
}