import { useQuery, useQueryClient } from "@tanstack/react-query";
import { useState, useRef } from "react";
import { Link } from "wouter";
import { ArrowLeft, Crosshair, X, Check, RotateCcw, User, Search, Filter, Cloud, HardDrive, Image, Trash2, ZoomIn, ZoomOut, MousePointer } from "lucide-react";
import { apiRequest } from "@/lib/queryClient";
import type { FocalPointMap } from "@/components/photo-gallery";
import { getObjectPosition } from "@/components/photo-gallery";

interface CloudinaryImage {
  publicId: string;
  fileName: string;
  artist: string;
  artistOverridden: boolean;
  width: number;
  height: number;
  format: string;
  bytes: number;
  createdAt: string;
  thumb: string;
  large: string;
  mobile: string;
  full: string;
}

function formatBytes(bytes: number): string {
  if (bytes < 1024) return bytes + " B";
  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + " KB";
  return (bytes / (1024 * 1024)).toFixed(1) + " MB";
}

function RatioPreview({
  image,
  point,
  ratio,
  label,
  width,
  height,
  active,
  onClickPreview,
  onSelect,
}: {
  image: CloudinaryImage;
  point: { x: number; y: number } | null;
  ratio: string;
  label: string;
  width: string;
  height: string;
  active: boolean;
  onClickPreview: (e: React.MouseEvent<HTMLDivElement>) => void;
  onSelect: () => void;
}) {
  return (
    <div className="flex flex-col items-center gap-1">
      <button
        onClick={onSelect}
        className={`text-[10px] font-medium px-2 py-0.5 rounded-full transition-colors ${
          active ? "bg-yellow-500 text-black" : "text-white/40 hover:text-white/70"
        }`}
        data-testid={`button-select-ratio-${ratio}`}
      >
        {label}
      </button>
      <div
        onClick={onClickPreview}
        className={`relative rounded-lg overflow-hidden cursor-crosshair transition-all ${
          active ? "ring-2 ring-yellow-400 ring-offset-2 ring-offset-black" : "border border-white/20"
        }`}
        style={{ width, height }}
        data-testid={`preview-${ratio}`}
      >
        <img
          src={image.full || image.large}
          alt={label}
          className="w-full h-full object-cover"
          style={{ objectPosition: point ? `${point.x}% ${point.y}%` : "center 15%" }}
        />
        {point && (
          <div
            className="absolute w-4 h-4 -ml-2 -mt-2 pointer-events-none"
            style={{ left: `${point.x}%`, top: `${point.y}%` }}
          >
            <div className="w-full h-full rounded-full border-2 border-yellow-400 bg-yellow-400/30" />
          </div>
        )}
        {active && (
          <div className="absolute inset-0 border-2 border-yellow-400/30 rounded-lg pointer-events-none" />
        )}
      </div>
    </div>
  );
}

