"use client";

import { useMemo, useState, useTransition } from "react";
import { useTranslations } from "next-intl";
import { ratePhotoAction, setPhotoNoteAction, setPhotoCollectionAction } from "@/lib/actions/orders";
import { NoteIcon, DownloadIcon } from "@/components/PhotoActionIcons";

type Photo = { fileName: string; stars: number; note: string; collection: string };

function Stars({ value, onRate }: { value: number; onRate: (stars: number) => void }) {
  return (
    <div className="flex gap-0.5">
      {[1, 2, 3, 4, 5].map((n) => (
        <button
          key={n}
          type="button"
          onClick={() => onRate(n === value ? 0 : n)}
          className={`text-lg leading-none transition-colors p-0.5 -m-0.5 ${n <= value ? "text-amber-400" : "text-white/40 hover:text-amber-400/60"}`}
        >
          ★
        </button>
      ))}
    </div>
  );
}

export function PhotoGalleryClient({ folderId, photos }: { folderId: string; photos: Photo[] }) {
  const t = useTranslations("photos");
  const [ratings, setRatings] = useState<Record<string, number>>(
    Object.fromEntries(photos.map((p) => [p.fileName, p.stars]))
  );
  const [notes, setNotes] = useState<Record<string, string>>(
    Object.fromEntries(photos.map((p) => [p.fileName, p.note]))
  );
  // Welches Foto gerade das Notiz-Panel offen hat, und ob es dabei im
  // Bearbeiten-Modus ist (Textfeld+Absenden) oder nur die Notiz anzeigt
  // (Text+Bearbeiten-Button) — explizit statt "beim Wegklicken speichern",
  // damit klar ist, wie man eine Notiz anlegt/abschickt.
  const [noteOpenFor, setNoteOpenFor] = useState<string | null>(null);
  const [editingNote, setEditingNote] = useState(false);
  const [, startTransition] = useTransition();
  const [lightboxIndex, setLightboxIndex] = useState<number | null>(null);
  const [collections, setCollections] = useState<Record<string, string>>(
    Object.fromEntries(photos.map((p) => [p.fileName, p.collection || ""]))
  );
  const [activeCollection, setActiveCollection] = useState<string>("all");

  const distinctCollections = useMemo(
    () => Array.from(new Set(Object.values(collections).filter(Boolean))).sort((a, b) => a.localeCompare(b)),
    [collections]
  );
  const visiblePhotos =
    activeCollection === "all" ? photos : photos.filter((p) => (collections[p.fileName] || "") === activeCollection);

  function setCollection(fileName: string, value: string) {
    setCollections((prev) => ({ ...prev, [fileName]: value }));
    startTransition(() => setPhotoCollectionAction(folderId, fileName, value));
  }

  function rate(fileName: string, stars: number) {
    setRatings((prev) => ({ ...prev, [fileName]: stars }));
    startTransition(() => ratePhotoAction(folderId, fileName, stars));
  }

  function openNote(fileName: string) {
    if (noteOpenFor === fileName) {
      setNoteOpenFor(null);
      return;
    }
    setNoteOpenFor(fileName);
    setEditingNote(!notes[fileName]);
  }

  function submitNote(fileName: string, note: string) {
    setNotes((prev) => ({ ...prev, [fileName]: note }));
    setEditingNote(false);
    startTransition(() => setPhotoNoteAction(folderId, fileName, note));
  }

  const active = lightboxIndex !== null ? visiblePhotos[lightboxIndex] : null;
  const ratedCount = Object.values(ratings).filter((s) => s > 0).length;

  return (
    <>
      {photos.length > 0 && (
        <p className="mb-4 text-center text-xs uppercase tracking-[0.15em] text-[var(--rk-ink-muted)]">
          {t("ratedProgress", { rated: ratedCount, total: photos.length })}
        </p>
      )}
      {distinctCollections.length > 0 && (
        <div className="mb-5 flex flex-wrap justify-center gap-2">
          <button
            type="button"
            onClick={() => setActiveCollection("all")}
            className={`text-xs uppercase tracking-[0.1em] px-3.5 py-1.5 rounded-full border transition-colors ${
              activeCollection === "all" ? "border-white text-[var(--rk-ink)]" : "border-white/15 text-[var(--rk-ink-muted)] hover:border-white/40"
            }`}
          >
            {t("collectionAll")}
          </button>
          {distinctCollections.map((c) => (
            <button
              key={c}
              type="button"
              onClick={() => setActiveCollection(c)}
              className={`text-xs uppercase tracking-[0.1em] px-3.5 py-1.5 rounded-full border transition-colors ${
                activeCollection === c ? "border-white text-[var(--rk-ink)]" : "border-white/15 text-[var(--rk-ink-muted)] hover:border-white/40"
              }`}
            >
              {c}
            </button>
          ))}
        </div>
      )}
      <div className="grid grid-cols-2 sm:grid-cols-3 gap-4">
        {visiblePhotos.map((p, i) => (
          <div key={p.fileName} className="relative rounded-2xl overflow-hidden border border-white/10 bg-[var(--rk-surface)]">
            <button
              type="button"
              onClick={() => setLightboxIndex(i)}
              className="relative block w-full aspect-[3/4] overflow-hidden group"
            >
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src={`/api/photos/${folderId}/${encodeURIComponent(p.fileName)}?variant=thumb`}
                alt={p.fileName}
                draggable={false}
                onContextMenu={(e) => e.preventDefault()}
                className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
              />
            </button>

            <div className="absolute top-2 right-2 flex items-center gap-1.5">
              <button
                type="button"
                onClick={() => openNote(p.fileName)}
                title={notes[p.fileName] ? "Notiz anzeigen" : t("addNote")}
                className={`flex items-center justify-center h-8 w-8 rounded-full border backdrop-blur-sm transition-colors ${
                  noteOpenFor === p.fileName
                    ? "bg-[var(--rk-ink)] text-black border-[var(--rk-ink)]"
                    : "bg-black/45 border-white/25 text-white hover:border-white/60"
                }`}
              >
                <span className="relative">
                  <NoteIcon className="h-4 w-4" />
                  {notes[p.fileName] && <span className="absolute -top-1 -right-1 h-1.5 w-1.5 rounded-full bg-amber-400" />}
                </span>
              </button>
              <a
                href={`/api/photos/${folderId}/${encodeURIComponent(p.fileName)}?variant=full&download=1`}
                title={t("download")}
                className="flex items-center justify-center h-8 w-8 rounded-full border border-white/25 bg-black/45 backdrop-blur-sm text-white hover:border-white/60 transition-colors"
              >
                <DownloadIcon className="h-4 w-4" />
              </a>
            </div>

            <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/85 via-black/35 to-transparent pt-9 pb-2.5 px-2.5">
              <Stars value={ratings[p.fileName] ?? 0} onRate={(s) => rate(p.fileName, s)} />
            </div>

            {noteOpenFor === 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">
                <label className="flex flex-col gap-1 text-xs">
                  <span className="text-[var(--rk-ink-muted)]">{t("collectionLabel")}</span>
                  <input
                    type="text"
                    defaultValue={collections[p.fileName] ?? ""}
                    placeholder={t("collectionPlaceholder")}
                    maxLength={80}
                    onBlur={(e) => setCollection(p.fileName, e.target.value)}
                    className="bg-transparent border border-white/15 rounded-lg px-2.5 py-1.5 text-sm focus:outline-none focus:border-white/40"
                  />
                </label>
                {editingNote ? (
                  <>
                    <textarea
                      autoFocus
                      defaultValue={notes[p.fileName] ?? ""}
                      rows={3}
                      maxLength={500}
                      placeholder={t("notePlaceholder")}
                      id={`note-${p.fileName}`}
                      className="w-full text-sm bg-transparent border border-white/15 rounded-lg px-2.5 py-2 focus:outline-none focus:border-white/40 resize-y"
                    />
                    <button
                      type="button"
                      onClick={() => {
                        const el = document.getElementById(`note-${p.fileName}`) as HTMLTextAreaElement | null;
                        submitNote(p.fileName, el?.value ?? "");
                      }}
                      className="self-end text-xs uppercase tracking-[0.1em] border border-white/25 rounded-full px-3.5 py-1.5 hover:border-white/60 transition-colors"
                    >
                      {t("submitNote")}
                    </button>
                  </>
                ) : (
                  <>
                    <p className="text-sm text-[var(--rk-ink)] whitespace-pre-line">{notes[p.fileName]}</p>
                    <button
                      type="button"
                      onClick={() => setEditingNote(true)}
                      className="self-end text-xs uppercase tracking-[0.1em] border border-white/25 rounded-full px-3.5 py-1.5 hover:border-white/60 transition-colors"
                    >
                      {t("editNote")}
                    </button>
                  </>
                )}
              </div>
            )}
          </div>
        ))}
        {photos.length === 0 && <p className="text-sm text-[var(--rk-ink-muted)]">{t("noPhotos")}</p>}
      </div>

      {active && (
        <div
          className="fixed inset-0 z-50 flex items-center justify-center bg-black/90 backdrop-blur-sm p-6"
          onClick={() => setLightboxIndex(null)}
        >
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src={`/api/photos/${folderId}/${encodeURIComponent(active.fileName)}?variant=full`}
            alt={active.fileName}
            draggable={false}
            onContextMenu={(e) => e.preventDefault()}
            className="max-w-full max-h-full object-contain"
            onClick={(e) => e.stopPropagation()}
          />
          <button
            onClick={() => setLightboxIndex(null)}
            className="absolute top-5 right-5 h-10 w-10 flex items-center justify-center border border-white/20 text-white hover:border-white/60"
          >
            ✕
          </button>
        </div>
      )}
    </>
  );
}