"use client";

import { useState, useTransition } from "react";
import { useRouter } from "next/navigation";
import { setPhotoApprovalAction, approveAllPhotosAction, setPhotoFolderReleasedAction } from "@/lib/actions/admin";
import { CheckIcon, XIcon, NoteIcon } from "@/components/PhotoActionIcons";

type PhotoInfo = { fileName: string; stars: number; approved: boolean; note: string };

function IconButton({
  active,
  variant,
  onClick,
  disabled,
  title,
  children,
}: {
  active?: boolean;
  variant: "check" | "x" | "note";
  onClick: () => void;
  disabled?: boolean;
  title: string;
  children: React.ReactNode;
}) {
  const activeStyles =
    variant === "check"
      ? "bg-emerald-400 text-black border-emerald-400"
      : variant === "x"
        ? "bg-red-400 text-black border-red-400"
        : "bg-[var(--rk-ink)] text-black border-[var(--rk-ink)]";
  return (
    <button
      type="button"
      title={title}
      disabled={disabled}
      onClick={onClick}
      className={`flex items-center justify-center h-8 w-8 rounded-full border backdrop-blur-sm transition-colors disabled:opacity-50 ${
        active ? activeStyles : "bg-black/45 border-white/25 text-white hover:border-white/60"
      }`}
    >
      {children}
    </button>
  );
}

export function PhotoApprovalGrid({
  folderId,
  clientId,
  released,
  photos,
}: {
  folderId: string;
  clientId: string;
  released: boolean;
  photos: PhotoInfo[];
}) {
  const [pending, startTransition] = useTransition();
  const router = useRouter();
  const [openNotes, setOpenNotes] = useState<Set<string>>(new Set());
  const unapprovedCount = photos.filter((p) => !p.approved).length;

  function toggleNote(fileName: string) {
    setOpenNotes((prev) => {
      const next = new Set(prev);
      if (next.has(fileName)) next.delete(fileName);
      else next.add(fileName);
      return next;
    });
  }

  function setApproved(fileName: string, approved: boolean) {
    startTransition(async () => {
      await setPhotoApprovalAction(folderId, clientId, fileName, approved);
      router.refresh();
    });
  }

  return (
    <div className="flex flex-col gap-4">
      <div
        className={`flex items-center justify-between gap-3 rounded-lg border px-3.5 py-2.5 ${released ? "border-emerald-400/30 bg-emerald-400/5" : "border-amber-400/40 bg-amber-400/5"}`}
      >
        <p className={`text-xs uppercase tracking-[0.05em] ${released ? "text-emerald-400" : "text-amber-400"}`}>
          {released ? "Ordner ist für den Kunden sichtbar" : "Ordner ist für den Kunden noch nicht sichtbar"}
        </p>
        {!released && (
          <button
            disabled={pending}
            onClick={() =>
              startTransition(async () => {
                await setPhotoFolderReleasedAction(folderId, true);
                router.refresh();
              })
            }
            className="text-xs border border-amber-400/50 text-amber-400 rounded-lg px-2.5 py-1.5 hover:border-amber-400 disabled:opacity-50 shrink-0"
          >
            Ordner freigeben
          </button>
        )}
      </div>

      {unapprovedCount > 0 && (
        <div>
          <button
            disabled={pending}
            onClick={() =>
              startTransition(async () => {
                await approveAllPhotosAction(
                  folderId,
                  clientId,
                  photos.map((p) => p.fileName)
                );
                router.refresh();
              })
            }
            className="text-xs border border-amber-400/50 text-amber-400 rounded-lg px-2.5 py-1.5 hover:border-amber-400 disabled:opacity-50"
          >
            Alle Fotos freigeben
          </button>
        </div>
      )}

      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
        {photos.map((p) => (
          <div key={p.fileName} className="relative rounded-2xl overflow-hidden border border-white/10 bg-[var(--rk-surface)]">
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
              src={`/api/photos/${folderId}/${encodeURIComponent(p.fileName)}?variant=thumb`}
              alt={p.fileName}
              className="w-full aspect-[3/4] object-cover"
            />

            {p.stars > 0 && (
              <div className="absolute top-2 left-2 flex items-center gap-1 bg-black/55 backdrop-blur-sm rounded-full px-2 py-1 text-[0.65rem] text-amber-400">
                <span>★</span>
                <span>{p.stars}</span>
              </div>
            )}

            {/* Notiz-Icon nur, wenn wirklich eine Notiz da ist — vorher
                konnte man es immer anklicken, ohne dass sichtbar etwas
                passierte, wenn keine Notiz hinterlegt war. */}
            {p.note && (
              <div className="absolute top-2 right-2">
                <IconButton variant="note" active={openNotes.has(p.fileName)} onClick={() => toggleNote(p.fileName)} title="Notiz anzeigen">
                  <span className="relative">
                    <NoteIcon className="h-4 w-4" />
                    <span className="absolute -top-1 -right-1 h-1.5 w-1.5 rounded-full bg-amber-400" />
                  </span>
                </IconButton>
              </div>
            )}

            <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/85 via-black/40 to-transparent pt-9 pb-2.5 px-2.5">
              <p className="text-[0.65rem] truncate text-white/70 mb-2">{p.fileName}</p>
              <div className="flex items-center gap-2">
                <IconButton
                  variant="check"
                  active={p.approved}
                  disabled={pending}
                  onClick={() => setApproved(p.fileName, true)}
                  title="Freigeben"
                >
                  <CheckIcon className="h-4 w-4" />
                </IconButton>
                <IconButton
                  variant="x"
                  active={!p.approved}
                  disabled={pending}
                  onClick={() => setApproved(p.fileName, false)}
                  title="Nicht freigeben"
                >
                  <XIcon className="h-4 w-4" />
                </IconButton>
              </div>
            </div>

            {p.note && openNotes.has(p.fileName) && (
              <div className="absolute inset-x-2 top-11 bg-[var(--rk-bg)]/95 backdrop-blur-sm border border-white/10 rounded-lg p-2.5 text-sm text-[var(--rk-ink)] whitespace-pre-line z-10">
                {p.note}
              </div>
            )}
          </div>
        ))}
        {photos.length === 0 && <p className="text-sm text-[var(--rk-ink-muted)]">Keine Bilder in diesem Ordner.</p>}
      </div>
    </div>
  );
}