/**
 * @file Administration.tsx
 * @description The Administration page (`/admin`, a sidebar item; `/users`
 * redirects here), server mode only and only for an admin or analyst — ONE
 * page, no tabs: ONE users table holding every per-user account fact (account,
 * spend, home, tmux; each row expands in
 * place into that user's detail), the account pool, then the audit log — all
 * from `Users.tsx`. The machine and each user's live CPU / RAM live on the
 * Dashboard's System Health tab (`HostHealth.tsx`). Local mode and a developer are sent home, like the
 * Users page always did.
 * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
 */
import { Navigate } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { ShieldCheck } from "lucide-react";
import { useAuth } from "../components/AuthGate";
import { useHostStats } from "../components/health/HostHealth";
import { Users } from "./Users";

export function Administration() {
  const { t } = useTranslation("admin");
  const auth = useAuth();
  const me = auth.state.mode === "server" ? auth.state.user : null;
  const staff = !!me && me.role !== "developer";
  // Read once, for each home's share of the homes disk. The machine and each
  // user's live CPU / RAM are on the Dashboard's System Health tab.
  const host = useHostStats(staff, 0);

  if (!staff) return <Navigate to="/" replace />;

  return (
    <div className="animate-fade-in space-y-6">
      <div className="flex items-center gap-3">
        <div className="w-9 h-9 rounded-xl bg-accent/15 flex items-center justify-center">
          <ShieldCheck className="w-4.5 h-4.5 text-accent" />
        </div>
        <div>
          <h1 className="text-lg font-semibold text-fg-primary">{t("title")}</h1>
          <p className="text-xs text-fg-muted">{t("description")}</p>
        </div>
      </div>
      <Users embedded host={host} />
    </div>
  );
}