import { getTranslations } from "next-intl/server";
import { deletePhoto } from "@/actions/admin-photos";
import { StatusCard } from "@/components/admin/dashboard";
import { prisma } from "@/lib/prisma";
import { Image } from "lucide-react";

export const dynamic = "force-dynamic";

export default async function AdminPhotos() {
  const t = await getTranslations("pages.admin.photos");
  let photos: Awaited<ReturnType<typeof prisma.cameraWeb.findMany>> = [];
  try {
    photos = await prisma.cameraWeb.findMany({
      orderBy: { timestamp: "desc" },
      take: 60,
    });
  } catch {
    photos = [];
  }

  const uniqueRooms = new Set(photos.map((p) => p.roomId)).size;
  const uniqueUsers = new Set(photos.map((p) => p.userId)).size;

  return (
    <main>
      <div className="flex items-center gap-3 mb-6">
        <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-primary)]/5 grid place-items-center">
          <Image size={20} className="text-[var(--color-primary)]" />
        </div>
        <div>
          <h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">{t("title")}</h1>
          <p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">{t("subtitle")}</p>
        </div>
      </div>

      <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
        <StatusCard label={t("photosShown")} value={photos.length} icon="📸" />
        <StatusCard label={t("rooms")} value={uniqueRooms} hint={t("distinctRooms")} icon="🚪" />
        <StatusCard label={t("users")} value={uniqueUsers} hint={t("distinctPhotographers")} icon="👤" />
      </div>

      <section className="mt-6">
        <h2 className="admin-section-title">{t("recentPhotos")}</h2>
        {photos.length === 0 ? (
          <div className="admin-empty">{t("noPhotos")}</div>
        ) : (
          <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
            {photos.map((p) => (
              <div key={String(p.id)} className="admin-card" style={{ padding: 0, overflow: "hidden" }}>
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img
                  src={p.url}
                  alt={t("photoAlt", { id: String(p.id) })}
                  style={{
                    width: "100%",
                    height: 200,
                    objectFit: "cover",
                    display: "block",
                    background: "#f1f5f9",
                  }}
                />
                <div style={{ padding: "0.85rem 1.05rem 1.05rem" }}>
                  <div
                    style={{
                      display: "flex",
                      justifyContent: "space-between",
                      gap: "0.5rem",
                      alignItems: "baseline",
                    }}
                  >
                    <strong>#{String(p.id)}</strong>
                    <span className="text-sm theme-text-muted dark:theme-text-muted">
                      {t("colRoom")} {p.roomId}
                    </span>
                  </div>
                  <p className="text-xs theme-text-muted dark:theme-text-muted" style={{ margin: "0.3rem 0 0" }}>
                    {t("colUser")} {p.userId} ·{" "}
                    {new Date(p.timestamp * 1000).toISOString().slice(0, 16).replace("T", " ")}
                  </p>
                  <form action={deletePhoto} style={{ marginTop: "0.75rem" }}>
                    <input type="hidden" name="id" value={String(p.id)} />
                    <button type="submit" className="btn btn-danger">
                      {t("delete")}
                    </button>
                  </form>
                </div>
              </div>
            ))}
          </div>
        )}
      </section>
    </main>
  );
}