import { desc } from "drizzle-orm";
import { getTranslations } from "next-intl/server";
import {
	type LightboxPhoto,
	PhotoLightbox,
} from "@/components/public/photo-lightbox";
import { ContentCard, EmptyState } from "@/components/public/ui";
import { CameraWeb, db } from "@/lib/db";
import { formatDate } from "@/lib/format-date";

export const revalidate = 300;

export const metadata = { title: "Photos" };

type Photo = {
	id: number;
	userId: number;
	roomId: number;
	timestamp: number;
	url: string;
};

export default async function PhotosPage() {
	const t = await getTranslations("pages.photos");

	let photos: Photo[] = [];
	try {
		photos = await db
			.select()
			.from(CameraWeb)
			.orderBy(desc(CameraWeb.timestamp))
			.limit(48);
	} catch {
		photos = [];
	}

	// Pre-shape for the client lightbox: translate captions server-side so the
	// client component stays free of i18n/db dependencies.
	const items: LightboxPhoto[] = photos.map((p) => ({
		id: String(p.id),
		url: p.url,
		alt: t("photoAlt", { id: p.userId }),
		date: formatDate(new Date(p.timestamp * 1000)),
		user: t("byUser", { id: p.userId }),
	}));

	return (
		<main style={{ display: "grid", gap: "1.5rem" }}>
			<ContentCard icon="📸" title={t("title")} subtitle={t("subtitle")} />

			<ContentCard padded={items.length === 0}>
				{items.length === 0 ? (
					<EmptyState icon="📸">{t("noPhotos")}</EmptyState>
				) : (
					<PhotoLightbox photos={items} />
				)}
			</ContentCard>
		</main>
	);
}