/**
 * @file Administration.tsx
 * @description The Administration page (`/admin`, a sidebar item; `/users`
 * redirects here), server mode only and only for an admin or analyst: a tab
 * shell like `History.tsx`, the active tab in `?tab=` — **Users** (the
 * accounts, the account pool and the audit log, `Users.tsx`) and **Server**
 * (the machine's hardware and each user's share of it, `ServerPanel`).
 * 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 type { ComponentType } from "react";
import { Navigate, useSearchParams } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { Server, ShieldCheck, Users as UsersIcon } from "lucide-react";
import { PageTabs } from "../components/PageTabs";
import { useAuth } from "../components/AuthGate";
import { ServerPanel } from "../components/admin/ServerPanel";
import { Users } from "./Users";

interface AdminTab {
  id: string;
  label: string;
  Icon: ComponentType<{ className?: string }>;
}

export function Administration() {
  const { t } = useTranslation("admin");
  const auth = useAuth();
  const [params, setParams] = useSearchParams();
  const me = auth.state.mode === "server" ? auth.state.user : null;

  if (!me || me.role === "developer") return <Navigate to="/" replace />;

  const tabs: AdminTab[] = [
    { id: "users", label: t("tabs.users"), Icon: UsersIcon },
    { id: "server", label: t("tabs.server"), Icon: Server },
  ];
  const first = tabs[0]!;
  const active = tabs.find((x) => x.id === params.get("tab")) ?? first;

  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>
      <PageTabs
        ariaLabel={t("title")}
        activeId={active.id}
        onSelect={(id) => setParams(id === first.id ? {} : { tab: id }, { replace: true })}
        tabs={tabs}
      >
        {active.id === "server" ? (
          <ServerPanel isAdmin={me.role === "admin"} />
        ) : (
          <Users embedded />
        )}
      </PageTabs>
    </div>
  );
}