"use client";

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

type PhotoInfo = { fileName: string; stars: number; approved: boolean; note: string; tags: string[]; formatLabel: string | null };

function IconButton({
  active,
  variant,
  onClick,
  disabled,
  title,
  children,
}: {
  active?: boolean;
  variant: "check" | "x" | "note" | "tag";
  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,
  tagSuggestions,
}: {
  folderId: string;
  clientId: string;
  released: boolean;
  photos: PhotoInfo[];
  tagSuggestions: string[];
}) {
  const [pending, startTransition] = useTransition();
  const router = useRouter();
  const [openNotes, setOpenNotes] = useState<Set<string>>(new Set());
  const [tagEditorFor, setTagEditorFor] = useState<string | null>(null);
  const [tagsByFile, setTagsByFile] = useState<Record<string, string[]>>(
    Object.fromEntries(photos.map((p) => [p.fileName, p.tags]))
  );
  const [tagInput, setTagInput] = useState("");
  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();
    });
  }

  function saveTags(fileName: string, tags: string[]) {
    setTagsByFile((prev) => ({ ...prev, [fileName]: tags }));
    startTransition(() => setPhotoTagsAction(folderId, clientId, fileName, tags));
  }

  function addTag(fileName: string, raw: string) {
    const tag = raw.trim();
    if (!tag) return;
    const current = tagsByFile[fileName] || [];
    if (current.includes(tag)) return;
    saveTags(fileName, [...current, tag]);
    setTagInput("");
  }

  function removeTag(fileName: string, tag: string) {
    saveTags(fileName, (tagsByFile[fileName] || []).filter((t) => t !== tag));
  }

  function openTagEditor(fileName: string) {
    setTagInput("");
    setTagEditorFor(tagEditorFor === fileName ? null : fileName);
  }

  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) => {
          const tags = tagsByFile[p.fileName] || [];
          const suggestionsLeft = tagSuggestions.filter((t) => !tags.includes(t));
          return (
            <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"
              />

              <div className="absolute top-2 left-2 flex flex-col items-start gap-1">
                {extractPhotoNumber(p.fileName) && (
                  <div className="bg-black/55 backdrop-blur-sm rounded-md px-2 py-1 text-[0.65rem] font-medium text-white">
                    {extractPhotoNumber(p.fileName)}
                  </div>
                )}
                {p.stars > 0 && (
                  <div className="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>
                )}
              </div>

              <div className="absolute top-2 right-2 flex items-center gap-1.5">
                <IconButton variant="tag" active={tagEditorFor === p.fileName || tags.length > 0} onClick={() => openTagEditor(p.fileName)} title="Tags bearbeiten">
                  <span className="relative">
                    <TagIcon className="h-4 w-4" />
                    {tags.length > 0 && <span className="absolute -top-1 -right-1 h-1.5 w-1.5 rounded-full bg-amber-400" />}
                  </span>
                </IconButton>
                {p.note && (
                  <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-1">{p.fileName}</p>
                {(tags.length > 0 || p.formatLabel) && (
                  <div className="flex flex-wrap items-center gap-1 mb-2">
                    {tags.map((t) => (
                      <span key={t} className="text-[0.6rem] uppercase tracking-[0.05em] bg-white/10 rounded-full px-2 py-0.5 text-white/80">
                        {t}
                      </span>
                    ))}
                    {p.formatLabel && <span className="text-[0.6rem] text-white/50">{p.formatLabel}</span>}
                  </div>
                )}
                <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>
              )}

              {tagEditorFor === p.fileName && (
                <div className="absolute inset-x-2 top-11 z-10 bg-[var(--rk-bg)]/95 backdrop-blur-sm border border-white/15 rounded-lg p-2.5 flex flex-col gap-2">
                  {tags.length > 0 && (
                    <div className="flex flex-wrap gap-1.5">
                      {tags.map((t) => (
                        <button
                          key={t}
                          type="button"
                          onClick={() => removeTag(p.fileName, t)}
                          title="Entfernen"
                          className="text-xs bg-white/10 hover:bg-white/20 rounded-full px-2.5 py-1 text-[var(--rk-ink)] transition-colors"
                        >
                          {t} ✕
                        </button>
                      ))}
                    </div>
                  )}
                  <input
                    type="text"
                    autoFocus
                    value={tagInput}
                    onChange={(e) => setTagInput(e.target.value)}
                    onKeyDown={(e) => {
                      if (e.key === "Enter") {
                        e.preventDefault();
                        addTag(p.fileName, tagInput);
                      }
                    }}
                    placeholder="Tag eingeben, Enter zum Hinzufügen"
                    className="w-full text-sm bg-transparent border border-white/15 rounded-lg px-2.5 py-1.5 focus:outline-none focus:border-white/40"
                  />
                  {suggestionsLeft.length > 0 && (
                    <div className="flex flex-wrap gap-1.5">
                      {suggestionsLeft.map((t) => (
                        <button
                          key={t}
                          type="button"
                          onClick={() => addTag(p.fileName, t)}
                          className="text-xs border border-white/20 rounded-full px-2.5 py-1 text-[var(--rk-ink-muted)] hover:border-white/50 hover:text-[var(--rk-ink)] transition-colors"
                        >
                          + {t}
                        </button>
                      ))}
                    </div>
                  )}
                </div>
              )}
            </div>
          );
        })}
        {photos.length === 0 && <p className="text-sm text-[var(--rk-ink-muted)]">Keine Bilder in diesem Ordner.</p>}
      </div>
    </div>
  );
}