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';

/**
 * 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 per band ──
 *
 * The same rule Home follows, for the same reason. `take()` on the server treats an absent key as
 * "leave it alone", so a single Save carrying every field would let a half-finished manifesto ride
 * along with a photograph somebody meant to change. Four bands, four independent saves.
 *
 * ── 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]);

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

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

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

  const saveButton = (label: string, onClick: () => void) => (
    <div className="flex items-center gap-2">
      <Button size="sm" onClick={onClick} disabled={busy !== null}>
        {busy === label ? <Loader2 className="size-3.5 animate-spin" /> : null}
        Save
      </Button>
      {saved && busy === null && <span className="text-xs text-success">Saved</span>}
    </div>
  );

  return (
    <div className="flex flex-col gap-4 overflow-auto p-4">
      <p className="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>

      {/* ── 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>

        {saveButton('header', () =>
          void send('header', { header_url: orNull(headerUrl), header_phrase: orNull(phrase) }),
        )}
      </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." />
        {saveButton('about', () => void send('about', { about_text: orNull(aboutText) }))}
      </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." />
        {saveButton('product', () =>
          void send('product', { product_video_url: orNull(productVideo), product_text: orNull(productText) }),
        )}
      </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." />
        {saveButton('manifesto', () => void send('manifesto', { manifesto_text: orNull(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>
  );
};