fofos-admin/web/BackupsRow.tsx

import { useCallback, useEffect, useRef, useState } from 'react';
import { Check, ChevronDown, DatabaseBackup, History, Loader2, PlayCircle, PlugZap } from 'lucide-react';
import { useClient } from 'hooks/useClient';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { DirectoryPicker } from 'officerdev';
import { readableError } from './errors';
import { Console } from './Console';

/**
 * Backups: when they run, where they land, and what is actually there.
 *
 * ── A schedule somebody picks, not a cron expression somebody writes ──
 *
 * The field underneath IS a cron expression, and it is editable — but the four choices above it are
 * every schedule anybody setting up a small site has ever wanted. Making people compose "0 3 * * *"
 * from memory is how a backup ends up running every minute of the third hour.
 *
 * ── "Back up now" is not a convenience ──
 *
 * It is how you find out the location is writable and pg_dump can reach the databases, WITHOUT waiting
 * until three in the morning to discover it cannot. A scheduled job that has never once been run by
 * hand is a guess.
 *
 * ── What is on disk, not what should be ──
 *
 * The list is a `readdir` of the location. A schedule that has been silently failing looks exactly like
 * a working one until you count the files, so the files are what is shown.
 */

type Backup = { file: string; bytes: number; at: string };

type Settings = {
  cron: string | null;
  dir: string;
  dirIsSet: boolean;
  sshHost: string | null;
  sshPath: string | null;
  keep: number | null;
  lastBackupAt: string | null;
  nextRunAt: string | null;
  recent: Backup[];
};

/** The sentinel the API stores for "not on a clock". Kept in step with `ON_PUBLISH` in api/backups.ts. */
const ON_PUBLISH = 'on-publish';

/**
 * When to back up.
 *
 * "On publish" is first because it is the right answer for a site that only changes when somebody
 * changes it: a nightly backup spends most of its life copying a database identical to yesterday's,
 * and misses the one moment worth capturing.
 */
const CHOICES = [
  { label: 'On publish', cron: ON_PUBLISH },
  { label: 'Hourly', cron: '0 * * * *' },
  // Midnight, 6am, noon and 6pm — anchored to the clock rather than to whenever this was saved.
  { label: 'Every 6 hours', cron: '0 */6 * * *' },
  { label: 'Daily, 3am', cron: '0 3 * * *' },
  { label: 'Weekly, Sun 3am', cron: '0 3 * * 0' },
  { label: 'Monthly, 1st 3am', cron: '0 3 1 * *' },
] as const;

const size = (bytes: number) =>
  bytes < 1024 ? `${bytes} B` : bytes < 1024 * 1024 ? `${Math.round(bytes / 1024)} KB` : `${(bytes / 1048576).toFixed(1)} MB`;

const when = (iso: string | null) => (iso ? new Date(iso).toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'short' }) : null);

