fofos-admin/web/sections/CollectionsPanel.tsx

import { useCallback, useEffect, useRef, useState } from 'react';
import { useSearchParams } from 'react-router';
import { Boxes, Check, Loader2 } from 'lucide-react';
import { useClient } from 'hooks/useClient';
import { readableError } from '../errors';
import { useEditorSlot } from '../useEditorSlot';
import { thumbUrl } from '../thumbnail';
import { CollectionFields } from './CollectionFields';
import type { Collection, CollectionPhoto } from './collections';

/**
 * Collections — one folder of photographs each, and what is said about it.
 *
 * ── The list is the DISK ──
 *
 * Which collections exist is a question about `originals/COLLECTIONS/`, not about a table. The API
 * registers every folder as it reads them, so a collection appears here the moment its folder does and
 * there is no "create" button: making one means making a folder, in Media or in Finder, and both work.
 *
 * Deleting is the same in reverse and is deliberately not offered. A button here would either remove a
 * row and leave the photographs — so the collection reappears on the next read — or delete somebody's
 * pictures. Neither is what a Delete button in an admin should mean.
 *
 * ── The grid is for choosing the COVER ──
 *
 * The photographs are already ordered by their filenames and the gallery is the folder, so there is
 * nothing to reorder and nothing to add. The one decision is which picture leads, and that is a click.
 */

export const CollectionsPanel = () => {
  const client = useClient();
  const clientRef = useRef(client);
  clientRef.current = client;

  const [collections, setCollections] = useState<Collection[] | null>(null);
  const [photos, setPhotos] = useState<CollectionPhoto[] | null>(null);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);

  // Selection in the URL, like every other screen here — see docs/navigation-audit.md.
  const [params, setParams] = useSearchParams();
  const selectedId = Number(params.get('collection')) || null;
  const selected = collections?.find((one) => one.id === selectedId) ?? null;

  const load = useCallback(async () => {
    try {
      const response = await clientRef.current.get<{ data: Collection[] }>('/fofos-admin/collections');
      setCollections(response.data);
    } catch (failure) {
      setError(readableError(failure));
      setCollections([]);
    }
  }, []);

  useEffect(() => {
    void load();
  }, [load]);

  // The folder's contents, re-read when the selection moves. Null while nothing is chosen, so the
  // empty state and "still loading" are not the same thing.
  useEffect(() => {
    if (!selectedId) {
      setPhotos(null);
      return;
    }
    let alive = true;
    setPhotos(null);
    void clientRef.current
      .get<{ data: CollectionPhoto[] }>(`/fofos-admin/collections/${selectedId}/media`)
      .then((response) => alive && setPhotos(response.data))
      .catch((failure: unknown) => alive && setError(readableError(failure)));
    return () => {
      alive = false;
    };
  }, [selectedId]);

  /*
    The fields, in the editor column — a SIBLING panel, so they are announced rather than rendered.
    See useEditorSlot.
  */
  const [, setEditor] = useEditorSlot();
  const setEditorRef = useRef(setEditor);
  setEditorRef.current = setEditor;

  useEffect(() => {
    setEditorRef.current(
      selected ? <CollectionFields collection={selected} onSaved={() => void load()} /> : null,
    );
  }, [selected, load]);

  useEffect(() => () => setEditorRef.current(null), []);

  const chooseCover = async (name: string) => {
    if (!selected) return;
    setBusy(true);
    setError(null);
    try {
      // Pressing the one already chosen clears it, which is how "no choice, use the first" is reachable
      // again without a second control that only does that.
      const next = selected.cover === name ? null : name;
      await clientRef.current.patch(`/fofos-admin/collections/${selected.id}`, { cover: next });
      await load();
    } catch (failure) {
      setError(readableError(failure));
    } finally {
      setBusy(false);
    }
  };

  const select = (id: number) =>
    setParams(
      (current) => {
        const next = new URLSearchParams(current);
        next.set('collection', String(id));
        return next;
      },
      { replace: true },
    );

  return (
    <div className="flex size-full min-h-0">
      <ul className="w-64 shrink-0 overflow-y-auto border-r border-border">
        {collections === null ? (
          <li className="p-4 text-xs text-muted-foreground">Reading the folders…</li>
        ) : collections.length === 0 ? (
          <li className="p-4 text-xs text-muted-foreground">
            Nothing under <span className="font-mono">originals/COLLECTIONS</span> yet.
          </li>
        ) : (
          collections.map((collection) => (
            <li key={collection.id}>
              <button
                type="button"
                onClick={() => select(collection.id)}
                className={`flex w-full items-center gap-2 border-b border-border px-3 py-2 text-left text-sm transition-colors hover:bg-muted/40 ${
                  collection.id === selectedId ? 'bg-muted/60' : ''
                }`}
              >
                <Boxes className="size-3.5 shrink-0 text-muted-foreground" />
                <span className="min-w-0 flex-1 truncate">{collection.title}</span>
                {/* The count, because a collection with no photographs looks identical to one nobody
                    has opened, and two of these are genuinely empty. */}
                <span className="shrink-0 text-[11px] tabular-nums text-muted-foreground">
                  {collection.photo_count}
                </span>
              </button>
            </li>
          ))
        )}
      </ul>

      <div className="min-w-0 flex-1 overflow-y-auto p-4">
        {error && <p className="mb-3 text-xs text-destructive">{error}</p>}

        {!selected ? (
          <p className="text-xs text-muted-foreground">Choose a collection.</p>
        ) : photos === null ? (
          <p className="flex items-center gap-2 text-xs text-muted-foreground">
            <Loader2 className="size-3 animate-spin" /> Reading {selected.folder}…
          </p>
        ) : photos.length === 0 ? (
          <p className="text-xs text-muted-foreground">
            That folder is empty. Put photographs in <span className="font-mono">{selected.folder}</span>.
          </p>
        ) : (
          <>
            <p className="mb-3 text-xs text-muted-foreground">
              {photos.length} photographs, in filename order. Click one to make it the main photo.
            </p>
            <ul className="grid grid-cols-[repeat(auto-fill,minmax(9rem,1fr))] gap-3">
              {photos.map((photo) => {
                const isCover = selected.cover ? photo.name === selected.cover : photo === photos[0];
                return (
                  <li key={photo.path}>
                    <button
                      type="button"
                      disabled={busy}
                      onClick={() => void chooseCover(photo.name)}
                      className={`relative block w-full overflow-hidden rounded-md border transition-colors ${
                        isCover ? 'border-primary ring-1 ring-primary' : 'border-border hover:border-primary/50'
                      }`}
                    >
                      <img src={thumbUrl(photo.path, 320)} alt="" className="aspect-square w-full object-cover" />
                      {isCover && (
                        <span className="absolute top-1.5 right-1.5 flex items-center gap-1 rounded bg-primary px-1.5 py-0.5 text-[10px] text-primary-foreground shadow">
                          <Check className="size-2.5" />
                          {/* "Main" rather than "Cover": the first one is the main photo by default, so
                              the badge has to be true of a picture nobody chose as well as one somebody
                              did. */}
                          Main
                        </span>
                      )}
                    </button>
                    <p className="mt-1 truncate font-mono text-[10px] text-muted-foreground/70">{photo.name}</p>
                  </li>
                );
              })}
            </ul>
          </>
        )}
      </div>
    </div>
  );
};