fofos-admin/web/MediaFolder.tsx

import { useCallback, useEffect, useRef, useState } from 'react';
import { CircleAlert, CircleCheck, CircleDashed, FolderPlus, Loader2 } from 'lucide-react';
import { useClient } from 'hooks/useClient';
import { Button } from '@/components/ui/button';
import { readableError } from './errors';

/**
 * `<root>/media` — where the images and the files live.
 *
 * Same row shape as the checkout above it, because they are the same kind of fact: a thing that either
 * is or is not at a known path under the root, with one button that puts it there.
 *
 * No console. Making a directory either works or gives one line about why not, and a black transcript
 * box for a single sentence would make a small thing look like a large one.
 *
 * What goes INSIDE is not decided yet — see `api/media.ts`. This provisions the directory and nothing
 * else on purpose.
 */

type Status = { path: string; present: boolean; entries: number | null; blocked: boolean };

export const MediaFolder = ({ rootPath }: { rootPath: string }) => {
  const client = useClient();
  const clientRef = useRef(client);
  clientRef.current = client;

  const [status, setStatus] = useState<Status | null>(null);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const load = useCallback(async () => {
    try {
      setStatus(await clientRef.current.get<Status>('/fofos-admin/_config/media'));
    } catch {
      // Owner-only. The block above already says so once, and twice is two refusals for one cause.
      setStatus(null);
    }
  }, []);

  // Re-read whenever the root moves — this describes `<root>/media`, and a stale answer is about a
  // directory nobody is looking at any more.
  useEffect(() => {
    void load();
  }, [load, rootPath]);

  const create = async () => {
    setBusy(true);
    setError(null);
    try {
      const result = await clientRef.current.post<{ ok: boolean; error?: string; status: Status }>(
        '/fofos-admin/_config/media/create',
        {},
      );
      setStatus(result.status);
      if (!result.ok && result.error) setError(result.error);
    } catch (failure) {
      setError(readableError(failure));
      void load();
    } finally {
      setBusy(false);
    }
  };

  if (!status) return null;

  const Icon = status.blocked ? CircleAlert : status.present ? CircleCheck : CircleDashed;
  const tone = status.blocked ? 'text-destructive' : status.present ? 'text-success' : 'text-muted-foreground';

  return (
    <div className="flex flex-col gap-2 border-t border-border pt-3">
      <div className="flex items-start gap-2">
        <Icon className={`mt-0.5 size-3.5 shrink-0 ${tone}`} />
        <div className="min-w-0 flex-1 space-y-0.5">
          <p className="font-mono text-xs break-all">{status.path}</p>

          {status.blocked ? (
            <p className="text-xs text-destructive">Something is already here, and it is not a directory.</p>
          ) : status.present ? (
            <p className="text-xs text-muted-foreground">
              {status.entries === null
                ? 'Ready.'
                : status.entries === 0
                  ? 'Ready — empty.'
                  : `Ready — ${status.entries} item${status.entries === 1 ? '' : 's'}.`}
            </p>
          ) : (
            <p className="text-xs text-muted-foreground">Not created yet.</p>
          )}
        </div>

        {!status.present && (
          <Button size="sm" className="shrink-0" onClick={() => void create()} disabled={busy}>
            {busy ? <Loader2 className="size-3.5 animate-spin" /> : <FolderPlus className="size-3.5" />}
            Create
          </Button>
        )}
      </div>

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