import { Metadata } from "next";
import { redirect } from "next/navigation";

import { auth } from "@/lib/auth";

import BannerForm from "@/components/admin/banner-form";
// import ControlCenter from "@/components/admin/control-center";
// import RegenerateImagesButton from "@/components/admin/regenerate-images";
import UserManagement from "@/components/admin/user-management";
import Reports from "@/components/admin/reports";
import MiiList from "@/components/admin/mii-list";

export const metadata: Metadata = {
	title: "Admin - TomodachiShare",
	description: "TomodachiShare admin panel",
	robots: {
		index: false,
		follow: false,
	},
};

interface Props {
	searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}

export default async function AdminPage({ searchParams }: Props) {
	const session = await auth();

	if (!session || Number(session.user?.id) !== Number(process.env.NEXT_PUBLIC_ADMIN_USER_ID)) redirect("/");

	return (
		<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 flex flex-col gap-4">
			<div>
				<h2 className="text-2xl font-bold">Admin Panel</h2>
				<p className="text-sm text-zinc-500">View reports, set banners, etc.</p>
			</div>

			{/* Separator */}
			<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium my-1">
				<hr className="grow border-zinc-300" />
				<span>Banners</span>
				<hr className="grow border-zinc-300" />
			</div>

			<BannerForm />

			{/* Separator */}
			<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium my-1">
				<hr className="grow border-zinc-300" />
				<span>User Management</span>
				<hr className="grow border-zinc-300" />
			</div>

			<UserManagement />

			{/* Separator */}
			<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium my-1">
				<hr className="grow border-zinc-300" />
				<span>Reports</span>
				<hr className="grow border-zinc-300" />
			</div>

			<Reports searchParams={await searchParams} />

			{/* Queue */}
			<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium my-1">
				<hr className="grow border-zinc-300" />
				<span>Queue</span>
				<hr className="grow border-zinc-300" />
			</div>
			<MiiList searchParams={await searchParams} />
		</div>
	);
}