import { getTranslations } from "next-intl/server";
import { ContentCard, EmptyState } from "@/components/public/ui";
import { prisma } from "@/lib/prisma";

export const dynamic = "force-dynamic";

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

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

function formatDate(timestamp: number): string {
  return new Date(timestamp * 1000)
    .toISOString()
    .slice(0, 16)
    .replace("T", " ");
}

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

  let photos: Photo[] = [];
  try {
    photos = await prisma.cameraWeb.findMany({
      orderBy: { timestamp: "desc" },
      take: 48,
    });
  } catch {
    photos = [];
  }

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

      <ContentCard padded={photos.length === 0}>
        {photos.length === 0 ? (
          <EmptyState icon="📸">{t("noPhotos")}</EmptyState>
        ) : (
          <div className="card-grid sm-2 md-3 lg-4" style={{ padding: "1rem" }}>
            {photos.map((p) => (
              <article key={String(p.id)} className="card hover" style={{ padding: 0, overflow: "hidden" }}>
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img
                  src={p.url}
                  alt={t("photoAlt", { id: p.userId })}
                  style={{
                    width: "100%",
                    height: "auto",
                    display: "block",
                  }}
                />
                <div style={{ padding: "0.7rem 0.85rem" }}>
                  <p className="muted" style={{ margin: 0, fontSize: "0.85rem" }}>
                    {formatDate(p.timestamp)}
                  </p>
                  <p className="muted" style={{ margin: 0, fontSize: "0.85rem" }}>
                    {t("byUser", { id: p.userId })}
                  </p>
                </div>
              </article>
            ))}
          </div>
        )}
      </ContentCard>
    </main>
  );
}