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

import type { SystemStatus } from "@/lib/types";

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

  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 items-center gap-1.5"
          title={status?.watched_folder ?? ""}
        >
          <Folder className="h-3 w-3 shrink-0" />
          <span className="hidden shrink-0 sm:inline">Local Storage:</span>
          <span className="truncate">{status?.watched_folder ?? "…"}</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>
  );
}