export const BackupsRow = ({ prodName, devName }: { prodName: string; devName: string }) => {
  const client = useClient();
  const clientRef = useRef(client);
  clientRef.current = client;

  const [settings, setSettings] = useState<Settings | null>(null);
  const [open, setOpen] = useState(false);
  const [cron, setCron] = useState('0 3 * * *');
  const [dir, setDir] = useState('');
  const [sshHost, setSshHost] = useState('');
  const [sshPath, setSshPath] = useState('');
  const [keep, setKeep] = useState('7');
  const [picking, setPicking] = useState(false);
  const [busy, setBusy] = useState<'save' | 'run' | 'test' | 'restore' | null>(null);
  /* Which dump is being restored, and into what — null until somebody opens the list. */
  const [restoring, setRestoring] = useState<{ file: string; target: 'production' | 'development' } | null>(
    null,
  );
  const [browsing, setBrowsing] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [output, setOutput] = useState<string | null>(null);
  const [failed, setFailed] = useState(false);

  const load = useCallback(async () => {
    try {
      const current = await clientRef.current.get<Settings>('/fofos-admin/_config/backups');
      setSettings(current);
      setCron((typed) => current.cron ?? typed);
      // The server computes the default when nobody has chosen one, so the field is never empty and
      // never shows a path that is only a guess without it also being the one that would be used.
      setDir((typed) => typed || current.dir);
      setSshHost((typed) => typed || (current.sshHost ?? ''));
      setSshPath((typed) => typed || (current.sshPath ?? ''));
      setKeep((typed) => (current.keep === null ? typed : String(current.keep)));
    } catch {
      setSettings(null);
    }
  }, []);

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

  const save = async () => {
    setBusy('save');
    setError(null);
    try {
      setSettings(
        await clientRef.current.put<Settings>('/fofos-admin/_config/backups', {
          cron,
          dir,
          sshHost,
          sshPath,
          keep: keep.trim() ? Number(keep) : null,
        }),
      );
      setOpen(false);
    } catch (failure) {
      setError(readableError(failure));
    } finally {
      setBusy(null);
    }
  };

  /** Connection first, then the directory. Different failures, different fixes — see the API. */
  const test = async () => {
    setBusy('test');
    setError(null);
    setFailed(false);
    setOutput(null);
    try {
      const result = await clientRef.current.post<{ ok: boolean; output: string }>(
        '/fofos-admin/_config/backups/test',
        { sshHost, sshPath },
      );
      setOutput(result.output);
      setFailed(!result.ok);
    } catch (failure) {
      setOutput(readableError(failure));
      setFailed(true);
    } finally {
      setBusy(null);
    }
  };

  const restore = async (file: string, target: 'production' | 'development') => {
    setBusy('restore');
    setError(null);
    setFailed(false);
    setOutput(null);
    try {
      const result = await clientRef.current.post<{ ok: boolean; output: string }>(
        '/fofos-admin/_config/backups/restore',
        { file, target, confirm: true },
      );
      setOutput(result.output);
      setFailed(!result.ok);
    } catch (failure) {
      setOutput(readableError(failure));
      setFailed(true);
    } finally {
      setBusy(null);
      setRestoring(null);
      void load();
    }
  };

  const run = async () => {
    setBusy('run');
    setError(null);
    setFailed(false);
    setOutput(null);
    try {
      const result = await clientRef.current.post<{ ok: boolean; output: string; settings: Settings }>(
        '/fofos-admin/_config/backups/run',
        {},
      );
      setSettings(result.settings);
      setOutput(result.output);
      setFailed(!result.ok);
    } catch (failure) {
      setOutput(readableError(failure));
      setFailed(true);
      void load();
    } finally {
      setBusy(null);
    }
  };

  if (!settings) return null;

  // A schedule with nowhere to send it is not set up — the point of this is the copy off the box.
  const configured = Boolean(settings.cron && settings.sshHost && settings.sshPath);
  const chosen = CHOICES.find((choice) => choice.cron === settings.cron);

  return (
    <div className="flex flex-col gap-3 border-t border-border pt-3">
      <div className="flex items-center gap-3">
        <div className="min-w-0 flex-1">
          <p className="text-xs text-muted-foreground">Backups</p>
          <p className="truncate font-mono text-xs">
            {configured ? (chosen?.label ?? settings.cron) : 'Not set up'}
            {configured && settings.sshHost ? (
              <span className="text-muted-foreground">
                {' '}
                → {settings.sshHost}:{settings.sshPath?.startsWith('/') ? settings.sshPath : `~/${settings.sshPath}`}
              </span>
            ) : null}
          </p>
        </div>

        <span className="shrink-0 text-xs text-muted-foreground/70">
          {settings.recent.length ? `${settings.recent.length} on disk` : configured ? 'none yet' : ''}
        </span>

        <div className="flex shrink-0 gap-2">
          {settings.recent.length > 0 && (
            <Button
              variant="outline"
              size="sm"
              onClick={() => {
                setBrowsing((shown) => !shown);
                setRestoring(null);
              }}
              disabled={busy !== null}
            >
              <History className="size-3.5" />
              Restore
              <ChevronDown className={`size-3.5 transition-transform ${browsing ? '' : '-rotate-90'}`} />
            </Button>
          )}
          {configured && (
            <Button variant="outline" size="sm" onClick={() => void run()} disabled={busy !== null}>
              {busy === 'run' ? <Loader2 className="size-3.5 animate-spin" /> : <PlayCircle className="size-3.5" />}
              Back up now
            </Button>
          )}
          <Button variant="outline" size="sm" onClick={() => setOpen((shown) => !shown)} disabled={busy !== null}>
            <DatabaseBackup className="size-3.5" />
            {configured ? 'Change' : 'Set up backups'}
            <ChevronDown className={`size-3.5 transition-transform ${open ? '' : '-rotate-90'}`} />
          </Button>
        </div>
      </div>

      {/* Only what has actually happened. A schedule with no runs behind it says so. */}
      {configured && !open && (
        <p className="text-xs text-muted-foreground/70">
          {settings.lastBackupAt ? `Last ${when(settings.lastBackupAt)}` : 'Never run'}
          {settings.nextRunAt ? ` · next ${when(settings.nextRunAt)}` : ''}
        </p>
      )}

      {open && (
        <div className="flex flex-col gap-3 rounded-md border border-border/60 p-3">
          <div className="space-y-1">
            <p className="text-xs font-medium">When</p>
            <div className="flex flex-wrap gap-2">
              {CHOICES.map((choice) => (
                <Button
                  key={choice.cron}
                  variant={cron === choice.cron ? 'default' : 'outline'}
                  size="sm"
                  onClick={() => setCron(choice.cron)}
                >
                  {choice.label}
                </Button>
              ))}
            </div>
            {/* The expression stays visible and editable for a SCHEDULE. "On publish" is not one, so the
                box would be a field with nothing to put in it. */}
            {cron === ON_PUBLISH ? (
              <p className="text-xs text-muted-foreground/70">
                A backup is taken every time the site is published, and at no other time.
              </p>
            ) : (
              <Input
                value={cron}
                onChange={(event) => setCron(event.target.value)}
                className="w-full font-mono text-xs"
                autoComplete="off"
                spellCheck={false}
              />
            )}
          </div>

          <div className="space-y-1">
            <p className="text-xs font-medium">
              Staged locally <span className="font-normal text-muted-foreground/70">before being sent</span>
            </p>
            <div className="flex gap-2">
              <Input
                value={dir}
                onChange={(event) => setDir(event.target.value)}
                placeholder="/home/you/backups"
                className="w-full font-mono text-xs"
                autoComplete="off"
                spellCheck={false}
              />
              <Button variant="outline" size="sm" className="shrink-0" onClick={() => setPicking((shown) => !shown)}>
                {picking ? 'Close' : 'Browse'}
              </Button>
            </div>
            {picking && (
              <DirectoryPicker
                onCancel={() => setPicking(false)}
                onPick={(absolutePath) => {
                  setDir(absolutePath);
                  setPicking(false);
                }}
              />
            )}
          </div>

          <div className="space-y-1">
            <p className="text-xs font-medium">
              Sent to <span className="font-normal text-muted-foreground/70">another machine, over SSH</span>
            </p>
            <div className="flex gap-2">
              <Input
                value={sshHost}
                onChange={(event) => setSshHost(event.target.value)}
                placeholder="user@host"
                className="w-48 shrink-0 font-mono text-xs"
                autoComplete="off"
                spellCheck={false}
              />
              <Input
                value={sshPath}
                onChange={(event) => setSshPath(event.target.value)}
                placeholder="db-backups/fofos"
                className="w-full font-mono text-xs"
                autoComplete="off"
                spellCheck={false}
              />
              <Button
                variant="outline"
                size="sm"
                className="shrink-0"
                onClick={() => void test()}
                disabled={busy !== null || !sshHost.trim() || !sshPath.trim()}
              >
                {busy === 'test' ? <Loader2 className="size-3.5 animate-spin" /> : <PlugZap className="size-3.5" />}
                Test
              </Button>
            </div>
            {/* No password field, and there will not be one: this runs with nobody at a terminal, so it
                authenticates with the owner's SSH key and stores no credential of its own. */}
            <p className="text-xs text-muted-foreground/70">
              Authenticated with this machine&rsquo;s SSH key. A path without a leading slash is relative to
              the remote home.
            </p>
          </div>

          <div className="space-y-1">
            <p className="text-xs font-medium">
              Keep <span className="font-normal text-muted-foreground/70">newest per database, both ends</span>
            </p>
            <Input
              value={keep}
              onChange={(event) => setKeep(event.target.value.replace(/[^0-9]/g, ''))}
              placeholder="all"
              className="w-24 font-mono text-xs"
              autoComplete="off"
              inputMode="numeric"
            />
          </div>

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

          <div className="flex justify-end gap-2">
            <Button variant="ghost" size="sm" onClick={() => setOpen(false)} disabled={busy !== null}>
              Cancel
            </Button>
            <Button
              size="sm"
              onClick={() => void save()}
              disabled={busy !== null || !cron.trim() || !dir.trim() || !sshHost.trim() || !sshPath.trim()}
            >
              {busy === 'save' ? <Loader2 className="size-3.5 animate-spin" /> : <Check className="size-3.5" />}
              Save
            </Button>
          </div>
        </div>
      )}

      <Console output={output} failed={failed} />

      {/*
        The dumps that are actually on disk, and what can be done with one.

        A restore EMPTIES the target first — a pg_dump carries CREATE TABLE and cannot be layered onto a
        database that already has the schema — so choosing a destination and confirming it are two
        separate clicks, and the second one says what it is about to destroy by name.
      */}
      {browsing && settings.recent.length > 0 && !open && (
        <ul className="space-y-1 rounded-md border border-border/60 p-2">
          {settings.recent.map((backup) => (
            <li key={backup.file} className="flex flex-wrap items-center gap-2 text-xs">
              <span className="min-w-0 flex-1 truncate font-mono text-muted-foreground">{backup.file}</span>
              <span className="shrink-0 text-muted-foreground/70">{size(backup.bytes)}</span>

              {restoring?.file === backup.file ? (
                <span className="flex shrink-0 items-center gap-2">
                  <span className="text-destructive">
                    Replace everything in {restoring.target === 'production' ? prodName : devName}?
                  </span>
                  <Button
                    variant="destructive"
                    size="sm"
                    onClick={() => void restore(backup.file, restoring.target)}
                    disabled={busy !== null}
                  >
                    {busy === 'restore' ? <Loader2 className="size-3.5 animate-spin" /> : null}
                    Yes, restore
                  </Button>
                  <Button variant="ghost" size="sm" onClick={() => setRestoring(null)} disabled={busy !== null}>
                    Cancel
                  </Button>
                </span>
              ) : (
                <span className="flex shrink-0 gap-2">
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => setRestoring({ file: backup.file, target: 'production' })}
                    disabled={busy !== null}
                  >
                    Into production
                  </Button>
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => setRestoring({ file: backup.file, target: 'development' })}
                    disabled={busy !== null}
                  >
                    Into development
                  </Button>
                </span>
              )}
            </li>
          ))}
        </ul>
      )}

      {/* A quiet summary when the list is closed, so the count above is not the only evidence. */}
      {!browsing && settings.recent.length > 0 && !open && (
        <ul className="space-y-0.5">
          {settings.recent.slice(0, 3).map((backup) => (
            <li key={backup.file} className="flex items-baseline gap-2 text-xs text-muted-foreground/70">
              <span className="min-w-0 flex-1 truncate font-mono">{backup.file}</span>
              <span className="shrink-0">{size(backup.bytes)}</span>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};