fofos-admin/web/sections/AboutPanel.tsx

import { useCallback, useEffect, useRef, useState } from 'react';
import { FolderOpen, Loader2 } from 'lucide-react';
import { useClient } from 'hooks/useClient';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { readableError } from '../errors';
import { useFlash } from '../useFlash';
import { RichText } from '../RichText';
import { MediaPicker } from '../MediaPicker';
import { useSaveTarget } from '../SaveTarget';

/**
 * About Us — four bands, in the order the page shows them.
 *
 * The sitemap's shape, exactly: a HEADER of a photograph and a phrase, then ABOUT US, then PRODUTO
 * with a video beside its text, then MANIFESTO. Nothing here invents a field the page does not render
 * and nothing the page renders is missing.
 *
 * ── It edits DEVELOPMENT ──
 *
 * Like every section here. An edit lands on the development server immediately and becomes public when
 * somebody presses Publish; production is a directory of static files with no API to write to.
 *
 * ── One Save, in the panel's bar ──
 *
 * There were four, one per band, because the API treats an absent key as "leave it alone" and a Save
 * carrying everything meant a half-written manifesto shipping with a photograph somebody meant to
 * change. With a single Save that is the model rather than an accident: one press writes the page you
 * are looking at.
 *
 * `dirty` is a comparison against what the server last returned, not a flag set by every keystroke. A
 * flag says "something was typed" and stays true after you undo it by hand; a comparison says "this
 * differs from what is stored", which is the question the button is actually answering.
 *
 * ── The server owns the shape ──
 *
 * Every PATCH answers with the whole payload and this never patches its own state from what it sent.
 * The server clears the header's crop when the header photograph changes, and a client keeping its own
 * copy would go on showing a framing that had already been discarded.
 */

type About = {
  header: { url: string | null; crop: string | null; fit: string | null; phrase: string | null };
  about_text: string | null;
  product_video_url: string | null;
  product_text: string | null;
  manifesto_text: string | null;
};

