fofos-admin/web/sections/CollectionFields.tsx

import { useEffect, useState } from 'react';
import { useClient } from 'hooks/useClient';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { useAutosave } from '../useAutosave';
import type { Collection } from './collections';

/**
 * What somebody says about a collection, in the editor column.
 *
 * ── Everything here is what a FOLDER cannot tell you ──
 *
 * Which photographs are in a collection is a question about `originals/COLLECTIONS/<name>/`, answered
 * by reading it. This is the other half: the name it goes by, the address it lives at, and the specs
 * from the client's sitemap. None of it can be derived, so all of it is typed.
 *
 * `folder` is shown and not editable. It is an address — renaming it moves files — and the API refuses
 * to write it for the same reason. Showing it anyway matters: it is the only thing that says WHICH
 * folder a collection is, and somebody looking at two similarly named ones needs to be able to tell.
 *
 * ── One draft, one save ──
 *
 * Every field writes into one draft object and `useAutosave` sends it whole. Per-field saves would be
 * eight requests for somebody filling in a form, and the last one to land would win in an order nobody
 * controls.
 */

/** The fields, in the order the client's sitemap lists them. */
const SPECS: [keyof Collection, string, string][] = [
  ['descriptive_text', 'Descriptive text', 'What this collection is'],
  ['measurement', 'Measurement', '45cm x 45cm'],
  ['material', 'Raw material', 'Acrylic yarn'],
  ['colors', 'Colours', ''],
  ['delivery_time', 'Delivery time', '4-6 weeks'],
];

export const CollectionFields = ({
  collection,
  onSaved,
}: {
  collection: Collection;
  onSaved: () => void;
}) => {
  const client = useClient();
  const [draft, setDraft] = useState<Partial<Collection>>({});

  // Keyed on the ID, not the values: keyed on the values it would fight the typing, pulling every
  // keystroke back to the last saved one until the save landed.
  useEffect(() => setDraft({}), [collection.id]);

  const value = (key: keyof Collection): string =>
    (draft[key] as string | null | undefined) ?? (collection[key] as string | null) ?? '';

  const dirty = Object.keys(draft).length > 0;

  useAutosave(dirty ? JSON.stringify(draft) : null, false, async () => {
    await client.patch(`/fofos-admin/collections/${collection.id}`, draft);
    setDraft({});
    onSaved();
  });

  const set = (key: keyof Collection) => (next: string) => setDraft((was) => ({ ...was, [key]: next }));

  return (
    <div className="space-y-4">
      <div className="space-y-1.5">
        <label className="text-xs text-muted-foreground">Name</label>
        <Input value={value('title')} onChange={(event) => set('title')(event.target.value)} />
      </div>

      <div className="space-y-1.5">
        <label className="text-xs text-muted-foreground">Address</label>
        <Input value={value('slug')} onChange={(event) => set('slug')(event.target.value)} />
        <p className="font-mono text-[11px] text-muted-foreground/70">/collections/{value('slug')}</p>
      </div>

      <div className="space-y-1.5">
        <label className="text-xs text-muted-foreground">Description</label>
        <Textarea
          rows={4}
          value={value('description')}
          onChange={(event) => set('description')(event.target.value)}
        />
      </div>

      {SPECS.map(([key, label, placeholder]) => (
        <div key={key} className="space-y-1.5">
          <label className="text-xs text-muted-foreground">{label}</label>
          {key === 'descriptive_text' ? (
            <Textarea
              rows={3}
              placeholder={placeholder}
              value={value(key)}
              onChange={(event) => set(key)(event.target.value)}
            />
          ) : (
            <Input
              placeholder={placeholder}
              value={value(key)}
              onChange={(event) => set(key)(event.target.value)}
            />
          )}
        </div>
      ))}

      {/* Read-only, and shown rather than hidden: it is the only thing that says which folder this is,
          and the API refuses to write it because renaming one moves files on disk. */}
      <div className="space-y-1.5 border-t border-border pt-4">
        <label className="text-xs text-muted-foreground">Folder</label>
        <p className="font-mono text-[11px] break-all text-muted-foreground/70">{collection.folder ?? '—'}</p>
      </div>
    </div>
  );
};