J621/frontend/src/components/StatusFooter.tsx

import { HardDrive, Unplug, Zap } from "lucide-react";
import { Link } from "react-router-dom";

import { cn } from "@/lib/cn";
import { getBackendUrl } from "@/lib/backend";
import { formatBytes } from "@/lib/format";
import type { SystemStatus } from "@/lib/types";

/** DESIGN.md capacity bars: blue, peach at 80%, red at 95%. */
function storageColor(percent: number): string {
  if (percent >= 95) return "bg-ctp-red";
  if (percent >= 80) return "bg-ctp-peach";
  return "bg-ctp-blue";
}

export function StatusFooter({
  backend,
  status,
  staff,
}: {
  backend: boolean;
  status?: SystemStatus;
  staff?: boolean;
}) {
  const backendOrigin = getBackendUrl() || window.location.origin;
  const storage = status?.storage;

  const workers = (
    <>
      <Zap className="h-3 w-3" />
      <span>
        Active Workers:{" "}
        {status
          ? `${status.workers.active} running | ${status.workers.queued} pending`
          : "…"}
      </span>
    </>
  );

  if (!backend) {
    return (
      <footer className="fixed inset-x-0 bottom-0 z-30 border-t border-ctp-surface0 bg-ctp-crust">
        <div className="mx-auto flex h-8 w-full max-w-[1600px] items-center gap-4 px-4 font-mono text-[11px] text-ctp-overlay0">
          <span className="flex min-w-0 shrink-0 items-center gap-1.5">
            <Unplug className="h-3 w-3 shrink-0" />
            Local mode — e621 features only
          </span>
          <Link
            to="/setup"
            className="mx-auto transition hover:text-ctp-text"
            title="Connect a backend to unlock the library, uploads and account features"
          >
            Setup Backend
          </Link>
        </div>
      </footer>
    );
  }

  return (
    <footer className="fixed inset-x-0 bottom-0 z-30 border-t border-ctp-surface0 bg-ctp-crust">
      <div className="mx-auto flex h-8 w-full max-w-[1600px] items-center gap-4 px-4 font-mono text-[11px] text-ctp-overlay0">
        <span
          className="flex min-w-0 shrink-0 items-center gap-1.5"
          title={
            storage
              ? `${formatBytes(storage.used)} of ${formatBytes(storage.total)} used — ${formatBytes(storage.free)} free`
              : "Backend storage usage"
          }
        >
          <HardDrive className="h-3 w-3 shrink-0" />
          <span className="hidden shrink-0 sm:inline">Backend Storage:</span>
          <span className="h-1 w-16 overflow-hidden rounded-full bg-ctp-surface0 sm:w-24">
            <span
              className={cn(
                "block h-full transition-all",
                storageColor(storage?.percent_used ?? 0),
              )}
              style={{
                width: `${Math.min(storage?.percent_used ?? 0, 100)}%`,
              }}
            />
          </span>
          <span className="shrink-0">
            {storage ? `${storage.percent_used.toFixed(1)}%` : "…"}
          </span>
        </span>

        <span
          className="mx-auto hidden min-w-0 items-center gap-1.5 md:flex"
          title={`Backend API: ${backendOrigin}`}
        >
          {staff ? (
            <Link
              to="/setup"
              className="truncate transition hover:text-ctp-text"
              title="Change backend"
            >
              {backendOrigin}
            </Link>
          ) : (
            <span className="truncate">{backendOrigin}</span>
          )}
        </span>

        {staff ? (
          <Link
            to="/stats"
            className="ml-auto hidden shrink-0 items-center gap-1.5 transition hover:text-ctp-text md:flex"
            title="Open the stats dashboard"
          >
            {workers}
          </Link>
        ) : (
          <span
            className="ml-auto hidden shrink-0 items-center gap-1.5 md:flex"
            title="Active background jobs"
          >
            {workers}
          </span>
        )}
      </div>
    </footer>
  );
}