/** Which media slot the picker is open for, or null. The two cannot be open at once. */
type Picking = 'header' | 'product' | null;

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

  const [about, setAbout] = useState<About | null>(null);
  const [headerUrl, setHeaderUrl] = useState('');
  const [phrase, setPhrase] = useState('');
  const [aboutText, setAboutText] = useState('');
  const [productVideo, setProductVideo] = useState('');
  const [productText, setProductText] = useState('');
  const [manifesto, setManifesto] = useState('');
  const [busy, setBusy] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [saved, flashSaved] = useFlash();
  const [picking, setPicking] = useState<Picking>(null);

  /** Every write answers with the whole payload, so this is the only place state is set. */
  const apply = useCallback((data: About) => {
    setAbout(data);
    setHeaderUrl(data.header.url ?? '');
    setPhrase(data.header.phrase ?? '');
    setAboutText(data.about_text ?? '');
    setProductVideo(data.product_video_url ?? '');
    setProductText(data.product_text ?? '');
    setManifesto(data.manifesto_text ?? '');
  }, []);

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

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

  /** Empty is null, not "". A field somebody cleared and one never filled are the same thing. */
  const orNull = (value: string) => value.trim() || null;

  /** Every field this page owns, as the API spells them. One place, so save and dirty cannot disagree. */
  const edited = {
    header_url: orNull(headerUrl),
    header_phrase: orNull(phrase),
    about_text: orNull(aboutText),
    product_video_url: orNull(productVideo),
    product_text: orNull(productText),
    manifesto_text: orNull(manifesto),
  };

  const stored = about && {
    header_url: about.header.url,
    header_phrase: about.header.phrase,
    about_text: about.about_text,
    product_video_url: about.product_video_url,
    product_text: about.product_text,
    manifesto_text: about.manifesto_text,
  };

  const dirty = Boolean(stored) && JSON.stringify(edited) !== JSON.stringify(stored);

  const save = async () => {
    setBusy('save');
    setError(null);
    try {
      apply((await clientRef.current.patch<{ data: About }>('/fofos-admin/about', edited)).data);
      flashSaved();
    } catch (failure) {
      setError(readableError(failure));
    } finally {
      setBusy(null);
    }
  };

  useSaveTarget(dirty, busy !== null, save);

  if (!about) {
    return (
      <div className="p-4 text-xs text-muted-foreground">{error ?? 'Loading…'}</div>
    );
  }

  return (
    <div className="flex size-full flex-col gap-4 overflow-auto p-4">
      <div className="flex items-center gap-2">
        <p className="flex-1 text-xs text-muted-foreground">
          The About page, in the order it is shown: a header, the text about you, the product, and the
          manifesto.
        </p>
        {/* Confirmation lives with the content rather than in the bar, because the bar's own button
            has already gone back to saying "Save" by the time anybody looks up. */}
        {saved && <span className="text-xs text-success">Saved</span>}
      </div>

      {/* ── HEADER: a photograph and a phrase over it ─────────────────────────────────────────── */}
      <section className="flex flex-col gap-3 rounded-lg border border-border p-4">
        <div>
          <h3 className="text-sm font-medium">Header</h3>
          <p className="text-xs text-muted-foreground">The photograph at the top, and the line over it.</p>
        </div>

        {/* Chosen from originals/, never typed. The same picker Home's hero uses — a path somebody
            types is a path that is wrong by one character and renders as a broken image. */}
        <div className="flex items-center gap-2">
          <Input
            value={headerUrl}
            readOnly
            placeholder="No photograph chosen"
            className="font-mono text-xs"
          />
          <Button variant="outline" size="sm" className="shrink-0" onClick={() => setPicking('header')}>
            <FolderOpen className="size-3.5" />
            Browse
          </Button>
        </div>

        <div className="flex flex-col gap-1">
          <label className="text-xs text-muted-foreground">Phrase</label>
          <Input value={phrase} onChange={(event) => setPhrase(event.currentTarget.value)} />
        </div>
      </section>

      {/* ── ABOUT US ─────────────────────────────────────────────────────────────────────────── */}
      <section className="flex flex-col gap-3 rounded-lg border border-border p-4">
        <div>
          <h3 className="text-sm font-medium">About us</h3>
          <p className="text-xs text-muted-foreground">Who you are.</p>
        </div>
        <RichText value={aboutText} onChange={setAboutText} placeholder="Tell people who you are." />
      </section>

      {/* ── PRODUTO: a video beside its text ─────────────────────────────────────────────────── */}
      <section className="flex flex-col gap-3 rounded-lg border border-border p-4">
        <div>
          <h3 className="text-sm font-medium">Product</h3>
          <p className="text-xs text-muted-foreground">What you make, and a video of it being made.</p>
        </div>

        <div className="flex items-center gap-2">
          <Input
            value={productVideo}
            readOnly
            placeholder="No video chosen"
            className="font-mono text-xs"
          />
          <Button variant="outline" size="sm" className="shrink-0" onClick={() => setPicking('product')}>
            <FolderOpen className="size-3.5" />
            Browse
          </Button>
        </div>

        <RichText value={productText} onChange={setProductText} placeholder="What the product is." />
      </section>

      {/* ── MANIFESTO ────────────────────────────────────────────────────────────────────────── */}
      <section className="flex flex-col gap-3 rounded-lg border border-border p-4">
        <div>
          <h3 className="text-sm font-medium">Manifesto</h3>
          <p className="text-xs text-muted-foreground">What you stand for.</p>
        </div>
        <RichText value={manifesto} onChange={setManifesto} placeholder="The manifesto." />
      </section>

      {error && <p className="text-xs text-destructive">{error}</p>}

      {/*
        One picker, two slots.

        `picking` names which one asked, so the chosen path lands in the right field. Two pickers would
        be two copies of a modal that already knows how to browse originals/.
      */}
      <MediaPicker
        open={picking !== null}
        onClose={() => setPicking(null)}
        title={picking === 'product' ? 'Choose the product video' : 'Choose the header photograph'}
        onPick={(path) => {
          if (picking === 'product') setProductVideo(path);
          else setHeaderUrl(path);
          setPicking(null);
        }}
      />
    </div>
  );
};