function FocalPointEditor({
  image,
  currentFocalPoint,
  currentArtist,
  allArtistNames,
  onSaveFocal,
  onResetFocal,
  onSaveArtist,
  onDelete,
  onClose,
}: {
  image: CloudinaryImage;
  currentFocalPoint?: { x: number; y: number };
  currentArtist: string;
  allArtistNames: string[];
  onSaveFocal: (x: number, y: number) => Promise<void>;
  onResetFocal: () => Promise<void>;
  onSaveArtist: (artist: string) => Promise<void>;
  onDelete: () => Promise<void>;
  onClose: () => void;
}) {
  const [point, setPoint] = useState<{ x: number; y: number } | null>(currentFocalPoint || null);
  const [artistName, setArtistName] = useState(currentArtist);
  const [saving, setSaving] = useState(false);
  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
  const [deleting, setDeleting] = useState(false);
  const [showSuggestions, setShowSuggestions] = useState(false);
  const [zoom, setZoom] = useState(1);
  const [activeRatio, setActiveRatio] = useState<"main" | "16:9" | "9:16" | "1:1">("main");
  const imgRef = useRef<HTMLImageElement>(null);
  const suggestionsRef = useRef<HTMLDivElement>(null);
  const mainContainerRef = useRef<HTMLDivElement>(null);

  const filteredSuggestions = artistName.length >= 1
    ? allArtistNames.filter(
        (name) => name.toLowerCase().includes(artistName.toLowerCase()) && name.toLowerCase() !== artistName.toLowerCase()
      ).slice(0, 8)
    : [];

  const handleMainClick = (e: React.MouseEvent<HTMLDivElement>) => {
    const img = imgRef.current;
    if (!img) return;
    const rect = img.getBoundingClientRect();
    const x = Math.round(((e.clientX - rect.left) / rect.width) * 100);
    const y = Math.round(((e.clientY - rect.top) / rect.height) * 100);
    setPoint({ x: Math.max(0, Math.min(100, x)), y: Math.max(0, Math.min(100, y)) });
  };

  const handlePreviewClick = (e: React.MouseEvent<HTMLDivElement>) => {
    const rect = e.currentTarget.getBoundingClientRect();
    const contW = rect.width;
    const contH = rect.height;
    const cx = e.clientX - rect.left;
    const cy = e.clientY - rect.top;

    const imgW = image.width;
    const imgH = image.height;

    const px = (point?.x ?? 50) / 100;
    const py = (point?.y ?? 15) / 100;

    const scale = Math.max(contW / imgW, contH / imgH);
    const scaledW = imgW * scale;
    const scaledH = imgH * scale;

    const overflowX = scaledW - contW;
    const overflowY = scaledH - contH;

    const origX = (cx + overflowX * px) / scaledW * 100;
    const origY = (cy + overflowY * py) / scaledH * 100;

    setPoint({
      x: Math.round(Math.max(0, Math.min(100, origX))),
      y: Math.round(Math.max(0, Math.min(100, origY))),
    });
  };

  const handleZoomIn = () => setZoom((z) => Math.min(z + 0.5, 4));
  const handleZoomOut = () => setZoom((z) => Math.max(z - 0.5, 1));

  const handleWheel = (e: React.WheelEvent) => {
    e.preventDefault();
    if (e.deltaY < 0) handleZoomIn();
    else handleZoomOut();
  };

  const handleSaveAll = async () => {
    setSaving(true);
    try {
      if (point) {
        await onSaveFocal(point.x, point.y);
      }
      if (artistName !== currentArtist) {
        await onSaveArtist(artistName);
      }
    } finally {
      setSaving(false);
    }
    onClose();
  };

  const handleResetFocal = async () => {
    setSaving(true);
    await onResetFocal();
    setPoint(null);
    setSaving(false);
  };

  return (
    <div className="fixed inset-0 z-50 bg-black/95 flex flex-col p-4 overflow-y-auto" data-testid="focal-point-editor">
      <div className="flex items-center justify-between mb-3 flex-shrink-0">
        <div className="flex items-center gap-3">
          <Crosshair className="w-5 h-5 text-yellow-400" />
          <div>
            <span className="text-white font-medium text-sm block truncate max-w-[50vw]">
              {image.artist || image.fileName}
            </span>
            <span className="text-white/30 text-[10px] block">{image.publicId} &middot; {image.width}x{image.height} &middot; {formatBytes(image.bytes)}</span>
          </div>
        </div>
        <button onClick={onClose} className="text-white/70 hover:text-white p-2" data-testid="button-focal-close">
          <X className="w-6 h-6" />
        </button>
      </div>

      <div className="flex flex-col lg:flex-row gap-4 flex-1 min-h-0">
        <div className="flex-1 flex flex-col min-h-0">
          <div className="flex items-center gap-3 mb-3">
            <User className="w-4 h-4 text-white/50 flex-shrink-0" />
            <div className="relative flex-1 max-w-sm">
              <input
                type="text"
                value={artistName}
                onChange={(e) => { setArtistName(e.target.value); setShowSuggestions(true); }}
                onFocus={() => setShowSuggestions(true)}
                onBlur={() => setTimeout(() => setShowSuggestions(false), 200)}
                placeholder="Interpret / Künstlername eingeben..."
                className="w-full bg-white/10 border border-white/20 rounded px-3 py-2 text-white text-sm placeholder:text-white/30 focus:outline-none focus:border-yellow-400/60"
                data-testid="input-artist-name"
              />
              {showSuggestions && filteredSuggestions.length > 0 && (
                <div
                  ref={suggestionsRef}
                  className="absolute top-full left-0 right-0 mt-1 bg-zinc-800 border border-white/20 rounded-lg shadow-xl overflow-hidden z-50 max-h-48 overflow-y-auto"
                  data-testid="artist-suggestions"
                >
                  {filteredSuggestions.map((name) => (
                    <button
                      key={name}
                      type="button"
                      onMouseDown={(e) => e.preventDefault()}
                      onClick={() => { setArtistName(name); setShowSuggestions(false); }}
                      className="w-full text-left px-3 py-2 text-sm text-white/80 hover:bg-yellow-500/20 hover:text-white transition-colors flex items-center gap-2"
                      data-testid={`suggestion-${name}`}
                    >
                      <User className="w-3 h-3 text-white/30 flex-shrink-0" />
                      <span>{name}</span>
                    </button>
                  ))}
                </div>
              )}
            </div>

            <div className="flex items-center gap-1 ml-auto">
              <button
                onClick={handleZoomOut}
                disabled={zoom <= 1}
                className="w-8 h-8 rounded bg-white/10 hover:bg-white/20 flex items-center justify-center text-white/60 hover:text-white disabled:opacity-30 transition-colors"
                data-testid="button-zoom-out"
              >
                <ZoomOut className="w-4 h-4" />
              </button>
              <span className="text-white/40 text-xs w-10 text-center">{zoom.toFixed(1)}x</span>
              <button
                onClick={handleZoomIn}
                disabled={zoom >= 4}
                className="w-8 h-8 rounded bg-white/10 hover:bg-white/20 flex items-center justify-center text-white/60 hover:text-white disabled:opacity-30 transition-colors"
                data-testid="button-zoom-in"
              >
                <ZoomIn className="w-4 h-4" />
              </button>
            </div>
          </div>

          <div
            ref={mainContainerRef}
            className="relative flex-1 min-h-0 overflow-auto rounded-lg bg-zinc-900/50 border border-white/10 cursor-crosshair"
            onClick={handleMainClick}
            onWheel={handleWheel}
            data-testid="main-image-container"
          >
            <div className="flex items-center justify-center min-h-full" style={{ padding: zoom > 1 ? "20px" : "0" }}>
              <div className="relative inline-block">
                <img
                  ref={imgRef}
                  src={image.full || image.large}
                  alt={image.artist || image.fileName}
                  className="object-contain rounded-lg transition-transform duration-200"
                  style={{
                    maxWidth: zoom === 1 ? "100%" : "none",
                    maxHeight: zoom === 1 ? "100%" : "none",
                    width: zoom === 1 ? "auto" : `${zoom * 100}%`,
                  }}
                  data-testid="img-focal-editor"
                />
                {point && (
                  <div
                    className="absolute pointer-events-none"
                    style={{ left: `${point.x}%`, top: `${point.y}%`, transform: "translate(-50%, -50%)" }}
                  >
                    <div className="w-10 h-10 rounded-full border-2 border-yellow-400 bg-yellow-400/20 flex items-center justify-center">
                      <div className="w-2.5 h-2.5 rounded-full bg-yellow-400" />
                    </div>
                    <div className="absolute top-1/2 -left-4 -right-4 h-px bg-yellow-400/50" style={{ transform: "translateY(-50%)" }} />
                    <div className="absolute left-1/2 -top-4 -bottom-4 w-px bg-yellow-400/50" style={{ transform: "translateX(-50%)" }} />
                  </div>
                )}
              </div>
            </div>
            <div className="absolute bottom-2 left-2 flex items-center gap-2">
              <span className="text-white/30 text-[10px] bg-black/60 px-2 py-1 rounded">
                <MousePointer className="w-3 h-3 inline mr-1" />
                Klick = Fokuspunkt &middot; Scroll = Zoom
              </span>
            </div>
            {point && (
              <div className="absolute top-2 left-2 text-yellow-400/80 text-[10px] bg-black/60 px-2 py-1 rounded">
                {point.x}% / {point.y}%
              </div>
            )}
          </div>
        </div>

        <div className="lg:w-72 flex-shrink-0 flex flex-col gap-3">
          <div className="text-white/50 text-xs font-medium flex items-center gap-2">
            <Crosshair className="w-3 h-3" />
            Vorschau — Klick auf Vorschau zum Feintuning
          </div>

          <RatioPreview
            image={image}
            point={point}
            ratio="16:9"
            label="16:9 Breitbild"
            width="100%"
            height="162px"
            active={activeRatio === "16:9"}
            onClickPreview={handlePreviewClick}
            onSelect={() => setActiveRatio("16:9")}
          />

          <div className="flex gap-3">
            <RatioPreview
              image={image}
              point={point}
              ratio="9:16"
              label="9:16 Hochformat"
              width="100px"
              height="178px"
              active={activeRatio === "9:16"}
              onClickPreview={handlePreviewClick}
              onSelect={() => setActiveRatio("9:16")}
            />
            <RatioPreview
              image={image}
              point={point}
              ratio="1:1"
              label="1:1 Quadrat"
              width="178px"
              height="178px"
              active={activeRatio === "1:1"}
              onClickPreview={handlePreviewClick}
              onSelect={() => setActiveRatio("1:1")}
            />
          </div>

          <div className="flex flex-col gap-2 mt-auto pt-3 border-t border-white/10">
            <div className="flex items-center gap-2">
              <button
                onClick={() => setShowDeleteConfirm(true)}
                disabled={saving || deleting}
                className="flex items-center gap-1.5 px-3 py-2 rounded bg-red-500/20 hover:bg-red-500/40 text-red-400 hover:text-red-300 text-xs transition-colors disabled:opacity-50 border border-red-500/30"
                data-testid="button-delete-image"
              >
                <Trash2 className="w-3.5 h-3.5" />
                Löschen
              </button>
              <button
                onClick={handleResetFocal}
                disabled={saving}
                className="flex items-center gap-1.5 px-3 py-2 rounded bg-white/10 hover:bg-white/20 text-white/70 hover:text-white text-xs transition-colors disabled:opacity-50"
                data-testid="button-focal-reset"
              >
                <RotateCcw className="w-3.5 h-3.5" />
                Zurücksetzen
              </button>
            </div>
            <button
              onClick={handleSaveAll}
              disabled={saving}
              className="flex items-center justify-center gap-1.5 px-5 py-2.5 rounded bg-yellow-500 hover:bg-yellow-400 disabled:bg-yellow-500/40 text-black font-medium text-sm transition-colors w-full"
              data-testid="button-focal-save"
            >
              {saving ? (
                <div className="w-4 h-4 border-2 border-black/50 border-t-black rounded-full animate-spin" />
              ) : (
                <Check className="w-4 h-4" />
              )}
              Speichern
            </button>
          </div>
        </div>
      </div>

      {showDeleteConfirm && (
        <div className="fixed inset-0 z-[60] bg-black/80 flex items-center justify-center" data-testid="delete-confirm-dialog">
          <div className="bg-zinc-900 border border-red-500/30 rounded-xl p-6 max-w-sm mx-4 shadow-2xl">
            <div className="flex items-center gap-3 mb-4">
              <div className="w-10 h-10 rounded-full bg-red-500/20 flex items-center justify-center">
                <Trash2 className="w-5 h-5 text-red-400" />
              </div>
              <div>
                <h3 className="text-white font-semibold text-sm">Bild löschen?</h3>
                <p className="text-white/40 text-xs">Aus Cloudinary entfernen</p>
              </div>
            </div>
            <p className="text-white/60 text-sm mb-1">
              <span className="font-medium text-white">{image.artist || image.fileName}</span>
            </p>
            <p className="text-white/30 text-xs mb-4">{image.publicId}</p>
            <p className="text-red-400/80 text-xs mb-5">
              Achtung: Diese Aktion kann nicht rückgängig gemacht werden!
            </p>
            <div className="flex items-center gap-3 justify-end">
              <button
                onClick={() => setShowDeleteConfirm(false)}
                disabled={deleting}
                className="px-4 py-2 rounded bg-white/10 hover:bg-white/20 text-white/70 text-sm transition-colors"
                data-testid="button-delete-cancel"
              >
                Abbrechen
              </button>
              <button
                onClick={async () => {
                  setDeleting(true);
                  await onDelete();
                  setDeleting(false);
                  setShowDeleteConfirm(false);
                  onClose();
                }}
                disabled={deleting}
                className="flex items-center gap-1.5 px-4 py-2 rounded bg-red-600 hover:bg-red-500 disabled:bg-red-600/40 text-white font-medium text-sm transition-colors"
                data-testid="button-delete-confirm"
              >
                {deleting ? (
                  <div className="w-4 h-4 border-2 border-white/50 border-t-white rounded-full animate-spin" />
                ) : (
                  <Trash2 className="w-4 h-4" />
                )}
                Endgültig löschen
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

export default function AdminGalleryPage() {
  const queryClient = useQueryClient();
  const { data: images, isLoading, error } = useQuery<CloudinaryImage[]>({
    queryKey: ["/api/admin/cloudinary-gallery"],
  });
  const { data: focalPoints } = useQuery<FocalPointMap>({
    queryKey: ["/api/gallery/focal-points"],
  });

  const [editingImage, setEditingImage] = useState<CloudinaryImage | null>(null);
  const [searchQuery, setSearchQuery] = useState("");
  const [filterMode, setFilterMode] = useState<"all" | "no-artist" | "no-focal" | "has-focal">("all");
  const [sortMode, setSortMode] = useState<"name" | "size" | "date">("name");

  const fp = focalPoints || {};

  const sortedImages = [...(images || [])].sort((a, b) => {
    if (sortMode === "size") return b.bytes - a.bytes;
    if (sortMode === "date") return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
    return a.fileName.localeCompare(b.fileName);
  });

  const filteredImages = sortedImages.filter((img) => {
    if (searchQuery) {
      const q = searchQuery.toLowerCase();
      const matches = img.fileName.toLowerCase().includes(q) ||
        img.artist.toLowerCase().includes(q) ||
        img.publicId.toLowerCase().includes(q);
      if (!matches) return false;
    }
    if (filterMode === "no-artist") return !img.artist;
    if (filterMode === "no-focal") return !fp[img.fileName];
    if (filterMode === "has-focal") return !!fp[img.fileName];
    return true;
  });

  const handleSaveFocalPoint = async (x: number, y: number) => {
    if (!editingImage) return;
    await apiRequest("PUT", `/api/gallery/focal-points/${encodeURIComponent(editingImage.fileName)}`, { x, y });
    queryClient.invalidateQueries({ queryKey: ["/api/gallery/focal-points"] });
  };

  const handleResetFocalPoint = async () => {
    if (!editingImage) return;
    await apiRequest("DELETE", `/api/gallery/focal-points/${encodeURIComponent(editingImage.fileName)}`);
    queryClient.invalidateQueries({ queryKey: ["/api/gallery/focal-points"] });
  };

  const handleSaveArtist = async (artist: string) => {
    if (!editingImage) return;
    await apiRequest("PUT", `/api/gallery/artists/${encodeURIComponent(editingImage.fileName)}`, { artist });
    queryClient.invalidateQueries({ queryKey: ["/api/gallery/artists"] });
    queryClient.invalidateQueries({ queryKey: ["/api/gallery"] });
    queryClient.invalidateQueries({ queryKey: ["/api/admin/cloudinary-gallery"] });
  };

  const handleDeleteImage = async () => {
    if (!editingImage) return;
    await apiRequest("POST", `/api/admin/cloudinary-gallery/delete`, { publicId: editingImage.publicId });
    queryClient.invalidateQueries({ queryKey: ["/api/admin/cloudinary-gallery"] });
    queryClient.invalidateQueries({ queryKey: ["/api/gallery"] });
  };

  const totalImages = images?.length || 0;
  const totalSize = (images || []).reduce((sum, img) => sum + img.bytes, 0);
  const withFocal = Object.keys(fp).length;
  const withoutArtist = (images || []).filter((img) => !img.artist).length;

  const allArtistNames = [...new Set((images || []).map((img) => img.artist).filter(Boolean))].sort();

  return (
    <div className="min-h-screen bg-zinc-950 text-white">
      <div className="border-b border-white/10 bg-zinc-900/80 sticky top-0 z-40 backdrop-blur-sm">
        <div className="max-w-7xl mx-auto px-4 py-3">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-4">
              <Link href="/">
                <button className="flex items-center gap-2 text-white/50 hover:text-white text-sm transition-colors" data-testid="button-admin-back">
                  <ArrowLeft className="w-4 h-4" />
                  Zurück
                </button>
              </Link>
              <div className="h-5 w-px bg-white/20" />
              <div className="flex items-center gap-2">
                <Cloud className="w-5 h-5 text-blue-400" />
                <h1 className="font-bold text-lg" data-testid="text-admin-title">Cloudinary Galerie</h1>
              </div>
            </div>
          </div>
          <div className="flex items-center gap-4 mt-2 text-xs text-white/40">
            <span className="flex items-center gap-1"><Image className="w-3 h-3" /> {totalImages} Bilder</span>
            <span className="flex items-center gap-1"><HardDrive className="w-3 h-3" /> {formatBytes(totalSize)}</span>
            <span className="flex items-center gap-1"><Crosshair className="w-3 h-3" /> {withFocal} mit Fokus</span>
            <span className={`flex items-center gap-1 ${withoutArtist > 0 ? "text-yellow-400" : ""}`}>
              <User className="w-3 h-3" /> {withoutArtist} ohne Name
            </span>
          </div>
        </div>
      </div>

      <div className="max-w-7xl mx-auto px-4 py-6">
        <div className="flex flex-col sm:flex-row items-start sm:items-center gap-3 mb-6">
          <div className="relative flex-1 max-w-sm">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-white/30" />
            <input
              type="text"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              placeholder="Suche nach Name, Künstler, Public ID..."
              className="w-full pl-9 pr-3 py-2 bg-white/5 border border-white/10 rounded-lg text-sm text-white placeholder:text-white/30 focus:outline-none focus:border-blue-400/50"
              data-testid="input-admin-search"
            />
          </div>
          <div className="flex items-center gap-2 flex-wrap">
            <Filter className="w-4 h-4 text-white/30" />
            {(["all", "no-artist", "no-focal", "has-focal"] as const).map((mode) => (
              <button
                key={mode}
                onClick={() => setFilterMode(mode)}
                className={`px-3 py-1.5 rounded-full text-xs font-medium transition-colors ${
                  filterMode === mode
                    ? "bg-blue-500 text-white"
                    : "bg-white/5 text-white/50 hover:text-white hover:bg-white/10"
                }`}
                data-testid={`button-filter-${mode}`}
              >
                {mode === "all" && "Alle"}
                {mode === "no-artist" && "Ohne Name"}
                {mode === "no-focal" && "Ohne Fokus"}
                {mode === "has-focal" && "Mit Fokus"}
              </button>
            ))}
            <div className="h-4 w-px bg-white/10 mx-1" />
            {(["name", "size", "date"] as const).map((s) => (
              <button
                key={s}
                onClick={() => setSortMode(s)}
                className={`px-2 py-1 rounded text-[10px] font-medium transition-colors ${
                  sortMode === s ? "bg-white/20 text-white" : "text-white/30 hover:text-white/60"
                }`}
                data-testid={`button-sort-${s}`}
              >
                {s === "name" && "A-Z"}
                {s === "size" && "Größe"}
                {s === "date" && "Datum"}
              </button>
            ))}
          </div>
        </div>

        {error ? (
          <div className="text-center py-12">
            <Cloud className="w-12 h-12 text-red-400/50 mx-auto mb-3" />
            <p className="text-red-400 text-sm">Cloudinary Verbindung fehlgeschlagen</p>
            <p className="text-white/30 text-xs mt-1">{(error as Error).message}</p>
          </div>
        ) : isLoading ? (
          <div className="text-center py-12">
            <div className="w-8 h-8 border-2 border-blue-400 border-t-transparent rounded-full animate-spin mx-auto mb-3" />
            <p className="text-white/50 text-sm">Lade Bilder von Cloudinary...</p>
          </div>
        ) : (
          <>
            <p className="text-white/30 text-xs mb-4">{filteredImages.length} Ergebnisse</p>
            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3">
              {filteredImages.map((img) => (
                <button
                  key={img.publicId}
                  onClick={() => setEditingImage(img)}
                  className="group relative rounded-lg overflow-hidden bg-white/5 border border-white/10 hover:border-blue-400/50 cursor-pointer flex flex-col text-left transition-colors"
                  data-testid={`button-admin-image-${img.publicId}`}
                >
                  <div className="relative w-full aspect-[16/9]">
                    <img
                      src={img.thumb}
                      alt={img.artist || img.fileName}
                      className="w-full h-full object-cover"
                      style={{ objectPosition: getObjectPosition(img.fileName, fp) }}
                      loading="lazy"
                    />
                    <div className="absolute inset-0 bg-black/0 group-hover:bg-black/30 transition-colors" />

                    {fp[img.fileName] && (
                      <div
                        className="absolute w-3 h-3 -ml-1.5 -mt-1.5 pointer-events-none"
                        style={{ left: `${fp[img.fileName].x}%`, top: `${fp[img.fileName].y}%` }}
                      >
                        <div className="w-full h-full rounded-full border-2 border-yellow-400 bg-yellow-400/40" />
                      </div>
                    )}

                    <div className="absolute top-1 right-1 flex items-center gap-1">
                      {fp[img.fileName] && (
                        <span className="bg-yellow-500 text-black text-[8px] px-1 py-0.5 rounded font-bold">F</span>
                      )}
                      {!img.artist && (
                        <span className="bg-red-500/80 text-white text-[8px] px-1 py-0.5 rounded font-bold">?</span>
                      )}
                      {img.artistOverridden && (
                        <span className="bg-green-500/80 text-white text-[8px] px-1 py-0.5 rounded font-bold">E</span>
                      )}
                    </div>
                  </div>

                  <div className="px-2 py-1.5 flex-1 min-h-[48px]">
                    <p className="text-[10px] text-white/70 font-medium line-clamp-1">
                      {img.artist || <span className="text-white/30 italic">Kein Name</span>}
                    </p>
                    <p className="text-[9px] text-white/30 line-clamp-1 mt-0.5">{img.publicId}</p>
                    <p className="text-[8px] text-white/20 mt-0.5">
                      {img.width}x{img.height} &middot; {img.format} &middot; {formatBytes(img.bytes)}
                    </p>
                  </div>
                </button>
              ))}
            </div>
          </>
        )}
      </div>

      {editingImage && (
        <FocalPointEditor
          image={editingImage}
          currentFocalPoint={fp[editingImage.fileName]}
          currentArtist={editingImage.artist || ""}
          allArtistNames={allArtistNames}
          onSaveFocal={handleSaveFocalPoint}
          onResetFocal={handleResetFocalPoint}
          onSaveArtist={handleSaveArtist}
          onDelete={handleDeleteImage}
          onClose={() => setEditingImage(null)}
        />
      )}
    </div>
  );
}