import { Image as LucideImage } from "lucide-react";
import NextImage from "next/image";
import Link from "next/link";
import { getTranslations } from "next-intl/server";
import {
	createRadioBanner,
	deleteRadioBanner,
	updateRadioBanner,
} from "@/actions/admin-radio-extra";
import { StatusCard } from "@/components/admin/dashboard";
import { prisma } from "@/lib/prisma";

export const dynamic = "force-dynamic";

type Banner = {
	id: bigint;
	userId: bigint;
	imagePath: string;
	title: string | null;
	description: string | null;
	sortOrder: number;
	isActive: boolean;
	createdAt: Date | null;
};

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

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

	let banners: Banner[] = [];
	let dbError = false;

	try {
		banners = await prisma.radioBanners.findMany({
			select: {
				id: true,
				userId: true,
				imagePath: true,
				title: true,
				description: true,
				sortOrder: true,
				isActive: true,
				createdAt: true,
			},
			orderBy: [{ sortOrder: "asc" }, { id: "asc" }],
		});
	} catch {
		dbError = true;
		banners = [];
	}

	const activeCount = banners.filter((b) => b.isActive).length;
	const hiddenCount = banners.length - activeCount;

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

			{dbError ? (
				<div className="admin-card mb-6">
					<p className="text-xs theme-text-muted dark:theme-text-muted m-0">
						{t("banners.dbError")}
					</p>
				</div>
			) : (
				<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
					<StatusCard
						label={t("banners.title")}
						value={banners.length}
						icon="🖼️"
					/>
					<StatusCard
						label={t("banners.statusActive")}
						value={activeCount}
						state={activeCount > 0 ? "ok" : "neutral"}
						icon="✅"
					/>
					<StatusCard
						label={t("banners.statusHidden")}
						value={hiddenCount}
						state={hiddenCount > 0 ? "warn" : "neutral"}
						icon="🚫"
					/>
				</div>
			)}

			<section className="mt-6">
				<h2 className="admin-section-title">{t("banners.addBanner")}</h2>
				<form action={createRadioBanner} className="admin-card">
					<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
						<div>
							<label
								htmlFor="new_imagePath"
								style={{ display: "block", fontWeight: 700 }}
							>
								{t("banners.form.imagePath")}
							</label>
							<input
								id="new_imagePath"
								name="imagePath"
								placeholder={t("banners.form.imagePathPlaceholder")}
								required
								style={{ width: "100%" }}
							/>
						</div>
						<div>
							<label
								htmlFor="new_title"
								style={{ display: "block", fontWeight: 700 }}
							>
								{t("banners.form.title")}
							</label>
							<input id="new_title" name="title" style={{ width: "100%" }} />
						</div>
						<div style={{ gridColumn: "1 / -1" }}>
							<label
								htmlFor="new_description"
								style={{ display: "block", fontWeight: 700 }}
							>
								{t("banners.form.description")}
							</label>
							<textarea
								id="new_description"
								name="description"
								rows={2}
								style={{ width: "100%" }}
							/>
						</div>
						<div>
							<label
								htmlFor="new_sortOrder"
								style={{ display: "block", fontWeight: 700 }}
							>
								{t("banners.form.sortOrder")}
							</label>
							<input
								id="new_sortOrder"
								name="sortOrder"
								type="number"
								defaultValue={0}
								style={{ width: "100%" }}
							/>
						</div>
						<div style={{ display: "flex", alignItems: "flex-end" }}>
							<label
								style={{
									display: "inline-flex",
									gap: "0.4rem",
									alignItems: "center",
								}}
							>
								<input
									type="checkbox"
									name="isActive"
									value="1"
									defaultChecked
								/>{" "}
								{t("banners.form.active")}
							</label>
						</div>
					</div>
					<div style={{ marginTop: "0.75rem" }}>
						<button type="submit" className="btn btn-primary">
							{t("banners.createBanner")}
						</button>
					</div>
				</form>
			</section>

			<section className="mt-6">
				<h2 className="admin-section-title">
					{t("banners.existing", { count: banners.length })}
				</h2>
				{banners.length === 0 ? (
					<div className="admin-empty">{t("banners.noBanners")}</div>
				) : (
					<div className="grid">
						{banners.map((b) => (
							<div key={String(b.id)} className="admin-card">
								<div className="flex justify-between items-baseline gap-3">
									<strong>#{String(b.id)}</strong>
									<span className="text-sm theme-text-muted dark:theme-text-muted inline-flex gap-2 items-center">
										{t("banners.byUser", { id: String(b.userId) })} ·{" "}
										{formatDate(b.createdAt)} ·{" "}
										<span
											className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${b.isActive ? "bg-[var(--admin-success-subtle)] text-[var(--admin-text)]" : "bg-[var(--admin-error-subtle)] text-[var(--admin-text)]"}`}
										>
											{b.isActive ? t("banners.active") : t("banners.hidden")}
										</span>
									</span>
								</div>

								{b.imagePath ? (
									<NextImage
										src={b.imagePath}
										alt={b.title ?? t("banners.bannerAlt")}
										width={800}
										height={200}
										className="article-img my-2"
										unoptimized
									/>
								) : null}

								<form action={updateRadioBanner}>
									<input type="hidden" name="id" value={String(b.id)} />
									<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
										<div>
											<label
												htmlFor={`img_${b.id}`}
												style={{ display: "block", fontWeight: 700 }}
											>
												{t("banners.form.imagePath")}
											</label>
											<input
												id={`img_${b.id}`}
												name="imagePath"
												defaultValue={b.imagePath}
												required
												style={{ width: "100%" }}
											/>
										</div>
										<div>
											<label
												htmlFor={`title_${b.id}`}
												style={{ display: "block", fontWeight: 700 }}
											>
												{t("banners.form.title")}
											</label>
											<input
												id={`title_${b.id}`}
												name="title"
												defaultValue={b.title ?? ""}
												style={{ width: "100%" }}
											/>
										</div>
										<div style={{ gridColumn: "1 / -1" }}>
											<label
												htmlFor={`desc_${b.id}`}
												style={{ display: "block", fontWeight: 700 }}
											>
												{t("banners.form.description")}
											</label>
											<textarea
												id={`desc_${b.id}`}
												name="description"
												rows={2}
												defaultValue={b.description ?? ""}
												style={{ width: "100%" }}
											/>
										</div>
										<div>
											<label
												htmlFor={`sort_${b.id}`}
												style={{ display: "block", fontWeight: 700 }}
											>
												{t("banners.form.sortOrder")}
											</label>
											<input
												id={`sort_${b.id}`}
												name="sortOrder"
												type="number"
												defaultValue={b.sortOrder}
												style={{ width: "100%" }}
											/>
										</div>
										<div style={{ display: "flex", alignItems: "flex-end" }}>
											<label
												style={{
													display: "inline-flex",
													gap: "0.4rem",
													alignItems: "center",
												}}
											>
												<input
													type="checkbox"
													name="isActive"
													value="1"
													defaultChecked={b.isActive}
												/>{" "}
												{t("banners.form.active")}
											</label>
										</div>
									</div>
									<div style={{ marginTop: "0.6rem" }}>
										<button type="submit" className="btn btn-primary">
											{t("banners.save")}
										</button>
									</div>
								</form>

								<form
									action={deleteRadioBanner}
									style={{ marginTop: "0.5rem" }}
								>
									<input type="hidden" name="id" value={String(b.id)} />
									<button type="submit" className="btn btn-danger">
										{t("banners.delete")}
									</button>
								</form>
							</div>
						))}
					</div>
				)}
			</section>
		</main>
	);
}