import { deleteOwnPhoto, setAvatarPhoto, clearAvatarPhoto } from "@/lib/photo/actions";
import type { Photo } from "@sohbetegir/db";

const STATUS_LABEL: Record<string, { label: string; className: string }> = {
  PENDING: { label: "Onay Bekliyor", className: "bg-accent/10 text-accent" },
  APPROVED: { label: "Yayında", className: "bg-green-100 text-green-700" },
  REJECTED: { label: "Reddedildi", className: "bg-text-muted/10 text-text-muted" },
};

export function PhotoGallery({
  photos,
  editable = false,
  avatarPhotoId,
}: {
  photos: Photo[];
  editable?: boolean;
  avatarPhotoId?: string | null;
}) {
  if (photos.length === 0) {
    return <p className="text-[13.5px] text-text-muted">Henüz galeri fotoğrafı yok.</p>;
  }

  return (
    <div className="grid grid-cols-3 gap-3 sm:grid-cols-4">
      {photos.map((photo) => {
        const badge = STATUS_LABEL[photo.status];
        const isAvatar = avatarPhotoId === photo.id;
        const removePhoto = deleteOwnPhoto.bind(null, photo.id);
        const makeAvatar = setAvatarPhoto.bind(null, photo.id);

        return (
          <div key={photo.id} className="group relative aspect-square overflow-hidden rounded-xl border border-border">
            {/* eslint-disable-next-line @next/next/no-img-element -- yerel diskten servis edilen kullanıcı içeriği */}
            <img src={photo.thumbUrl} alt={photo.altText ?? ""} className="h-full w-full object-cover" />

            {editable && badge && (
              <span className={`absolute left-1.5 top-1.5 rounded-full px-2 py-0.5 text-[10px] font-semibold ${badge.className}`}>
                {badge.label}
              </span>
            )}

            {editable && (
              <form action={removePhoto} className="absolute right-1.5 top-1.5 opacity-0 transition-opacity group-hover:opacity-100">
                <button
                  type="submit"
                  title="Sil"
                  className="flex h-6 w-6 items-center justify-center rounded-full bg-black/60 text-white hover:bg-accent"
                >
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.5} strokeLinecap="round">
                    <path d="M6 6l12 12M18 6L6 18" />
                  </svg>
                </button>
              </form>
            )}

            {editable && photo.status === "APPROVED" && (
              <div className="absolute inset-x-0 bottom-0 flex items-center justify-center bg-gradient-to-t from-black/70 to-transparent p-1.5">
                {isAvatar ? (
                  <form action={clearAvatarPhoto}>
                    <button
                      type="submit"
                      className="rounded-full bg-white px-2 py-1 text-[10px] font-semibold text-accent"
                    >
                      ✓ Profil Fotoğrafı
                    </button>
                  </form>
                ) : (
                  <form action={makeAvatar} className="opacity-0 transition-opacity group-hover:opacity-100">
                    <button
                      type="submit"
                      className="rounded-full bg-white/90 px-2 py-1 text-[10px] font-semibold text-ink hover:bg-white"
                    >
                      Profil Fotoğrafı Yap
                    </button>
                  </form>
                )}
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
}