import { useState, useEffect, useRef, useMemo, type ReactNode } from "react";
import { useTranslation } from "react-i18next";
import { useLocation } from "wouter";
import {
  useCreateApp,
  useUpdateApp,
  useDeleteApp,
  useListAppPermissions,
  getListAppPermissionsQueryKey,
  useAddAppPermission,
  useRemoveAppPermission,
  usePreviewAppPermissionsImpact,
  useListServices,
  getListServicesQueryKey,
  useCreateService,
  useUpdateService,
  useDeleteService,
  useListUsers,
  getListUsersQueryKey,
  useCreateUser,
  useUpdateUser,
  useDeleteUser,
  useAddUserRole,
  useRemoveUserRole,
  useGetAppSettings,
  getGetAppSettingsQueryKey,
  useUpdateAppSettings,
  useGetAdminStats,
  getGetAdminStatsQueryKey,
  useGetAdminAppOpensByApp,
  getGetAdminAppOpensByAppQueryKey,
  getAdminAppOpensByApp,
  getRolePermissionAudit,
  useGetAdminAppOpensByUser,
  getGetAdminAppOpensByUserQueryKey,
  getAdminAppOpensByUser,
  useGetAdminAppDependentGroups,
  getGetAdminAppDependentGroupsQueryKey,
  useGetAdminAppDependentRestrictions,
  getGetAdminAppDependentRestrictionsQueryKey,
  useGetAdminAppDependentOpens,
  getGetAdminAppDependentOpensQueryKey,
  useGetAdminServiceDependentOrders,
  getGetAdminServiceDependentOrdersQueryKey,
  useGetAdminUserDependentNotes,
  getGetAdminUserDependentNotesQueryKey,
  useGetAdminUserDependentOrders,
  getGetAdminUserDependentOrdersQueryKey,
  getAdminAppDependentGroups,
  getAdminAppDependentRestrictions,
  getAdminAppDependentOpens,
  getAdminServiceDependentOrders,
  getAdminUserDependentNotes,
  getAdminUserDependentOrders,
  useAdminIssueResetLink,
  useListGroups,
  getListGroupsQueryKey,
  useGetGroup,
  getGetGroupQueryKey,
  useCreateGroup,
  useUpdateGroup,
  useDeleteGroup,
  useListRoles,
  getListRolesQueryKey,
  useCreateRole,
  useUpdateRole,
  useDeleteRole,
  useListPermissions,
  getListPermissionsQueryKey,
  useGetRolePermissions,
  getGetRolePermissionsQueryKey,
  useGetRoleUsage,
  getGetRoleUsageQueryKey,
  useReplaceRolePermissions,
  usePreviewRolePermissionsImpact,
  useGetRolePermissionAudit,
  getGetRolePermissionAuditQueryKey,
  useGetUserPermissionAudit,
  getGetUserPermissionAuditQueryKey,
  getUserPermissionAudit,
  useGetGroupPermissionAudit,
  getGetGroupPermissionAuditQueryKey,
  getGroupPermissionAudit,
  useGetAppPermissionAudit,
  getGetAppPermissionAuditQueryKey,
  getAppPermissionAudit,
  useListAuditLogs,
  getListAuditLogsQueryKey,
  getExportAuditLogsCsvUrl,
  getExportRolePermissionAuditCsvUrl,
  ApiError,
} from "@workspace/api-client-react";
import type {
  GroupDeletionConflict,
  AppDeletionConflict,
  ServiceDeletionConflict,
  UserDeletionConflict,
  App,
  Service,
  UserProfile,
  AppSettings,
  AdminStats,
  AdminAppOpensByApp,
  AdminAppOpensByUser,
  GetAdminStatsQueryError,
  GetAdminStatsParams,
  Group,
  ListUsersParams,
  ListAuditLogsParams,
  AuditLogEntry,
  RolePermissionsImpact,
  AppPermissionsImpact,
  GetRolePermissionAuditParams,
  RolePermissionAuditEntry,
  GetUserPermissionAuditParams,
  GetGroupPermissionAuditParams,
  GetAppPermissionAuditParams,
  PermissionAuditEntry,
  PermissionAuditEntryChangeKind,
  Permission,
  AppDependentGroupsPage,
  AppDependentRestrictionsPage,
  AppDependentOpensPage,
  ServiceDependentOrdersPage,
  UserDependentNotesPage,
  UserDependentOrdersPage,
} from "@workspace/api-client-react";
import { ListUsersStatus } from "@workspace/api-client-react";
import { useQueryClient, useQuery } from "@tanstack/react-query";
import { useAuth } from "@/contexts/AuthContext";
import { useUpload, type UploadResponse } from "@workspace/object-storage-web";
import { isBuiltinAppSlug } from "@workspace/db/built-in-apps";
import { resolveServiceImageUrl } from "@/lib/image-url";
import { ArrowRight, ArrowLeft, Settings, Plus, Pencil, Trash2, Shield, Upload, Loader2, LayoutDashboard, Grid2X2, Coffee, Users as UsersIcon, Menu as MenuIcon, TrendingUp, TrendingDown, UserPlus, Activity, KeyRound, Copy, ChevronDown, ScrollText, Download, X, ImageIcon, Power, HelpCircle, Palette, Link2, Hash, Lock, ExternalLink, type LucideIcon } from "lucide-react";
import * as LucideIcons from "lucide-react";

function resolveAppIcon(name: string): LucideIcon | null {
  if (!name) return null;
  const Candidate = (LucideIcons as Record<string, unknown>)[name];
  if (typeof Candidate === "function" || (typeof Candidate === "object" && Candidate !== null)) {
    return Candidate as LucideIcon;
  }
  return null;
}
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command";
import { useToast } from "@/hooks/use-toast";
import { cn } from "@/lib/utils";
import { formatDate as formatDateUtil, formatWeekday as formatWeekdayUtil } from "@/lib/i18n-format";
import {
  asNumber,
  asRecord,
  asString,
  formatAuditSummary,
  unitLabel,
} from "@/lib/audit-summary";

const ADMIN_APPS_KEY = ["/api/admin/apps"] as const;

async function fetchAdminApps(): Promise<App[]> {
  const res = await fetch("/api/admin/apps", { credentials: "include" });
  if (!res.ok) throw new Error("Failed to fetch admin apps");
  return res.json();
}

type AdminSection = "dashboard" | "apps" | "services" | "users" | "groups" | "roles" | "audit-log" | "settings";

function LeaderboardAvatar({
  src,
  initial,
  alt,
}: {
  src: string | null;
  initial: string;
  alt: string;
}) {
  const [errored, setErrored] = useState(false);
  useEffect(() => {
    setErrored(false);
  }, [src]);
  const showImage = src && !errored;
  return (
    <div className="w-8 h-8 rounded-full shrink-0 bg-emerald-100/70 text-emerald-700 flex items-center justify-center text-xs font-semibold overflow-hidden">
      {showImage ? (
        <img
          src={src}
          alt={alt}
          onError={() => setErrored(true)}
          className="w-full h-full object-cover"
        />
      ) : (
        initial
      )}
    </div>
  );
}

type AppOpenMode = "internal" | "external_tab" | "external_iframe";

type AppForm = {
  nameAr: string;
  nameEn: string;
  slug: string;
  iconName: string;
  // Optional uploaded image — when set, the launcher renders this instead
  // of the Lucide icon. Stored as the object-storage path returned by the
  // upload presigner (e.g. "/objects/<id>"). Empty string = none.
  imageUrl: string;
  route: string;
  externalUrl: string;
  openMode: AppOpenMode;
  color: string;
  sortOrder: number;
  // Only used when creating a new app — admins can pre-set the required
  // permissions so the app is never visible to everyone in the brief
  // window between insert and the follow-up gate. Existing apps keep
  // editing their gate through the AppPermissionsEditor below.
  permissionIds: number[];
};

type ServiceForm = {
  nameAr: string;
  nameEn: string;
  descriptionAr: string;
  descriptionEn: string;
  imageUrl: string;
  isAvailable: boolean;
};

function DeletionWarningDialog({
  title,
  items,
  warning,
  forceHint,
  emptyBody,
  confirmLabel,
  anywayLabel,
  showWarning,
  isPending,
  onCancel,
  onConfirm,
  testId,
  confirmTestId,
}: {
  title: string;
  items: string[];
  warning: string;
  forceHint: string;
  emptyBody: string;
  confirmLabel: string;
  anywayLabel: string;
  showWarning: boolean;
  isPending: boolean;
  onCancel: () => void;
  onConfirm: () => void;
  testId?: string;
  confirmTestId?: string;
}) {
  const { t } = useTranslation();
  return (
    <div className="fixed inset-0 bg-slate-900/30 backdrop-blur-sm z-50 flex items-center justify-center p-4">
      <div
        className="glass-panel rounded-3xl p-6 w-full max-w-sm space-y-3"
        data-testid={testId}
      >
        <h2 className="font-semibold text-foreground">{title}</h2>
        {showWarning ? (
          <>
            <p className="text-sm text-destructive">{warning}</p>
            {items.length > 0 && (
              <ul className="text-sm text-foreground space-y-1 ps-4 list-disc">
                {items.map((item, idx) => (
                  <li key={idx}>{item}</li>
                ))}
              </ul>
            )}
            <p className="text-xs text-muted-foreground">{forceHint}</p>
          </>
        ) : (
          <p className="text-sm text-muted-foreground">{emptyBody}</p>
        )}
        <div className="flex gap-2 pt-2">
          <Button
            variant="outline"
            className="flex-1"
            onClick={onCancel}
            disabled={isPending}
          >
            {t("common.cancel")}
          </Button>
          <Button
            className="flex-1"
            variant="destructive"
            disabled={isPending}
            onClick={onConfirm}
            data-testid={confirmTestId}
          >
            {showWarning ? anywayLabel : confirmLabel}
          </Button>
        </div>
      </div>
    </div>
  );
}

// Local-state permission picker used by the "Add app" dialog. The full
// AppPermissionsEditor below talks to /apps/:id/permissions, which can't
// run before the app exists. This picker just collects ids into the form
// state; handleSaveApp sends them inside the same POST /apps payload so
// the new app never appears unrestricted (the goal of the feature). No
// impact preview is shown here because a brand-new app starts with zero
// users seeing it, so adding permissions can't hide it from anyone.
function NewAppPermissionsPicker({
  selectedIds,
  onChange,
}: {
  selectedIds: number[];
  onChange: (next: number[]) => void;
}) {
  const { t } = useTranslation();
  const { data: allPermissions } = useListPermissions({
    query: { queryKey: getListPermissionsQueryKey() },
  });
  const [pendingId, setPendingId] = useState<number | "">("");

  const selectedSet = useMemo(() => new Set(selectedIds), [selectedIds]);
  const selected = useMemo(
    () => (allPermissions ?? []).filter((p) => selectedSet.has(p.id)),
    [allPermissions, selectedSet],
  );
  const available = useMemo(
    () => (allPermissions ?? []).filter((p) => !selectedSet.has(p.id)),
    [allPermissions, selectedSet],
  );

  const onAdd = () => {
    if (pendingId === "" || typeof pendingId !== "number") return;
    if (!selectedSet.has(pendingId)) onChange([...selectedIds, pendingId]);
    setPendingId("");
  };
  const onRemove = (id: number) => {
    onChange(selectedIds.filter((x) => x !== id));
  };

  return (
    <div
      className="space-y-2 border-t border-slate-200/70 pt-3"
      data-testid="app-permissions-picker"
    >
      <Label>{t("admin.appPermissions.title")}</Label>
      <p className="text-xs text-muted-foreground">
        {t("admin.appPermissions.help")}
      </p>
      {selected.length === 0 ? (
        <p className="text-xs text-muted-foreground">
          {t("admin.appPermissions.none")}
        </p>
      ) : (
        <ul className="space-y-1" data-testid="app-permissions-picker-list">
          {selected.map((p) => (
            <li
              key={p.id}
              className="flex items-center justify-between gap-2 rounded-xl bg-white/70 border border-slate-200 px-3 py-1.5"
            >
              <span className="text-sm text-foreground truncate">{p.name}</span>
              <button
                type="button"
                aria-label={t("admin.appPermissions.removeAria", { name: p.name })}
                className="text-muted-foreground hover:text-destructive transition-colors"
                onClick={() => onRemove(p.id)}
                data-testid={`app-permission-picker-remove-${p.id}`}
              >
                <Trash2 size={14} />
              </button>
            </li>
          ))}
        </ul>
      )}
      <div className="flex items-center gap-2">
        <select
          className="flex-1 rounded-xl bg-white/70 border border-slate-200 px-3 py-2 text-sm"
          value={pendingId === "" ? "" : String(pendingId)}
          onChange={(e) =>
            setPendingId(e.target.value === "" ? "" : Number(e.target.value))
          }
          disabled={available.length === 0}
          data-testid="app-permission-picker-select"
        >
          <option value="">{t("admin.appPermissions.selectPlaceholder")}</option>
          {available.map((p) => (
            <option key={p.id} value={p.id}>
              {p.name}
            </option>
          ))}
        </select>
        <Button
          size="sm"
          onClick={onAdd}
          disabled={pendingId === "" || available.length === 0}
          data-testid="app-permission-picker-add"
        >
          {t("admin.appPermissions.add")}
        </Button>
      </div>
    </div>
  );
}

function AppPermissionsEditor({ appId }: { appId: number }) {
  const { t } = useTranslation();
  const queryClient = useQueryClient();
  const { toast } = useToast();
  const { data: assigned, isLoading } = useListAppPermissions(appId, {
    query: { queryKey: getListAppPermissionsQueryKey(appId) },
  });
  const { data: allPermissions } = useListPermissions({
    query: { queryKey: getListPermissionsQueryKey() },
  });
  const addPermission = useAddAppPermission();
  const removePermission = useRemoveAppPermission();
  const previewImpact = usePreviewAppPermissionsImpact();
  const [pendingId, setPendingId] = useState<number | "">("");
  const [impact, setImpact] = useState<AppPermissionsImpact | null>(null);
  const [impactLoading, setImpactLoading] = useState(false);
  const [impactError, setImpactError] = useState(false);
  const [confirmAdd, setConfirmAdd] = useState(false);
  const impactRequestSeq = useRef(0);

  const assignedIds = useMemo(
    () => new Set((assigned ?? []).map((p) => p.id)),
    [assigned],
  );
  const available = useMemo(
    () => (allPermissions ?? []).filter((p) => !assignedIds.has(p.id)),
    [allPermissions, assignedIds],
  );

  const refresh = () => {
    queryClient.invalidateQueries({
      queryKey: getListAppPermissionsQueryKey(appId),
    });
    queryClient.invalidateQueries({ queryKey: ADMIN_APPS_KEY });
  };

  // Debounced, cancel-safe impact preview for the candidate "add this
  // permission" change. Mirrors the RolesPanel UX so admins see the same
  // kind of warning before they tighten an app's gate. Stale responses
  // are dropped via impactRequestSeq.
  useEffect(() => {
    if (pendingId === "" || typeof pendingId !== "number") {
      setImpact(null);
      setImpactLoading(false);
      setImpactError(false);
      return;
    }
    const candidate = Array.from(assignedIds);
    if (!candidate.includes(pendingId)) candidate.push(pendingId);
    setImpactLoading(true);
    setImpactError(false);
    const requestId = ++impactRequestSeq.current;
    const handle = setTimeout(() => {
      previewImpact.mutate(
        { id: appId, data: { permissionIds: candidate } },
        {
          onSuccess: (data) => {
            if (impactRequestSeq.current !== requestId) return;
            setImpact(data);
            setImpactError(false);
            setImpactLoading(false);
          },
          onError: () => {
            if (impactRequestSeq.current !== requestId) return;
            setImpact(null);
            setImpactError(true);
            setImpactLoading(false);
          },
        },
      );
    }, 350);
    return () => clearTimeout(handle);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [appId, pendingId, assignedIds]);

  const requiresConfirmation =
    !impactLoading &&
    !impactError &&
    impact != null &&
    impact.affectedUserCount > 0;

  const performAdd = () => {
    if (pendingId === "" || typeof pendingId !== "number") return;
    addPermission.mutate(
      { id: appId, data: { permissionId: pendingId } },
      {
        onSuccess: () => {
          setPendingId("");
          setImpact(null);
          setConfirmAdd(false);
          impactRequestSeq.current += 1;
          refresh();
        },
        onError: () => {
          toast({ title: t("common.error"), variant: "destructive" });
        },
      },
    );
  };

  const onAdd = () => {
    if (pendingId === "" || typeof pendingId !== "number") return;
    if (requiresConfirmation && !confirmAdd) {
      setConfirmAdd(true);
      return;
    }
    performAdd();
  };

  const onRemove = (permissionId: number) => {
    removePermission.mutate(
      { id: appId, permissionId },
      {
        onSuccess: refresh,
        onError: () => {
          toast({ title: t("common.error"), variant: "destructive" });
        },
      },
    );
  };

  return (
    <div
      className="space-y-2 border-t border-slate-200/70 pt-3"
      data-testid="app-permissions-editor"
    >
      <Label>{t("admin.appPermissions.title")}</Label>
      <p className="text-xs text-muted-foreground">
        {t("admin.appPermissions.help")}
      </p>
      {isLoading ? (
        <p className="text-xs text-muted-foreground">{t("common.loading")}</p>
      ) : (assigned?.length ?? 0) === 0 ? (
        <p className="text-xs text-muted-foreground">
          {t("admin.appPermissions.none")}
        </p>
      ) : (
        <ul className="space-y-1" data-testid="app-permissions-list">
          {assigned!.map((p) => (
            <li
              key={p.id}
              className="flex items-center justify-between gap-2 rounded-xl bg-white/70 border border-slate-200 px-3 py-1.5"
            >
              <span className="text-sm text-foreground truncate">{p.name}</span>
              <button
                type="button"
                aria-label={t("admin.appPermissions.removeAria", {
                  name: p.name,
                })}
                className="text-muted-foreground hover:text-destructive transition-colors"
                disabled={removePermission.isPending}
                onClick={() => onRemove(p.id)}
                data-testid={`app-permission-remove-${p.id}`}
              >
                <Trash2 size={14} />
              </button>
            </li>
          ))}
        </ul>
      )}
      <div className="flex items-center gap-2">
        <select
          className="flex-1 rounded-xl bg-white/70 border border-slate-200 px-3 py-2 text-sm"
          value={pendingId === "" ? "" : String(pendingId)}
          onChange={(e) =>
            setPendingId(e.target.value === "" ? "" : Number(e.target.value))
          }
          disabled={available.length === 0 || addPermission.isPending}
          data-testid="app-permission-select"
        >
          <option value="">{t("admin.appPermissions.selectPlaceholder")}</option>
          {available.map((p) => (
            <option key={p.id} value={p.id}>
              {p.name}
            </option>
          ))}
        </select>
        <Button
          size="sm"
          onClick={onAdd}
          disabled={
            pendingId === "" ||
            addPermission.isPending ||
            available.length === 0 ||
            impactLoading ||
            impactError
          }
          data-testid="app-permission-add"
        >
          {addPermission.isPending ? (
            <Loader2 size={14} className="animate-spin" />
          ) : (
            t("admin.appPermissions.add")
          )}
        </Button>
      </div>
      {pendingId !== "" && (
        <div
          className="mt-2 rounded-xl border border-amber-300 bg-amber-50 p-3 text-xs text-amber-900 space-y-1"
          data-testid="app-perm-impact"
          role="status"
          aria-live="polite"
        >
          <p className="font-semibold">{t("admin.appPermissions.impactTitle")}</p>
          {impactLoading ? (
            <div className="flex items-center gap-2 text-amber-800">
              <Loader2 size={12} className="animate-spin" />
              <span>{t("admin.appPermissions.impactLoading")}</span>
            </div>
          ) : impactError || !impact ? (
            <p
              className="text-amber-900"
              data-testid="app-perm-impact-error"
            >
              {t("admin.appPermissions.impactError")}
            </p>
          ) : impact.affectedUserCount === 0 ? (
            <p data-testid="app-perm-impact-none">
              {t("admin.appPermissions.impactNone", {
                visible: impact.currentlyVisibleUserCount,
              })}
            </p>
          ) : (
            <>
              <p data-testid="app-perm-impact-summary">
                {t("admin.appPermissions.impactSummary", {
                  affected: impact.affectedUserCount,
                  visible: impact.currentlyVisibleUserCount,
                })}
              </p>
              {impact.groups.length > 0 && (
                <p
                  className="text-amber-800"
                  data-testid="app-perm-impact-groups"
                >
                  {t("admin.appPermissions.impactViaGroups", {
                    groups: impact.groups.map((g) => g.name).join(", "),
                  })}
                </p>
              )}
            </>
          )}
        </div>
      )}
      {confirmAdd && impact && impact.affectedUserCount > 0 && (
        <div className="fixed inset-0 bg-slate-900/40 backdrop-blur-sm z-[60] flex items-center justify-center p-4">
          <div
            className="glass-panel rounded-3xl p-6 w-full max-w-md space-y-3"
            data-testid="app-perm-confirm-dialog"
            role="alertdialog"
            aria-modal="true"
          >
            <h2 className="font-semibold text-foreground">
              {t("admin.appPermissions.confirmTitle")}
            </h2>
            <p className="text-sm text-foreground">
              {t("admin.appPermissions.confirmBody", {
                affected: impact.affectedUserCount,
                visible: impact.currentlyVisibleUserCount,
              })}
            </p>
            {impact.groups.length > 0 && (
              <p className="text-xs text-muted-foreground">
                {t("admin.appPermissions.impactViaGroups", {
                  groups: impact.groups.map((g) => g.name).join(", "),
                })}
              </p>
            )}
            <div className="flex gap-2 pt-2">
              <Button
                variant="outline"
                className="flex-1"
                onClick={() => setConfirmAdd(false)}
                data-testid="app-perm-confirm-cancel"
              >
                {t("common.cancel")}
              </Button>
              <Button
                variant="destructive"
                className="flex-1"
                disabled={addPermission.isPending}
                onClick={performAdd}
                data-testid="app-perm-confirm-submit"
              >
                {addPermission.isPending ? (
                  <Loader2 size={14} className="animate-spin" />
                ) : (
                  t("admin.appPermissions.confirmAction")
                )}
              </Button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

export default function AdminPage() {
  const { t, i18n } = useTranslation();
  const [, setLocation] = useLocation();
  const { user } = useAuth();
  const lang = i18n.language;
  const isRtl = lang === "ar";
  const queryClient = useQueryClient();
  const { toast } = useToast();
  const BackIcon = isRtl ? ArrowRight : ArrowLeft;
  const isAdmin = user?.roles?.includes("admin") ?? false;

  // Redirect non-admins using useEffect to avoid violating rules of hooks
  useEffect(() => {
    if (user && !isAdmin) {
      setLocation("/");
    }
  }, [user, isAdmin, setLocation]);

  const { data: apps } = useQuery({ queryKey: ADMIN_APPS_KEY, queryFn: fetchAdminApps, enabled: isAdmin });
  const { data: services } = useListServices({ query: { queryKey: getListServicesQueryKey() } });
  const { data: users } = useListUsers(undefined, { query: { queryKey: getListUsersQueryKey() } });
  const { data: rolesList } = useListRoles({ query: { queryKey: getListRolesQueryKey(), enabled: isAdmin } });
  const { data: permissionsList } = useListPermissions({ query: { queryKey: getListPermissionsQueryKey(), enabled: isAdmin } });
  const { data: appSettings } = useGetAppSettings({ query: { queryKey: getGetAppSettingsQueryKey() } });
  const statsRangeStorageKey = user?.id ? `admin.statsRange.${user.id}` : null;
  const [statsRange, setStatsRange] = useState<"7d" | "30d" | "90d" | "custom">("7d");
  const [statsRangeHydrated, setStatsRangeHydrated] = useState(false);
  useEffect(() => {
    setStatsRangeHydrated(false);
    if (typeof window === "undefined" || !statsRangeStorageKey) return;
    const stored = window.localStorage.getItem(statsRangeStorageKey);
    if (stored === "7d" || stored === "30d" || stored === "90d") {
      setStatsRange(stored);
    }
    setStatsRangeHydrated(true);
  }, [statsRangeStorageKey]);
  useEffect(() => {
    if (typeof window === "undefined" || !statsRangeStorageKey || !statsRangeHydrated) return;
    if (statsRange === "7d" || statsRange === "30d" || statsRange === "90d") {
      window.localStorage.setItem(statsRangeStorageKey, statsRange);
    }
  }, [statsRange, statsRangeStorageKey, statsRangeHydrated]);
  const todayIso = new Date().toISOString().slice(0, 10);
  const sevenAgoIso = new Date(Date.now() - 6 * 24 * 60 * 60 * 1000)
    .toISOString()
    .slice(0, 10);
  const [customFrom, setCustomFrom] = useState<string>(sevenAgoIso);
  const [customTo, setCustomTo] = useState<string>(todayIso);
  const [appliedCustom, setAppliedCustom] = useState<{ from: string; to: string }>({
    from: sevenAgoIso,
    to: todayIso,
  });
  const isCustomValid =
    /^\d{4}-\d{2}-\d{2}$/.test(appliedCustom.from) &&
    /^\d{4}-\d{2}-\d{2}$/.test(appliedCustom.to) &&
    appliedCustom.from <= appliedCustom.to;
  const statsQueryParams =
    statsRange === "custom"
      ? { range: "custom" as const, from: appliedCustom.from, to: appliedCustom.to }
      : { range: statsRange };
  const { data: adminStats, error: adminStatsError } = useGetAdminStats(statsQueryParams, {
    query: {
      queryKey: getGetAdminStatsQueryKey(statsQueryParams),
      enabled: isAdmin && (statsRange !== "custom" || isCustomValid),
      retry: false,
    },
  });
  const adminStatsErrorMessage: string | null = (() => {
    if (!adminStatsError) return null;
    const err = adminStatsError as GetAdminStatsQueryError;
    return err.data?.error ?? err.message ?? null;
  })();

  const createApp = useCreateApp();
  const updateApp = useUpdateApp();
  const deleteApp = useDeleteApp();
  const createService = useCreateService();
  const updateService = useUpdateService();
  const deleteService = useDeleteService();
  const createUser = useCreateUser();
  const updateUser = useUpdateUser();
  const deleteUser = useDeleteUser();
  const addUserRole = useAddUserRole();
  const removeUserRole = useRemoveUserRole();
  const issueResetLink = useAdminIssueResetLink();
  const [resetLinkUser, setResetLinkUser] = useState<{ username: string; url: string; expiresAt: string } | null>(null);

  const [editingApp, setEditingApp] = useState<{ id?: number; form: AppForm } | null>(null);
  const [editingService, setEditingService] = useState<{ id?: number; form: ServiceForm } | null>(null);
  const [dependencyTarget, setDependencyTarget] = useState<DependencyTarget | null>(null);
  const [appDeleteTarget, setAppDeleteTarget] = useState<App | null>(null);
  const [appDeleteConflict, setAppDeleteConflict] = useState<AppDeletionConflict | null>(null);
  const [serviceDeleteTarget, setServiceDeleteTarget] = useState<Service | null>(null);
  const [serviceDeleteConflict, setServiceDeleteConflict] = useState<ServiceDeletionConflict | null>(null);

  const closeAppDeleteDialog = () => {
    setAppDeleteTarget(null);
    setAppDeleteConflict(null);
  };
  const closeServiceDeleteDialog = () => {
    setServiceDeleteTarget(null);
    setServiceDeleteConflict(null);
  };

  const performAppDelete = (app: App, force: boolean) => {
    deleteApp.mutate(
      { id: app.id, params: force ? { force: true } : undefined },
      {
        onSuccess: () => {
          queryClient.invalidateQueries({ queryKey: ADMIN_APPS_KEY });
          toast({ title: t("common.success") });
          closeAppDeleteDialog();
        },
        onError: (err: unknown) => {
          if (err instanceof ApiError && err.status === 409 && err.data) {
            setAppDeleteConflict(err.data as AppDeletionConflict);
            return;
          }
          toast({ title: t("common.error"), variant: "destructive" });
        },
      },
    );
  };

  const performServiceDelete = (service: Service, force: boolean) => {
    deleteService.mutate(
      { id: service.id, params: force ? { force: true } : undefined },
      {
        onSuccess: () => {
          queryClient.invalidateQueries({ queryKey: getListServicesQueryKey() });
          toast({ title: t("common.success") });
          closeServiceDeleteDialog();
        },
        onError: (err: unknown) => {
          if (err instanceof ApiError && err.status === 409 && err.data) {
            setServiceDeleteConflict(err.data as ServiceDeletionConflict);
            return;
          }
          toast({ title: t("common.error"), variant: "destructive" });
        },
      },
    );
  };
  const [newUserForm, setNewUserForm] = useState<{ username: string; email: string; password: string } | null>(null);
  const [section, setSection] = useState<AdminSection>("dashboard");
  const [navOpenGroups, setNavOpenGroups] = useState<Record<string, boolean>>({});
  const [mobileNavOpen, setMobileNavOpen] = useState(false);
  const [highlightedUserId, setHighlightedUserId] = useState<number | null>(null);
  const userRowRefs = useRef<Map<number, HTMLDivElement>>(new Map());

  useEffect(() => {
    if (section !== "users" || highlightedUserId == null) return;
    const node = userRowRefs.current.get(highlightedUserId);
    if (node) {
      node.scrollIntoView({ behavior: "smooth", block: "center" });
    }
    const timer = window.setTimeout(() => setHighlightedUserId(null), 2500);
    return () => window.clearTimeout(timer);
  }, [section, highlightedUserId, users]);

  const handleSelectAppFromDashboard = (appId: number) => {
    const app = apps?.find((a) => a.id === appId);
    setSection("apps");
    if (app) {
      setEditingApp({
        id: app.id,
        form: {
          nameAr: app.nameAr ?? "",
          nameEn: app.nameEn ?? "",
          slug: app.slug ?? "",
          iconName: app.iconName ?? "Grid2X2",
          imageUrl: app.imageUrl ?? "",
          route: app.route ?? "/",
          externalUrl: app.externalUrl ?? "",
          openMode: ((app.openMode as AppOpenMode) ?? "internal"),
          color: app.color ?? "#6366f1",
          sortOrder: app.sortOrder ?? 0,
          permissionIds: [],
        },
      });
    }
  };

  const handleSelectUserFromDashboard = (userId: number) => {
    setSection("users");
    setHighlightedUserId(userId);
  };

  type NavLeaf = { key: AdminSection; label: string; Icon: typeof LayoutDashboard };
  type NavGroup = { groupKey: string; label: string; Icon: typeof LayoutDashboard; children: NavLeaf[] };
  type NavEntry = NavLeaf | NavGroup;
  const navItems: NavEntry[] = [
    { key: "dashboard", label: t("admin.nav.dashboard"), Icon: LayoutDashboard },
    { key: "apps", label: t("admin.nav.apps"), Icon: Grid2X2 },
    { key: "services", label: t("admin.nav.services"), Icon: Coffee },
    {
      groupKey: "user-management",
      label: t("admin.nav.userManagement"),
      Icon: UsersIcon,
      children: [
        { key: "users", label: t("admin.nav.users"), Icon: UsersIcon },
        { key: "groups", label: t("admin.nav.groups"), Icon: Shield },
        { key: "roles", label: t("admin.nav.roles"), Icon: KeyRound },
        { key: "audit-log", label: t("admin.nav.auditLog"), Icon: ScrollText },
      ],
    },
    { key: "settings", label: t("admin.nav.settings"), Icon: Settings },
  ];

  // Sync section to URL hash so deep links work
  useEffect(() => {
    if (typeof window === "undefined") return;
    const hash = window.location.hash.replace(/^#/, "");
    const sectionMatch = hash.match(/section=([a-z-]+)/);
    if (sectionMatch) {
      const s = sectionMatch[1] as AdminSection;
      if (["dashboard", "apps", "services", "users", "groups", "roles", "audit-log", "settings"].includes(s)) {
        setSection(s);
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  // Skip the very first render so we don't clobber a deep-linked hash like
  // `#section=audit-log&targetType=group&targetId=42` before the mount-time
  // parser above has had a chance to apply it.
  const skipNextSectionSync = useRef<boolean>(true);
  useEffect(() => {
    if (typeof window === "undefined") return;
    if (skipNextSectionSync.current) {
      skipNextSectionSync.current = false;
      return;
    }
    const raw = window.location.hash.replace(/^#/, "");
    const params = new URLSearchParams(raw);
    const previousSection = params.get("section");
    params.set("section", section);
    // Section-scoped params (the audit log's targetType / targetId / actorId
    // deep links) only make sense within their owning section. Switching to a
    // different section drops them so the next visit starts fresh.
    if (previousSection !== section) {
      params.delete("targetType");
      params.delete("targetId");
      params.delete("actorId");
    }
    const newHash = `#${params.toString()}`;
    if (window.location.hash !== newHash) {
      window.history.replaceState(null, "", newHash);
    }
  }, [section]);

  const renderNavList = (onSelect?: () => void) => {
    const renderLeaf = (leaf: NavLeaf, indent = false) => {
      const active = section === leaf.key;
      const Icon = leaf.Icon;
      return (
        <button
          key={leaf.key}
          onClick={() => {
            setSection(leaf.key);
            onSelect?.();
          }}
          className={cn(
            "flex items-center gap-3 w-full py-2.5 rounded-xl text-sm transition-all text-start relative",
            indent ? "ps-9 pe-3" : "px-3",
            active
              ? "bg-primary text-primary-foreground font-semibold shadow-md shadow-primary/20"
              : "text-foreground/70 hover:bg-slate-100 hover:text-foreground",
          )}
          data-testid={`nav-${leaf.key}`}
        >
          <Icon size={16} className="shrink-0" />
          <span className="truncate">{leaf.label}</span>
        </button>
      );
    };
    return (
      <nav className="flex flex-col gap-1">
        {navItems.map((entry) => {
          if ("children" in entry) {
            const Icon = entry.Icon;
            const anyChildActive = entry.children.some((c) => c.key === section);
            const expanded = navOpenGroups[entry.groupKey] ?? anyChildActive;
            return (
              <div key={entry.groupKey} className="flex flex-col gap-0.5">
                <button
                  type="button"
                  onClick={() =>
                    setNavOpenGroups((prev) => ({
                      ...prev,
                      [entry.groupKey]: !(prev[entry.groupKey] ?? anyChildActive),
                    }))
                  }
                  aria-expanded={expanded}
                  className={cn(
                    "flex items-center gap-2 w-full px-3 py-2 rounded-xl text-xs uppercase tracking-wider transition-colors text-start",
                    anyChildActive ? "text-primary" : "text-muted-foreground hover:text-foreground",
                  )}
                  data-testid={`nav-group-${entry.groupKey}`}
                >
                  <Icon size={14} className="shrink-0" />
                  <span className="truncate flex-1">{entry.label}</span>
                  <ChevronDown
                    size={14}
                    className={cn(
                      "shrink-0 transition-transform",
                      expanded ? "rotate-0" : "-rotate-90",
                    )}
                  />
                </button>
                {expanded && entry.children.map((leaf) => renderLeaf(leaf, true))}
              </div>
            );
          }
          return renderLeaf(entry, false);
        })}
      </nav>
    );
  };

  const emptyAppForm: AppForm = { nameAr: "", nameEn: "", slug: "", iconName: "Grid2X2", imageUrl: "", route: "/", externalUrl: "", openMode: "internal", color: "#6366f1", sortOrder: 0, permissionIds: [] };
  const emptyServiceForm: ServiceForm = { nameAr: "", nameEn: "", descriptionAr: "", descriptionEn: "", imageUrl: "", isAvailable: true };

  // #196: Switch to the audit-log section pre-filtered by the given
  // targetType/targetId. Writes the hash BEFORE the section change so the
  // section-sync effect (which would otherwise drop targetType/targetId
  // when the previous section differs) sees a matching previousSection and
  // preserves the deep-link params.
  const openAuditLogForTarget = (
    targetType: "app" | "service" | "user" | "group" | "role",
    targetId: number,
  ) => {
    if (typeof window !== "undefined") {
      const params = new URLSearchParams(
        window.location.hash.replace(/^#/, ""),
      );
      params.set("section", "audit-log");
      params.set("targetType", targetType);
      params.set("targetId", String(targetId));
      window.history.replaceState(null, "", `#${params.toString()}`);
    }
    // Close any open editor modals so the audit-log view is unobstructed.
    setEditingApp(null);
    setEditingService(null);
    setSection("audit-log");
  };

  const handleSaveApp = () => {
    if (!editingApp) return;
    // Normalize the optional URL/image fields. The OpenAPI spec types
    // them as ["string","null"], so an empty string from the form would
    // be rejected by zod. We send null whenever the admin left them
    // blank (which is the meaningful value for "no image"/"no URL").
    const normalize = (form: AppForm) => ({
      ...form,
      imageUrl: form.imageUrl?.trim() ? form.imageUrl.trim() : null,
      externalUrl: form.externalUrl?.trim() ? form.externalUrl.trim() : null,
    });
    // Surface server-side errors that the user can act on. The
    // built-in route lock returns { code: "builtin_route_locked" }.
    const onError = async (err: unknown) => {
      let message: string | undefined;
      if (err && typeof err === "object" && "response" in err) {
        const r = (err as { response?: Response }).response;
        if (r) {
          try {
            const body = await r.clone().json();
            if (body?.code === "builtin_route_locked") {
              message = t("admin.builtinPathLocked");
            } else if (typeof body?.error === "string") {
              message = body.error;
            }
          } catch {
            /* fall through */
          }
        }
      }
      toast({
        title: t("admin.uploadFailed"),
        description: message,
        variant: "destructive",
      });
    };
    if (editingApp.id) {
      // Edit path: permissionIds aren't part of the update payload — the
      // existing AppPermissionsEditor manages them with its own impact
      // preview + audit, so strip the field before sending.
      const { permissionIds: _ignored, ...rest } = normalize(editingApp.form);
      void _ignored;
      updateApp.mutate(
        { id: editingApp.id, data: rest },
        {
          onSuccess: () => {
            queryClient.invalidateQueries({ queryKey: ADMIN_APPS_KEY });
            setEditingApp(null);
            toast({ title: t("common.success") });
          },
          onError,
        },
      );
    } else {
      const { permissionIds, ...rest } = normalize(editingApp.form);
      createApp.mutate(
        {
          // Only include permissionIds if the admin actually picked some
          // so the request body stays minimal and the server's "no
          // restriction" path is unchanged.
          data:
            (editingApp.form.permissionIds.length > 0)
              ? { ...rest, permissionIds: editingApp.form.permissionIds }
              : rest,
        },
        {
          onSuccess: () => {
            queryClient.invalidateQueries({ queryKey: ADMIN_APPS_KEY });
            setEditingApp(null);
            toast({ title: t("common.success") });
          },
          onError,
        },
      );
      void permissionIds;
    }
  };

  const handleSaveService = () => {
    if (!editingService) return;
    if (editingService.id) {
      updateService.mutate(
        { id: editingService.id, data: editingService.form },
        {
          onSuccess: () => {
            queryClient.invalidateQueries({ queryKey: getListServicesQueryKey() });
            setEditingService(null);
            toast({ title: t("common.success") });
          },
        },
      );
    } else {
      createService.mutate(
        { data: editingService.form },
        {
          onSuccess: () => {
            queryClient.invalidateQueries({ queryKey: getListServicesQueryKey() });
            setEditingService(null);
            toast({ title: t("common.success") });
          },
        },
      );
    }
  };

  const handleCreateUser = () => {
    if (!newUserForm) return;
    createUser.mutate(
      { data: { username: newUserForm.username, email: newUserForm.email, password: newUserForm.password } },
      {
        onSuccess: () => {
          queryClient.invalidateQueries({ queryKey: getListUsersQueryKey() });
          setNewUserForm(null);
          toast({ title: t("common.success") });
        },
      },
    );
  };

  if (!user || !isAdmin) return null;

  return (
    <div className="min-h-screen os-bg flex flex-col">
      {/* Header */}
      <div
        className="border-b border-slate-200/70 px-4 py-4 flex items-center gap-3 sticky top-0 z-30"
        style={{
          background: "rgba(255,255,255,0.96)",
          backdropFilter: "blur(16px) saturate(160%)",
          WebkitBackdropFilter: "blur(16px) saturate(160%)",
          boxShadow: "0 4px 20px rgba(15,23,42,0.06)",
        }}
      >
        <button
          onClick={() => setLocation("/")}
          className="p-2 rounded-xl hover:bg-slate-100 text-muted-foreground hover:text-foreground transition-colors"
        >
          <BackIcon size={20} />
        </button>
        <div className="flex items-center gap-2 flex-1 min-w-0">
          <Settings size={20} className="text-red-400 shrink-0" />
          <h1 className="text-lg font-semibold text-foreground truncate">{t("admin.title")}</h1>
        </div>
        <Sheet open={mobileNavOpen} onOpenChange={setMobileNavOpen}>
          <SheetTrigger asChild>
            <button
              className="md:hidden p-2 rounded-xl hover:bg-slate-100 text-muted-foreground hover:text-foreground transition-colors"
              aria-label={t("admin.nav.menu")}
            >
              <MenuIcon size={20} />
            </button>
          </SheetTrigger>
          <SheetContent side={isRtl ? "right" : "left"} className="w-full sm:w-72 p-4">
            <div className="flex items-center gap-2 mb-4 mt-2">
              <Settings size={18} className="text-red-400" />
              <h2 className="font-semibold text-foreground">{t("admin.title")}</h2>
            </div>
            {renderNavList(() => setMobileNavOpen(false))}
          </SheetContent>
        </Sheet>
      </div>

      {/* Edit App Modal */}
      {editingApp && (() => {
        const PreviewIcon = resolveAppIcon(editingApp.form.iconName);
        const previewColor = /^#[0-9a-fA-F]{6}$/.test(editingApp.form.color)
          ? editingApp.form.color
          : "#6366f1";
        const isBuiltin =
          editingApp.id !== undefined && isBuiltinAppSlug(editingApp.form.slug);
        const isExternal = editingApp.form.openMode !== "internal";
        return (
        <div
          className="fixed inset-0 bg-slate-950/50 backdrop-blur-md z-50 flex items-center justify-center p-4 animate-in fade-in duration-150"
          onClick={(e) => { if (e.target === e.currentTarget) setEditingApp(null); }}
        >
          <div className="bg-white rounded-2xl w-full max-w-2xl max-h-[90vh] flex flex-col shadow-2xl border border-slate-200/80 overflow-hidden animate-in zoom-in-95 duration-150">
            {/* Header */}
            <div className="flex items-start justify-between gap-3 px-5 sm:px-6 pt-5 pb-4 border-b border-slate-100">
              <div className="flex items-center gap-3 min-w-0">
                <div
                  className="shrink-0 w-10 h-10 rounded-xl text-white flex items-center justify-center shadow-md"
                  style={{
                    background: `linear-gradient(135deg, ${previewColor}, ${previewColor}cc)`,
                    boxShadow: `0 6px 18px ${previewColor}40`,
                  }}
                >
                  {PreviewIcon ? <PreviewIcon size={18} /> : <LayoutDashboard size={18} />}
                </div>
                <div className="min-w-0">
                  <h2 className="font-semibold text-slate-900 text-base leading-tight truncate">
                    {editingApp.id ? t("admin.editApp") : t("admin.addApp")}
                  </h2>
                  <p className="text-xs text-slate-500 mt-0.5 truncate">
                    {editingApp.id
                      ? (lang === "ar" ? "حدّث تفاصيل التطبيق وأذوناته" : "Update app details and permissions")
                      : (lang === "ar" ? "أضف تطبيقاً جديداً للوحة" : "Add a new app to the launcher")}
                  </p>
                </div>
              </div>
              <button
                type="button"
                onClick={() => setEditingApp(null)}
                className="shrink-0 -m-1 p-1.5 rounded-lg text-slate-400 hover:text-slate-700 hover:bg-slate-100 transition-colors"
                aria-label={t("common.cancel")}
              >
                <X size={18} />
              </button>
            </div>

            {/* Body */}
            <div className="flex-1 overflow-y-auto px-5 sm:px-6 py-5 space-y-5">
              {/* Names row */}
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div className="space-y-1.5">
                  <Label className="text-xs font-medium text-slate-700 flex items-center gap-1.5">
                    <span className="inline-flex items-center justify-center w-4 h-4 rounded bg-slate-100 text-[10px] font-bold text-slate-600">ع</span>
                    {t("admin.appNameAr")}
                  </Label>
                  <Input
                    value={editingApp.form.nameAr}
                    onChange={(e) => setEditingApp({ ...editingApp, form: { ...editingApp.form, nameAr: e.target.value } })}
                    className="bg-slate-50/70 border-slate-200 rounded-lg h-10 text-sm focus-visible:ring-2 focus-visible:ring-indigo-500/30 focus-visible:border-indigo-400"
                    dir="rtl"
                    placeholder="الملاحظات"
                  />
                </div>
                <div className="space-y-1.5">
                  <Label className="text-xs font-medium text-slate-700 flex items-center gap-1.5">
                    <span className="inline-flex items-center justify-center w-4 h-4 rounded bg-slate-100 text-[10px] font-bold text-slate-600">EN</span>
                    {t("admin.appNameEn")}
                  </Label>
                  <Input
                    value={editingApp.form.nameEn}
                    onChange={(e) => setEditingApp({ ...editingApp, form: { ...editingApp.form, nameEn: e.target.value } })}
                    className="bg-slate-50/70 border-slate-200 rounded-lg h-10 text-sm focus-visible:ring-2 focus-visible:ring-indigo-500/30 focus-visible:border-indigo-400"
                    dir="ltr"
                    placeholder="Notes"
                  />
                </div>
              </div>

              {/* Identifier row */}
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div className="space-y-1.5">
                  <Label className="text-xs font-medium text-slate-700 flex items-center gap-1.5">
                    <Hash size={12} className="text-slate-500" />
                    {t("admin.appSlug")}
                  </Label>
                  <Input
                    value={editingApp.form.slug}
                    onChange={(e) => setEditingApp({ ...editingApp, form: { ...editingApp.form, slug: e.target.value } })}
                    className="bg-slate-50/70 border-slate-200 rounded-lg h-10 text-sm font-mono focus-visible:ring-2 focus-visible:ring-indigo-500/30 focus-visible:border-indigo-400"
                    dir="ltr"
                    placeholder="notes"
                  />
                  <p className="text-[11px] text-slate-400 leading-snug">
                    {lang === "ar" ? "معرّف فريد للتطبيق (أحرف صغيرة بدون مسافات)" : "Unique app identifier (lowercase, no spaces)"}
                  </p>
                </div>
                {!isExternal && (
                  <div className="space-y-1.5" data-testid="app-route-field">
                    <Label className="text-xs font-medium text-slate-700 flex items-center gap-1.5">
                      <Link2 size={12} className="text-slate-500" />
                      {t("admin.appRoute")}
                      {isBuiltin && (
                        <Lock size={10} className="text-slate-400" aria-hidden="true" />
                      )}
                    </Label>
                    <Input
                      value={editingApp.form.route}
                      onChange={(e) => setEditingApp({ ...editingApp, form: { ...editingApp.form, route: e.target.value } })}
                      readOnly={isBuiltin}
                      className={cn(
                        "bg-slate-50/70 border-slate-200 rounded-lg h-10 text-sm font-mono focus-visible:ring-2 focus-visible:ring-indigo-500/30 focus-visible:border-indigo-400",
                        isBuiltin && "opacity-70 cursor-not-allowed",
                      )}
                      dir="ltr"
                      placeholder="/notes"
                    />
                    <p className="text-[11px] text-slate-400 leading-snug">
                      {isBuiltin
                        ? t("admin.builtinPathLocked")
                        : (lang === "ar" ? "المسار داخل التطبيق (مثل /notes)" : "URL path inside the app (e.g. /notes)")}
                    </p>
                  </div>
                )}
              </div>

              {/* App image (optional, replaces the Lucide icon on the launcher) */}
              <div className="space-y-1.5">
                <Label className="text-xs font-medium text-slate-700 flex items-center gap-1.5">
                  <Upload size={12} className="text-slate-500" />
                  {t("admin.appImage")}
                </Label>
                <ServiceImageUploader
                  value={editingApp.form.imageUrl}
                  onChange={(url) =>
                    setEditingApp({
                      ...editingApp,
                      form: { ...editingApp.form, imageUrl: url },
                    })
                  }
                />
                <p className="text-[11px] text-slate-400 leading-snug">
                  {lang === "ar"
                    ? "صورة اختيارية تظهر مكان الأيقونة في الشاشة الرئيسية"
                    : "Optional image shown on the launcher tile in place of the icon"}
                </p>
              </div>

              {/* Open mode + external URL */}
              <div className="space-y-1.5">
                <Label className="text-xs font-medium text-slate-700 flex items-center gap-1.5">
                  <ExternalLink size={12} className="text-slate-500" />
                  {t("admin.appOpenMode.label")}
                </Label>
                <select
                  value={editingApp.form.openMode}
                  onChange={(e) =>
                    setEditingApp({
                      ...editingApp,
                      form: {
                        ...editingApp.form,
                        openMode: e.target.value as AppOpenMode,
                      },
                    })
                  }
                  className="bg-slate-50/70 border border-slate-200 rounded-lg h-10 text-sm w-full px-3 focus-visible:ring-2 focus-visible:ring-indigo-500/30 focus-visible:border-indigo-400"
                  dir={lang === "ar" ? "rtl" : "ltr"}
                >
                  <option value="internal">{t("admin.appOpenMode.internal")}</option>
                  <option value="external_tab">{t("admin.appOpenMode.external_tab")}</option>
                  <option value="external_iframe">{t("admin.appOpenMode.external_iframe")}</option>
                </select>
                {isExternal && (
                  <div className="space-y-1.5 pt-2">
                    <Label className="text-xs font-medium text-slate-700">
                      {t("admin.appExternalUrl")}
                    </Label>
                    <Input
                      value={editingApp.form.externalUrl}
                      onChange={(e) =>
                        setEditingApp({
                          ...editingApp,
                          form: { ...editingApp.form, externalUrl: e.target.value },
                        })
                      }
                      className="bg-slate-50/70 border-slate-200 rounded-lg h-10 text-sm focus-visible:ring-2 focus-visible:ring-indigo-500/30 focus-visible:border-indigo-400"
                      dir="ltr"
                      placeholder="https://example.com"
                      type="url"
                    />
                  </div>
                )}
              </div>

              {/* Visuals row — icon + color with live previews */}
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                {/* Icon picker */}
                <div className="space-y-1.5">
                  <Label className="text-xs font-medium text-slate-700 flex items-center gap-1.5">
                    <Grid2X2 size={12} className="text-slate-500" />
                    {t("admin.appIcon")}
                  </Label>
                  <div className="flex items-center gap-2">
                    <div
                      className={cn(
                        "shrink-0 w-10 h-10 rounded-lg flex items-center justify-center border transition-colors",
                        PreviewIcon
                          ? "border-slate-200 bg-white text-slate-700"
                          : "border-dashed border-slate-300 bg-slate-50 text-slate-300"
                      )}
                      title={PreviewIcon ? editingApp.form.iconName : (lang === "ar" ? "اسم أيقونة غير معروف" : "Unknown icon name")}
                    >
                      {PreviewIcon ? <PreviewIcon size={18} /> : <HelpCircle size={18} />}
                    </div>
                    <Input
                      value={editingApp.form.iconName}
                      onChange={(e) => setEditingApp({ ...editingApp, form: { ...editingApp.form, iconName: e.target.value } })}
                      className="bg-slate-50/70 border-slate-200 rounded-lg h-10 text-sm font-mono focus-visible:ring-2 focus-visible:ring-indigo-500/30 focus-visible:border-indigo-400"
                      dir="ltr"
                      placeholder="StickyNote"
                    />
                  </div>
                  <p className="text-[11px] text-slate-400 leading-snug">
                    {lang === "ar" ? "اسم أيقونة من Lucide (مثل: StickyNote, Coffee, Users)" : "Lucide icon name (e.g. StickyNote, Coffee, Users)"}
                  </p>
                </div>

                {/* Color picker */}
                <div className="space-y-1.5">
                  <Label className="text-xs font-medium text-slate-700 flex items-center gap-1.5">
                    <Palette size={12} className="text-slate-500" />
                    {t("admin.appColor")}
                  </Label>
                  <div className="flex items-center gap-2">
                    <label
                      className="shrink-0 relative w-10 h-10 rounded-lg border border-slate-200 cursor-pointer overflow-hidden shadow-sm hover:ring-2 hover:ring-indigo-500/30 transition"
                      style={{ backgroundColor: previewColor }}
                      title={lang === "ar" ? "اختر اللون" : "Pick color"}
                    >
                      <input
                        type="color"
                        value={previewColor}
                        onChange={(e) => setEditingApp({ ...editingApp, form: { ...editingApp.form, color: e.target.value } })}
                        className="absolute inset-0 opacity-0 cursor-pointer"
                      />
                    </label>
                    <Input
                      value={editingApp.form.color}
                      onChange={(e) => setEditingApp({ ...editingApp, form: { ...editingApp.form, color: e.target.value } })}
                      className="bg-slate-50/70 border-slate-200 rounded-lg h-10 text-sm font-mono uppercase focus-visible:ring-2 focus-visible:ring-indigo-500/30 focus-visible:border-indigo-400"
                      dir="ltr"
                      placeholder="#6366F1"
                    />
                  </div>
                  <p className="text-[11px] text-slate-400 leading-snug">
                    {lang === "ar" ? "كود اللون السداسي (مثل #6366F1)" : "Hex color code (e.g. #6366F1)"}
                  </p>
                </div>
              </div>

              {/* Permissions section in a bordered card */}
              <div className="rounded-xl border border-slate-200 bg-slate-50/40 overflow-hidden">
                <div className="flex items-center gap-2 px-4 py-2.5 border-b border-slate-200 bg-white/60">
                  <Shield size={14} className="text-slate-500" />
                  <span className="text-xs font-semibold text-slate-700">
                    {lang === "ar" ? "الأذونات" : "Permissions"}
                  </span>
                </div>
                <div className="p-3">
                  {editingApp.id !== undefined ? (
                    <AppPermissionsEditor appId={editingApp.id} />
                  ) : (
                    <NewAppPermissionsPicker
                      selectedIds={editingApp.form.permissionIds}
                      onChange={(next) =>
                        setEditingApp({
                          ...editingApp,
                          form: { ...editingApp.form, permissionIds: next },
                        })
                      }
                    />
                  )}
                </div>
              </div>

              {editingApp.id !== undefined && (
                <PermissionAuditHistory
                  targetKind="app"
                  targetId={editingApp.id}
                  enabled={true}
                  language={lang}
                  scopeI18nKey="admin.apps.history"
                  changeKindLabel={null}
                  labelResolver={(_ck, id) => {
                    const p = (permissionsList ?? []).find((x) => x.id === id);
                    return p ? p.name : `#${id}`;
                  }}
                />
              )}
              {editingApp.id !== undefined && (
                <RecentActivityForTarget
                  targetType="app"
                  targetId={editingApp.id}
                  enabled={true}
                  lang={lang}
                  onViewFullHistory={() =>
                    openAuditLogForTarget("app", editingApp.id!)
                  }
                />
              )}
            </div>

            {/* Footer */}
            <div className="flex gap-2 px-5 sm:px-6 py-4 border-t border-slate-100 bg-slate-50/40">
              <Button
                variant="outline"
                className="flex-1 h-10 rounded-lg border-slate-200 hover:bg-slate-100"
                onClick={() => setEditingApp(null)}
              >
                {t("common.cancel")}
              </Button>
              <Button
                className="flex-1 h-10 rounded-lg bg-gradient-to-r from-indigo-500 to-blue-600 hover:from-indigo-600 hover:to-blue-700 shadow-md shadow-indigo-500/20"
                onClick={handleSaveApp}
              >
                {t("common.save")}
              </Button>
            </div>
          </div>
        </div>
        );
      })()}

      {/* Edit Service Modal */}
      {editingService && (
        <div
          className="fixed inset-0 bg-slate-950/50 backdrop-blur-md z-50 flex items-center justify-center p-4 animate-in fade-in duration-150"
          onClick={(e) => { if (e.target === e.currentTarget) setEditingService(null); }}
        >
          <div className="bg-white rounded-2xl w-full max-w-lg max-h-[90vh] flex flex-col shadow-2xl border border-slate-200/80 overflow-hidden animate-in zoom-in-95 duration-150">
            {/* Header */}
            <div className="flex items-start justify-between gap-4 px-6 pt-5 pb-4 border-b border-slate-100">
              <div className="flex items-center gap-3 min-w-0">
                <div className="shrink-0 w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-500 to-blue-600 text-white flex items-center justify-center shadow-md shadow-indigo-500/20">
                  <Coffee size={18} />
                </div>
                <div className="min-w-0">
                  <h2 className="font-semibold text-slate-900 text-base leading-tight">
                    {editingService.id ? t("admin.editService") : t("admin.addService")}
                  </h2>
                  <p className="text-xs text-slate-500 mt-0.5">
                    {editingService.id
                      ? (lang === "ar" ? "حدّث تفاصيل الخدمة وصورتها" : "Update the service details and image")
                      : (lang === "ar" ? "أضف خدمة جديدة إلى القائمة" : "Add a new service to the list")}
                  </p>
                </div>
              </div>
              <button
                type="button"
                onClick={() => setEditingService(null)}
                className="shrink-0 -m-1 p-1.5 rounded-lg text-slate-400 hover:text-slate-700 hover:bg-slate-100 transition-colors"
                aria-label={t("common.cancel")}
              >
                <X size={18} />
              </button>
            </div>

            {/* Body */}
            <div className="flex-1 overflow-y-auto px-6 py-5 space-y-5">
              {/* Name fields — side by side on sm+ */}
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div className="space-y-1.5">
                  <Label className="text-xs font-medium text-slate-700 flex items-center gap-1.5">
                    <span className="inline-flex items-center justify-center w-4 h-4 rounded bg-slate-100 text-[10px] font-bold text-slate-600">ع</span>
                    {t("admin.serviceNameAr")}
                  </Label>
                  <Input
                    value={editingService.form.nameAr}
                    onChange={(e) => setEditingService({ ...editingService, form: { ...editingService.form, nameAr: e.target.value } })}
                    className="bg-slate-50/70 border-slate-200 rounded-lg h-10 text-sm focus-visible:ring-2 focus-visible:ring-indigo-500/30 focus-visible:border-indigo-400"
                    dir="rtl"
                    placeholder="شاي"
                  />
                </div>
                <div className="space-y-1.5">
                  <Label className="text-xs font-medium text-slate-700 flex items-center gap-1.5">
                    <span className="inline-flex items-center justify-center w-4 h-4 rounded bg-slate-100 text-[10px] font-bold text-slate-600">EN</span>
                    {t("admin.serviceNameEn")}
                  </Label>
                  <Input
                    value={editingService.form.nameEn}
                    onChange={(e) => setEditingService({ ...editingService, form: { ...editingService.form, nameEn: e.target.value } })}
                    className="bg-slate-50/70 border-slate-200 rounded-lg h-10 text-sm focus-visible:ring-2 focus-visible:ring-indigo-500/30 focus-visible:border-indigo-400"
                    dir="ltr"
                    placeholder="Tea"
                  />
                </div>
              </div>

              {/* Image */}
              <div className="space-y-1.5">
                <Label className="text-xs font-medium text-slate-700 flex items-center gap-1.5">
                  <ImageIcon size={12} className="text-slate-500" />
                  {t("admin.serviceImage")}
                </Label>
                <ServiceImageUploader
                  value={editingService.form.imageUrl}
                  onChange={(url) =>
                    setEditingService({
                      ...editingService,
                      form: { ...editingService.form, imageUrl: url },
                    })
                  }
                />
              </div>

              {/* Availability — card row */}
              <div className="flex items-center gap-3 p-3.5 rounded-xl border border-slate-200 bg-slate-50/50">
                <div className={cn(
                  "shrink-0 w-9 h-9 rounded-lg flex items-center justify-center transition-colors",
                  editingService.form.isAvailable
                    ? "bg-emerald-100 text-emerald-600"
                    : "bg-slate-200 text-slate-400"
                )}>
                  <Power size={16} />
                </div>
                <div className="flex-1 min-w-0">
                  <div className="text-sm font-medium text-slate-800">{t("admin.serviceAvailable")}</div>
                  <div className="text-xs text-slate-500 mt-0.5">
                    {editingService.form.isAvailable
                      ? (lang === "ar" ? "الخدمة معروضة للمستخدمين الآن" : "Visible to users right now")
                      : (lang === "ar" ? "الخدمة مخفية عن المستخدمين" : "Hidden from users")}
                  </div>
                </div>
                <Switch
                  checked={editingService.form.isAvailable}
                  onCheckedChange={(v) => setEditingService({ ...editingService, form: { ...editingService.form, isAvailable: v } })}
                />
              </div>

              {editingService.id !== undefined && (
                <div className="pt-1">
                  <RecentActivityForTarget
                    targetType="service"
                    targetId={editingService.id}
                    enabled={true}
                    lang={lang}
                    onViewFullHistory={() =>
                      openAuditLogForTarget("service", editingService.id!)
                    }
                  />
                </div>
              )}
            </div>

            {/* Footer */}
            <div className="flex gap-2 px-6 py-4 border-t border-slate-100 bg-slate-50/40">
              <Button
                variant="outline"
                className="flex-1 h-10 rounded-lg border-slate-200 hover:bg-slate-100"
                onClick={() => setEditingService(null)}
              >
                {t("common.cancel")}
              </Button>
              <Button
                className="flex-1 h-10 rounded-lg bg-gradient-to-r from-indigo-500 to-blue-600 hover:from-indigo-600 hover:to-blue-700 shadow-md shadow-indigo-500/20"
                onClick={handleSaveService}
              >
                {t("common.save")}
              </Button>
            </div>
          </div>
        </div>
      )}

      {/* Create User Modal */}
      {newUserForm && (
        <div className="fixed inset-0 bg-slate-900/30 backdrop-blur-sm z-50 flex items-center justify-center p-4">
          <div className="glass-panel rounded-3xl p-6 w-full max-w-sm space-y-4">
            <h2 className="font-semibold text-foreground">{t("admin.addUser")}</h2>
            <div className="space-y-1">
              <Label>{t("admin.username")}</Label>
              <Input
                value={newUserForm.username}
                onChange={(e) => setNewUserForm({ ...newUserForm, username: e.target.value })}
                className="bg-white/70 border-slate-200"
              />
            </div>
            <div className="space-y-1">
              <Label>{t("admin.email")}</Label>
              <Input
                type="email"
                value={newUserForm.email}
                onChange={(e) => setNewUserForm({ ...newUserForm, email: e.target.value })}
                className="bg-white/70 border-slate-200"
              />
            </div>
            <div className="space-y-1">
              <Label>{t("admin.password")}</Label>
              <Input
                type="password"
                value={newUserForm.password}
                onChange={(e) => setNewUserForm({ ...newUserForm, password: e.target.value })}
                className="bg-white/70 border-slate-200"
              />
            </div>
            <div className="flex gap-2">
              <Button variant="outline" className="flex-1" onClick={() => setNewUserForm(null)}>{t("common.cancel")}</Button>
              <Button className="flex-1" onClick={handleCreateUser}>{t("common.save")}</Button>
            </div>
          </div>
        </div>
      )}

      <div className="flex-1 flex w-full">
        {/* Sidebar (desktop) */}
        <aside className="hidden md:flex flex-col w-64 shrink-0 border-e border-slate-200/70 bg-white/70 backdrop-blur-md">
          <div className="sticky top-[73px] p-4 space-y-4">
            <div className="flex items-center gap-2 px-2 pb-3 border-b border-slate-200/70">
              <Shield size={18} className="text-primary" />
              <span className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
                {t("admin.nav.menu")}
              </span>
            </div>
            {renderNavList()}
          </div>
        </aside>

        {/* Main content */}
        <div className="flex-1 min-w-0 p-4 pb-8">
          {section === "dashboard" && (
            <DashboardSection
              apps={apps}
              services={services}
              users={users}
              appSettings={appSettings}
              adminStats={adminStats}
              adminStatsErrorMessage={adminStatsErrorMessage}
              lang={lang}
              statsRange={statsRange}
              onStatsRangeChange={setStatsRange}
              customFrom={customFrom}
              customTo={customTo}
              onCustomFromChange={setCustomFrom}
              onCustomToChange={setCustomTo}
              onApplyCustom={() => setAppliedCustom({ from: customFrom, to: customTo })}
              statsQueryParams={statsQueryParams}
              onSelectApp={handleSelectAppFromDashboard}
              onSelectUser={handleSelectUserFromDashboard}
            />
          )}

          {section === "apps" && (
          <div className="space-y-3">
            <div className="flex justify-end">
              <Button size="sm" onClick={() => setEditingApp({ form: emptyAppForm })}>
                <Plus size={14} className="me-1" />
                {t("admin.addApp")}
              </Button>
            </div>
            {apps?.map((app) => (
              <div key={app.id} className={cn("rounded-2xl p-4 flex items-center justify-between gap-3 border", app.isActive ? "glass-panel border-transparent" : "bg-slate-100/80 border-slate-200")}>
                <div className="flex items-center gap-3 min-w-0">
                  <div
                    className={cn("w-8 h-8 rounded-lg shrink-0", !app.isActive && "grayscale")}
                    style={{ backgroundColor: `${app.color}40` }}
                  />
                  <div className="min-w-0">
                    <div className="flex items-center gap-2">
                      <div className={cn("font-medium text-sm truncate", app.isActive ? "text-foreground" : "text-slate-400")}>
                        {lang === "ar" ? app.nameAr : app.nameEn}
                      </div>
                      {!app.isActive && (
                        <span className="text-[10px] font-medium bg-slate-300 text-slate-600 rounded px-1.5 py-0.5 shrink-0">
                          {t("admin.appDisabled")}
                        </span>
                      )}
                    </div>
                    <div className="text-xs text-muted-foreground">{app.route}</div>
                    {(() => {
                      const appName = lang === "ar" ? app.nameAr : app.nameEn;
                      const parts: Array<{
                        label: string;
                        target: DependencyTarget;
                        testid: string;
                      }> = [];
                      if ((app.groupCount ?? 0) > 0)
                        parts.push({
                          label: t("admin.apps.counts.groups", { count: app.groupCount }),
                          target: { kind: "appGroups", appId: app.id, appName },
                          testid: `app-counts-groups-${app.id}`,
                        });
                      if ((app.restrictionCount ?? 0) > 0)
                        parts.push({
                          label: t("admin.apps.counts.restrictions", { count: app.restrictionCount }),
                          target: { kind: "appRestrictions", appId: app.id, appName },
                          testid: `app-counts-restrictions-${app.id}`,
                        });
                      if ((app.openCount ?? 0) > 0)
                        parts.push({
                          label: t("admin.apps.counts.opens", { count: app.openCount }),
                          target: { kind: "appOpens", appId: app.id, appName },
                          testid: `app-counts-opens-${app.id}`,
                        });
                      if (parts.length === 0) return null;
                      return (
                        <div
                          className="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-[11px] text-muted-foreground pt-0.5"
                          data-testid={`app-counts-${app.id}`}
                        >
                          {parts.map((p, i) => (
                            <span key={p.testid} className="flex items-center gap-2">
                              {i > 0 && <span aria-hidden="true">•</span>}
                              <button
                                type="button"
                                onClick={() => setDependencyTarget(p.target)}
                                className="underline-offset-2 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 rounded-sm hover:text-foreground transition-colors"
                                data-testid={p.testid}
                                aria-label={t("admin.dependents.openLabel", {
                                  count: p.label,
                                })}
                              >
                                {p.label}
                              </button>
                            </span>
                          ))}
                        </div>
                      );
                    })()}
                  </div>
                </div>
                <div className="flex items-center gap-2 shrink-0">
                  <Switch
                    checked={app.isActive}
                    onCheckedChange={(v) => {
                      updateApp.mutate(
                        { id: app.id, data: { isActive: v } },
                        { onSuccess: () => queryClient.invalidateQueries({ queryKey: ADMIN_APPS_KEY }) },
                      );
                    }}
                  />
                  <button
                    onClick={() => setEditingApp({
                      id: app.id,
                      form: {
                        nameAr: app.nameAr ?? "",
                        nameEn: app.nameEn ?? "",
                        slug: app.slug ?? "",
                        iconName: app.iconName ?? "Grid2X2",
                        imageUrl: app.imageUrl ?? "",
                        route: app.route ?? "/",
                        externalUrl: app.externalUrl ?? "",
                        openMode: ((app.openMode as AppOpenMode) ?? "internal"),
                        color: app.color ?? "#6366f1",
                        sortOrder: app.sortOrder ?? 0,
                        permissionIds: [],
                      },
                    })}
                    className="p-1.5 hover:bg-slate-100 rounded-lg text-muted-foreground hover:text-foreground"
                  >
                    <Pencil size={14} />
                  </button>
                  <button
                    onClick={() => {
                      // Pre-populate conflict from list-row counts so the
                      // warning dialog shows on the FIRST click. Falls back
                      // to the lazy 409 round-trip if counts are missing.
                      const groupCount = app.groupCount ?? 0;
                      const restrictionCount = app.restrictionCount ?? 0;
                      const openCount = app.openCount ?? 0;
                      const hasDeps =
                        groupCount > 0 || restrictionCount > 0 || openCount > 0;
                      setAppDeleteConflict(
                        hasDeps
                          ? {
                              error: "App has dependent records",
                              groupCount,
                              restrictionCount,
                              openCount,
                            }
                          : null,
                      );
                      setAppDeleteTarget(app);
                    }}
                    className="p-1.5 hover:bg-destructive/20 rounded-lg text-muted-foreground hover:text-destructive"
                    data-testid={`app-delete-${app.id}`}
                  >
                    <Trash2 size={14} />
                  </button>
                </div>
              </div>
            ))}
          </div>
          )}

          {section === "services" && (
          <div className="space-y-3">
            <div className="flex justify-end">
              <Button size="sm" onClick={() => setEditingService({ form: emptyServiceForm })}>
                <Plus size={14} className="me-1" />
                {t("admin.addService")}
              </Button>
            </div>
            {services?.map((service) => (
              <div key={service.id} className="glass-panel rounded-2xl p-4 flex items-center justify-between gap-3">
                <div className="min-w-0 flex-1">
                  <div className="font-medium text-sm text-foreground truncate">
                    {lang === "ar" ? service.nameAr : service.nameEn}
                  </div>
                  {(service.orderCount ?? 0) > 0 && (
                    <div
                      className="text-[11px] text-muted-foreground pt-0.5"
                      data-testid={`service-counts-${service.id}`}
                    >
                      <button
                        type="button"
                        onClick={() =>
                          setDependencyTarget({
                            kind: "serviceOrders",
                            serviceId: service.id,
                            serviceName: lang === "ar" ? service.nameAr : service.nameEn,
                          })
                        }
                        className="underline-offset-2 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 rounded-sm hover:text-foreground transition-colors"
                        data-testid={`service-counts-orders-${service.id}`}
                        aria-label={t("admin.dependents.openLabel", {
                          count: t("admin.services.counts.orders", { count: service.orderCount }),
                        })}
                      >
                        {t("admin.services.counts.orders", { count: service.orderCount })}
                      </button>
                    </div>
                  )}
                </div>
                <div className="flex items-center gap-2 shrink-0">
                  <Switch
                    checked={service.isAvailable}
                    onCheckedChange={(v) => {
                      updateService.mutate(
                        { id: service.id, data: { isAvailable: v } },
                        { onSuccess: () => queryClient.invalidateQueries({ queryKey: getListServicesQueryKey() }) },
                      );
                    }}
                  />
                  <button
                    onClick={() => setEditingService({
                      id: service.id,
                      form: {
                        nameAr: service.nameAr ?? "",
                        nameEn: service.nameEn ?? "",
                        descriptionAr: service.descriptionAr ?? "",
                        descriptionEn: service.descriptionEn ?? "",
                        imageUrl: service.imageUrl ?? "",
                        isAvailable: service.isAvailable ?? true,
                      },
                    })}
                    className="p-1.5 hover:bg-slate-100 rounded-lg text-muted-foreground hover:text-foreground"
                  >
                    <Pencil size={14} />
                  </button>
                  <button
                    onClick={() => {
                      // Pre-populate conflict from list-row orderCount so
                      // the warning dialog shows on the FIRST click. Falls
                      // back to the lazy 409 round-trip if count is missing.
                      const orderCount = service.orderCount ?? 0;
                      setServiceDeleteConflict(
                        orderCount > 0
                          ? {
                              error: "Service has dependent records",
                              orderCount,
                            }
                          : null,
                      );
                      setServiceDeleteTarget(service);
                    }}
                    className="p-1.5 hover:bg-destructive/20 rounded-lg text-muted-foreground hover:text-destructive"
                    data-testid={`service-delete-${service.id}`}
                  >
                    <Trash2 size={14} />
                  </button>
                </div>
              </div>
            ))}
          </div>
          )}

          {section === "users" && (
            <UsersPanel
              currentUserId={user.id}
              highlightedUserId={highlightedUserId}
              userRowRefs={userRowRefs}
              onIssueResetLink={(uid, username) =>
                issueResetLink.mutate(
                  { id: uid },
                  {
                    onSuccess: (resp) =>
                      setResetLinkUser({
                        username,
                        url: resp.resetUrl,
                        expiresAt:
                          typeof resp.expiresAt === "string"
                            ? resp.expiresAt
                            : new Date(resp.expiresAt).toISOString(),
                      }),
                    onError: () =>
                      toast({ title: t("common.error"), variant: "destructive" }),
                  },
                )
              }
              onOpenAuditLogForTarget={openAuditLogForTarget}
            />
          )}
          {section === "groups" && (
            <GroupsPanel onOpenAuditLogForTarget={openAuditLogForTarget} />
          )}
          {section === "roles" && (
            <RolesPanel onOpenAuditLogForTarget={openAuditLogForTarget} />
          )}
          {section === "audit-log" && <AuditLogPanel />}

          {section === "settings" && (
            <div className="space-y-3">
              <SiteSettingsPanel />
            </div>
          )}
        </div>
      </div>

      {appDeleteTarget && (() => {
        const target = appDeleteTarget;
        const items: string[] = [];
        if (appDeleteConflict) {
          if (appDeleteConflict.groupCount > 0)
            items.push(t("admin.deleteApp.groupCount", { count: appDeleteConflict.groupCount }));
          if (appDeleteConflict.restrictionCount > 0)
            items.push(t("admin.deleteApp.restrictionCount", { count: appDeleteConflict.restrictionCount }));
          if (appDeleteConflict.openCount > 0)
            items.push(t("admin.deleteApp.openCount", { count: appDeleteConflict.openCount }));
        }
        return (
          <DeletionWarningDialog
            title={t("admin.deleteApp.title", { name: lang === "ar" ? target.nameAr : target.nameEn })}
            warning={t("admin.deleteApp.warning")}
            forceHint={t("admin.deleteApp.forceHint")}
            emptyBody={t("admin.deleteApp.emptyBody")}
            confirmLabel={t("admin.deleteApp.confirm")}
            anywayLabel={t("admin.deleteApp.anyway")}
            items={items}
            showWarning={appDeleteConflict !== null}
            isPending={deleteApp.isPending}
            onCancel={closeAppDeleteDialog}
            onConfirm={() => performAppDelete(target, appDeleteConflict !== null)}
            testId="app-delete-dialog"
            confirmTestId="app-delete-confirm"
          />
        );
      })()}

      {serviceDeleteTarget && (() => {
        const target = serviceDeleteTarget;
        const items: string[] = [];
        if (serviceDeleteConflict && serviceDeleteConflict.orderCount > 0) {
          items.push(t("admin.deleteService.orderCount", { count: serviceDeleteConflict.orderCount }));
        }
        return (
          <DeletionWarningDialog
            title={t("admin.deleteService.title", { name: lang === "ar" ? target.nameAr : target.nameEn })}
            warning={t("admin.deleteService.warning")}
            forceHint={t("admin.deleteService.forceHint")}
            emptyBody={t("admin.deleteService.emptyBody")}
            confirmLabel={t("admin.deleteService.confirm")}
            anywayLabel={t("admin.deleteService.anyway")}
            items={items}
            showWarning={serviceDeleteConflict !== null}
            isPending={deleteService.isPending}
            onCancel={closeServiceDeleteDialog}
            onConfirm={() => performServiceDelete(target, serviceDeleteConflict !== null)}
            testId="service-delete-dialog"
            confirmTestId="service-delete-confirm"
          />
        );
      })()}

      {resetLinkUser && (
        <div
          className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
          onClick={() => setResetLinkUser(null)}
        >
          <div
            className="glass-panel rounded-2xl p-6 max-w-md w-full space-y-4"
            onClick={(e) => e.stopPropagation()}
          >
            <h3 className="text-lg font-bold">
              {t("admin.resetLinkModal.title", { username: resetLinkUser.username })}
            </h3>
            <p className="text-sm text-muted-foreground">
              {t("admin.resetLinkModal.description")}
            </p>
            <div className="rounded-md border border-border bg-background/50 p-3">
              <code className="text-xs break-all block font-mono">
                {resetLinkUser.url}
              </code>
            </div>
            <p className="text-xs text-muted-foreground">
              {t("admin.resetLinkModal.expires", {
                time: new Date(resetLinkUser.expiresAt).toLocaleString(),
              })}
            </p>
            <div className="flex gap-2">
              <Button
                variant="outline"
                onClick={() => {
                  navigator.clipboard
                    .writeText(resetLinkUser.url)
                    .then(() =>
                      toast({ title: t("admin.resetLinkModal.copied") }),
                    )
                    .catch(() => {});
                }}
                className="flex-1"
              >
                <Copy size={14} />
                <span className="ml-2">{t("admin.resetLinkModal.copy")}</span>
              </Button>
              <Button
                onClick={() => setResetLinkUser(null)}
                className="flex-1"
              >
                {t("common.close")}
              </Button>
            </div>
          </div>
        </div>
      )}
      {dependencyTarget && (
        <DependencyDrillIn
          target={dependencyTarget}
          lang={lang}
          onClose={() => setDependencyTarget(null)}
        />
      )}
    </div>
  );
}

function SiteSettingsPanel() {
  const { t } = useTranslation();
  const { toast } = useToast();
  const queryClient = useQueryClient();
  const { data } = useGetAppSettings({ query: { queryKey: getGetAppSettingsQueryKey() } });
  const update = useUpdateAppSettings();
  const [form, setForm] = useState({
    siteNameAr: "",
    siteNameEn: "",
    registrationOpen: true,
    footerTextAr: "",
    footerTextEn: "",
  });

  useEffect(() => {
    if (data) setForm({
      siteNameAr: data.siteNameAr,
      siteNameEn: data.siteNameEn,
      registrationOpen: data.registrationOpen,
      footerTextAr: data.footerTextAr,
      footerTextEn: data.footerTextEn,
    });
  }, [data]);

  const handleSave = () => {
    update.mutate(
      { data: form },
      {
        onSuccess: () => {
          queryClient.invalidateQueries({ queryKey: getGetAppSettingsQueryKey() });
          toast({ title: t("common.success") });
        },
        onError: () => toast({ title: t("common.error"), variant: "destructive" }),
      },
    );
  };

  return (
    <div className="glass-panel rounded-2xl p-4 space-y-4">
      <div className="space-y-1">
        <Label>{t("admin.siteNameAr")}</Label>
        <Input
          value={form.siteNameAr}
          onChange={(e) => setForm({ ...form, siteNameAr: e.target.value })}
          className="bg-white/70 border-slate-200"
          dir="rtl"
        />
      </div>
      <div className="space-y-1">
        <Label>{t("admin.siteNameEn")}</Label>
        <Input
          value={form.siteNameEn}
          onChange={(e) => setForm({ ...form, siteNameEn: e.target.value })}
          className="bg-white/70 border-slate-200"
          dir="ltr"
        />
      </div>
      <div className="space-y-1">
        <Label>{t("admin.footerTextAr")}</Label>
        <Input
          value={form.footerTextAr}
          onChange={(e) => setForm({ ...form, footerTextAr: e.target.value })}
          className="bg-white/70 border-slate-200"
          dir="rtl"
        />
      </div>
      <div className="space-y-1">
        <Label>{t("admin.footerTextEn")}</Label>
        <Input
          value={form.footerTextEn}
          onChange={(e) => setForm({ ...form, footerTextEn: e.target.value })}
          className="bg-white/70 border-slate-200"
          dir="ltr"
        />
      </div>
      <div className="flex items-center justify-between pt-2">
        <div>
          <Label className="font-medium">{t("admin.registrationOpen")}</Label>
          <p className="text-xs text-muted-foreground">{t("admin.registrationOpenHint")}</p>
        </div>
        <Switch
          checked={form.registrationOpen}
          onCheckedChange={(v) => setForm({ ...form, registrationOpen: v })}
        />
      </div>
      <Button onClick={handleSave} disabled={update.isPending} className="w-full">
        {update.isPending ? t("common.loading") : t("common.save")}
      </Button>
    </div>
  );
}

function ServiceImageUploader({
  value,
  onChange,
}: {
  value: string;
  onChange: (url: string) => void;
}) {
  const { t } = useTranslation();
  const { toast } = useToast();
  const { uploadFile, isUploading, progress } = useUpload({
    onSuccess: (resp: UploadResponse) => {
      onChange(resp.objectPath);
    },
    onError: (err: Error) => {
      toast({ title: t("admin.uploadFailed"), description: err.message, variant: "destructive" });
    },
  });

  return (
    <div className="space-y-2">
      <div className="flex items-center gap-2">
        <label className="cursor-pointer">
          <input
            type="file"
            accept="image/*"
            disabled={isUploading}
            className="hidden"
            onChange={(e) => {
              const file = e.target.files?.[0];
              if (file) {
                void uploadFile(file);
              }
              e.currentTarget.value = "";
            }}
          />
          <span className="inline-flex items-center gap-2 px-3 py-2 rounded-lg border border-slate-200 bg-white text-sm text-slate-700 hover:bg-slate-50 transition">
            {isUploading ? <Loader2 size={16} className="animate-spin" /> : <Upload size={16} />}
            {isUploading
              ? `${t("admin.uploading")} ${progress}%`
              : value
                ? t("admin.replaceImage")
                : t("admin.uploadImage")}
          </span>
        </label>
        {value && !isUploading && (
          <button
            type="button"
            onClick={() => onChange("")}
            className="px-3 py-2 rounded-lg border border-slate-200 bg-white text-sm text-slate-500 hover:text-destructive hover:border-destructive/40"
          >
            <Trash2 size={14} />
          </button>
        )}
      </div>
      {value && (
        <div className="rounded-xl overflow-hidden border border-slate-200 bg-slate-50">
          <img
            src={resolveServiceImageUrl(value) ?? ""}
            alt=""
            className="w-full h-32 object-cover"
            onError={(e) => { (e.currentTarget as HTMLImageElement).style.display = "none"; }}
          />
        </div>
      )}
    </div>
  );
}

function DashboardSection({
  apps,
  services,
  users,
  appSettings,
  adminStats,
  adminStatsErrorMessage,
  lang,
  statsRange,
  onStatsRangeChange,
  customFrom,
  customTo,
  onCustomFromChange,
  onCustomToChange,
  onApplyCustom,
  statsQueryParams,
  onSelectApp,
  onSelectUser,
}: {
  apps: App[] | undefined;
  services: Service[] | undefined;
  users: UserProfile[] | undefined;
  appSettings: AppSettings | undefined;
  adminStats: AdminStats | undefined;
  adminStatsErrorMessage: string | null;
  lang: string;
  statsRange: "7d" | "30d" | "90d" | "custom";
  onStatsRangeChange: (range: "7d" | "30d" | "90d" | "custom") => void;
  customFrom: string;
  customTo: string;
  onCustomFromChange: (v: string) => void;
  onCustomToChange: (v: string) => void;
  onApplyCustom: () => void;
  statsQueryParams: GetAdminStatsParams;
  onSelectApp: (appId: number) => void;
  onSelectUser: (userId: number) => void;
}) {
  const { t } = useTranslation();
  const [drillIn, setDrillIn] = useState<
    | { kind: "app"; appId: number }
    | { kind: "user"; userId: number }
    | null
  >(null);

  const totalApps = apps?.length ?? 0;
  const totalServices = services?.length ?? 0;
  const totalUsers = users?.length ?? 0;
  const registrationOpen = appSettings?.registrationOpen ?? false;

  const latestUser = users
    ? [...users].sort((a, b) => (b.createdAt ?? "").localeCompare(a.createdAt ?? ""))[0]
    : undefined;
  const latestApp = apps
    ? [...apps].sort((a, b) => (b.createdAt ?? "").localeCompare(a.createdAt ?? ""))[0]
    : undefined;

  const formatDate = (iso?: string) => {
    if (!iso) return "";
    try {
      return formatDateUtil(iso, lang, { year: "numeric", month: "short", day: "numeric" });
    } catch {
      return "";
    }
  };

  const stats: { label: string; value: string; Icon: typeof Grid2X2; tint: string }[] = [
    { label: t("admin.dashboard.totalApps"), value: String(totalApps), Icon: Grid2X2, tint: "text-indigo-500 bg-indigo-100/70" },
    { label: t("admin.dashboard.totalServices"), value: String(totalServices), Icon: Coffee, tint: "text-amber-600 bg-amber-100/70" },
    { label: t("admin.dashboard.totalUsers"), value: String(totalUsers), Icon: UsersIcon, tint: "text-emerald-600 bg-emerald-100/70" },
    {
      label: t("admin.dashboard.registration"),
      value: registrationOpen ? t("admin.dashboard.open") : t("admin.dashboard.closed"),
      Icon: Shield,
      tint: registrationOpen ? "text-green-600 bg-green-100/70" : "text-rose-600 bg-rose-100/70",
    },
  ];

  const newUsers = adminStats?.newUsersInRange ?? 0;
  const prevUsers = adminStats?.newUsersPrevRange ?? 0;
  const userDelta = newUsers - prevUsers;
  const userDeltaPct = prevUsers > 0 ? Math.round((userDelta / prevUsers) * 100) : null;
  const activeServices = adminStats?.activeServices ?? 0;
  const inactiveServices = adminStats?.inactiveServices ?? 0;
  const signups = adminStats?.signupsByDay ?? [];
  const maxSignup = Math.max(1, ...signups.map((s) => s.count));
  const opens = adminStats?.appOpensByDay ?? [];
  const maxOpens = Math.max(1, ...opens.map((s) => s.count));
  const opensTotal = adminStats?.appOpensInRange ?? 0;
  const opensPrev = adminStats?.appOpensPrevRange ?? 0;
  const opensDelta = opensTotal - opensPrev;
  const opensDeltaPct = opensPrev > 0 ? Math.round((opensDelta / opensPrev) * 100) : null;
  const servicesCreated = adminStats?.servicesCreatedByDay ?? [];
  const maxServicesCreated = Math.max(1, ...servicesCreated.map((s) => s.count));
  const servicesCreatedTotal = adminStats?.servicesCreatedInRange ?? 0;
  const topApps = adminStats?.topApps ?? [];
  const maxTopAppCount = Math.max(1, ...topApps.map((a) => a.count));
  const mostActiveUsers = adminStats?.mostActiveUsers ?? [];
  const maxActiveUserCount = Math.max(1, ...mostActiveUsers.map((u) => u.count));
  const rangeDays = adminStats?.rangeDays ?? (statsRange === "90d" ? 90 : statsRange === "30d" ? 30 : statsRange === "custom" ? 7 : 7);
  const formatRangeDate = (iso: string) => {
    try {
      return formatDateUtil(iso + "T00:00:00Z", lang, { month: "short", day: "numeric" });
    } catch {
      return iso;
    }
  };
  const rangeLabel =
    statsRange === "custom" && adminStats?.rangeFrom && adminStats?.rangeTo
      ? t("admin.dashboard.range.customLabel", {
          from: formatRangeDate(adminStats.rangeFrom),
          to: formatRangeDate(adminStats.rangeTo),
        })
      : t(`admin.dashboard.range.${statsRange}`);
  const prevRangeLabel =
    statsRange === "custom"
      ? t("admin.dashboard.prevRange.custom", { count: rangeDays })
      : t(`admin.dashboard.prevRange.${statsRange}`);
  const dayLabel = (iso: string) => {
    try {
      return formatWeekdayUtil(new Date(iso + "T00:00:00Z"), lang, "short");
    } catch {
      return "";
    }
  };

  const showCounts = rangeDays <= 14;
  const labelStride = rangeDays <= 7 ? 1 : rangeDays <= 30 ? 5 : 15;
  const gapClass = rangeDays <= 7 ? "gap-1.5" : rangeDays <= 30 ? "gap-1" : "gap-px";
  const monthDayLabel = (iso: string) => {
    try {
      return formatDateUtil(iso + "T00:00:00Z", lang, { month: "short", day: "numeric" });
    } catch {
      return iso.slice(5);
    }
  };

  const renderChart = (
    title: string,
    series: { date: string; count: number }[],
    max: number,
    accent: string,
    subtitle?: string,
  ) => (
    <div className="glass-panel rounded-2xl p-4 space-y-3">
      <div className="flex items-center justify-between gap-2">
        <div className="text-sm font-semibold text-foreground truncate">{title}</div>
        <div className="text-xs text-muted-foreground shrink-0">{subtitle ?? rangeLabel}</div>
      </div>
      <div className={cn("flex items-end justify-between h-28 px-1", gapClass)} dir="ltr">
        {series.map((s, idx) => {
          const heightPct = (s.count / max) * 100;
          const showLabel =
            rangeDays <= 7
              ? true
              : idx === series.length - 1 || (series.length - 1 - idx) % labelStride === 0;
          return (
            <div key={s.date} className="flex-1 flex flex-col items-center gap-1.5 min-w-0">
              {showCounts && (
                <div className="text-[10px] font-medium text-foreground leading-none">{s.count}</div>
              )}
              <div className="w-full flex-1 flex items-end">
                <div
                  className={cn("w-full rounded-t-md transition-all bg-gradient-to-t", accent)}
                  style={{ height: `${Math.max(heightPct, s.count > 0 ? 6 : 2)}%` }}
                />
              </div>
              <div className="text-[10px] text-muted-foreground truncate w-full text-center">
                {showLabel ? (rangeDays <= 14 ? dayLabel(s.date) : monthDayLabel(s.date)) : ""}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );

  const rangeOptions: { value: "7d" | "30d" | "90d" | "custom"; label: string }[] = [
    { value: "7d", label: t("admin.dashboard.range.7d") },
    { value: "30d", label: t("admin.dashboard.range.30d") },
    { value: "90d", label: t("admin.dashboard.range.90d") },
    { value: "custom", label: t("admin.dashboard.range.custom") },
  ];

  const customInputsValid =
    /^\d{4}-\d{2}-\d{2}$/.test(customFrom) &&
    /^\d{4}-\d{2}-\d{2}$/.test(customTo) &&
    customFrom <= customTo;

  return (
    <div className="space-y-4">
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
        {stats.map(({ label, value, Icon, tint }) => (
          <div key={label} className="glass-panel rounded-2xl p-4 flex items-center gap-3">
            <div className={cn("w-10 h-10 rounded-xl flex items-center justify-center shrink-0", tint)}>
              <Icon size={20} />
            </div>
            <div className="min-w-0">
              <div className="text-xs text-muted-foreground truncate">{label}</div>
              <div className="text-xl font-semibold text-foreground truncate">{value}</div>
            </div>
          </div>
        ))}
      </div>

      <div className="glass-panel rounded-2xl p-3 space-y-3">
        <div className="flex items-center justify-between gap-3 flex-wrap">
          <div className="text-sm font-semibold text-foreground">
            {t("admin.dashboard.trends")}
          </div>
          <div className="inline-flex rounded-xl bg-slate-100/80 p-1" role="group" aria-label={t("admin.dashboard.rangeSelector")}>
            {rangeOptions.map((opt) => {
              const active = statsRange === opt.value;
              return (
                <button
                  key={opt.value}
                  type="button"
                  onClick={() => onStatsRangeChange(opt.value)}
                  aria-pressed={active}
                  className={cn(
                    "px-3 py-1.5 text-xs rounded-lg transition-all font-medium",
                    active
                      ? "bg-white text-foreground shadow-sm"
                      : "text-muted-foreground hover:text-foreground",
                  )}
                >
                  {opt.label}
                </button>
              );
            })}
          </div>
        </div>
        {statsRange === "custom" && (
          <div className="flex items-end gap-2 flex-wrap" dir="ltr">
            <div className="space-y-1">
              <Label className="text-xs text-muted-foreground">
                {t("admin.dashboard.customRange.from")}
              </Label>
              <Input
                type="date"
                value={customFrom}
                max={customTo || undefined}
                onChange={(e) => onCustomFromChange(e.target.value)}
                className="bg-white/70 border-slate-200 h-9 text-sm"
              />
            </div>
            <div className="space-y-1">
              <Label className="text-xs text-muted-foreground">
                {t("admin.dashboard.customRange.to")}
              </Label>
              <Input
                type="date"
                value={customTo}
                min={customFrom || undefined}
                onChange={(e) => onCustomToChange(e.target.value)}
                className="bg-white/70 border-slate-200 h-9 text-sm"
              />
            </div>
            <Button
              size="sm"
              onClick={onApplyCustom}
              disabled={!customInputsValid}
              className="h-9"
            >
              {t("admin.dashboard.customRange.apply")}
            </Button>
            {!customInputsValid && (
              <div className="text-xs text-destructive">
                {t("admin.dashboard.customRange.invalid")}
              </div>
            )}
          </div>
        )}
        {adminStatsErrorMessage && (
          <div
            role="alert"
            className="text-xs text-destructive bg-destructive/10 border border-destructive/30 rounded-lg px-3 py-2"
          >
            {t("admin.dashboard.customRange.loadError")}
            <div className="mt-0.5 font-mono text-[11px] opacity-80 break-words">
              {adminStatsErrorMessage}
            </div>
          </div>
        )}
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
        <div className="glass-panel rounded-2xl p-4 flex items-center gap-3">
          <div className="w-10 h-10 rounded-xl flex items-center justify-center shrink-0 text-sky-600 bg-sky-100/70">
            <UserPlus size={20} />
          </div>
          <div className="min-w-0 flex-1">
            <div className="text-xs text-muted-foreground truncate">
              {t("admin.dashboard.newUsersInRange", { range: rangeLabel })}
            </div>
            <div className="flex items-baseline gap-2">
              <div className="text-xl font-semibold text-foreground">{newUsers}</div>
              {userDelta !== 0 && (
                <div
                  className={cn(
                    "text-xs flex items-center gap-0.5 font-medium",
                    userDelta > 0 ? "text-emerald-600" : "text-rose-600",
                  )}
                >
                  {userDelta > 0 ? <TrendingUp size={12} /> : <TrendingDown size={12} />}
                  {userDeltaPct !== null
                    ? `${userDelta > 0 ? "+" : ""}${userDeltaPct}%`
                    : `${userDelta > 0 ? "+" : ""}${userDelta}`}
                </div>
              )}
            </div>
            <div className="text-[11px] text-muted-foreground mt-0.5">
              {t("admin.dashboard.vsPrevRange", { range: prevRangeLabel, count: prevUsers })}
            </div>
          </div>
        </div>

        <div className="glass-panel rounded-2xl p-4 flex items-center gap-3">
          <div className="w-10 h-10 rounded-xl flex items-center justify-center shrink-0 text-amber-600 bg-amber-100/70">
            <Activity size={20} />
          </div>
          <div className="min-w-0 flex-1">
            <div className="text-xs text-muted-foreground truncate">{t("admin.dashboard.activeServices")}</div>
            <div className="flex items-baseline gap-2">
              <div className="text-xl font-semibold text-foreground">{activeServices}</div>
              <div className="text-xs text-muted-foreground">
                / {activeServices + inactiveServices}
              </div>
            </div>
            <div className="text-[11px] text-muted-foreground mt-0.5">
              {t("admin.dashboard.inactiveServices", { count: inactiveServices })}
            </div>
          </div>
        </div>
      </div>

      {renderChart(
        t("admin.dashboard.signupsTrend"),
        signups,
        maxSignup,
        "from-primary/40 to-primary",
      )}

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
        {renderChart(
          t("admin.dashboard.appOpensTrend"),
          opens,
          maxOpens,
          "from-sky-300/40 to-sky-500",
          t("admin.dashboard.appOpensSummaryRanged", {
            count: opensTotal,
            range: rangeLabel,
            delta:
              opensDelta === 0
                ? "±0"
                : opensDeltaPct !== null
                  ? `${opensDelta > 0 ? "+" : ""}${opensDeltaPct}%`
                  : `${opensDelta > 0 ? "+" : ""}${opensDelta}`,
          }),
        )}
        {renderChart(
          t("admin.dashboard.servicesCreatedTrend"),
          servicesCreated,
          maxServicesCreated,
          "from-amber-300/40 to-amber-500",
          t("admin.dashboard.servicesCreatedSummaryRanged", { count: servicesCreatedTotal, range: rangeLabel }),
        )}
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
        <div className="glass-panel rounded-2xl p-4 space-y-3">
          <div className="flex items-center justify-between gap-2">
            <div className="text-sm font-semibold text-foreground truncate">
              {t("admin.dashboard.topApps")}
            </div>
            <div className="text-xs text-muted-foreground shrink-0">
              {t("admin.dashboard.topAppsSubtitle", { range: rangeLabel })}
            </div>
          </div>
          {topApps.length === 0 ? (
            <div className="text-xs text-muted-foreground py-4 text-center">
              {t("admin.dashboard.leaderboardEmpty")}
            </div>
          ) : (
            <ol className="space-y-2">
              {topApps.map((app, idx) => {
                const widthPct = (app.count / maxTopAppCount) * 100;
                const appName = lang === "ar" ? app.nameAr : app.nameEn;
                return (
                  <li key={app.appId}>
                    <button
                      type="button"
                      onClick={() => setDrillIn({ kind: "app", appId: app.appId })}
                      aria-label={t("admin.dashboard.viewAppDetails", { name: appName })}
                      className="w-full text-start flex items-center gap-3 p-2 rounded-xl bg-white/60 border border-slate-200/60 hover:bg-white hover:border-slate-300 hover:shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-primary transition-all cursor-pointer"
                    >
                      <div className="text-xs font-semibold text-muted-foreground w-5 text-center shrink-0">
                        {idx + 1}
                      </div>
                      <div
                        className="w-8 h-8 rounded-lg shrink-0"
                        style={{ backgroundColor: `${app.color}40` }}
                      />
                      <div className="min-w-0 flex-1">
                        <div className="flex items-center justify-between gap-2">
                          <div className="text-sm font-medium text-foreground truncate">
                            {appName}
                          </div>
                          <div className="text-xs font-semibold text-foreground shrink-0 tabular-nums">
                            {app.count}
                          </div>
                        </div>
                        <div className="mt-1 h-1.5 rounded-full bg-slate-100 overflow-hidden" dir="ltr">
                          <div
                            className="h-full rounded-full bg-gradient-to-r from-sky-300 to-sky-500"
                            style={{ width: `${widthPct}%` }}
                          />
                        </div>
                      </div>
                    </button>
                  </li>
                );
              })}
            </ol>
          )}
        </div>

        <div className="glass-panel rounded-2xl p-4 space-y-3">
          <div className="flex items-center justify-between gap-2">
            <div className="text-sm font-semibold text-foreground truncate">
              {t("admin.dashboard.mostActiveUsers")}
            </div>
            <div className="text-xs text-muted-foreground shrink-0">
              {t("admin.dashboard.mostActiveUsersSubtitle", { range: rangeLabel })}
            </div>
          </div>
          {mostActiveUsers.length === 0 ? (
            <div className="text-xs text-muted-foreground py-4 text-center">
              {t("admin.dashboard.leaderboardEmpty")}
            </div>
          ) : (
            <ol className="space-y-2">
              {mostActiveUsers.map((u, idx) => {
                const widthPct = (u.count / maxActiveUserCount) * 100;
                const displayName =
                  (lang === "ar" ? u.displayNameAr : u.displayNameEn) ?? u.username;
                const initial = (displayName || u.username || "?").trim().charAt(0).toUpperCase();
                const avatarSrc = resolveServiceImageUrl(u.avatarUrl);
                return (
                  <li key={u.userId}>
                    <button
                      type="button"
                      onClick={() => setDrillIn({ kind: "user", userId: u.userId })}
                      aria-label={t("admin.dashboard.viewUserDetails", { name: displayName })}
                      className="w-full text-start flex items-center gap-3 p-2 rounded-xl bg-white/60 border border-slate-200/60 hover:bg-white hover:border-slate-300 hover:shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-primary transition-all cursor-pointer"
                    >
                      <div className="text-xs font-semibold text-muted-foreground w-5 text-center shrink-0">
                        {idx + 1}
                      </div>
                      <LeaderboardAvatar src={avatarSrc} initial={initial} alt={displayName} />
                      <div className="min-w-0 flex-1">
                        <div className="flex items-center justify-between gap-2">
                          <div className="min-w-0">
                            <div className="text-sm font-medium text-foreground truncate">
                              {displayName}
                            </div>
                            {displayName !== u.username && (
                              <div className="text-[11px] text-muted-foreground truncate">
                                @{u.username}
                              </div>
                            )}
                          </div>
                          <div className="text-xs font-semibold text-foreground shrink-0 tabular-nums">
                            {u.count}
                          </div>
                        </div>
                        <div className="mt-1 h-1.5 rounded-full bg-slate-100 overflow-hidden" dir="ltr">
                          <div
                            className="h-full rounded-full bg-gradient-to-r from-emerald-300 to-emerald-500"
                            style={{ width: `${widthPct}%` }}
                          />
                        </div>
                      </div>
                    </button>
                  </li>
                );
              })}
            </ol>
          )}
        </div>
      </div>

      <div className="glass-panel rounded-2xl p-4 space-y-3">
        <div className="text-sm font-semibold text-foreground">
          {t("admin.dashboard.recentActivity")}
        </div>
        <div className="space-y-2">
          <div className="flex items-center gap-3 p-3 rounded-xl bg-white/60 border border-slate-200/60">
            <div className="w-9 h-9 rounded-lg flex items-center justify-center bg-emerald-100/70 text-emerald-600 shrink-0">
              <UsersIcon size={16} />
            </div>
            <div className="min-w-0 flex-1">
              <div className="text-xs text-muted-foreground">{t("admin.dashboard.latestUser")}</div>
              <div className="text-sm font-medium text-foreground truncate">
                {latestUser?.username ?? t("admin.dashboard.none")}
              </div>
            </div>
            {latestUser?.createdAt && (
              <div className="text-xs text-muted-foreground shrink-0">{formatDate(latestUser.createdAt)}</div>
            )}
          </div>
          <div className="flex items-center gap-3 p-3 rounded-xl bg-white/60 border border-slate-200/60">
            <div className="w-9 h-9 rounded-lg flex items-center justify-center bg-indigo-100/70 text-indigo-600 shrink-0">
              <Grid2X2 size={16} />
            </div>
            <div className="min-w-0 flex-1">
              <div className="text-xs text-muted-foreground">{t("admin.dashboard.latestApp")}</div>
              <div className="text-sm font-medium text-foreground truncate">
                {latestApp ? (lang === "ar" ? latestApp.nameAr : latestApp.nameEn) : t("admin.dashboard.none")}
              </div>
            </div>
            {latestApp?.createdAt && (
              <div className="text-xs text-muted-foreground shrink-0">{formatDate(latestApp.createdAt)}</div>
            )}
          </div>
        </div>
      </div>

      {drillIn?.kind === "app" && (
        <AppOpensDrillIn
          appId={drillIn.appId}
          lang={lang}
          rangeLabel={rangeLabel}
          statsQueryParams={statsQueryParams}
          onClose={() => setDrillIn(null)}
          onJump={(id) => {
            setDrillIn(null);
            onSelectApp(id);
          }}
          onJumpUser={(id) => {
            setDrillIn(null);
            onSelectUser(id);
          }}
        />
      )}
      {drillIn?.kind === "user" && (
        <UserOpensDrillIn
          userId={drillIn.userId}
          lang={lang}
          rangeLabel={rangeLabel}
          statsQueryParams={statsQueryParams}
          onClose={() => setDrillIn(null)}
          onJump={(id) => {
            setDrillIn(null);
            onSelectUser(id);
          }}
          onJumpApp={(id) => {
            setDrillIn(null);
            onSelectApp(id);
          }}
        />
      )}
    </div>
  );
}

function DrillInShell({
  title,
  subtitle,
  onClose,
  children,
  footer,
}: {
  title: string;
  subtitle: string;
  onClose: () => void;
  children: ReactNode;
  footer?: ReactNode;
}) {
  const { t } = useTranslation();
  useEffect(() => {
    const handler = (e: KeyboardEvent) => {
      if (e.key === "Escape") onClose();
    };
    window.addEventListener("keydown", handler);
    return () => window.removeEventListener("keydown", handler);
  }, [onClose]);
  return (
    <div
      className="fixed inset-0 bg-slate-900/30 backdrop-blur-sm z-50 flex items-center justify-center p-4"
      role="dialog"
      aria-modal="true"
      onClick={onClose}
    >
      <div
        className="glass-panel rounded-3xl p-5 w-full max-w-md max-h-[85vh] flex flex-col gap-3"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="flex items-start justify-between gap-3">
          <div className="min-w-0">
            <div className="text-base font-semibold text-foreground truncate">{title}</div>
            <div className="text-xs text-muted-foreground truncate">{subtitle}</div>
          </div>
          <button
            type="button"
            onClick={onClose}
            className="text-xs text-muted-foreground hover:text-foreground px-2 py-1 rounded-lg hover:bg-slate-100"
            aria-label={t("common.close")}
          >
            {t("common.close")}
          </button>
        </div>
        <div className="flex-1 min-h-0 overflow-y-auto pr-1 -mr-1">{children}</div>
        {footer && <div className="pt-2 border-t border-slate-200/70">{footer}</div>}
      </div>
    </div>
  );
}

function formatOpenTimestamp(iso: string, lang: string): string {
  try {
    return formatDateUtil(iso, lang, {
      month: "short",
      day: "numeric",
      hour: "2-digit",
      minute: "2-digit",
    });
  } catch {
    return iso;
  }
}

function AppOpensDrillIn({
  appId,
  lang,
  rangeLabel,
  statsQueryParams,
  onClose,
  onJump,
  onJumpUser,
}: {
  appId: number;
  lang: string;
  rangeLabel: string;
  statsQueryParams: GetAdminStatsParams;
  onClose: () => void;
  onJump: (appId: number) => void;
  onJumpUser: (userId: number) => void;
}) {
  const { t } = useTranslation();
  const { data, isLoading, error } = useGetAdminAppOpensByApp(appId, statsQueryParams, {
    query: {
      queryKey: getGetAdminAppOpensByAppQueryKey(appId, statsQueryParams),
      retry: false,
    },
  });
  type ExtraOpen = AdminAppOpensByApp["opens"][number];
  const [extraOpens, setExtraOpens] = useState<ExtraOpen[]>([]);
  const [extraNextOffset, setExtraNextOffset] = useState<number | null>(null);
  const [hasExtras, setHasExtras] = useState(false);
  const [isLoadingMore, setIsLoadingMore] = useState(false);
  const [loadMoreError, setLoadMoreError] = useState<string | null>(null);

  const paramsKey = JSON.stringify(statsQueryParams);
  useEffect(() => {
    setExtraOpens([]);
    setExtraNextOffset(null);
    setHasExtras(false);
    setLoadMoreError(null);
    setIsLoadingMore(false);
  }, [appId, paramsKey]);

  const errorMessage = error ? (error as { message?: string }).message ?? null : null;
  const appName = data ? (lang === "ar" ? data.nameAr : data.nameEn) : "";
  const title = appName
    ? t("admin.dashboard.drillIn.appTitle", { name: appName })
    : t("admin.dashboard.drillIn.loading");
  const subtitle = data
    ? t("admin.dashboard.drillIn.subtitle", { count: data.totalCount, range: rangeLabel })
    : rangeLabel;
  const opens = data ? [...data.opens, ...extraOpens] : [];
  const nextOffset = hasExtras ? extraNextOffset : data?.nextOffset ?? null;

  const onLoadMore = async () => {
    if (nextOffset === null || isLoadingMore) return;
    setIsLoadingMore(true);
    setLoadMoreError(null);
    try {
      const next = await getAdminAppOpensByApp(appId, {
        ...statsQueryParams,
        offset: nextOffset,
      });
      setExtraOpens((prev) => [...prev, ...next.opens]);
      setExtraNextOffset(next.nextOffset);
      setHasExtras(true);
    } catch (e) {
      setLoadMoreError((e as { message?: string }).message ?? "Error");
    } finally {
      setIsLoadingMore(false);
    }
  };

  return (
    <DrillInShell
      title={title}
      subtitle={subtitle}
      onClose={onClose}
      footer={
        <div className="flex justify-end">
          <Button size="sm" variant="outline" onClick={() => onJump(appId)}>
            {t("admin.dashboard.drillIn.editApp")}
          </Button>
        </div>
      }
    >
      {isLoading ? (
        <div className="flex items-center justify-center py-8 text-muted-foreground">
          <Loader2 size={18} className="animate-spin" />
        </div>
      ) : errorMessage ? (
        <div className="text-xs text-destructive bg-destructive/10 border border-destructive/30 rounded-lg px-3 py-2">
          {t("admin.dashboard.drillIn.loadError")}
          <div className="mt-0.5 font-mono text-[11px] opacity-80 break-words">{errorMessage}</div>
        </div>
      ) : !data || opens.length === 0 ? (
        <div className="text-xs text-muted-foreground py-8 text-center">
          {t("admin.dashboard.drillIn.empty")}
        </div>
      ) : (
        <>
          <ol className="space-y-1.5">
            {opens.map((o) => {
              const display =
                (lang === "ar" ? o.displayNameAr : o.displayNameEn) ?? o.username;
              const initial = (display || o.username || "?").trim().charAt(0).toUpperCase();
              const avatar = resolveServiceImageUrl(o.avatarUrl);
              return (
                <li key={o.id}>
                  <button
                    type="button"
                    onClick={() => onJumpUser(o.userId)}
                    aria-label={t("admin.dashboard.viewUserDetails", { name: display })}
                    className="flex items-center gap-3 p-2 rounded-xl bg-white/60 border border-slate-200/60 w-full text-start hover:bg-white hover:border-slate-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 transition-colors"
                  >
                    <LeaderboardAvatar src={avatar} initial={initial} alt={display} />
                    <div className="min-w-0 flex-1">
                      <div className="text-sm font-medium text-foreground truncate">{display}</div>
                      {display !== o.username && (
                        <div className="text-[11px] text-muted-foreground truncate">@{o.username}</div>
                      )}
                    </div>
                    <div className="text-[11px] text-muted-foreground shrink-0 tabular-nums">
                      {formatOpenTimestamp(o.createdAt, lang)}
                    </div>
                  </button>
                </li>
              );
            })}
          </ol>
          <LoadMoreSection
            shownCount={opens.length}
            totalCount={data.totalCount}
            nextOffset={nextOffset}
            isLoadingMore={isLoadingMore}
            loadMoreError={loadMoreError}
            onLoadMore={onLoadMore}
          />
        </>
      )}
    </DrillInShell>
  );
}

function LoadMoreSection({
  shownCount,
  totalCount,
  nextOffset,
  isLoadingMore,
  loadMoreError,
  onLoadMore,
}: {
  shownCount: number;
  totalCount: number;
  nextOffset: number | null;
  isLoadingMore: boolean;
  loadMoreError: string | null;
  onLoadMore: () => void;
}) {
  const { t } = useTranslation();
  return (
    <div className="mt-3 flex flex-col items-center gap-1.5">
      <div className="text-[11px] text-muted-foreground tabular-nums">
        {t("admin.dashboard.drillIn.shownOf", { shown: shownCount, total: totalCount })}
      </div>
      {nextOffset !== null && (
        <Button
          size="sm"
          variant="outline"
          onClick={onLoadMore}
          disabled={isLoadingMore}
          className="gap-2"
        >
          {isLoadingMore && <Loader2 size={14} className="animate-spin" />}
          {t("admin.dashboard.drillIn.loadMore")}
        </Button>
      )}
      {loadMoreError && (
        <div className="text-[11px] text-destructive">
          {t("admin.dashboard.drillIn.loadMoreError")}
        </div>
      )}
    </div>
  );
}

function UserOpensDrillIn({
  userId,
  lang,
  rangeLabel,
  statsQueryParams,
  onClose,
  onJump,
  onJumpApp,
}: {
  userId: number;
  lang: string;
  rangeLabel: string;
  statsQueryParams: GetAdminStatsParams;
  onClose: () => void;
  onJump: (userId: number) => void;
  onJumpApp: (appId: number) => void;
}) {
  const { t } = useTranslation();
  const { data, isLoading, error } = useGetAdminAppOpensByUser(userId, statsQueryParams, {
    query: {
      queryKey: getGetAdminAppOpensByUserQueryKey(userId, statsQueryParams),
      retry: false,
    },
  });
  type ExtraOpen = AdminAppOpensByUser["opens"][number];
  const [extraOpens, setExtraOpens] = useState<ExtraOpen[]>([]);
  const [extraNextOffset, setExtraNextOffset] = useState<number | null>(null);
  const [hasExtras, setHasExtras] = useState(false);
  const [isLoadingMore, setIsLoadingMore] = useState(false);
  const [loadMoreError, setLoadMoreError] = useState<string | null>(null);

  const paramsKey = JSON.stringify(statsQueryParams);
  useEffect(() => {
    setExtraOpens([]);
    setExtraNextOffset(null);
    setHasExtras(false);
    setLoadMoreError(null);
    setIsLoadingMore(false);
  }, [userId, paramsKey]);

  const errorMessage = error ? (error as { message?: string }).message ?? null : null;
  const displayName = data
    ? (lang === "ar" ? data.displayNameAr : data.displayNameEn) ?? data.username
    : "";
  const opens = data ? [...data.opens, ...extraOpens] : [];
  const nextOffset = hasExtras ? extraNextOffset : data?.nextOffset ?? null;

  const onLoadMore = async () => {
    if (nextOffset === null || isLoadingMore) return;
    setIsLoadingMore(true);
    setLoadMoreError(null);
    try {
      const next = await getAdminAppOpensByUser(userId, {
        ...statsQueryParams,
        offset: nextOffset,
      });
      setExtraOpens((prev) => [...prev, ...next.opens]);
      setExtraNextOffset(next.nextOffset);
      setHasExtras(true);
    } catch (e) {
      setLoadMoreError((e as { message?: string }).message ?? "Error");
    } finally {
      setIsLoadingMore(false);
    }
  };
  const title = displayName
    ? t("admin.dashboard.drillIn.userTitle", { name: displayName })
    : t("admin.dashboard.drillIn.loading");
  const subtitle = data
    ? t("admin.dashboard.drillIn.subtitle", { count: data.totalCount, range: rangeLabel })
    : rangeLabel;

  return (
    <DrillInShell
      title={title}
      subtitle={subtitle}
      onClose={onClose}
      footer={
        <div className="flex justify-end">
          <Button size="sm" variant="outline" onClick={() => onJump(userId)}>
            {t("admin.dashboard.drillIn.viewUser")}
          </Button>
        </div>
      }
    >
      {isLoading ? (
        <div className="flex items-center justify-center py-8 text-muted-foreground">
          <Loader2 size={18} className="animate-spin" />
        </div>
      ) : errorMessage ? (
        <div className="text-xs text-destructive bg-destructive/10 border border-destructive/30 rounded-lg px-3 py-2">
          {t("admin.dashboard.drillIn.loadError")}
          <div className="mt-0.5 font-mono text-[11px] opacity-80 break-words">{errorMessage}</div>
        </div>
      ) : !data || opens.length === 0 ? (
        <div className="text-xs text-muted-foreground py-8 text-center">
          {t("admin.dashboard.drillIn.empty")}
        </div>
      ) : (
        <>
          <ol className="space-y-1.5">
            {opens.map((o) => {
              const name = lang === "ar" ? o.nameAr : o.nameEn;
              return (
                <li key={o.id}>
                  <button
                    type="button"
                    onClick={() => onJumpApp(o.appId)}
                    aria-label={t("admin.dashboard.viewAppDetails", { name })}
                    className="flex items-center gap-3 p-2 rounded-xl bg-white/60 border border-slate-200/60 w-full text-start hover:bg-white hover:border-slate-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 transition-colors"
                  >
                    <div
                      className="w-8 h-8 rounded-lg shrink-0"
                      style={{ backgroundColor: `${o.color}40` }}
                    />
                    <div className="min-w-0 flex-1">
                      <div className="text-sm font-medium text-foreground truncate">{name}</div>
                    </div>
                    <div className="text-[11px] text-muted-foreground shrink-0 tabular-nums">
                      {formatOpenTimestamp(o.createdAt, lang)}
                    </div>
                  </button>
                </li>
              );
            })}
          </ol>
          <LoadMoreSection
            shownCount={opens.length}
            totalCount={data.totalCount}
            nextOffset={nextOffset}
            isLoadingMore={isLoadingMore}
            loadMoreError={loadMoreError}
            onLoadMore={onLoadMore}
          />
        </>
      )}
    </DrillInShell>
  );
}

// ===== Dependency drill-in =====
//
// Generic shell + per-kind list rendering that turns each "<n> X" count
// badge on the admin Apps / Services / Users rows into a clickable link
// that reveals the actual rows behind the count. Reuses DrillInShell so
// Escape-to-close + RTL/LTR layout already work; the counts themselves
// are rendered as <button>s in the panels so keyboard focus + Enter open
// the drill-in.
type DependencyTarget =
  | { kind: "appGroups"; appId: number; appName: string }
  | { kind: "appRestrictions"; appId: number; appName: string }
  | { kind: "appOpens"; appId: number; appName: string }
  | { kind: "serviceOrders"; serviceId: number; serviceName: string }
  | { kind: "userNotes"; userId: number; userLabel: string }
  | { kind: "userOrders"; userId: number; userLabel: string };

type DependencyPage =
  | AppDependentGroupsPage
  | AppDependentRestrictionsPage
  | AppDependentOpensPage
  | ServiceDependentOrdersPage
  | UserDependentNotesPage
  | UserDependentOrdersPage;

const DEPENDENT_PAGE_LIMIT = 50;

function DependencyDrillIn({
  target,
  lang,
  onClose,
}: {
  target: DependencyTarget;
  lang: string;
  onClose: () => void;
}) {
  const { t } = useTranslation();
  // Each kind picks its own React Query hook + paginated fetcher so the
  // "load more" behavior matches the existing AppOpensDrillIn pattern.
  const initial = useDependencyInitial(target);
  type Item = DependencyPage["items"][number];
  const [extra, setExtra] = useState<Item[]>([]);
  const [extraNextOffset, setExtraNextOffset] = useState<number | null>(null);
  const [hasExtras, setHasExtras] = useState(false);
  const [isLoadingMore, setIsLoadingMore] = useState(false);
  const [loadMoreError, setLoadMoreError] = useState<string | null>(null);

  // Reset paging state if the user reopens the drill on a different row
  // before this instance unmounts (state otherwise persists with the key).
  const targetKey = JSON.stringify(target);
  useEffect(() => {
    setExtra([]);
    setExtraNextOffset(null);
    setHasExtras(false);
    setLoadMoreError(null);
    setIsLoadingMore(false);
  }, [targetKey]);

  const errorMessage = initial.error
    ? (initial.error as { message?: string }).message ?? null
    : null;
  const data = initial.data;
  const items = data ? [...data.items, ...extra] : [];
  const nextOffset = hasExtras ? extraNextOffset : data?.nextOffset ?? null;

  const onLoadMore = async () => {
    if (nextOffset === null || isLoadingMore) return;
    setIsLoadingMore(true);
    setLoadMoreError(null);
    try {
      const next = await fetchDependentsPage(target, {
        limit: DEPENDENT_PAGE_LIMIT,
        offset: nextOffset,
      });
      setExtra((prev) => [...prev, ...(next.items as Item[])]);
      setExtraNextOffset(next.nextOffset);
      setHasExtras(true);
    } catch (e) {
      setLoadMoreError((e as { message?: string }).message ?? "Error");
    } finally {
      setIsLoadingMore(false);
    }
  };

  const totalCount = data?.totalCount ?? 0;
  const headings = describeDependencyTarget(t, target, totalCount);

  return (
    <DrillInShell title={headings.title} subtitle={headings.subtitle} onClose={onClose}>
      {initial.isLoading ? (
        <div className="flex items-center justify-center py-8 text-muted-foreground">
          <Loader2 size={18} className="animate-spin" />
        </div>
      ) : errorMessage ? (
        <div className="text-xs text-destructive bg-destructive/10 border border-destructive/30 rounded-lg px-3 py-2">
          {t("admin.dependents.loadError")}
          <div className="mt-0.5 font-mono text-[11px] opacity-80 break-words">
            {errorMessage}
          </div>
        </div>
      ) : !data || items.length === 0 ? (
        <div className="text-xs text-muted-foreground py-8 text-center">
          {t("admin.dependents.empty")}
        </div>
      ) : (
        <>
          <ul className="space-y-1.5">
            {items.map((item, idx) => (
              <li key={`${idx}-${(item as { id?: number }).id ?? idx}`}>
                <DependencyRow target={target} item={item} lang={lang} t={t} />
              </li>
            ))}
          </ul>
          <LoadMoreSection
            shownCount={items.length}
            totalCount={totalCount}
            nextOffset={nextOffset}
            isLoadingMore={isLoadingMore}
            loadMoreError={loadMoreError}
            onLoadMore={onLoadMore}
          />
        </>
      )}
    </DrillInShell>
  );
}

// React Query hooks must be called unconditionally and in a stable order,
// so we always call all eight, but only the matching one is `enabled`.
function useDependencyInitial(target: DependencyTarget): {
  data: DependencyPage | undefined;
  isLoading: boolean;
  error: unknown;
} {
  const params = { limit: DEPENDENT_PAGE_LIMIT, offset: 0 };
  const appId =
    target.kind === "appGroups" ||
    target.kind === "appRestrictions" ||
    target.kind === "appOpens"
      ? target.appId
      : 0;
  const serviceId = target.kind === "serviceOrders" ? target.serviceId : 0;
  const userId =
    target.kind === "userNotes" || target.kind === "userOrders"
      ? target.userId
      : 0;

  const enabledFor = (k: DependencyTarget["kind"]) => target.kind === k;

  const groups = useGetAdminAppDependentGroups(appId, params, {
    query: {
      queryKey: getGetAdminAppDependentGroupsQueryKey(appId, params),
      enabled: enabledFor("appGroups"),
      retry: false,
    },
  });
  const restrictions = useGetAdminAppDependentRestrictions(appId, params, {
    query: {
      queryKey: getGetAdminAppDependentRestrictionsQueryKey(appId, params),
      enabled: enabledFor("appRestrictions"),
      retry: false,
    },
  });
  const opens = useGetAdminAppDependentOpens(appId, params, {
    query: {
      queryKey: getGetAdminAppDependentOpensQueryKey(appId, params),
      enabled: enabledFor("appOpens"),
      retry: false,
    },
  });
  const sOrders = useGetAdminServiceDependentOrders(serviceId, params, {
    query: {
      queryKey: getGetAdminServiceDependentOrdersQueryKey(serviceId, params),
      enabled: enabledFor("serviceOrders"),
      retry: false,
    },
  });
  const uNotes = useGetAdminUserDependentNotes(userId, params, {
    query: {
      queryKey: getGetAdminUserDependentNotesQueryKey(userId, params),
      enabled: enabledFor("userNotes"),
      retry: false,
    },
  });
  const uOrders = useGetAdminUserDependentOrders(userId, params, {
    query: {
      queryKey: getGetAdminUserDependentOrdersQueryKey(userId, params),
      enabled: enabledFor("userOrders"),
      retry: false,
    },
  });

  switch (target.kind) {
    case "appGroups":
      return groups;
    case "appRestrictions":
      return restrictions;
    case "appOpens":
      return opens;
    case "serviceOrders":
      return sOrders;
    case "userNotes":
      return uNotes;
    case "userOrders":
      return uOrders;
  }
}

async function fetchDependentsPage(
  target: DependencyTarget,
  params: { limit: number; offset: number },
): Promise<DependencyPage> {
  switch (target.kind) {
    case "appGroups":
      return getAdminAppDependentGroups(target.appId, params);
    case "appRestrictions":
      return getAdminAppDependentRestrictions(target.appId, params);
    case "appOpens":
      return getAdminAppDependentOpens(target.appId, params);
    case "serviceOrders":
      return getAdminServiceDependentOrders(target.serviceId, params);
    case "userNotes":
      return getAdminUserDependentNotes(target.userId, params);
    case "userOrders":
      return getAdminUserDependentOrders(target.userId, params);
  }
}

function describeDependencyTarget(
  t: ReturnType<typeof useTranslation>["t"],
  target: DependencyTarget,
  totalCount: number,
): { title: string; subtitle: string } {
  switch (target.kind) {
    case "appGroups":
      return {
        title: t("admin.dependents.appGroups.title", { name: target.appName }),
        subtitle: t("admin.dependents.appGroups.subtitle", { count: totalCount }),
      };
    case "appRestrictions":
      return {
        title: t("admin.dependents.appRestrictions.title", { name: target.appName }),
        subtitle: t("admin.dependents.appRestrictions.subtitle", { count: totalCount }),
      };
    case "appOpens":
      return {
        title: t("admin.dependents.appOpens.title", { name: target.appName }),
        subtitle: t("admin.dependents.appOpens.subtitle", { count: totalCount }),
      };
    case "serviceOrders":
      return {
        title: t("admin.dependents.serviceOrders.title", { name: target.serviceName }),
        subtitle: t("admin.dependents.serviceOrders.subtitle", { count: totalCount }),
      };
    case "userNotes":
      return {
        title: t("admin.dependents.userNotes.title", { name: target.userLabel }),
        subtitle: t("admin.dependents.userNotes.subtitle", { count: totalCount }),
      };
    case "userOrders":
      return {
        title: t("admin.dependents.userOrders.title", { name: target.userLabel }),
        subtitle: t("admin.dependents.userOrders.subtitle", { count: totalCount }),
      };
  }
}

function DependencyRow({
  target,
  item,
  lang,
  t,
}: {
  target: DependencyTarget;
  item: DependencyPage["items"][number];
  lang: string;
  t: ReturnType<typeof useTranslation>["t"];
}) {
  const baseRowClass =
    "flex items-start gap-3 p-2 rounded-xl bg-white/60 border border-slate-200/60 text-start";

  switch (target.kind) {
    case "appGroups": {
      const g = item as AppDependentGroupsPage["items"][number];
      const description = lang === "ar" ? g.descriptionAr : g.descriptionEn;
      return (
        <div className={baseRowClass}>
          <div className="min-w-0 flex-1">
            <div className="text-sm font-medium text-foreground truncate">{g.name}</div>
            {description && (
              <div className="text-[11px] text-muted-foreground truncate">{description}</div>
            )}
          </div>
        </div>
      );
    }
    case "appRestrictions": {
      const p = item as AppDependentRestrictionsPage["items"][number];
      const description = lang === "ar" ? p.descriptionAr : p.descriptionEn;
      return (
        <div className={baseRowClass + " flex-col items-stretch"}>
          <div className="text-sm font-medium text-foreground truncate">{p.name}</div>
          {description && (
            <div className="text-[11px] text-muted-foreground truncate">{description}</div>
          )}
          <div className="flex flex-wrap gap-1 pt-1">
            {p.roles.length === 0 ? (
              <span className="text-[11px] text-muted-foreground">
                {t("admin.dependents.appRestrictions.noRoles")}
              </span>
            ) : (
              p.roles.map((r) => (
                <span
                  key={r}
                  className="text-[10px] px-2 py-0.5 rounded-full bg-primary/15 text-primary"
                >
                  {r}
                </span>
              ))
            )}
          </div>
        </div>
      );
    }
    case "appOpens": {
      const o = item as AppDependentOpensPage["items"][number];
      const display = (lang === "ar" ? o.displayNameAr : o.displayNameEn) ?? o.username;
      return (
        <div className={baseRowClass}>
          <div className="min-w-0 flex-1">
            <div className="text-sm font-medium text-foreground truncate">{display}</div>
            {display !== o.username && (
              <div className="text-[11px] text-muted-foreground truncate">@{o.username}</div>
            )}
          </div>
          <div className="text-[11px] text-muted-foreground shrink-0 tabular-nums">
            {formatOpenTimestamp(o.createdAt, lang)}
          </div>
        </div>
      );
    }
    case "serviceOrders": {
      const o = item as ServiceDependentOrdersPage["items"][number];
      const display = (lang === "ar" ? o.displayNameAr : o.displayNameEn) ?? o.username;
      return (
        <div className={baseRowClass}>
          <div className="min-w-0 flex-1">
            <div className="text-sm font-medium text-foreground truncate">{display}</div>
            <div className="text-[11px] text-muted-foreground truncate">
              {t(`admin.dependents.orderStatus.${o.status}`, {
                defaultValue: o.status,
              })}
            </div>
          </div>
          <div className="text-[11px] text-muted-foreground shrink-0 tabular-nums">
            {formatOpenTimestamp(o.createdAt, lang)}
          </div>
        </div>
      );
    }
    case "userNotes": {
      const n = item as UserDependentNotesPage["items"][number];
      const title = n.title.trim() || t("admin.dependents.userNotes.untitled");
      return (
        <div className={baseRowClass}>
          <div className="min-w-0 flex-1">
            <div className="text-sm font-medium text-foreground truncate">{title}</div>
            <div className="text-[11px] text-muted-foreground truncate">
              {n.isPinned && <span className="me-2">{t("admin.dependents.userNotes.pinned")}</span>}
              {n.isArchived && <span>{t("admin.dependents.userNotes.archived")}</span>}
            </div>
          </div>
          <div className="text-[11px] text-muted-foreground shrink-0 tabular-nums">
            {formatOpenTimestamp(n.updatedAt, lang)}
          </div>
        </div>
      );
    }
    case "userOrders": {
      const o = item as UserDependentOrdersPage["items"][number];
      const serviceName = lang === "ar" ? o.serviceNameAr : o.serviceNameEn;
      return (
        <div className={baseRowClass}>
          <div className="min-w-0 flex-1">
            <div className="text-sm font-medium text-foreground truncate">{serviceName}</div>
            <div className="text-[11px] text-muted-foreground truncate">
              {t(`admin.dependents.orderStatus.${o.status}`, {
                defaultValue: o.status,
              })}
            </div>
          </div>
          <div className="text-[11px] text-muted-foreground shrink-0 tabular-nums">
            {formatOpenTimestamp(o.createdAt, lang)}
          </div>
        </div>
      );
    }
  }
}

// ===== Users Management Panel =====
type UserSortKey = "username" | "email" | "createdAt";

type OpenAuditLogForTarget = (
  targetType: "app" | "service" | "user" | "group" | "role",
  targetId: number,
) => void;

function UsersPanel({
  currentUserId,
  highlightedUserId,
  userRowRefs,
  onIssueResetLink,
  onOpenAuditLogForTarget,
}: {
  currentUserId: number;
  highlightedUserId: number | null;
  userRowRefs: React.MutableRefObject<Map<number, HTMLDivElement>>;
  onIssueResetLink: (userId: number, username: string) => void;
  onOpenAuditLogForTarget: OpenAuditLogForTarget;
}) {
  const { t, i18n } = useTranslation();
  const lang = i18n.language;
  const { toast } = useToast();
  const queryClient = useQueryClient();
  const [search, setSearch] = useState("");
  const [groupFilter, setGroupFilter] = useState<number | "all">("all");
  const [statusFilter, setStatusFilter] = useState<"all" | "active" | "inactive">("all");
  const [sortKey, setSortKey] = useState<UserSortKey>("username");
  const [sortDir, setSortDir] = useState<"asc" | "desc">("asc");
  const [editingUser, setEditingUser] = useState<UserProfile | null>(null);
  const [userDeleteTarget, setUserDeleteTarget] = useState<UserProfile | null>(null);
  const [userDeleteConflict, setUserDeleteConflict] = useState<UserDeletionConflict | null>(null);
  const [newUserOpen, setNewUserOpen] = useState(false);
  const [dependencyTarget, setDependencyTarget] = useState<DependencyTarget | null>(null);
  const [newUserForm, setNewUserForm] = useState<{
    username: string;
    email: string;
    password: string;
    groupIds: number[];
  }>({ username: "", email: "", password: "", groupIds: [] });

  const listParams = useMemo<ListUsersParams>(() => {
    const p: ListUsersParams = {};
    if (search.trim()) p.q = search.trim();
    if (groupFilter !== "all") p.groupId = groupFilter;
    if (statusFilter === "inactive") p.status = ListUsersStatus.disabled;
    else if (statusFilter === "active") p.status = ListUsersStatus.active;
    return p;
  }, [search, groupFilter, statusFilter]);
  const { data: users } = useListUsers(listParams, { query: { queryKey: getListUsersQueryKey(listParams) } });
  const { data: groups } = useListGroups(undefined, { query: { queryKey: getListGroupsQueryKey() } });
  const createUser = useCreateUser();
  const updateUser = useUpdateUser();
  const deleteUser = useDeleteUser();
  const addUserRole = useAddUserRole();
  const removeUserRole = useRemoveUserRole();

  const filtered = (users ?? []).slice().sort((a, b) => {
    const av =
      sortKey === "createdAt" ? a.createdAt : sortKey === "email" ? a.email : a.username;
    const bv =
      sortKey === "createdAt" ? b.createdAt : sortKey === "email" ? b.email : b.username;
    const cmp = String(av).localeCompare(String(bv));
    return sortDir === "asc" ? cmp : -cmp;
  });

  const invalidateUsers = () =>
    queryClient.invalidateQueries({ queryKey: [`/api/users`] });

  const closeUserDeleteDialog = () => {
    setUserDeleteTarget(null);
    setUserDeleteConflict(null);
  };

  const performUserDelete = (target: UserProfile, force: boolean) => {
    deleteUser.mutate(
      { id: target.id, params: force ? { force: true } : undefined },
      {
        onSuccess: () => {
          invalidateUsers();
          toast({ title: t("common.success") });
          closeUserDeleteDialog();
        },
        onError: (err: unknown) => {
          if (err instanceof ApiError && err.status === 409 && err.data) {
            setUserDeleteConflict(err.data as UserDeletionConflict);
            return;
          }
          toast({ title: t("common.error"), variant: "destructive" });
        },
      },
    );
  };

  return (
    <div className="space-y-3">
      <div className="glass-panel rounded-2xl p-3 space-y-2">
        <div className="flex items-center gap-2 flex-wrap">
          <Input
            placeholder={t("admin.users.searchPlaceholder")}
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            className="bg-white/70 border-slate-200 flex-1 min-w-[180px]"
            data-testid="user-search"
          />
          <select
            value={groupFilter === "all" ? "all" : String(groupFilter)}
            onChange={(e) => setGroupFilter(e.target.value === "all" ? "all" : Number(e.target.value))}
            className="bg-white/70 border border-slate-200 rounded-lg px-3 py-2 text-sm"
            data-testid="user-group-filter"
          >
            <option value="all">{t("admin.users.allGroups")}</option>
            {groups?.map((g) => (
              <option key={g.id} value={g.id}>
                {g.name}
              </option>
            ))}
          </select>
          <select
            value={statusFilter}
            onChange={(e) => setStatusFilter(e.target.value as "all" | "active" | "inactive")}
            className="bg-white/70 border border-slate-200 rounded-lg px-3 py-2 text-sm"
            data-testid="user-status-filter"
          >
            <option value="all">{t("admin.users.allStatuses")}</option>
            <option value="active">{t("admin.users.statusActive")}</option>
            <option value="inactive">{t("admin.users.statusInactive")}</option>
          </select>
          <Button size="sm" onClick={() => { setNewUserForm({ username: "", email: "", password: "", groupIds: [] }); setNewUserOpen(true); }}>
            <Plus size={14} className="me-1" />
            {t("admin.addUser")}
          </Button>
        </div>
        <div className="text-xs text-muted-foreground">
          {t("admin.users.showing", { count: filtered.length, total: users?.length ?? 0 })}
        </div>
      </div>

      {/* Table (desktop) / cards (mobile) */}
      <div className="overflow-hidden rounded-2xl glass-panel">
        <div className="hidden md:grid grid-cols-[1fr_1fr_1fr_1fr_auto] gap-3 px-4 py-2 text-xs font-medium text-muted-foreground border-b border-slate-200/70">
          {(["username", "email", "createdAt"] as UserSortKey[]).map((k) => (
            <button
              key={k}
              onClick={() => {
                if (sortKey === k) setSortDir(sortDir === "asc" ? "desc" : "asc");
                else { setSortKey(k); setSortDir("asc"); }
              }}
              className="text-start uppercase tracking-wider hover:text-foreground"
            >
              {t(`admin.users.col.${k}`)}
              {sortKey === k && (sortDir === "asc" ? " ▲" : " ▼")}
            </button>
          ))}
          <div className="uppercase tracking-wider">{t("admin.users.col.groups")}</div>
          <div className="uppercase tracking-wider text-end">{t("admin.users.col.actions")}</div>
        </div>
        <div className="divide-y divide-slate-200/70">
          {filtered.map((u) => (
            <div
              key={u.id}
              ref={(node) => {
                if (node) userRowRefs.current.set(u.id, node);
                else userRowRefs.current.delete(u.id);
              }}
              className={cn(
                "grid grid-cols-1 md:grid-cols-[1fr_1fr_1fr_1fr_auto] gap-2 md:gap-3 px-4 py-3 items-center transition-all",
                highlightedUserId === u.id && "bg-primary/10 ring-2 ring-primary",
              )}
              data-testid={`user-row-${u.id}`}
            >
              <div className="min-w-0">
                <div className="font-medium text-sm text-foreground truncate">
                  {u.username}
                  {!u.isActive && (
                    <span className="ms-2 text-[10px] uppercase px-1.5 py-0.5 rounded-full bg-slate-200 text-muted-foreground">
                      {t("admin.users.statusInactive")}
                    </span>
                  )}
                </div>
                {(u.displayNameAr || u.displayNameEn) && (
                  <div className="text-[11px] text-muted-foreground truncate" data-testid={`user-displayname-${u.id}`}>
                    {u.displayNameAr || u.displayNameEn}
                  </div>
                )}
                {(() => {
                  const userLabel =
                    (lang === "ar"
                      ? u.displayNameAr || u.displayNameEn
                      : u.displayNameEn || u.displayNameAr) || u.username;
                  const parts: Array<{
                    label: string;
                    target: DependencyTarget;
                    testid: string;
                  }> = [];
                  if ((u.noteCount ?? 0) > 0)
                    parts.push({
                      label: t("admin.users.counts.notes", { count: u.noteCount }),
                      target: { kind: "userNotes", userId: u.id, userLabel },
                      testid: `user-counts-notes-${u.id}`,
                    });
                  if ((u.orderCount ?? 0) > 0)
                    parts.push({
                      label: t("admin.users.counts.orders", { count: u.orderCount }),
                      target: { kind: "userOrders", userId: u.id, userLabel },
                      testid: `user-counts-orders-${u.id}`,
                    });
                  if (parts.length === 0) return null;
                  return (
                    <div
                      className="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-[11px] text-muted-foreground pt-0.5"
                      data-testid={`user-counts-${u.id}`}
                    >
                      {parts.map((p, i) => (
                        <span key={p.testid} className="flex items-center gap-2">
                          {i > 0 && <span aria-hidden="true">•</span>}
                          <button
                            type="button"
                            onClick={() => setDependencyTarget(p.target)}
                            className="underline-offset-2 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 rounded-sm hover:text-foreground transition-colors"
                            data-testid={p.testid}
                            aria-label={t("admin.dependents.openLabel", { count: p.label })}
                          >
                            {p.label}
                          </button>
                        </span>
                      ))}
                    </div>
                  );
                })()}
              </div>
              <div className="min-w-0">
                <div className="text-xs text-muted-foreground truncate">{u.email}</div>
                {u.preferredLanguage && (
                  <div className="text-[11px] uppercase tracking-wide text-muted-foreground" data-testid={`user-lang-${u.id}`}>
                    {u.preferredLanguage}
                  </div>
                )}
              </div>
              <div className="text-xs text-muted-foreground">
                {u.createdAt ? new Date(u.createdAt).toLocaleDateString() : "—"}
              </div>
              <div className="flex flex-wrap gap-1">
                {u.groups?.length ? u.groups.map((g) => (
                  <span key={g.id} className="text-[10px] px-2 py-0.5 rounded-full bg-primary/15 text-primary">
                    {g.name}
                  </span>
                )) : <span className="text-xs text-muted-foreground">—</span>}
              </div>
              <div className="flex items-center gap-1 justify-end">
                <Switch
                  checked={u.isActive}
                  onCheckedChange={(v) =>
                    updateUser.mutate(
                      { id: u.id, data: { isActive: v } },
                      { onSuccess: invalidateUsers },
                    )
                  }
                />
                <button
                  onClick={() => setEditingUser(u)}
                  title={t("admin.users.editGroups")}
                  className="p-1.5 hover:bg-slate-100 rounded-lg text-muted-foreground hover:text-foreground"
                  data-testid={`user-edit-${u.id}`}
                >
                  <Pencil size={14} />
                </button>
                <button
                  onClick={() => onIssueResetLink(u.id, u.username)}
                  title={t("admin.issueResetLink")}
                  className="p-1.5 hover:bg-primary/20 rounded-lg text-muted-foreground hover:text-primary"
                >
                  <KeyRound size={14} />
                </button>
                <label className="flex items-center gap-1 text-[10px] text-muted-foreground select-none">
                  <span className="hidden lg:inline">{t("admin.orderReceiverRole")}</span>
                  <Switch
                    checked={u.roles?.includes("order_receiver") ?? false}
                    onCheckedChange={(v) => {
                      const opts = {
                        onSuccess: invalidateUsers,
                        onError: () => toast({ title: t("common.error"), variant: "destructive" }),
                      };
                      if (v) addUserRole.mutate({ id: u.id, data: { roleName: "order_receiver" } }, opts);
                      else removeUserRole.mutate({ id: u.id, roleName: "order_receiver" }, opts);
                    }}
                  />
                </label>
                {u.id !== currentUserId && (
                  <button
                    onClick={() => {
                      // Pre-populate conflict from list-row counts so the
                      // warning dialog shows on the FIRST click. Falls back
                      // to the lazy 409 round-trip if counts are missing.
                      const noteCount = u.noteCount ?? 0;
                      const orderCount = u.orderCount ?? 0;
                      const hasDeps = noteCount > 0 || orderCount > 0;
                      setUserDeleteConflict(
                        hasDeps
                          ? {
                              error: "User has dependent records",
                              noteCount,
                              orderCount,
                            }
                          : null,
                      );
                      setUserDeleteTarget(u);
                    }}
                    className="p-1.5 hover:bg-destructive/20 rounded-lg text-muted-foreground hover:text-destructive"
                    data-testid={`user-delete-${u.id}`}
                  >
                    <Trash2 size={14} />
                  </button>
                )}
              </div>
            </div>
          ))}
          {filtered.length === 0 && (
            <div className="px-4 py-8 text-center text-sm text-muted-foreground">
              {t("admin.users.empty")}
            </div>
          )}
        </div>
      </div>

      {newUserOpen && (
        <div className="fixed inset-0 bg-slate-900/30 backdrop-blur-sm z-50 flex items-center justify-center p-4">
          <div className="glass-panel rounded-3xl p-6 w-full max-w-sm space-y-3">
            <h2 className="font-semibold text-foreground">{t("admin.addUser")}</h2>
            <div className="space-y-1">
              <Label>{t("auth.username")}</Label>
              <Input value={newUserForm.username} onChange={(e) => setNewUserForm({ ...newUserForm, username: e.target.value })} className="bg-white/70 border-slate-200" />
            </div>
            <div className="space-y-1">
              <Label>{t("auth.email")}</Label>
              <Input type="email" value={newUserForm.email} onChange={(e) => setNewUserForm({ ...newUserForm, email: e.target.value })} className="bg-white/70 border-slate-200" />
            </div>
            <div className="space-y-1">
              <Label>{t("auth.password")}</Label>
              <Input type="password" value={newUserForm.password} onChange={(e) => setNewUserForm({ ...newUserForm, password: e.target.value })} className="bg-white/70 border-slate-200" />
            </div>
            <div className="space-y-1">
              <Label>{t("admin.users.col.groups")}</Label>
              <div className="max-h-40 overflow-y-auto rounded-xl border border-slate-200 bg-white/70 p-2 space-y-1">
                {(groups ?? []).length === 0 && (
                  <div className="text-xs text-muted-foreground px-1 py-2">{t("admin.groups.empty")}</div>
                )}
                {(groups ?? []).map((g) => {
                  const checked = newUserForm.groupIds.includes(g.id);
                  return (
                    <label key={g.id} className="flex items-center gap-2 text-sm cursor-pointer px-1 py-1 rounded hover:bg-slate-100/60">
                      <input
                        type="checkbox"
                        checked={checked}
                        onChange={(e) => {
                          setNewUserForm((prev) => ({
                            ...prev,
                            groupIds: e.target.checked
                              ? [...prev.groupIds, g.id]
                              : prev.groupIds.filter((id) => id !== g.id),
                          }));
                        }}
                      />
                      <span>{g.name}</span>
                    </label>
                  );
                })}
              </div>
            </div>
            <div className="flex gap-2 pt-2">
              <Button variant="outline" className="flex-1" onClick={() => setNewUserOpen(false)}>{t("common.cancel")}</Button>
              <Button
                className="flex-1"
                onClick={() => {
                  createUser.mutate(
                    {
                      data: {
                        username: newUserForm.username,
                        email: newUserForm.email,
                        password: newUserForm.password,
                        ...(newUserForm.groupIds.length > 0 ? { groupIds: newUserForm.groupIds } : {}),
                      },
                    },
                    {
                      onSuccess: () => {
                        invalidateUsers();
                        setNewUserOpen(false);
                        setNewUserForm({ username: "", email: "", password: "", groupIds: [] });
                        toast({ title: t("common.success") });
                      },
                      onError: () => toast({ title: t("common.error"), variant: "destructive" }),
                    },
                  );
                }}
              >
                {t("common.save")}
              </Button>
            </div>
          </div>
        </div>
      )}

      {editingUser && (
        <UserGroupsEditor
          user={editingUser}
          groups={groups ?? []}
          onClose={() => setEditingUser(null)}
          onSaved={() => { invalidateUsers(); setEditingUser(null); }}
          onOpenAuditLogForTarget={onOpenAuditLogForTarget}
        />
      )}

      {userDeleteTarget && (() => {
        const target = userDeleteTarget;
        const items: string[] = [];
        if (userDeleteConflict) {
          if (userDeleteConflict.noteCount > 0)
            items.push(t("admin.deleteUser.noteCount", { count: userDeleteConflict.noteCount }));
          if (userDeleteConflict.orderCount > 0)
            items.push(t("admin.deleteUser.orderCount", { count: userDeleteConflict.orderCount }));
        }
        return (
          <DeletionWarningDialog
            title={t("admin.deleteUser.title", { name: target.username })}
            warning={t("admin.deleteUser.warning")}
            forceHint={t("admin.deleteUser.forceHint")}
            emptyBody={t("admin.deleteUser.emptyBody")}
            confirmLabel={t("admin.deleteUser.confirm")}
            anywayLabel={t("admin.deleteUser.anyway")}
            items={items}
            showWarning={userDeleteConflict !== null}
            isPending={deleteUser.isPending}
            onCancel={closeUserDeleteDialog}
            onConfirm={() => performUserDelete(target, userDeleteConflict !== null)}
            testId="user-delete-dialog"
            confirmTestId="user-delete-confirm"
          />
        );
      })()}
      {dependencyTarget && (
        <DependencyDrillIn
          target={dependencyTarget}
          lang={lang}
          onClose={() => setDependencyTarget(null)}
        />
      )}
    </div>
  );
}

type UserEditChangeKey =
  | "displayNameAr"
  | "displayNameEn"
  | "preferredLanguage"
  | "isActive";

function UserGroupsEditor({
  user,
  groups,
  onClose,
  onSaved,
  onOpenAuditLogForTarget,
}: {
  user: UserProfile;
  groups: Group[];
  onClose: () => void;
  onSaved: () => void;
  onOpenAuditLogForTarget: OpenAuditLogForTarget;
}) {
  const { t, i18n } = useTranslation();
  const { toast } = useToast();
  const updateUser = useUpdateUser();
  const { data: roles } = useListRoles({
    query: { queryKey: getListRolesQueryKey() },
  });

  const original = useMemo(
    () => ({
      groupIds: new Set<number>(user.groups?.map((g) => g.id) ?? []),
      displayNameAr: user.displayNameAr ?? "",
      displayNameEn: user.displayNameEn ?? "",
      preferredLanguage: user.preferredLanguage || "ar",
      isActive: user.isActive,
    }),
    [user.id],
  );

  const [selected, setSelected] = useState<Set<number>>(new Set(original.groupIds));
  const [displayNameAr, setDisplayNameAr] = useState(original.displayNameAr);
  const [displayNameEn, setDisplayNameEn] = useState(original.displayNameEn);
  const [preferredLanguage, setPreferredLanguage] = useState(original.preferredLanguage);
  const [isActive, setIsActive] = useState(original.isActive);
  const [groupSearch, setGroupSearch] = useState("");
  const [reviewOpen, setReviewOpen] = useState(false);
  // Used to send focus back to the Save button when the inner Review
  // dialog closes. Radix's automatic focus restoration is unreliable
  // for nested dialogs, so we steer it explicitly via onCloseAutoFocus.
  const saveBtnRef = useRef<HTMLButtonElement>(null);
  // Capture whatever was focused (typically the pencil edit button) at
  // the moment this editor first renders, so we can return focus there
  // when the editor closes. We must read this *during* render — by the
  // time a useEffect runs, Radix's FocusScope has already moved focus
  // inside the dialog. useState's lazy initializer gives us a stable,
  // mount-time snapshot.
  const [triggerElement] = useState<HTMLElement | null>(() => {
    if (typeof document === "undefined") return null;
    const active = document.activeElement;
    return active instanceof HTMLElement && active !== document.body
      ? active
      : null;
  });

  const toggle = (id: number) => {
    const next = new Set(selected);
    if (next.has(id)) next.delete(id);
    else next.add(id);
    setSelected(next);
  };

  const visibleGroups = groups.filter((g) =>
    !groupSearch.trim() || g.name.toLowerCase().includes(groupSearch.trim().toLowerCase()),
  );

  const groupNameById = useMemo(() => {
    const map = new Map<number, string>();
    for (const g of groups) map.set(g.id, g.name);
    return map;
  }, [groups]);

  const fieldChanges = useMemo(() => {
    const out: { key: UserEditChangeKey; before: unknown; after: unknown }[] = [];
    if (displayNameAr.trim() !== original.displayNameAr.trim()) {
      out.push({ key: "displayNameAr", before: original.displayNameAr, after: displayNameAr });
    }
    if (displayNameEn.trim() !== original.displayNameEn.trim()) {
      out.push({ key: "displayNameEn", before: original.displayNameEn, after: displayNameEn });
    }
    if (preferredLanguage !== original.preferredLanguage) {
      out.push({ key: "preferredLanguage", before: original.preferredLanguage, after: preferredLanguage });
    }
    if (isActive !== original.isActive) {
      out.push({ key: "isActive", before: original.isActive, after: isActive });
    }
    return out;
  }, [displayNameAr, displayNameEn, preferredLanguage, isActive, original]);

  const groupDelta = useMemo(() => {
    const added: string[] = [];
    const removed: string[] = [];
    for (const id of selected) {
      if (!original.groupIds.has(id)) added.push(groupNameById.get(id) ?? `#${id}`);
    }
    for (const id of original.groupIds) {
      if (!selected.has(id)) removed.push(groupNameById.get(id) ?? `#${id}`);
    }
    return { added, removed };
  }, [selected, original.groupIds, groupNameById]);

  const hasChanges =
    fieldChanges.length > 0 || groupDelta.added.length > 0 || groupDelta.removed.length > 0;

  const fieldLabel = (key: UserEditChangeKey): string => {
    switch (key) {
      case "displayNameAr":
        return t("admin.users.col.displayNameAr");
      case "displayNameEn":
        return t("admin.users.col.displayNameEn");
      case "preferredLanguage":
        return t("admin.users.col.language");
      case "isActive":
        return t("admin.users.statusActive");
    }
  };

  const renderValue = (key: UserEditChangeKey, value: unknown): string => {
    if (key === "isActive") {
      return value
        ? t("admin.users.statusActive")
        : t("admin.users.statusInactive");
    }
    if (key === "preferredLanguage") {
      return value === "ar" ? "العربية" : "English";
    }
    const str = typeof value === "string" ? value.trim() : String(value ?? "");
    return str === "" ? t("common.empty") : str;
  };

  const handleConfirmSave = () => {
    updateUser.mutate(
      {
        id: user.id,
        data: {
          groupIds: Array.from(selected),
          displayNameAr: displayNameAr.trim() || null,
          displayNameEn: displayNameEn.trim() || null,
          preferredLanguage,
          isActive,
        },
      },
      {
        onSuccess: () => {
          toast({ title: t("common.success") });
          setReviewOpen(false);
          onSaved();
        },
        onError: () => toast({ title: t("common.error"), variant: "destructive" }),
      },
    );
  };

  return (
    <Dialog
      open={true}
      onOpenChange={(o) => {
        if (!o) onClose();
      }}
    >
      <DialogContent
        data-testid="edit-user-dialog"
        className="glass-panel border-0 shadow-none rounded-3xl sm:rounded-3xl p-6 w-full max-w-md max-h-[85vh] overflow-y-auto gap-3"
        onCloseAutoFocus={(e) => {
          // Return focus to the trigger that opened the editor (e.g. the
          // pencil button). Radix's default restoration is unreliable
          // because the parent re-renders on close.
          if (triggerElement && document.body.contains(triggerElement)) {
            e.preventDefault();
            triggerElement.focus();
          }
        }}
      >
        <DialogHeader>
          <DialogTitle className="text-base font-semibold text-foreground">
            {t("admin.users.editUserGroups", { username: user.username })}
          </DialogTitle>
        </DialogHeader>
        <div className="grid grid-cols-2 gap-2">
          <div className="space-y-1">
            <Label className="text-xs">{t("admin.users.col.displayNameAr")}</Label>
            <Input
              value={displayNameAr}
              onChange={(e) => setDisplayNameAr(e.target.value)}
              className="bg-white/70 border-slate-200"
              data-testid="edit-user-display-ar"
            />
          </div>
          <div className="space-y-1">
            <Label className="text-xs">{t("admin.users.col.displayNameEn")}</Label>
            <Input
              value={displayNameEn}
              onChange={(e) => setDisplayNameEn(e.target.value)}
              className="bg-white/70 border-slate-200"
              data-testid="edit-user-display-en"
            />
          </div>
        </div>
        <div className="grid grid-cols-2 gap-2 items-end">
          <div className="space-y-1">
            <Label className="text-xs">{t("admin.users.col.language")}</Label>
            <select
              value={preferredLanguage}
              onChange={(e) => setPreferredLanguage(e.target.value)}
              className="bg-white/70 border border-slate-200 rounded-lg px-3 py-2 text-sm w-full"
              data-testid="edit-user-language"
            >
              <option value="ar">العربية</option>
              <option value="en">English</option>
            </select>
          </div>
          <label className="flex items-center gap-2 pb-2 text-sm">
            <Switch checked={isActive} onCheckedChange={setIsActive} />
            <span>{t("admin.users.statusActive")}</span>
          </label>
        </div>
        <div className="pt-1">
          <Label className="text-xs">{t("admin.users.editGroups")}</Label>
          <Input
            placeholder={t("admin.groups.searchPlaceholder")}
            value={groupSearch}
            onChange={(e) => setGroupSearch(e.target.value)}
            className="bg-white/70 border-slate-200 mt-1 mb-2"
            data-testid="edit-user-group-search"
          />
          <div className="space-y-1 max-h-48 overflow-y-auto">
            {visibleGroups.map((g) => (
              <label key={g.id} className="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-slate-100 cursor-pointer">
                <input type="checkbox" checked={selected.has(g.id)} onChange={() => toggle(g.id)} />
                <span className="text-sm flex-1">{g.name}</span>
                {g.isSystem && <span className="text-[10px] px-1.5 py-0.5 rounded-full bg-slate-200 text-muted-foreground">{t("admin.groups.system")}</span>}
              </label>
            ))}
            {visibleGroups.length === 0 && <p className="text-sm text-muted-foreground p-2">{t("admin.groups.empty")}</p>}
          </div>
        </div>
        <PermissionAuditHistory
          targetKind="user"
          targetId={user.id}
          enabled={true}
          language={i18n.language}
          scopeI18nKey="admin.users.history"
          changeKindLabel={(ck) =>
            ck === "user.roles"
              ? t("admin.users.history.kind.roles")
              : t("admin.users.history.kind.groups")
          }
          labelResolver={(ck, id) => {
            if (ck === "user.groups") {
              return groupNameById.get(id) ?? `#${id}`;
            }
            const r = (roles ?? []).find((x) => x.id === id);
            return r ? r.name : `#${id}`;
          }}
        />
        <RecentActivityForTarget
          targetType="user"
          targetId={user.id}
          enabled={true}
          lang={i18n.language}
          onViewFullHistory={() => onOpenAuditLogForTarget("user", user.id)}
        />
        <DialogFooter className="flex flex-row gap-2 pt-2 sm:justify-stretch sm:space-x-0">
          <Button variant="outline" className="flex-1" onClick={onClose}>{t("common.cancel")}</Button>
          <Button
            ref={saveBtnRef}
            className="flex-1"
            disabled={!hasChanges}
            title={hasChanges ? undefined : t("admin.users.review.noChanges")}
            onClick={() => setReviewOpen(true)}
            data-testid="edit-user-save"
          >
            {t("common.save")}
          </Button>
        </DialogFooter>

        <Dialog open={reviewOpen} onOpenChange={setReviewOpen}>
          <DialogContent
            data-testid="edit-user-review-dialog"
            className="glass-panel border-0 shadow-none rounded-3xl sm:rounded-3xl p-6 w-full max-w-md max-h-[85vh] overflow-y-auto gap-4"
            onCloseAutoFocus={(e) => {
              // Nested-dialog focus restoration is unreliable in Radix:
              // the outer Dialog's FocusScope can swallow the restore.
              // Steer focus back to the Save button that opened us.
              e.preventDefault();
              saveBtnRef.current?.focus();
            }}
          >
            <DialogHeader className="space-y-1">
              <DialogTitle className="text-base font-semibold text-foreground">
                {t("admin.users.review.title")}
              </DialogTitle>
              <DialogDescription className="text-xs text-muted-foreground">
                {t("admin.users.review.subtitle", { username: user.username })}
              </DialogDescription>
            </DialogHeader>
            <ul className="space-y-2 text-sm">
              {fieldChanges.map((c) => (
                <li
                  key={c.key}
                  className="flex flex-wrap items-baseline gap-x-2 gap-y-1"
                  data-testid={`edit-user-review-change-${c.key}`}
                >
                  <span className="text-muted-foreground">{fieldLabel(c.key)}:</span>
                  <span className="line-through text-muted-foreground/70">
                    {renderValue(c.key, c.before)}
                  </span>
                  <span className="text-muted-foreground">→</span>
                  <span className="font-medium text-foreground">
                    {renderValue(c.key, c.after)}
                  </span>
                </li>
              ))}
            </ul>
            {groupDelta.added.length > 0 && (
              <div data-testid="edit-user-review-group-added" className="space-y-1">
                <h4 className="text-xs font-medium text-foreground">
                  {t("admin.users.review.groupsAdded")}
                </h4>
                <div className="flex flex-wrap gap-1">
                  {groupDelta.added.map((name) => (
                    <span
                      key={`add-${name}`}
                      className="text-[11px] px-2 py-0.5 rounded-full bg-emerald-100 text-emerald-800"
                    >
                      {name}
                    </span>
                  ))}
                </div>
              </div>
            )}
            {groupDelta.removed.length > 0 && (
              <div data-testid="edit-user-review-group-removed" className="space-y-1">
                <h4 className="text-xs font-medium text-foreground">
                  {t("admin.users.review.groupsRemoved")}
                </h4>
                <div className="flex flex-wrap gap-1">
                  {groupDelta.removed.map((name) => (
                    <span
                      key={`rem-${name}`}
                      className="text-[11px] px-2 py-0.5 rounded-full bg-rose-100 text-rose-800 line-through"
                    >
                      {name}
                    </span>
                  ))}
                </div>
              </div>
            )}
            <DialogFooter className="flex flex-row gap-2 pt-1 sm:justify-stretch sm:space-x-0">
              <Button
                variant="outline"
                className="flex-1"
                disabled={updateUser.isPending}
                onClick={() => setReviewOpen(false)}
                data-testid="edit-user-review-back"
              >
                {t("admin.users.review.back")}
              </Button>
              <Button
                className="flex-1"
                disabled={updateUser.isPending}
                onClick={handleConfirmSave}
                data-testid="edit-user-review-confirm"
              >
                {updateUser.isPending ? (
                  <Loader2 className="w-4 h-4 animate-spin" />
                ) : (
                  t("admin.users.review.confirm")
                )}
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </DialogContent>
    </Dialog>
  );
}

// ===== Groups Management Panel =====
function GroupsPanel({
  onOpenAuditLogForTarget,
}: {
  onOpenAuditLogForTarget: OpenAuditLogForTarget;
}) {
  const { t } = useTranslation();
  const { toast } = useToast();
  const queryClient = useQueryClient();
  const { data: groups } = useListGroups(undefined, { query: { queryKey: getListGroupsQueryKey() } });
  const createGroup = useCreateGroup();
  const deleteGroup = useDeleteGroup();
  const [editingGroupId, setEditingGroupId] = useState<number | null>(null);
  const [createOpen, setCreateOpen] = useState(false);
  const [createForm, setCreateForm] = useState({ name: "", descriptionAr: "", descriptionEn: "" });
  const [groupSearch, setGroupSearch] = useState("");
  const [deleteTarget, setDeleteTarget] = useState<Group | null>(null);
  const [conflictCounts, setConflictCounts] = useState<{
    memberCount: number;
    appCount: number;
    roleCount: number;
  } | null>(null);

  const invalidate = () => queryClient.invalidateQueries({ queryKey: getListGroupsQueryKey() });

  const closeDeleteDialog = () => {
    setDeleteTarget(null);
    setConflictCounts(null);
  };

  const performDelete = (group: Group, force: boolean) => {
    deleteGroup.mutate(
      { id: group.id, params: force ? { force: true } : undefined },
      {
        onSuccess: () => {
          invalidate();
          toast({ title: t("common.success") });
          closeDeleteDialog();
        },
        onError: (err: unknown) => {
          if (err instanceof ApiError && err.status === 409 && err.data) {
            const data = err.data as GroupDeletionConflict;
            setConflictCounts({
              memberCount: data.memberCount,
              appCount: data.appCount,
              roleCount: data.roleCount,
            });
            return;
          }
          toast({ title: t("common.error"), variant: "destructive" });
        },
      },
    );
  };

  const visibleGroups = (groups ?? []).filter((g) =>
    !groupSearch.trim() ||
    g.name.toLowerCase().includes(groupSearch.trim().toLowerCase()) ||
    (g.descriptionAr ?? "").toLowerCase().includes(groupSearch.trim().toLowerCase()) ||
    (g.descriptionEn ?? "").toLowerCase().includes(groupSearch.trim().toLowerCase()),
  );

  return (
    <div className="space-y-3">
      <div className="flex items-center gap-2">
        <Input
          placeholder={t("admin.groups.searchPlaceholder")}
          value={groupSearch}
          onChange={(e) => setGroupSearch(e.target.value)}
          className="bg-white/70 border-slate-200 flex-1"
          data-testid="group-search"
        />
        <Button size="sm" onClick={() => { setCreateForm({ name: "", descriptionAr: "", descriptionEn: "" }); setCreateOpen(true); }} data-testid="create-group-btn">
          <Plus size={14} className="me-1" />
          {t("admin.groups.addGroup")}
        </Button>
      </div>

      <div className="grid gap-3 md:grid-cols-2">
        {visibleGroups.map((g) => (
          <div key={g.id} className="glass-panel rounded-2xl p-4 space-y-2" data-testid={`group-card-${g.id}`}>
            <div className="flex items-start justify-between gap-2">
              <div className="min-w-0">
                <div className="font-semibold text-foreground flex items-center gap-2">
                  <Shield size={16} className="text-primary" />
                  <span className="truncate">{g.name}</span>
                  {g.isSystem && (
                    <span className="text-[10px] px-1.5 py-0.5 rounded-full bg-amber-100 text-amber-700 uppercase tracking-wider">
                      {t("admin.groups.system")}
                    </span>
                  )}
                </div>
                {(g.descriptionAr || g.descriptionEn) && (
                  <p className="text-xs text-muted-foreground mt-1 truncate">
                    {g.descriptionEn || g.descriptionAr}
                  </p>
                )}
              </div>
              <div className="flex items-center gap-1 shrink-0">
                <button
                  onClick={() => setEditingGroupId(g.id)}
                  className="p-1.5 hover:bg-slate-100 rounded-lg text-muted-foreground hover:text-foreground"
                  data-testid={`edit-group-${g.id}`}
                >
                  <Pencil size={14} />
                </button>
                {!g.isSystem && (
                  <button
                    onClick={() => {
                      setConflictCounts(null);
                      setDeleteTarget(g);
                    }}
                    className="p-1.5 hover:bg-destructive/20 rounded-lg text-muted-foreground hover:text-destructive"
                    data-testid={`delete-group-${g.id}`}
                  >
                    <Trash2 size={14} />
                  </button>
                )}
              </div>
            </div>
            <div className="flex flex-wrap gap-3 text-xs text-muted-foreground pt-1">
              <span>{t("admin.groups.members", { count: g.memberCount })}</span>
              <span>•</span>
              <span>{t("admin.groups.appsCount", { count: g.appCount })}</span>
              <span>•</span>
              <span>{t("admin.groups.rolesCount", { count: g.roleCount })}</span>
            </div>
          </div>
        ))}
        {visibleGroups.length === 0 && (
          <div className="glass-panel rounded-2xl p-6 text-center text-sm text-muted-foreground md:col-span-2">
            {t("admin.groups.empty")}
          </div>
        )}
      </div>

      {createOpen && (
        <div className="fixed inset-0 bg-slate-900/30 backdrop-blur-sm z-50 flex items-center justify-center p-4">
          <div className="glass-panel rounded-3xl p-6 w-full max-w-sm space-y-3">
            <h2 className="font-semibold text-foreground">{t("admin.groups.addGroup")}</h2>
            <div className="space-y-1">
              <Label>{t("admin.groups.name")}</Label>
              <Input value={createForm.name} onChange={(e) => setCreateForm({ ...createForm, name: e.target.value })} className="bg-white/70 border-slate-200" data-testid="group-name-input" />
            </div>
            <div className="space-y-1">
              <Label>{t("admin.groups.descriptionAr")}</Label>
              <Input value={createForm.descriptionAr} onChange={(e) => setCreateForm({ ...createForm, descriptionAr: e.target.value })} className="bg-white/70 border-slate-200" dir="rtl" />
            </div>
            <div className="space-y-1">
              <Label>{t("admin.groups.descriptionEn")}</Label>
              <Input value={createForm.descriptionEn} onChange={(e) => setCreateForm({ ...createForm, descriptionEn: e.target.value })} className="bg-white/70 border-slate-200" dir="ltr" />
            </div>
            <div className="flex gap-2 pt-2">
              <Button variant="outline" className="flex-1" onClick={() => setCreateOpen(false)}>{t("common.cancel")}</Button>
              <Button
                className="flex-1"
                disabled={!createForm.name.trim()}
                onClick={() =>
                  createGroup.mutate(
                    { data: { name: createForm.name.trim(), descriptionAr: createForm.descriptionAr || null, descriptionEn: createForm.descriptionEn || null } },
                    {
                      onSuccess: () => { invalidate(); setCreateOpen(false); toast({ title: t("common.success") }); },
                      onError: () => toast({ title: t("common.error"), variant: "destructive" }),
                    },
                  )
                }
                data-testid="create-group-submit"
              >
                {t("common.save")}
              </Button>
            </div>
          </div>
        </div>
      )}

      {editingGroupId != null && (
        <GroupDetailEditor
          groupId={editingGroupId}
          onClose={() => setEditingGroupId(null)}
          onSaved={() => {
            invalidate();
            queryClient.invalidateQueries({ queryKey: getGetGroupQueryKey(editingGroupId) });
            setEditingGroupId(null);
          }}
          onOpenAuditLogForTarget={onOpenAuditLogForTarget}
        />
      )}

      {deleteTarget && (() => {
        const counts = conflictCounts ?? {
          memberCount: deleteTarget.memberCount,
          appCount: deleteTarget.appCount,
          roleCount: deleteTarget.roleCount,
        };
        const isNonEmpty =
          counts.memberCount > 0 || counts.appCount > 0 || counts.roleCount > 0;
        const showWarning = conflictCounts !== null || isNonEmpty;
        return (
          <div className="fixed inset-0 bg-slate-900/30 backdrop-blur-sm z-50 flex items-center justify-center p-4">
            <div className="glass-panel rounded-3xl p-6 w-full max-w-sm space-y-3" data-testid="delete-group-dialog">
              <h2 className="font-semibold text-foreground">
                {t("admin.groups.deleteTitle", { name: deleteTarget.name })}
              </h2>
              {showWarning ? (
                <>
                  <p className="text-sm text-destructive">
                    {t("admin.groups.deleteWarning")}
                  </p>
                  <ul className="text-sm text-foreground space-y-1 ps-4 list-disc">
                    <li>{t("admin.groups.members", { count: counts.memberCount })}</li>
                    <li>{t("admin.groups.appsCount", { count: counts.appCount })}</li>
                    <li>{t("admin.groups.rolesCount", { count: counts.roleCount })}</li>
                  </ul>
                  <p className="text-xs text-muted-foreground">
                    {t("admin.groups.deleteForceHint")}
                  </p>
                </>
              ) : (
                <p className="text-sm text-muted-foreground">
                  {t("admin.groups.deleteEmptyBody")}
                </p>
              )}
              <div className="flex gap-2 pt-2">
                <Button
                  variant="outline"
                  className="flex-1"
                  onClick={closeDeleteDialog}
                  disabled={deleteGroup.isPending}
                >
                  {t("common.cancel")}
                </Button>
                <Button
                  className="flex-1"
                  variant="destructive"
                  disabled={deleteGroup.isPending}
                  onClick={() => performDelete(deleteTarget, showWarning)}
                  data-testid="confirm-delete-group"
                >
                  {showWarning
                    ? t("admin.groups.deleteAnyway")
                    : t("admin.groups.deleteConfirm")}
                </Button>
              </div>
            </div>
          </div>
        );
      })()}
    </div>
  );
}

function GroupDetailEditor({
  groupId,
  onClose,
  onSaved,
  onOpenAuditLogForTarget,
}: {
  groupId: number;
  onClose: () => void;
  onSaved: () => void;
  onOpenAuditLogForTarget: OpenAuditLogForTarget;
}) {
  const { t, i18n } = useTranslation();
  const lang = i18n.language;
  const { toast } = useToast();
  const { data: group } = useGetGroup(groupId, { query: { queryKey: getGetGroupQueryKey(groupId) } });
  const { data: apps } = useQuery({ queryKey: ADMIN_APPS_KEY, queryFn: fetchAdminApps });
  const { data: users } = useListUsers(undefined, { query: { queryKey: getListUsersQueryKey() } });
  const { data: roles } = useListRoles({ query: { queryKey: getListRolesQueryKey() } });
  const updateGroup = useUpdateGroup();

  const [name, setName] = useState("");
  const [descriptionAr, setDescriptionAr] = useState("");
  const [descriptionEn, setDescriptionEn] = useState("");
  const [appIds, setAppIds] = useState<Set<number>>(new Set());
  const [userIds, setUserIds] = useState<Set<number>>(new Set());
  const [roleIds, setRoleIds] = useState<Set<number>>(new Set());
  const [tab, setTab] = useState<
    "info" | "apps" | "users" | "roles" | "history"
  >("info");
  const [userSearch, setUserSearch] = useState("");

  const visibleUsers = (users ?? []).filter((u) => {
    const q = userSearch.trim().toLowerCase();
    if (!q) return true;
    return (
      u.username.toLowerCase().includes(q) ||
      u.email.toLowerCase().includes(q) ||
      (u.displayNameAr ?? "").toLowerCase().includes(q) ||
      (u.displayNameEn ?? "").toLowerCase().includes(q)
    );
  });

  useEffect(() => {
    if (group) {
      setName(group.name);
      setDescriptionAr(group.descriptionAr ?? "");
      setDescriptionEn(group.descriptionEn ?? "");
      setAppIds(new Set(group.appIds));
      setUserIds(new Set(group.userIds));
      setRoleIds(new Set(group.roleIds));
    }
  }, [group]);

  const toggle = (set: Set<number>, id: number, setter: (s: Set<number>) => void) => {
    const next = new Set(set);
    if (next.has(id)) next.delete(id);
    else next.add(id);
    setter(next);
  };

  if (!group) {
    return (
      <div className="fixed inset-0 bg-slate-900/30 backdrop-blur-sm z-50 flex items-center justify-center p-4">
        <div className="glass-panel rounded-3xl p-6 w-full max-w-md text-center">
          <Loader2 className="animate-spin mx-auto" />
        </div>
      </div>
    );
  }

  return (
    <div className="fixed inset-0 bg-slate-900/30 backdrop-blur-sm z-50 flex items-center justify-center p-4">
      <div className="glass-panel rounded-3xl p-6 w-full max-w-lg space-y-3 max-h-[90vh] overflow-y-auto">
        <div className="flex items-center justify-between gap-2">
          <h2 className="font-semibold text-foreground flex items-center gap-2">
            <Shield size={18} className="text-primary" />
            {t("admin.groups.editGroup")}: {group.name}
          </h2>
          {group.isSystem && (
            <span className="text-[10px] px-1.5 py-0.5 rounded-full bg-amber-100 text-amber-700 uppercase tracking-wider">
              {t("admin.groups.system")}
            </span>
          )}
        </div>

        <div className="flex border-b border-slate-200/70">
          {(["info", "apps", "users", "roles", "history"] as const).map((k) => (
            <button
              key={k}
              onClick={() => setTab(k)}
              className={cn(
                "px-3 py-2 text-sm border-b-2 transition-colors",
                tab === k ? "border-primary text-primary font-semibold" : "border-transparent text-muted-foreground hover:text-foreground",
              )}
              data-testid={`group-tab-${k}`}
            >
              {t(`admin.groups.tab.${k}`)}
            </button>
          ))}
        </div>

        {tab === "info" && (
          <div className="space-y-2">
            <div className="space-y-1">
              <Label>{t("admin.groups.name")}</Label>
              <Input value={name} onChange={(e) => setName(e.target.value)} disabled={group.isSystem} className="bg-white/70 border-slate-200" />
            </div>
            <div className="space-y-1">
              <Label>{t("admin.groups.descriptionAr")}</Label>
              <Input value={descriptionAr} onChange={(e) => setDescriptionAr(e.target.value)} className="bg-white/70 border-slate-200" dir="rtl" />
            </div>
            <div className="space-y-1">
              <Label>{t("admin.groups.descriptionEn")}</Label>
              <Input value={descriptionEn} onChange={(e) => setDescriptionEn(e.target.value)} className="bg-white/70 border-slate-200" dir="ltr" />
            </div>
          </div>
        )}

        {tab === "apps" && (
          <div className="space-y-1 max-h-72 overflow-y-auto">
            <p className="text-xs text-muted-foreground px-1 pb-2">{t("admin.groups.appsHint")}</p>
            {apps?.map((a) => (
              <label key={a.id} className="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-slate-100 cursor-pointer">
                <input type="checkbox" checked={appIds.has(a.id)} onChange={() => toggle(appIds, a.id, setAppIds)} />
                <span className="text-sm flex-1">{lang === "ar" ? a.nameAr : a.nameEn}</span>
                <span className="text-[10px] text-muted-foreground">{a.slug}</span>
              </label>
            ))}
          </div>
        )}

        {tab === "roles" && (
          <div className="space-y-1 max-h-72 overflow-y-auto">
            <p className="text-xs text-muted-foreground px-1 pb-2">{t("admin.groups.rolesHint")}</p>
            {roles?.map((r) => {
              const primaryDesc = lang === "ar" ? r.descriptionAr : r.descriptionEn;
              const secondaryDesc = lang === "ar" ? r.descriptionEn : r.descriptionAr;
              const secondaryDir = lang === "ar" ? "ltr" : "rtl";
              const heading = primaryDesc || secondaryDesc || r.name;
              const showSecondary = !!(primaryDesc && secondaryDesc);
              return (
                <Tooltip key={r.id}>
                  <TooltipTrigger asChild>
                    <label
                      className="flex items-start gap-2 px-3 py-2 rounded-lg hover:bg-slate-100 cursor-pointer"
                      data-testid={`group-role-${r.id}`}
                    >
                      <input
                        type="checkbox"
                        className="mt-1"
                        checked={roleIds.has(r.id)}
                        onChange={() => toggle(roleIds, r.id, setRoleIds)}
                      />
                      <span className="flex-1 min-w-0">
                        <span className="block text-sm">{heading}</span>
                        {showSecondary && (
                          <span
                            className="block text-xs text-muted-foreground"
                            dir={secondaryDir}
                            data-testid={`group-role-${r.id}-secondary`}
                          >
                            {secondaryDesc}
                          </span>
                        )}
                      </span>
                      <span className="text-[10px] text-muted-foreground mt-1 shrink-0 font-mono">
                        {r.name}
                      </span>
                    </label>
                  </TooltipTrigger>
                  <TooltipContent side="top" className="max-w-xs">
                    <div className="space-y-1 text-xs">
                      {r.descriptionAr && <div dir="rtl">{r.descriptionAr}</div>}
                      {r.descriptionEn && <div dir="ltr">{r.descriptionEn}</div>}
                      <div className="opacity-70 font-mono" dir="ltr">{r.name}</div>
                    </div>
                  </TooltipContent>
                </Tooltip>
              );
            })}
            {(!roles || roles.length === 0) && (
              <p className="text-sm text-muted-foreground p-2">{t("admin.groups.rolesEmpty")}</p>
            )}
          </div>
        )}

        {tab === "users" && (
          <div className="space-y-2">
            <p className="text-xs text-muted-foreground px-1">{t("admin.groups.usersHint")}</p>
            <Input
              placeholder={t("admin.users.searchPlaceholder")}
              value={userSearch}
              onChange={(e) => setUserSearch(e.target.value)}
              className="bg-white/70 border-slate-200"
              data-testid="group-user-search"
            />
            <div className="space-y-1 max-h-60 overflow-y-auto">
              {visibleUsers.map((u) => (
                <label key={u.id} className="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-slate-100 cursor-pointer">
                  <input type="checkbox" checked={userIds.has(u.id)} onChange={() => toggle(userIds, u.id, setUserIds)} />
                  <span className="text-sm flex-1">{u.username}</span>
                  <span className="text-[10px] text-muted-foreground">{u.email}</span>
                </label>
              ))}
              {visibleUsers.length === 0 && (
                <p className="text-sm text-muted-foreground p-2">{t("admin.users.empty")}</p>
              )}
            </div>
          </div>
        )}

        {tab === "history" && (
          <>
          <PermissionAuditHistory
            targetKind="group"
            targetId={group.id}
            enabled={true}
            language={lang}
            scopeI18nKey="admin.groups.history"
            changeKindLabel={(ck) =>
              ck === "group.users"
                ? t("admin.groups.history.kind.users")
                : ck === "group.roles"
                  ? t("admin.groups.history.kind.roles")
                  : t("admin.groups.history.kind.apps")
            }
            labelResolver={(ck, id) => {
              if (ck === "group.users") {
                const u = (users ?? []).find((x) => x.id === id);
                return u ? u.username : `#${id}`;
              }
              if (ck === "group.roles") {
                const r = (roles ?? []).find((x) => x.id === id);
                return r ? r.name : `#${id}`;
              }
              const a = (apps ?? []).find((x) => x.id === id);
              return a ? (lang === "ar" ? a.nameAr : a.nameEn) : `#${id}`;
            }}
          />
          <RecentActivityForTarget
            targetType="group"
            targetId={group.id}
            enabled={true}
            lang={lang}
            onViewFullHistory={() => {
              onClose();
              onOpenAuditLogForTarget("group", group.id);
            }}
          />
          </>
        )}

        <div className="flex gap-2 pt-2 border-t border-slate-200/70">
          <Button variant="outline" className="flex-1" onClick={onClose}>{t("common.cancel")}</Button>
          <Button
            className="flex-1"
            onClick={() =>
              updateGroup.mutate(
                {
                  id: group.id,
                  data: {
                    name: group.isSystem ? undefined : name.trim() || undefined,
                    descriptionAr: descriptionAr || null,
                    descriptionEn: descriptionEn || null,
                    appIds: Array.from(appIds),
                    userIds: Array.from(userIds),
                    roleIds: Array.from(roleIds),
                  },
                },
                {
                  onSuccess: () => { toast({ title: t("common.success") }); onSaved(); },
                  onError: () => toast({ title: t("common.error"), variant: "destructive" }),
                },
              )
            }
            data-testid="save-group"
          >
            {t("common.save")}
          </Button>
        </div>
      </div>
    </div>
  );
}

const ROLES_PROTECTED_NAMES = new Set(["admin", "user", "order_receiver"]);

function permissionLabel(
  id: number,
  permissionsById: Map<number, Permission>,
): string {
  const p = permissionsById.get(id);
  return p ? p.name : `#${id}`;
}

const ROLE_HISTORY_DATE_RE = /^\d{4}-\d{2}-\d{2}$/;
const ROLE_HISTORY_PAGE_SIZE = 10;

function RolePermissionHistory({
  roleId,
  enabled,
  permissionsById,
  language,
}: {
  roleId: number;
  enabled: boolean;
  permissionsById: Map<number, Permission>;
  language: string;
}) {
  const { t } = useTranslation();

  // Two layers of state: the live <input> values (typed in by the admin)
  // and the "applied" values that are actually fed into the query. The
  // dropdown for the actor user is applied immediately because picking a
  // different person is the natural way to commit; the date inputs only
  // commit on the explicit Apply button so partial date typing doesn't
  // refetch on every keystroke.
  const [actorUserId, setActorUserId] = useState<number | "">("");
  const [fromInput, setFromInput] = useState<string>("");
  const [toInput, setToInput] = useState<string>("");
  const [appliedFrom, setAppliedFrom] = useState<string>("");
  const [appliedTo, setAppliedTo] = useState<string>("");

  // True offset pagination: the first page comes from the React Query cache
  // (so live updates from PUT /roles/:id/permissions invalidations can
  // refresh it), and subsequent pages are fetched imperatively and appended
  // to `extraEntries`. We track the next offset to request, plus per-page
  // load state, so admins can keep paging back through arbitrarily long
  // histories without a hard ceiling.
  const [extraEntries, setExtraEntries] = useState<RolePermissionAuditEntry[]>([]);
  const [extraNextOffset, setExtraNextOffset] = useState<number | null>(null);
  const [hasExtras, setHasExtras] = useState(false);
  const [isLoadingMore, setIsLoadingMore] = useState(false);
  const [loadMoreError, setLoadMoreError] = useState<string | null>(null);

  // CSV export state for the "Download CSV" button (#205). The download
  // is independent of the paginated list shown above — it always asks
  // the server for ALL rows matching the current filters (subject to
  // a server-side cap), so the spreadsheet doesn't only contain the
  // pages the admin already scrolled through.
  const [isDownloadingCsv, setIsDownloadingCsv] = useState(false);
  const [downloadCsvError, setDownloadCsvError] = useState<string | null>(null);

  // Reset filters and pagination whenever the dialog switches to a
  // different role so an admin doesn't see stale filters carried over.
  useEffect(() => {
    setActorUserId("");
    setFromInput("");
    setToInput("");
    setAppliedFrom("");
    setAppliedTo("");
    setExtraEntries([]);
    setExtraNextOffset(null);
    setHasExtras(false);
    setLoadMoreError(null);
    setIsLoadingMore(false);
    setDownloadCsvError(null);
    setIsDownloadingCsv(false);
  }, [roleId]);

  const fromValid = !appliedFrom || ROLE_HISTORY_DATE_RE.test(appliedFrom);
  const toValid = !appliedTo || ROLE_HISTORY_DATE_RE.test(appliedTo);
  const orderValid = !appliedFrom || !appliedTo || appliedFrom <= appliedTo;
  const filtersValid = fromValid && toValid && orderValid;

  const { data: users } = useListUsers(undefined, {
    query: { queryKey: getListUsersQueryKey(), enabled },
  });
  const sortedUsers = useMemo(() => {
    const list = (users ?? []).slice();
    list.sort((a, b) => {
      const aLabel =
        (language === "ar"
          ? a.displayNameAr ?? a.displayNameEn
          : a.displayNameEn ?? a.displayNameAr) ?? a.username;
      const bLabel =
        (language === "ar"
          ? b.displayNameAr ?? b.displayNameEn
          : b.displayNameEn ?? b.displayNameAr) ?? b.username;
      return aLabel.localeCompare(bLabel);
    });
    return list;
  }, [users, language]);

  // First-page params — only this page lives in React Query so cache
  // invalidations after a permission save naturally refresh it. The other
  // pages are fetched imperatively below.
  const firstPageParams: GetRolePermissionAuditParams = {
    limit: ROLE_HISTORY_PAGE_SIZE,
    offset: 0,
    ...(actorUserId !== "" ? { actorUserId: actorUserId as number } : {}),
    ...(appliedFrom ? { from: appliedFrom } : {}),
    ...(appliedTo ? { to: appliedTo } : {}),
  };

  const { data, isLoading, isFetching } = useGetRolePermissionAudit(
    roleId,
    firstPageParams,
    {
      query: {
        queryKey: getGetRolePermissionAuditQueryKey(roleId, firstPageParams),
        enabled: enabled && filtersValid,
      },
    },
  );

  // When the first page changes (filters applied) wipe the appended extra
  // pages so we don't end up with overlapping or out-of-order rows.
  const filtersKey = JSON.stringify(firstPageParams);
  useEffect(() => {
    setExtraEntries([]);
    setExtraNextOffset(null);
    setHasExtras(false);
    setLoadMoreError(null);
    setIsLoadingMore(false);
  }, [filtersKey]);

  // Belt-and-braces: also reset the appended pages whenever React Query
  // refetches the first page under the same filter key (e.g. an external
  // cache invalidation triggered by a permission save while the dialog
  // is still open). Without this, the appended pages could drift out of
  // sync with the refreshed first page.
  const firstPageSignature = data
    ? `${data.totalCount}|${data.entries[0]?.id ?? ""}`
    : null;
  useEffect(() => {
    if (firstPageSignature == null) return;
    setExtraEntries([]);
    setExtraNextOffset(null);
    setHasExtras(false);
    setLoadMoreError(null);
    setIsLoadingMore(false);
  }, [firstPageSignature]);

  const firstPageEntries = data?.entries ?? [];
  const totalCount = data?.totalCount ?? 0;
  const entries = hasExtras
    ? [...firstPageEntries, ...extraEntries]
    : firstPageEntries;
  const showingCount = entries.length;
  const nextOffset = hasExtras ? extraNextOffset : data?.nextOffset ?? null;
  const hasMore = nextOffset !== null;

  const applyFilters = () => {
    setAppliedFrom(fromInput.trim());
    setAppliedTo(toInput.trim());
    // Pagination state is reset by the filtersKey effect above.
  };

  const resetFilters = () => {
    setActorUserId("");
    setFromInput("");
    setToInput("");
    setAppliedFrom("");
    setAppliedTo("");
  };

  const loadMore = async () => {
    if (nextOffset === null || isLoadingMore) return;
    setIsLoadingMore(true);
    setLoadMoreError(null);
    try {
      const next = await getRolePermissionAudit(roleId, {
        ...firstPageParams,
        offset: nextOffset,
      });
      setExtraEntries((prev) => [...prev, ...next.entries]);
      setExtraNextOffset(next.nextOffset);
      setHasExtras(true);
    } catch (e) {
      setLoadMoreError(
        (e as { message?: string }).message ?? t("common.error"),
      );
    } finally {
      setIsLoadingMore(false);
    }
  };

  // CSV export handler (#205). Goes via plain `fetch` (with credentials)
  // rather than the generated client because we want a Blob download
  // triggered through a synthetic <a download> element — the generated
  // wrapper unwraps the body which makes filename / Content-Type harder
  // to use. We reuse the generated URL builder so the route + query
  // serialization stays in lock-step with the OpenAPI spec. `limit` /
  // `offset` are intentionally NOT forwarded — the backend exports all
  // matching rows up to its own cap.
  const downloadCsv = async () => {
    if (!filtersValid || isDownloadingCsv) return;
    setIsDownloadingCsv(true);
    setDownloadCsvError(null);
    try {
      const url = getExportRolePermissionAuditCsvUrl(roleId, {
        ...(actorUserId !== "" ? { actorUserId: actorUserId as number } : {}),
        ...(appliedFrom ? { from: appliedFrom } : {}),
        ...(appliedTo ? { to: appliedTo } : {}),
      });
      const res = await fetch(url, {
        method: "GET",
        credentials: "include",
        headers: { Accept: "text/csv" },
      });
      if (!res.ok) {
        throw new Error(`HTTP ${res.status}`);
      }
      const blob = await res.blob();
      // Honor the server-provided filename when present so admins
      // get the role name in the file (server sanitizes it). Fall
      // back to a timestamped default for any unexpected response.
      const disposition = res.headers.get("Content-Disposition") ?? "";
      const match = /filename="?([^";]+)"?/i.exec(disposition);
      const stamp = new Date().toISOString().slice(0, 10).replace(/-/g, "");
      const filename = match?.[1] ?? `role-${roleId}-history-${stamp}.csv`;
      const objectUrl = URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = objectUrl;
      a.download = filename;
      document.body.appendChild(a);
      a.click();
      a.remove();
      // Defer revoke so the browser can finish the download.
      setTimeout(() => URL.revokeObjectURL(objectUrl), 1000);
    } catch (e) {
      setDownloadCsvError(
        (e as { message?: string }).message ??
          t("admin.roles.historyDownloadCsvError"),
      );
    } finally {
      setIsDownloadingCsv(false);
    }
  };

  const filtersActive =
    actorUserId !== "" || appliedFrom !== "" || appliedTo !== "";

  const filterErrors: string[] = [];
  if (!fromValid || !toValid)
    filterErrors.push(t("admin.roles.historyErrors.invalidDate"));
  else if (!orderValid)
    filterErrors.push(t("admin.roles.historyErrors.invertedDates"));

  return (
    <div className="space-y-2 pt-2" data-testid="role-history-section">
      <Label>{t("admin.roles.historyTitle")}</Label>
      <p className="text-xs text-muted-foreground">{t("admin.roles.historyHint")}</p>
      <div
        className="grid gap-2 sm:grid-cols-2 md:grid-cols-4"
        data-testid="role-history-filters"
      >
        <div className="space-y-1">
          <Label className="text-xs">{t("admin.roles.historyFilters.actor")}</Label>
          <select
            value={actorUserId === "" ? "" : String(actorUserId)}
            onChange={(e) => {
              const v = e.target.value;
              setActorUserId(v === "" ? "" : Number(v));
              // Pagination state is reset by the filtersKey effect.
            }}
            className="bg-white/70 border border-slate-200 rounded-lg px-3 py-2 text-sm w-full"
            data-testid="role-history-actor-filter"
          >
            <option value="">
              {t("admin.roles.historyFilters.allActors")}
            </option>
            {sortedUsers.map((u) => {
              const label =
                (language === "ar"
                  ? u.displayNameAr ?? u.displayNameEn
                  : u.displayNameEn ?? u.displayNameAr) ?? u.username;
              return (
                <option key={u.id} value={u.id}>
                  {label}
                </option>
              );
            })}
          </select>
        </div>
        <div className="space-y-1">
          <Label className="text-xs">{t("admin.roles.historyFilters.from")}</Label>
          <Input
            type="date"
            value={fromInput}
            onChange={(e) => setFromInput(e.target.value)}
            className="bg-white/70 border-slate-200"
            data-testid="role-history-from-input"
          />
        </div>
        <div className="space-y-1">
          <Label className="text-xs">{t("admin.roles.historyFilters.to")}</Label>
          <Input
            type="date"
            value={toInput}
            onChange={(e) => setToInput(e.target.value)}
            className="bg-white/70 border-slate-200"
            data-testid="role-history-to-input"
          />
        </div>
        <div className="flex items-end gap-2">
          <Button
            type="button"
            size="sm"
            onClick={applyFilters}
            className="flex-1"
            data-testid="role-history-apply-filters"
          >
            {t("admin.roles.historyFilters.apply")}
          </Button>
          <Button
            type="button"
            size="sm"
            variant="outline"
            onClick={resetFilters}
            disabled={!filtersActive && !fromInput && !toInput}
            data-testid="role-history-reset-filters"
          >
            {t("admin.roles.historyFilters.reset")}
          </Button>
        </div>
      </div>
      {filterErrors.map((msg, i) => (
        <p
          key={i}
          className="text-xs text-destructive"
          data-testid="role-history-filter-error"
        >
          {msg}
        </p>
      ))}
      <div
        className="text-xs text-muted-foreground"
        data-testid="role-history-showing"
      >
        {filtersValid
          ? t("admin.roles.historyShowing", {
              shown: showingCount,
              total: totalCount,
            })
          : t("admin.roles.historyErrors.fixFiltersFirst")}
      </div>
      <div
        className="border border-slate-200 rounded-xl bg-white/60 max-h-56 overflow-y-auto divide-y divide-slate-100"
        data-testid="role-history-list"
      >
        {!filtersValid ? (
          // Hide stale entries while the filter inputs are invalid so the
          // list can't be confused with the (now wrong) filtered results.
          <p
            className="text-xs text-muted-foreground p-3 text-center"
            data-testid="role-history-fix-filters"
          >
            {t("admin.roles.historyErrors.fixFiltersFirst")}
          </p>
        ) : isLoading ? (
          <div className="flex justify-center py-6 text-muted-foreground">
            <Loader2 size={16} className="animate-spin" />
          </div>
        ) : entries.length === 0 ? (
          <p
            className="text-xs text-muted-foreground p-3 text-center"
            data-testid="role-history-empty"
          >
            {filtersActive
              ? t("admin.roles.historyEmptyFiltered")
              : t("admin.roles.historyEmpty")}
          </p>
        ) : (
          entries.map((entry) => {
            const actor = entry.actor;
            const ar = actor?.displayNameAr ?? null;
            const en = actor?.displayNameEn ?? null;
            const preferred =
              language === "ar" ? ar ?? en : en ?? ar;
            const actorName =
              actor && (preferred?.trim() ? preferred : actor.username);
            return (
              <div
                key={entry.id}
                className="p-2.5 text-xs space-y-1"
                data-testid={`role-history-entry-${entry.id}`}
              >
                <div className="flex items-center justify-between gap-2 text-foreground">
                  <span className="font-medium" data-testid={`role-history-actor-${entry.id}`}>
                    {actorName ?? t("admin.roles.historyActorUnknown")}
                  </span>
                  <span
                    className="text-muted-foreground"
                    data-testid={`role-history-time-${entry.id}`}
                  >
                    {formatAuditTimestamp(entry.createdAt, language)}
                  </span>
                </div>
                {entry.addedPermissionIds.length > 0 && (
                  <div
                    className="text-emerald-700"
                    data-testid={`role-history-added-${entry.id}`}
                  >
                    <span className="font-semibold">
                      {t("admin.roles.historyAdded", {
                        count: entry.addedPermissionIds.length,
                      })}
                    </span>{" "}
                    <span className="font-mono break-all">
                      {entry.addedPermissionIds
                        .map((id) => permissionLabel(id, permissionsById))
                        .join(", ")}
                    </span>
                  </div>
                )}
                {entry.removedPermissionIds.length > 0 && (
                  <div
                    className="text-rose-700"
                    data-testid={`role-history-removed-${entry.id}`}
                  >
                    <span className="font-semibold">
                      {t("admin.roles.historyRemoved", {
                        count: entry.removedPermissionIds.length,
                      })}
                    </span>{" "}
                    <span className="font-mono break-all">
                      {entry.removedPermissionIds
                        .map((id) => permissionLabel(id, permissionsById))
                        .join(", ")}
                    </span>
                  </div>
                )}
                <div
                  className="text-muted-foreground"
                  data-testid={`role-history-total-${entry.id}`}
                >
                  {t("admin.roles.historyTotal", {
                    count: entry.newPermissionIds.length,
                  })}
                </div>
              </div>
            );
          })
        )}
      </div>
      {filtersValid && (hasMore || entries.length > 0) && (
        <div className="flex flex-wrap items-center justify-center gap-2 pt-1">
          {hasMore && (
            <Button
              type="button"
              size="sm"
              variant="outline"
              disabled={isLoadingMore || isFetching}
              onClick={loadMore}
              data-testid="role-history-load-more"
            >
              {isLoadingMore || isFetching ? (
                <Loader2 size={14} className="animate-spin" />
              ) : (
                t("admin.roles.historyLoadMore")
              )}
            </Button>
          )}
          {entries.length > 0 && (
            <Button
              type="button"
              size="sm"
              variant="outline"
              className="gap-1.5"
              disabled={isDownloadingCsv}
              onClick={downloadCsv}
              data-testid="role-history-download-csv"
            >
              {isDownloadingCsv ? (
                <Loader2 size={14} className="animate-spin" />
              ) : (
                <Download size={14} />
              )}
              {t("admin.roles.historyDownloadCsv")}
            </Button>
          )}
        </div>
      )}
      {loadMoreError && (
        <p
          className="text-xs text-destructive text-center"
          data-testid="role-history-load-more-error"
        >
          {loadMoreError}
        </p>
      )}
      {downloadCsvError && (
        <p
          className="text-xs text-destructive text-center"
          data-testid="role-history-download-csv-error"
        >
          {t("admin.roles.historyDownloadCsvError")}
        </p>
      )}
    </div>
  );
}

// ---------------------------------------------------------------------------
// PermissionAuditHistory
//
// Generalized version of RolePermissionHistory that powers the "History"
// section embedded into the User, Group and App admin dialogs. The shape of
// the audit endpoint is identical across the three entities (see
// permission_audit table); the only thing that varies is which generated
// hook to call and how to render id labels for each changeKind. We always
// call all three React Query hooks (rules-of-hooks) but only the one
// matching `targetKind` is enabled.
// ---------------------------------------------------------------------------

type PermissionAuditScope = "user" | "group" | "app";
type PermAuditLabelResolver = (
  changeKind: PermissionAuditEntryChangeKind,
  id: number,
) => string;

function PermissionAuditHistory({
  targetKind,
  targetId,
  enabled,
  language,
  scopeI18nKey,
  labelResolver,
  changeKindLabel,
}: {
  targetKind: PermissionAuditScope;
  targetId: number;
  enabled: boolean;
  language: string;
  // Translation prefix, e.g. "admin.users.history" / "admin.groups.history"
  // / "admin.apps.history". Mirrors `admin.roles.history*` keys so we get
  // bilingual support for free without forking copy per call site.
  scopeI18nKey: "admin.users.history" | "admin.groups.history" | "admin.apps.history";
  labelResolver: PermAuditLabelResolver;
  // Group history mixes user/role/app changes — the caller can render a
  // small badge per entry indicating which set was changed. Pass `null`
  // for users/apps where the change kind is fixed.
  changeKindLabel?: ((changeKind: PermissionAuditEntryChangeKind) => string) | null;
}) {
  const { t } = useTranslation();
  const testIdRoot = `${targetKind}-history`;

  const [actorUserId, setActorUserId] = useState<number | "">("");
  const [fromInput, setFromInput] = useState<string>("");
  const [toInput, setToInput] = useState<string>("");
  const [appliedFrom, setAppliedFrom] = useState<string>("");
  const [appliedTo, setAppliedTo] = useState<string>("");

  const [extraEntries, setExtraEntries] = useState<PermissionAuditEntry[]>([]);
  const [extraNextOffset, setExtraNextOffset] = useState<number | null>(null);
  const [hasExtras, setHasExtras] = useState(false);
  const [isLoadingMore, setIsLoadingMore] = useState(false);
  const [loadMoreError, setLoadMoreError] = useState<string | null>(null);

  useEffect(() => {
    setActorUserId("");
    setFromInput("");
    setToInput("");
    setAppliedFrom("");
    setAppliedTo("");
    setExtraEntries([]);
    setExtraNextOffset(null);
    setHasExtras(false);
    setLoadMoreError(null);
    setIsLoadingMore(false);
  }, [targetKind, targetId]);

  const fromValid = !appliedFrom || ROLE_HISTORY_DATE_RE.test(appliedFrom);
  const toValid = !appliedTo || ROLE_HISTORY_DATE_RE.test(appliedTo);
  const orderValid = !appliedFrom || !appliedTo || appliedFrom <= appliedTo;
  const filtersValid = fromValid && toValid && orderValid;

  const { data: users } = useListUsers(undefined, {
    query: { queryKey: getListUsersQueryKey(), enabled },
  });
  const sortedUsers = useMemo(() => {
    const list = (users ?? []).slice();
    list.sort((a, b) => {
      const aLabel =
        (language === "ar"
          ? a.displayNameAr ?? a.displayNameEn
          : a.displayNameEn ?? a.displayNameAr) ?? a.username;
      const bLabel =
        (language === "ar"
          ? b.displayNameAr ?? b.displayNameEn
          : b.displayNameEn ?? b.displayNameAr) ?? b.username;
      return aLabel.localeCompare(bLabel);
    });
    return list;
  }, [users, language]);

  const firstPageParams: GetUserPermissionAuditParams = {
    limit: ROLE_HISTORY_PAGE_SIZE,
    offset: 0,
    ...(actorUserId !== "" ? { actorUserId: actorUserId as number } : {}),
    ...(appliedFrom ? { from: appliedFrom } : {}),
    ...(appliedTo ? { to: appliedTo } : {}),
  };

  // We must call all three hooks to satisfy rules-of-hooks; the
  // `enabled` flag ensures only the one matching `targetKind` actually
  // fires a request.
  const userQuery = useGetUserPermissionAudit(targetId, firstPageParams, {
    query: {
      queryKey: getGetUserPermissionAuditQueryKey(targetId, firstPageParams),
      enabled: enabled && filtersValid && targetKind === "user",
    },
  });
  const groupQuery = useGetGroupPermissionAudit(
    targetId,
    firstPageParams as GetGroupPermissionAuditParams,
    {
      query: {
        queryKey: getGetGroupPermissionAuditQueryKey(
          targetId,
          firstPageParams as GetGroupPermissionAuditParams,
        ),
        enabled: enabled && filtersValid && targetKind === "group",
      },
    },
  );
  const appQuery = useGetAppPermissionAudit(
    targetId,
    firstPageParams as GetAppPermissionAuditParams,
    {
      query: {
        queryKey: getGetAppPermissionAuditQueryKey(
          targetId,
          firstPageParams as GetAppPermissionAuditParams,
        ),
        enabled: enabled && filtersValid && targetKind === "app",
      },
    },
  );
  const activeQuery =
    targetKind === "user" ? userQuery : targetKind === "group" ? groupQuery : appQuery;
  const { data, isLoading, isFetching } = activeQuery;

  const filtersKey = JSON.stringify(firstPageParams);
  useEffect(() => {
    setExtraEntries([]);
    setExtraNextOffset(null);
    setHasExtras(false);
    setLoadMoreError(null);
    setIsLoadingMore(false);
  }, [filtersKey]);

  const firstPageSignature = data
    ? `${data.totalCount}|${data.entries[0]?.id ?? ""}`
    : null;
  useEffect(() => {
    if (firstPageSignature == null) return;
    setExtraEntries([]);
    setExtraNextOffset(null);
    setHasExtras(false);
    setLoadMoreError(null);
    setIsLoadingMore(false);
  }, [firstPageSignature]);

  const firstPageEntries = data?.entries ?? [];
  const totalCount = data?.totalCount ?? 0;
  const entries = hasExtras
    ? [...firstPageEntries, ...extraEntries]
    : firstPageEntries;
  const showingCount = entries.length;
  const nextOffset = hasExtras ? extraNextOffset : data?.nextOffset ?? null;
  const hasMore = nextOffset !== null;

  const applyFilters = () => {
    setAppliedFrom(fromInput.trim());
    setAppliedTo(toInput.trim());
  };

  const resetFilters = () => {
    setActorUserId("");
    setFromInput("");
    setToInput("");
    setAppliedFrom("");
    setAppliedTo("");
  };

  const loadMore = async () => {
    if (nextOffset === null || isLoadingMore) return;
    setIsLoadingMore(true);
    setLoadMoreError(null);
    try {
      const params = { ...firstPageParams, offset: nextOffset };
      const next =
        targetKind === "user"
          ? await getUserPermissionAudit(targetId, params)
          : targetKind === "group"
            ? await getGroupPermissionAudit(targetId, params)
            : await getAppPermissionAudit(targetId, params);
      setExtraEntries((prev) => [...prev, ...next.entries]);
      setExtraNextOffset(next.nextOffset);
      setHasExtras(true);
    } catch (e) {
      setLoadMoreError(
        (e as { message?: string }).message ?? t("common.error"),
      );
    } finally {
      setIsLoadingMore(false);
    }
  };

  const filtersActive =
    actorUserId !== "" || appliedFrom !== "" || appliedTo !== "";

  const filterErrors: string[] = [];
  if (!fromValid || !toValid)
    filterErrors.push(t("admin.roles.historyErrors.invalidDate"));
  else if (!orderValid)
    filterErrors.push(t("admin.roles.historyErrors.invertedDates"));

  return (
    <div className="space-y-2 pt-2" data-testid={`${testIdRoot}-section`}>
      <Label>{t(`${scopeI18nKey}Title`)}</Label>
      <p className="text-xs text-muted-foreground">{t(`${scopeI18nKey}Hint`)}</p>
      <div
        className="grid gap-2 sm:grid-cols-2 md:grid-cols-4"
        data-testid={`${testIdRoot}-filters`}
      >
        <div className="space-y-1">
          <Label className="text-xs">{t("admin.roles.historyFilters.actor")}</Label>
          <select
            value={actorUserId === "" ? "" : String(actorUserId)}
            onChange={(e) => {
              const v = e.target.value;
              setActorUserId(v === "" ? "" : Number(v));
            }}
            className="bg-white/70 border border-slate-200 rounded-lg px-3 py-2 text-sm w-full"
            data-testid={`${testIdRoot}-actor-filter`}
          >
            <option value="">
              {t("admin.roles.historyFilters.allActors")}
            </option>
            {sortedUsers.map((u) => {
              const label =
                (language === "ar"
                  ? u.displayNameAr ?? u.displayNameEn
                  : u.displayNameEn ?? u.displayNameAr) ?? u.username;
              return (
                <option key={u.id} value={u.id}>
                  {label}
                </option>
              );
            })}
          </select>
        </div>
        <div className="space-y-1">
          <Label className="text-xs">{t("admin.roles.historyFilters.from")}</Label>
          <Input
            type="date"
            value={fromInput}
            onChange={(e) => setFromInput(e.target.value)}
            className="bg-white/70 border-slate-200"
            data-testid={`${testIdRoot}-from-input`}
          />
        </div>
        <div className="space-y-1">
          <Label className="text-xs">{t("admin.roles.historyFilters.to")}</Label>
          <Input
            type="date"
            value={toInput}
            onChange={(e) => setToInput(e.target.value)}
            className="bg-white/70 border-slate-200"
            data-testid={`${testIdRoot}-to-input`}
          />
        </div>
        <div className="flex items-end gap-2">
          <Button
            type="button"
            size="sm"
            onClick={applyFilters}
            className="flex-1"
            data-testid={`${testIdRoot}-apply-filters`}
          >
            {t("admin.roles.historyFilters.apply")}
          </Button>
          <Button
            type="button"
            size="sm"
            variant="outline"
            onClick={resetFilters}
            disabled={!filtersActive && !fromInput && !toInput}
            data-testid={`${testIdRoot}-reset-filters`}
          >
            {t("admin.roles.historyFilters.reset")}
          </Button>
        </div>
      </div>
      {filterErrors.map((msg, i) => (
        <p
          key={i}
          className="text-xs text-destructive"
          data-testid={`${testIdRoot}-filter-error`}
        >
          {msg}
        </p>
      ))}
      <div
        className="text-xs text-muted-foreground"
        data-testid={`${testIdRoot}-showing`}
      >
        {filtersValid
          ? t("admin.roles.historyShowing", {
              shown: showingCount,
              total: totalCount,
            })
          : t("admin.roles.historyErrors.fixFiltersFirst")}
      </div>
      <div
        className="border border-slate-200 rounded-xl bg-white/60 max-h-56 overflow-y-auto divide-y divide-slate-100"
        data-testid={`${testIdRoot}-list`}
      >
        {!filtersValid ? (
          <p
            className="text-xs text-muted-foreground p-3 text-center"
            data-testid={`${testIdRoot}-fix-filters`}
          >
            {t("admin.roles.historyErrors.fixFiltersFirst")}
          </p>
        ) : isLoading ? (
          <div className="flex justify-center py-6 text-muted-foreground">
            <Loader2 size={16} className="animate-spin" />
          </div>
        ) : entries.length === 0 ? (
          <p
            className="text-xs text-muted-foreground p-3 text-center"
            data-testid={`${testIdRoot}-empty`}
          >
            {filtersActive
              ? t(`${scopeI18nKey}EmptyFiltered`)
              : t(`${scopeI18nKey}Empty`)}
          </p>
        ) : (
          entries.map((entry) => {
            const actor = entry.actor;
            const ar = actor?.displayNameAr ?? null;
            const en = actor?.displayNameEn ?? null;
            const preferred =
              language === "ar" ? ar ?? en : en ?? ar;
            const actorName =
              actor && (preferred?.trim() ? preferred : actor.username);
            const ck = entry.changeKind;
            return (
              <div
                key={entry.id}
                className="p-2.5 text-xs space-y-1"
                data-testid={`${testIdRoot}-entry-${entry.id}`}
              >
                <div className="flex items-center justify-between gap-2 text-foreground">
                  <span
                    className="font-medium"
                    data-testid={`${testIdRoot}-actor-${entry.id}`}
                  >
                    {actorName ?? t("admin.roles.historyActorUnknown")}
                  </span>
                  <span
                    className="text-muted-foreground"
                    data-testid={`${testIdRoot}-time-${entry.id}`}
                  >
                    {formatAuditTimestamp(entry.createdAt, language)}
                  </span>
                </div>
                {changeKindLabel && (
                  <div
                    className="text-[10px] uppercase tracking-wider text-muted-foreground"
                    data-testid={`${testIdRoot}-kind-${entry.id}`}
                  >
                    {changeKindLabel(ck)}
                  </div>
                )}
                {entry.addedIds.length > 0 && (
                  <div
                    className="text-emerald-700"
                    data-testid={`${testIdRoot}-added-${entry.id}`}
                  >
                    <span className="font-semibold">
                      {t(`${scopeI18nKey}Added`, {
                        count: entry.addedIds.length,
                      })}
                    </span>{" "}
                    <span className="font-mono break-all">
                      {entry.addedIds
                        .map((id) => labelResolver(ck, id))
                        .join(", ")}
                    </span>
                  </div>
                )}
                {entry.removedIds.length > 0 && (
                  <div
                    className="text-rose-700"
                    data-testid={`${testIdRoot}-removed-${entry.id}`}
                  >
                    <span className="font-semibold">
                      {t(`${scopeI18nKey}Removed`, {
                        count: entry.removedIds.length,
                      })}
                    </span>{" "}
                    <span className="font-mono break-all">
                      {entry.removedIds
                        .map((id) => labelResolver(ck, id))
                        .join(", ")}
                    </span>
                  </div>
                )}
                <div
                  className="text-muted-foreground"
                  data-testid={`${testIdRoot}-total-${entry.id}`}
                >
                  {t(`${scopeI18nKey}Total`, {
                    count: entry.newIds.length,
                  })}
                </div>
              </div>
            );
          })
        )}
      </div>
      {filtersValid && hasMore && (
        <div className="flex justify-center pt-1">
          <Button
            type="button"
            size="sm"
            variant="outline"
            disabled={isLoadingMore || isFetching}
            onClick={loadMore}
            data-testid={`${testIdRoot}-load-more`}
          >
            {isLoadingMore || isFetching ? (
              <Loader2 size={14} className="animate-spin" />
            ) : (
              t("admin.roles.historyLoadMore")
            )}
          </Button>
        </div>
      )}
      {loadMoreError && (
        <p
          className="text-xs text-destructive text-center"
          data-testid={`${testIdRoot}-load-more-error`}
        >
          {loadMoreError}
        </p>
      )}
    </div>
  );
}

function RolesPanel({
  onOpenAuditLogForTarget,
}: {
  onOpenAuditLogForTarget: OpenAuditLogForTarget;
}) {
  const { t, i18n } = useTranslation();
  const { toast } = useToast();
  const queryClient = useQueryClient();
  const { data: roles } = useListRoles({ query: { queryKey: getListRolesQueryKey() } });
  const { data: allPermissions } = useListPermissions({
    query: { queryKey: getListPermissionsQueryKey() },
  });
  const createRole = useCreateRole();
  const updateRole = useUpdateRole();
  const deleteRole = useDeleteRole();
  const replaceRolePermissions = useReplaceRolePermissions();
  const previewRolePermissionsImpact = usePreviewRolePermissionsImpact();
  const [search, setSearch] = useState("");
  const [createOpen, setCreateOpen] = useState(false);
  const [createForm, setCreateForm] = useState({ name: "", descriptionAr: "", descriptionEn: "" });
  const [editingId, setEditingId] = useState<number | null>(null);
  const [editingIsSystem, setEditingIsSystem] = useState(false);
  const [editForm, setEditForm] = useState({ name: "", descriptionAr: "", descriptionEn: "" });
  const [originalEditName, setOriginalEditName] = useState("");
  const [editPermissionIds, setEditPermissionIds] = useState<Set<number>>(new Set());
  const [initialPermissionIds, setInitialPermissionIds] = useState<Set<number>>(new Set());
  const [deleteTarget, setDeleteTarget] = useState<{ id: number; name: string } | null>(null);
  const [deleteConflict, setDeleteConflict] = useState<{ userCount: number; groupCount: number } | null>(null);
  const [permissionsImpact, setPermissionsImpact] = useState<RolePermissionsImpact | null>(null);
  const [impactLoading, setImpactLoading] = useState(false);
  const [impactError, setImpactError] = useState(false);
  const [confirmRemoval, setConfirmRemoval] = useState(false);
  const impactRequestSeq = useRef(0);

  const editingPermissionsId = editingId ?? 0;
  const { data: editingRolePermissions, isLoading: editingPermsLoading } = useGetRolePermissions(
    editingPermissionsId,
    {
      query: {
        queryKey: getGetRolePermissionsQueryKey(editingPermissionsId),
        enabled: editingId != null,
      },
    },
  );
  const { data: editingRoleUsage } = useGetRoleUsage(editingPermissionsId, {
    query: {
      queryKey: getGetRoleUsageQueryKey(editingPermissionsId),
      enabled: editingId != null && !editingIsSystem,
    },
  });
  const permissionsById = useMemo(() => {
    const map = new Map<number, Permission>();
    for (const p of allPermissions ?? []) map.set(p.id, p);
    return map;
  }, [allPermissions]);

  useEffect(() => {
    if (editingId == null) return;
    if (!editingRolePermissions) return;
    const ids = new Set(editingRolePermissions.map((p) => p.id));
    setEditPermissionIds(ids);
    setInitialPermissionIds(ids);
  }, [editingId, editingRolePermissions]);

  const invalidate = () => queryClient.invalidateQueries({ queryKey: getListRolesQueryKey() });

  const visibleRoles = (roles ?? []).filter((r) => {
    const q = search.trim().toLowerCase();
    if (!q) return true;
    return (
      r.name.toLowerCase().includes(q) ||
      (r.descriptionAr ?? "").toLowerCase().includes(q) ||
      (r.descriptionEn ?? "").toLowerCase().includes(q)
    );
  });

  const handleCreate = () => {
    const name = createForm.name.trim();
    if (!name) return;
    createRole.mutate(
      {
        data: {
          name,
          descriptionAr: createForm.descriptionAr.trim() || null,
          descriptionEn: createForm.descriptionEn.trim() || null,
        },
      },
      {
        onSuccess: () => {
          invalidate();
          setCreateOpen(false);
          setCreateForm({ name: "", descriptionAr: "", descriptionEn: "" });
          toast({ title: t("common.success") });
        },
        onError: (err: unknown) => {
          if (err instanceof ApiError && err.status === 409) {
            toast({ title: t("admin.roles.errorNameTaken"), variant: "destructive" });
            return;
          }
          if (err instanceof ApiError && err.status === 400) {
            toast({ title: t("admin.roles.errorInvalidName"), variant: "destructive" });
            return;
          }
          toast({ title: t("common.error"), variant: "destructive" });
        },
      },
    );
  };

  const beginEdit = (role: {
    id: number;
    name: string;
    isSystem: boolean;
    descriptionAr?: string | null;
    descriptionEn?: string | null;
  }) => {
    setEditingId(role.id);
    setEditingIsSystem(role.isSystem || ROLES_PROTECTED_NAMES.has(role.name));
    setEditForm({
      name: role.name,
      descriptionAr: role.descriptionAr ?? "",
      descriptionEn: role.descriptionEn ?? "",
    });
    setOriginalEditName(role.name);
  };

  const closeEditDialog = () => {
    setEditingId(null);
    setEditPermissionIds(new Set());
    setInitialPermissionIds(new Set());
    setOriginalEditName("");
    setPermissionsImpact(null);
    setImpactLoading(false);
    setImpactError(false);
    setConfirmRemoval(false);
  };

  const editNameTrimmed = editForm.name.trim();
  const isRenaming =
    !editingIsSystem &&
    originalEditName.length > 0 &&
    editNameTrimmed.length > 0 &&
    editNameTrimmed !== originalEditName;

  const permissionsChanged = (() => {
    if (editPermissionIds.size !== initialPermissionIds.size) return true;
    for (const id of editPermissionIds) {
      if (!initialPermissionIds.has(id)) return true;
    }
    return false;
  })();

  const removedPermissionIds = useMemo(() => {
    const removed: number[] = [];
    for (const id of initialPermissionIds) {
      if (!editPermissionIds.has(id)) removed.push(id);
    }
    return removed;
  }, [editPermissionIds, initialPermissionIds]);

  const hasRemovals = removedPermissionIds.length > 0;

  // Debounced on-demand fetch of impact preview when removals are present.
  useEffect(() => {
    if (editingId == null) return;
    if (editingIsSystem) return;
    if (!hasRemovals) {
      setPermissionsImpact(null);
      setImpactLoading(false);
      setImpactError(false);
      return;
    }
    setImpactLoading(true);
    setImpactError(false);
    const editingRoleId = editingId;
    const candidate = Array.from(editPermissionIds);
    const requestId = ++impactRequestSeq.current;
    const handle = setTimeout(() => {
      previewRolePermissionsImpact.mutate(
        { id: editingRoleId, data: { permissionIds: candidate } },
        {
          onSuccess: (data) => {
            if (impactRequestSeq.current !== requestId) return;
            setPermissionsImpact(data);
            setImpactError(false);
            setImpactLoading(false);
          },
          onError: () => {
            if (impactRequestSeq.current !== requestId) return;
            setPermissionsImpact(null);
            setImpactError(true);
            setImpactLoading(false);
          },
        },
      );
    }, 350);
    return () => clearTimeout(handle);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [editingId, editingIsSystem, hasRemovals, editPermissionIds, initialPermissionIds]);

  const handleEdit = () => {
    if (editingId == null) return;
    if (
      !editingIsSystem &&
      hasRemovals &&
      !confirmRemoval &&
      permissionsImpact &&
      permissionsImpact.totalAffectedUsers > 0
    ) {
      setConfirmRemoval(true);
      return;
    }
    const editingRoleId = editingId;
    const name = editForm.name.trim();
    if (!name) return;

    const savePermissionsThenClose = () => {
      if (editingIsSystem || !permissionsChanged) {
        invalidate();
        closeEditDialog();
        toast({ title: t("common.success") });
        return;
      }
      replaceRolePermissions.mutate(
        {
          id: editingRoleId,
          data: { permissionIds: Array.from(editPermissionIds) },
        },
        {
          onSuccess: () => {
            invalidate();
            queryClient.invalidateQueries({
              queryKey: getGetRolePermissionsQueryKey(editingRoleId),
            });
            // Invalidate every cached page/filter for this role's audit so
            // the History panel picks up the new entry no matter which
            // pagination/filter the admin currently has applied.
            queryClient.invalidateQueries({
              queryKey: [`/api/roles/${editingRoleId}/audit`],
            });
            closeEditDialog();
            toast({ title: t("common.success") });
          },
          onError: (err: unknown) => {
            if (err instanceof ApiError && err.status === 400) {
              const code = (err.data as { code?: string } | null)?.code;
              const key =
                code === "system_role_permissions"
                  ? "admin.roles.errorSystemPermissions"
                  : "admin.roles.errorPermissionsSave";
              toast({ title: t(key), variant: "destructive" });
              return;
            }
            toast({ title: t("admin.roles.errorPermissionsSave"), variant: "destructive" });
          },
        },
      );
    };

    updateRole.mutate(
      {
        id: editingRoleId,
        data: {
          ...(editingIsSystem ? {} : { name }),
          descriptionAr: editForm.descriptionAr.trim() || null,
          descriptionEn: editForm.descriptionEn.trim() || null,
        },
      },
      {
        onSuccess: () => {
          savePermissionsThenClose();
        },
        onError: (err: unknown) => {
          if (err instanceof ApiError && err.status === 409) {
            toast({ title: t("admin.roles.errorNameTaken"), variant: "destructive" });
            return;
          }
          if (err instanceof ApiError && err.status === 400) {
            const code = (err.data as { code?: string } | null)?.code;
            const key = code === "system_role_rename" ? "admin.roles.errorSystemRename" : "admin.roles.errorInvalidName";
            toast({ title: t(key), variant: "destructive" });
            return;
          }
          toast({ title: t("common.error"), variant: "destructive" });
        },
      },
    );
  };

  const togglePermission = (id: number) => {
    if (editingIsSystem) return;
    setEditPermissionIds((prev) => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });
  };

  const handleDelete = () => {
    if (!deleteTarget) return;
    deleteRole.mutate(
      { id: deleteTarget.id },
      {
        onSuccess: () => {
          invalidate();
          setDeleteTarget(null);
          setDeleteConflict(null);
          toast({ title: t("common.success") });
        },
        onError: (err: unknown) => {
          if (err instanceof ApiError && err.status === 409 && err.data) {
            const data = err.data as { userCount: number; groupCount: number };
            setDeleteConflict({ userCount: data.userCount, groupCount: data.groupCount });
            return;
          }
          toast({ title: t("common.error"), variant: "destructive" });
          setDeleteTarget(null);
        },
      },
    );
  };

  return (
    <div className="space-y-3">
      <div className="flex items-center gap-2">
        <Input
          placeholder={t("admin.roles.searchPlaceholder")}
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          className="bg-white/70 border-slate-200 flex-1"
          data-testid="role-search"
        />
        <Button
          size="sm"
          onClick={() => {
            setCreateForm({ name: "", descriptionAr: "", descriptionEn: "" });
            setCreateOpen(true);
          }}
          data-testid="create-role-btn"
        >
          <Plus size={14} className="me-1" />
          {t("admin.roles.addRole")}
        </Button>
      </div>

      <div className="grid gap-3 md:grid-cols-2">
        {visibleRoles.map((r) => (
          <div key={r.id} className="glass-panel rounded-2xl p-4 space-y-2" data-testid={`role-card-${r.id}`}>
            <div className="flex items-start justify-between gap-2">
              <div className="min-w-0">
                <div className="font-semibold text-foreground flex items-center gap-2">
                  <KeyRound size={16} className="text-primary" />
                  <span className="truncate">{r.name}</span>
                  {(r.isSystem || ROLES_PROTECTED_NAMES.has(r.name)) && (
                    <span className="text-[10px] px-1.5 py-0.5 rounded-full bg-amber-100 text-amber-700 uppercase tracking-wider">
                      {t("admin.roles.system")}
                    </span>
                  )}
                </div>
                {(r.descriptionAr || r.descriptionEn) && (
                  <p className="text-xs text-muted-foreground mt-1">
                    {r.descriptionEn || r.descriptionAr}
                  </p>
                )}
                {r.descriptionAr && r.descriptionEn && (
                  <p className="text-xs text-muted-foreground mt-0.5" dir="rtl">
                    {r.descriptionAr}
                  </p>
                )}
                {(() => {
                  const userCount = r.userCount ?? 0;
                  const groupCount = r.groupCount ?? 0;
                  const parts: string[] = [];
                  if (userCount > 0) parts.push(t("admin.roles.usersCount", { count: userCount }));
                  if (groupCount > 0) parts.push(t("admin.roles.groupsCount", { count: groupCount }));
                  if (parts.length === 0) return null;
                  return (
                    <div
                      className="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-[11px] text-muted-foreground pt-0.5"
                      data-testid={`role-counts-${r.id}`}
                    >
                      {parts.map((p, i) => (
                        <span key={i} className="flex items-center gap-2">
                          {i > 0 && <span aria-hidden="true">•</span>}
                          <span>{p}</span>
                        </span>
                      ))}
                    </div>
                  );
                })()}
              </div>
              <div className="flex items-center gap-1 shrink-0">
                <button
                  onClick={() => beginEdit(r)}
                  className="p-1.5 hover:bg-slate-100 rounded-lg text-muted-foreground hover:text-foreground"
                  data-testid={`edit-role-${r.id}`}
                  aria-label={t("admin.roles.edit")}
                >
                  <Pencil size={14} />
                </button>
                {!(r.isSystem || ROLES_PROTECTED_NAMES.has(r.name)) && (
                  <button
                    onClick={() => {
                      setDeleteConflict(null);
                      setDeleteTarget({ id: r.id, name: r.name });
                    }}
                    className="p-1.5 hover:bg-destructive/20 rounded-lg text-muted-foreground hover:text-destructive"
                    data-testid={`delete-role-${r.id}`}
                    aria-label={t("admin.roles.delete")}
                  >
                    <Trash2 size={14} />
                  </button>
                )}
              </div>
            </div>
          </div>
        ))}
        {visibleRoles.length === 0 && (
          <div className="glass-panel rounded-2xl p-6 text-center text-sm text-muted-foreground md:col-span-2">
            {t("admin.roles.empty")}
          </div>
        )}
      </div>

      {createOpen && (
        <div className="fixed inset-0 bg-slate-900/30 backdrop-blur-sm z-50 flex items-center justify-center p-4">
          <div className="glass-panel rounded-3xl p-6 w-full max-w-sm space-y-3" data-testid="create-role-dialog">
            <h2 className="font-semibold text-foreground">{t("admin.roles.addRole")}</h2>
            <div className="space-y-1">
              <Label>{t("admin.roles.name")}</Label>
              <Input
                value={createForm.name}
                onChange={(e) => setCreateForm({ ...createForm, name: e.target.value })}
                className="bg-white/70 border-slate-200"
                placeholder={t("admin.roles.namePlaceholder")}
                data-testid="role-name-input"
              />
              <p className="text-xs text-muted-foreground">{t("admin.roles.nameHint")}</p>
            </div>
            <div className="space-y-1">
              <Label>{t("admin.roles.descriptionAr")}</Label>
              <Input
                value={createForm.descriptionAr}
                onChange={(e) => setCreateForm({ ...createForm, descriptionAr: e.target.value })}
                className="bg-white/70 border-slate-200"
                dir="rtl"
                data-testid="role-desc-ar-input"
              />
            </div>
            <div className="space-y-1">
              <Label>{t("admin.roles.descriptionEn")}</Label>
              <Input
                value={createForm.descriptionEn}
                onChange={(e) => setCreateForm({ ...createForm, descriptionEn: e.target.value })}
                className="bg-white/70 border-slate-200"
                dir="ltr"
                data-testid="role-desc-en-input"
              />
            </div>
            <div className="flex gap-2 pt-2">
              <Button variant="outline" className="flex-1" onClick={() => setCreateOpen(false)}>
                {t("common.cancel")}
              </Button>
              <Button
                className="flex-1"
                disabled={!createForm.name.trim() || createRole.isPending}
                onClick={handleCreate}
                data-testid="create-role-submit"
              >
                {createRole.isPending ? <Loader2 size={14} className="animate-spin" /> : t("common.save")}
              </Button>
            </div>
          </div>
        </div>
      )}

      {editingId != null && (
        <div className="fixed inset-0 bg-slate-900/30 backdrop-blur-sm z-50 flex items-center justify-center p-4">
          <div
            className="glass-panel rounded-3xl p-6 w-full max-w-md space-y-3 max-h-[90vh] overflow-y-auto"
            data-testid="edit-role-dialog"
          >
            <h2 className="font-semibold text-foreground">{t("admin.roles.editRole")}</h2>
            <div className="space-y-1">
              <Label>{t("admin.roles.name")}</Label>
              <Input
                value={editForm.name}
                onChange={(e) => setEditForm({ ...editForm, name: e.target.value })}
                className="bg-white/70 border-slate-200"
                placeholder={t("admin.roles.namePlaceholder")}
                disabled={editingIsSystem}
                data-testid="role-edit-name"
              />
              <p className="text-xs text-muted-foreground">
                {editingIsSystem ? t("admin.roles.editSystemNameHint") : t("admin.roles.nameHint")}
              </p>
              {isRenaming && (
                <div
                  className="mt-2 rounded-xl border border-amber-300 bg-amber-50 p-3 text-xs text-amber-900 space-y-1"
                  data-testid="role-rename-warning"
                  role="alert"
                >
                  <p className="font-semibold">
                    {t("admin.roles.renameWarningTitle", {
                      from: originalEditName,
                      to: editNameTrimmed,
                    })}
                  </p>
                  <p>{t("admin.roles.renameWarningBody")}</p>
                  {editingRoleUsage && (
                    <p
                      className="text-amber-800"
                      data-testid="role-rename-usage"
                    >
                      {t("admin.roles.renameUsage", {
                        users: editingRoleUsage.userCount,
                        groups: editingRoleUsage.groupCount,
                      })}
                    </p>
                  )}
                </div>
              )}
            </div>
            <div className="space-y-1">
              <Label>{t("admin.roles.descriptionAr")}</Label>
              <Input
                value={editForm.descriptionAr}
                onChange={(e) => setEditForm({ ...editForm, descriptionAr: e.target.value })}
                className="bg-white/70 border-slate-200"
                dir="rtl"
                data-testid="role-edit-desc-ar"
              />
            </div>
            <div className="space-y-1">
              <Label>{t("admin.roles.descriptionEn")}</Label>
              <Input
                value={editForm.descriptionEn}
                onChange={(e) => setEditForm({ ...editForm, descriptionEn: e.target.value })}
                className="bg-white/70 border-slate-200"
                dir="ltr"
                data-testid="role-edit-desc-en"
              />
            </div>
            <div className="space-y-1 pt-2">
              <Label>{t("admin.roles.permissions")}</Label>
              <p className="text-xs text-muted-foreground">
                {editingIsSystem
                  ? t("admin.roles.permissionsSystemHint")
                  : t("admin.roles.permissionsHint")}
              </p>
              <div
                className="border border-slate-200 rounded-xl bg-white/60 max-h-56 overflow-y-auto divide-y divide-slate-100"
                data-testid="role-permissions-list"
              >
                {editingPermsLoading || !allPermissions ? (
                  <div className="flex justify-center py-6 text-muted-foreground">
                    <Loader2 size={16} className="animate-spin" />
                  </div>
                ) : allPermissions.length === 0 ? (
                  <p className="text-sm text-muted-foreground p-3 text-center">
                    {t("admin.roles.permissionsEmpty")}
                  </p>
                ) : (
                  allPermissions.map((p) => {
                    const checked = editPermissionIds.has(p.id);
                    const desc =
                      i18n.language === "ar"
                        ? p.descriptionAr ?? p.descriptionEn
                        : p.descriptionEn ?? p.descriptionAr;
                    return (
                      <label
                        key={p.id}
                        className={cn(
                          "flex items-start gap-2 p-2.5 text-sm",
                          editingIsSystem
                            ? "cursor-not-allowed opacity-80"
                            : "cursor-pointer hover:bg-slate-50",
                        )}
                        data-testid={`role-perm-row-${p.id}`}
                      >
                        <input
                          type="checkbox"
                          className="mt-0.5"
                          checked={checked}
                          disabled={editingIsSystem}
                          onChange={() => togglePermission(p.id)}
                          data-testid={`role-perm-checkbox-${p.id}`}
                        />
                        <div className="min-w-0 flex-1">
                          <div className="font-mono text-xs text-foreground">{p.name}</div>
                          {desc && (
                            <p className="text-xs text-muted-foreground mt-0.5">{desc}</p>
                          )}
                        </div>
                      </label>
                    );
                  })
                )}
              </div>
              {!editingIsSystem && hasRemovals && (
                <div
                  className="mt-2 rounded-xl border border-amber-300 bg-amber-50 p-3 text-xs text-amber-900 space-y-2"
                  data-testid="role-perm-impact"
                  role="status"
                  aria-live="polite"
                >
                  <p className="font-semibold">
                    {t("admin.roles.impactTitle", { count: removedPermissionIds.length })}
                  </p>
                  {impactLoading ? (
                    <div className="flex items-center gap-2 text-amber-800">
                      <Loader2 size={12} className="animate-spin" />
                      <span>{t("admin.roles.impactLoading")}</span>
                    </div>
                  ) : impactError || !permissionsImpact ? (
                    <p
                      className="text-amber-900"
                      data-testid="role-perm-impact-error"
                    >
                      {t("admin.roles.impactError")}
                    </p>
                  ) : permissionsImpact.removed.length === 0 ? (
                    <p>{t("admin.roles.impactNoUsers")}</p>
                  ) : (
                    <>
                      <ul
                        className="space-y-1.5 ps-4 list-disc"
                        data-testid="role-perm-impact-list"
                      >
                        {permissionsImpact.removed.map((item) => (
                          <li key={item.permissionId}>
                            <span className="font-mono">{item.permissionName}</span>
                            {": "}
                            <span data-testid={`role-perm-impact-counts-${item.permissionId}`}>
                              {t("admin.roles.impactPerPermission", {
                                users: item.userCount,
                                groups: item.groupCount,
                              })}
                            </span>
                            {item.groupCount > 0 && (
                              <span className="text-amber-800">
                                {" "}
                                {t("admin.roles.impactViaGroups", {
                                  groups: item.groups.map((g) => g.name).join(", "),
                                })}
                              </span>
                            )}
                          </li>
                        ))}
                      </ul>
                      {permissionsImpact.totalAffectedUsers > 0 && (
                        <p
                          className="font-semibold text-amber-900"
                          data-testid="role-perm-impact-total"
                        >
                          {t("admin.roles.impactTotal", {
                            count: permissionsImpact.totalAffectedUsers,
                          })}
                        </p>
                      )}
                    </>
                  )}
                </div>
              )}
            </div>
            <RolePermissionHistory
              roleId={editingPermissionsId}
              enabled={editingId != null}
              permissionsById={permissionsById}
              language={i18n.language}
            />
            <RecentActivityForTarget
              targetType="role"
              targetId={editingPermissionsId}
              enabled={editingId != null}
              lang={i18n.language}
              onViewFullHistory={() => {
                closeEditDialog();
                onOpenAuditLogForTarget("role", editingPermissionsId);
              }}
            />
            <div className="flex gap-2 pt-2">
              <Button variant="outline" className="flex-1" onClick={closeEditDialog}>
                {t("common.cancel")}
              </Button>
              <Button
                className="flex-1"
                disabled={
                  !editForm.name.trim() ||
                  updateRole.isPending ||
                  replaceRolePermissions.isPending ||
                  (!editingIsSystem && hasRemovals && (impactLoading || impactError))
                }
                onClick={handleEdit}
                data-testid="edit-role-submit"
              >
                {updateRole.isPending || replaceRolePermissions.isPending ? (
                  <Loader2 size={14} className="animate-spin" />
                ) : (
                  t("common.save")
                )}
              </Button>
            </div>
          </div>
        </div>
      )}

      {confirmRemoval && permissionsImpact && permissionsImpact.totalAffectedUsers > 0 && (
        <div className="fixed inset-0 bg-slate-900/40 backdrop-blur-sm z-[60] flex items-center justify-center p-4">
          <div
            className="glass-panel rounded-3xl p-6 w-full max-w-md space-y-3"
            data-testid="role-perm-confirm-dialog"
            role="alertdialog"
            aria-modal="true"
          >
            <h2 className="font-semibold text-foreground">
              {t("admin.roles.confirmRemovalTitle")}
            </h2>
            <p className="text-sm text-foreground">
              {t("admin.roles.confirmRemovalBody", {
                count: permissionsImpact.totalAffectedUsers,
              })}
            </p>
            <ul
              className="text-xs text-muted-foreground space-y-1 ps-4 list-disc max-h-40 overflow-y-auto"
            >
              {permissionsImpact.removed.map((item) => (
                <li key={item.permissionId}>
                  <span className="font-mono text-foreground">{item.permissionName}</span>
                  {": "}
                  {t("admin.roles.impactPerPermission", {
                    users: item.userCount,
                    groups: item.groupCount,
                  })}
                </li>
              ))}
            </ul>
            <div className="flex gap-2 pt-2">
              <Button
                variant="outline"
                className="flex-1"
                onClick={() => setConfirmRemoval(false)}
                data-testid="role-perm-confirm-cancel"
              >
                {t("common.cancel")}
              </Button>
              <Button
                variant="destructive"
                className="flex-1"
                disabled={updateRole.isPending || replaceRolePermissions.isPending}
                onClick={handleEdit}
                data-testid="role-perm-confirm-submit"
              >
                {updateRole.isPending || replaceRolePermissions.isPending ? (
                  <Loader2 size={14} className="animate-spin" />
                ) : (
                  t("admin.roles.confirmRemovalAction")
                )}
              </Button>
            </div>
          </div>
        </div>
      )}

      {deleteTarget && (
        <div className="fixed inset-0 bg-slate-900/30 backdrop-blur-sm z-50 flex items-center justify-center p-4">
          <div className="glass-panel rounded-3xl p-6 w-full max-w-sm space-y-3" data-testid="delete-role-dialog">
            <h2 className="font-semibold text-foreground">
              {t("admin.roles.deleteTitle", { name: deleteTarget.name })}
            </h2>
            {deleteConflict ? (
              <>
                <p className="text-sm text-destructive">{t("admin.roles.deleteConflict")}</p>
                <ul className="text-sm text-foreground space-y-1 ps-4 list-disc">
                  <li>{t("admin.roles.usersCount", { count: deleteConflict.userCount })}</li>
                  <li>{t("admin.roles.groupsCount", { count: deleteConflict.groupCount })}</li>
                </ul>
                <p className="text-xs text-muted-foreground">{t("admin.roles.deleteConflictHint")}</p>
              </>
            ) : (
              <p className="text-sm text-muted-foreground">{t("admin.roles.deleteEmptyBody")}</p>
            )}
            <div className="flex gap-2 pt-2">
              <Button
                variant="outline"
                className="flex-1"
                onClick={() => {
                  setDeleteTarget(null);
                  setDeleteConflict(null);
                }}
              >
                {t("common.cancel")}
              </Button>
              {!deleteConflict && (
                <Button
                  variant="destructive"
                  className="flex-1"
                  disabled={deleteRole.isPending}
                  onClick={handleDelete}
                  data-testid="delete-role-confirm"
                >
                  {deleteRole.isPending ? <Loader2 size={14} className="animate-spin" /> : t("admin.roles.deleteConfirm")}
                </Button>
              )}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

// ===== Audit Log Panel =====
const DATE_RE = /^\d{4}-\d{2}-\d{2}$/;

function formatAuditTimestamp(value: string | Date, lang: string): string {
  const d = value instanceof Date ? value : new Date(value);
  return new Intl.DateTimeFormat(lang === "ar" ? "ar-u-nu-latn" : "en-US", {
    dateStyle: "medium",
    timeStyle: "short",
    numberingSystem: "latn",
    hour12: false,
  }).format(d);
}

function actorLabel(actor: AuditLogEntry["actor"], lang: string): string {
  if (!actor) return "—";
  const ar = actor.displayNameAr ?? null;
  const en = actor.displayNameEn ?? null;
  const preferred = lang === "ar" ? ar ?? en : en ?? ar;
  return preferred && preferred.trim() ? preferred : actor.username;
}

type AuditTFunction = ReturnType<typeof useTranslation>["t"];

// Map of well-known dependency-count metadata keys → unit i18n root used by
// `unitLabel`. Keys not in this map are skipped from the inline chip strip.
const DEPENDENCY_COUNT_KEYS: Record<string, string> = {
  orderCount: "order",
  noteCount: "note",
  groupCount: "group",
  memberCount: "member",
  appCount: "app",
  roleCount: "role",
  openCount: "open",
};

// When a dependency chip key maps to a known audit-log target_type, clicking
// the chip pivots to "audit log filtered by that target_type". Other chip
// keys (orders, messages, notes, conversations, opens) have no audit_logs
// rows of their own, so they pivot to the parent entity's audit history
// instead (target_type + target_id of the deletion row).
const DEPENDENCY_CHIP_TARGET_TYPES: Record<string, string> = {
  groupCount: "group",
  memberCount: "user",
  appCount: "app",
  roleCount: "role",
};

type AuditTargetPivot = {
  targetType: string;
  targetId: number | null;
};

function isForceDeleteEntry(entry: AuditLogEntry): boolean {
  const action = entry.action;
  if (action.endsWith(".force_delete")) return true;
  if (action === "user.delete" || action === "app.delete" || action === "group.delete") {
    const meta = asRecord(entry.metadata);
    return meta.force === true;
  }
  return false;
}

// Pulls a human-readable display name for a deleted entity from its audit
// metadata so the row can show "service #4821 · My Service" or "user #1234 ·
// Ahmed Al-Saleh" inline without admins having to expand the JSON. Applies
// to every force-delete row (where the dep counts are also useful) and to
// non-force `user.delete` rows so admins can recognise the deleted person
// by name even when the deletion was clean. Returns null when there is no
// usable name field in the metadata.
function deletedEntityName(
  entry: AuditLogEntry,
  lang: string,
): string | null {
  if (!isForceDeleteEntry(entry) && entry.action !== "user.delete") return null;
  const meta = asRecord(entry.metadata);
  const en =
    asString(meta.nameEn) ??
    asString(meta.appNameEn) ??
    asString(meta.displayNameEn);
  const ar =
    asString(meta.nameAr) ??
    asString(meta.appNameAr) ??
    asString(meta.displayNameAr);
  const localized = lang === "ar" ? ar ?? en : en ?? ar;
  if (localized) return localized;
  const plain = asString(meta.name) ?? asString(meta.appSlug);
  if (plain) return plain;
  const username = asString(meta.username);
  if (username) return `@${username}`;
  return null;
}

function dependencyChips(
  entry: AuditLogEntry,
  t: AuditTFunction,
): Array<{ key: string; label: string; pivot: AuditTargetPivot }> {
  const meta = asRecord(entry.metadata);
  const chips: Array<{ key: string; label: string; pivot: AuditTargetPivot }> =
    [];
  for (const [metaKey, unitRoot] of Object.entries(DEPENDENCY_COUNT_KEYS)) {
    const value = asNumber(meta[metaKey]);
    if (value == null || value <= 0) continue;
    const mappedTargetType = DEPENDENCY_CHIP_TARGET_TYPES[metaKey];
    const pivot: AuditTargetPivot = mappedTargetType
      ? { targetType: mappedTargetType, targetId: null }
      : { targetType: entry.targetType, targetId: entry.targetId ?? null };
    chips.push({
      key: metaKey,
      label: unitLabel(t, unitRoot, value),
      pivot,
    });
  }
  return chips;
}

function AuditLogRow({
  entry,
  lang,
  onPivotToTarget,
  onPivotToActor,
}: {
  entry: AuditLogEntry;
  lang: string;
  onPivotToTarget: (pivot: AuditTargetPivot) => void;
  // #197: clicking the actor name/avatar pivots the panel to "everything that
  // person did" — symmetrical with target-chip pivots above.
  onPivotToActor: (actorUserId: number) => void;
}) {
  const { t } = useTranslation();
  const [expanded, setExpanded] = useState(false);
  const hasMetadata =
    entry.metadata != null && Object.keys(entry.metadata as object).length > 0;
  const actor = entry.actor;
  const initial = (actorLabel(actor, lang)[0] ?? "?").toUpperCase();
  const summary = formatAuditSummary(entry, t, lang);
  const isForced = isForceDeleteEntry(entry);
  const chips = isForced ? dependencyChips(entry, t) : [];
  const deletedName = deletedEntityName(entry, lang);
  const showDeletedTarget = deletedName != null && entry.targetId != null;
  // #197: rows whose actor is null (system / deleted user) cannot pivot — the
  // server filter requires a concrete actorUserId, so we render the same
  // avatar + name without the click affordance.
  const canPivotActor = actor != null;
  const actorPivotAria = actor
    ? t("admin.audit.actorPivotAria", { name: actorLabel(actor, lang) })
    : undefined;
  return (
    <div
      className="glass-panel rounded-2xl p-3 space-y-2"
      data-testid={`audit-row-${entry.id}`}
    >
      <div className="flex items-start gap-3">
        {canPivotActor ? (
          <button
            type="button"
            onClick={() => onPivotToActor(actor!.id)}
            aria-label={actorPivotAria}
            title={actorPivotAria}
            className="rounded-full focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-400 hover:opacity-80 transition-opacity"
            data-testid={`audit-row-actor-avatar-${entry.id}`}
          >
            <LeaderboardAvatar
              src={actor?.avatarUrl ?? null}
              initial={initial}
              alt={actor?.username ?? ""}
            />
          </button>
        ) : (
          <LeaderboardAvatar src={null} initial={initial} alt="" />
        )}
        <div className="min-w-0 flex-1">
          <div className="flex flex-wrap items-baseline gap-x-2 gap-y-0.5">
            {canPivotActor ? (
              <button
                type="button"
                onClick={() => onPivotToActor(actor!.id)}
                aria-label={actorPivotAria}
                title={actorPivotAria}
                className="font-medium text-sm text-foreground truncate text-start hover:text-sky-700 hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-400 rounded-sm"
                data-testid={`audit-row-actor-name-${entry.id}`}
              >
                {actorLabel(actor, lang)}
              </button>
            ) : (
              <span className="font-medium text-sm text-foreground truncate">
                {actorLabel(actor, lang)}
              </span>
            )}
            {actor && (
              <span className="text-xs text-muted-foreground">
                @{actor.username}
              </span>
            )}
          </div>
          {summary ? (
            <div
              className="text-sm text-foreground mt-1 leading-snug"
              data-testid={`audit-summary-${entry.id}`}
            >
              {summary}
            </div>
          ) : (
            <div className="text-xs text-muted-foreground mt-1">
              {showDeletedTarget
                ? t("admin.audit.targetWithName", {
                    type: entry.targetType,
                    id: entry.targetId,
                    name: deletedName,
                  })
                : t("admin.audit.target", {
                    type: entry.targetType,
                    id: entry.targetId ?? "—",
                  })}
            </div>
          )}
          {summary && showDeletedTarget && (
            <div
              className="text-xs text-muted-foreground mt-0.5"
              data-testid={`audit-deleted-target-${entry.id}`}
            >
              {t("admin.audit.targetWithName", {
                type: entry.targetType,
                id: entry.targetId,
                name: deletedName,
              })}
            </div>
          )}
          <div className="flex flex-wrap items-center gap-1.5 mt-1">
            <span
              className={cn(
                "inline-block text-[11px] font-mono px-2 py-0.5 rounded-md",
                isForced
                  ? "bg-rose-100 text-rose-800"
                  : "bg-amber-100 text-amber-800",
              )}
              data-testid={`audit-action-${entry.id}`}
            >
              {entry.action}
            </span>
            <span className="text-xs text-muted-foreground">
              {formatAuditTimestamp(entry.createdAt, lang)}
            </span>
          </div>
          {chips.length > 0 && (
            <div
              className="flex flex-wrap items-center gap-1.5 mt-1.5"
              data-testid={`audit-deps-${entry.id}`}
              aria-label={t("admin.audit.dependencies.label")}
            >
              {chips.map((chip) => {
                const ariaLabel = chip.pivot.targetId != null
                  ? t("admin.audit.dependencies.chipAriaParent", {
                      label: chip.label,
                      type: entry.targetType,
                      id: chip.pivot.targetId,
                    })
                  : t("admin.audit.dependencies.chipAriaTargetType", {
                      label: chip.label,
                      type: chip.pivot.targetType,
                    });
                return (
                  <button
                    type="button"
                    key={chip.key}
                    onClick={() => onPivotToTarget(chip.pivot)}
                    aria-label={ariaLabel}
                    title={ariaLabel}
                    className="inline-flex items-center text-[11px] px-2 py-0.5 rounded-md bg-rose-50 text-rose-700 border border-rose-100 hover:bg-rose-100 hover:border-rose-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-rose-400 transition-colors cursor-pointer"
                    data-testid={`audit-dep-${entry.id}-${chip.key}`}
                  >
                    {chip.label}
                  </button>
                );
              })}
            </div>
          )}
        </div>
        {hasMetadata && (
          <button
            onClick={() => setExpanded((v) => !v)}
            className="p-1.5 rounded-lg hover:bg-slate-100 text-muted-foreground hover:text-foreground shrink-0"
            aria-expanded={expanded}
            data-testid={`audit-toggle-${entry.id}`}
          >
            <ChevronDown
              size={16}
              className={cn("transition-transform", expanded ? "rotate-180" : "")}
            />
          </button>
        )}
      </div>
      {expanded && hasMetadata && (
        <pre
          className="text-[11px] bg-slate-100/80 rounded-lg p-2 overflow-x-auto leading-snug whitespace-pre-wrap break-all"
          dir="ltr"
          data-testid={`audit-metadata-${entry.id}`}
        >
          {JSON.stringify(entry.metadata, null, 2)}
        </pre>
      )}
    </div>
  );
}

// #196: Inline "Recent activity" strip rendered inside each entity's detail
// editor (services / apps / groups / users / roles). Reuses the same
// formatAuditSummary wording as the full audit log so the two views read
// consistently. The "View full history" button hands back control to the
// parent so it can switch sections AND set the targetType/targetId hash —
// see openAuditLogForTarget() in AdminPage for that orchestration.
function RecentActivityForTarget({
  targetType,
  targetId,
  enabled,
  lang,
  onViewFullHistory,
}: {
  targetType: "app" | "service" | "user" | "group" | "role";
  targetId: number;
  enabled: boolean;
  lang: string;
  onViewFullHistory: () => void;
}) {
  const { t } = useTranslation();
  const params: ListAuditLogsParams = {
    targetType,
    targetId,
    limit: 10,
    offset: 0,
  };
  const queryKey = getListAuditLogsQueryKey(params);
  const { data, isLoading } = useListAuditLogs(params, {
    query: { queryKey, enabled },
  });
  const entries = data?.entries ?? [];
  const totalCount = data?.totalCount ?? 0;
  const testIdRoot = `recent-activity-${targetType}-${targetId}`;
  return (
    <div
      className="space-y-2 pt-3 border-t border-slate-200/70"
      data-testid={testIdRoot}
    >
      <div className="flex items-center justify-between gap-2">
        <h3 className="text-sm font-semibold text-foreground">
          {t("admin.audit.recent.title")}
        </h3>
        {totalCount > entries.length && (
          <span className="text-[11px] text-muted-foreground">
            {t("admin.audit.showing", {
              shown: entries.length,
              total: totalCount,
            })}
          </span>
        )}
      </div>
      {isLoading ? (
        <div
          className="flex items-center gap-2 text-xs text-muted-foreground"
          data-testid={`${testIdRoot}-loading`}
        >
          <Loader2 size={12} className="animate-spin" />
          <span>{t("admin.audit.recent.loading")}</span>
        </div>
      ) : entries.length === 0 ? (
        <p
          className="text-xs text-muted-foreground"
          data-testid={`${testIdRoot}-empty`}
        >
          {t("admin.audit.recent.empty")}
        </p>
      ) : (
        <ul
          className="space-y-1.5"
          data-testid={`${testIdRoot}-list`}
        >
          {entries.map((entry) => {
            const summary =
              formatAuditSummary(entry, t, lang) ??
              t("admin.audit.target", {
                type: entry.targetType,
                id: entry.targetId ?? "—",
              });
            return (
              <li
                key={entry.id}
                className="text-xs text-foreground rounded-lg bg-white/60 border border-slate-100 px-2.5 py-1.5"
                data-testid={`${testIdRoot}-row-${entry.id}`}
              >
                <div
                  className="leading-snug"
                  data-testid={`${testIdRoot}-summary-${entry.id}`}
                >
                  {summary}
                </div>
                <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-[11px] text-muted-foreground mt-0.5">
                  <span className="truncate">
                    {actorLabel(entry.actor, lang)}
                  </span>
                  <span aria-hidden="true">·</span>
                  <span>{formatAuditTimestamp(entry.createdAt, lang)}</span>
                </div>
              </li>
            );
          })}
        </ul>
      )}
      <button
        type="button"
        onClick={onViewFullHistory}
        aria-label={t("admin.audit.recent.viewAllAria", { type: targetType })}
        className="text-xs text-primary hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 rounded-sm"
        data-testid={`${testIdRoot}-view-all`}
      >
        {t("admin.audit.recent.viewAll")}
      </button>
    </div>
  );
}

// Parses targetType / targetId values out of the admin page URL hash so the
// audit log panel can deep-link to a pre-filtered view (e.g. when an admin
// clicks a dependency chip on a forced-delete row).
function parseAuditHashTarget(): AuditTargetPivot {
  if (typeof window === "undefined") return { targetType: "", targetId: null };
  const raw = window.location.hash.replace(/^#/, "");
  const params = new URLSearchParams(raw);
  const targetType = params.get("targetType")?.trim() ?? "";
  const targetIdRaw = params.get("targetId")?.trim();
  let targetId: number | null = null;
  if (targetIdRaw) {
    const n = Number(targetIdRaw);
    if (Number.isFinite(n) && Number.isInteger(n) && n >= 1) {
      targetId = n;
    }
  }
  return { targetType, targetId };
}

// Updates the admin URL hash (which carries `section=audit-log`) so the
// active targetType/targetId filters survive reload and back/forward nav.
// Uses replaceState to avoid polluting browser history with every tweak.
function syncAuditHashTarget(pivot: AuditTargetPivot) {
  if (typeof window === "undefined") return;
  const raw = window.location.hash.replace(/^#/, "");
  const params = new URLSearchParams(raw);
  if (pivot.targetType) {
    params.set("targetType", pivot.targetType);
  } else {
    params.delete("targetType");
  }
  if (pivot.targetId != null) {
    params.set("targetId", String(pivot.targetId));
  } else {
    params.delete("targetId");
  }
  if (!params.has("section")) {
    params.set("section", "audit-log");
  }
  const newHash = `#${params.toString()}`;
  if (window.location.hash !== newHash) {
    window.history.replaceState(null, "", newHash);
  }
}

// #197: same idea as parseAuditHashTarget but for the actor filter. Uses the
// shorter `actorId` URL key (the deep-link / hash param called out in the
// task spec) even though the API param + state are named `actorUserId`.
function parseAuditHashActor(): number | null {
  if (typeof window === "undefined") return null;
  const raw = window.location.hash.replace(/^#/, "");
  const params = new URLSearchParams(raw);
  const actorIdRaw = params.get("actorId")?.trim();
  if (!actorIdRaw) return null;
  const n = Number(actorIdRaw);
  if (!Number.isFinite(n) || !Number.isInteger(n) || n < 1) return null;
  return n;
}

function syncAuditHashActor(actorUserId: number | null) {
  if (typeof window === "undefined") return;
  const raw = window.location.hash.replace(/^#/, "");
  const params = new URLSearchParams(raw);
  if (actorUserId != null) {
    params.set("actorId", String(actorUserId));
  } else {
    params.delete("actorId");
  }
  if (!params.has("section")) {
    params.set("section", "audit-log");
  }
  const newHash = `#${params.toString()}`;
  if (window.location.hash !== newHash) {
    window.history.replaceState(null, "", newHash);
  }
}

// #197: Combobox-style actor picker with autocomplete by username and
// display name (English + Arabic). Replaces the previous flat <select> so
// admins on a busy site (hundreds of users) can find a teammate by typing
// a few characters instead of scrolling. The "Anyone" item clears the
// filter; the rest pass back the user's id to the parent.
function AuditActorPicker({
  actors,
  lang,
  actorUserId,
  onChange,
  placeholder,
  searchPlaceholder,
  emptyMessage,
  clearLabel,
}: {
  actors: UserProfile[];
  lang: string;
  actorUserId: number | "";
  onChange: (next: number | "") => void;
  placeholder: string;
  searchPlaceholder: string;
  emptyMessage: string;
  clearLabel: string;
}) {
  const [open, setOpen] = useState(false);
  const selected =
    actorUserId !== "" ? actors.find((u) => u.id === actorUserId) ?? null : null;
  const triggerLabel = selected
    ? (lang === "ar"
        ? selected.displayNameAr ?? selected.displayNameEn
        : selected.displayNameEn ?? selected.displayNameAr) ?? selected.username
    : placeholder;
  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <button
          type="button"
          aria-haspopup="listbox"
          aria-expanded={open}
          data-testid="audit-actor-filter"
          className="bg-white/70 border border-slate-200 rounded-lg px-3 py-2 text-sm w-full text-start flex items-center justify-between gap-2 hover:bg-white focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-400"
        >
          <span
            className={cn(
              "truncate",
              selected ? "text-foreground" : "text-muted-foreground",
            )}
          >
            {triggerLabel}
          </span>
          <ChevronDown size={14} className="shrink-0 opacity-60" />
        </button>
      </PopoverTrigger>
      <PopoverContent className="w-[260px] p-0" align="start">
        <Command
          // cmdk's default search ranks against a single string. We feed it
          // a joined "displayName · username · @username" so a query matches
          // either the display name or the handle (with or without @).
          filter={(value, search) => {
            if (!search) return 1;
            return value.toLowerCase().includes(search.toLowerCase()) ? 1 : 0;
          }}
        >
          <CommandInput
            placeholder={searchPlaceholder}
            data-testid="audit-actor-filter-search"
          />
          <CommandList>
            <CommandEmpty>{emptyMessage}</CommandEmpty>
            <CommandGroup>
              <CommandItem
                value={`__all__ ${placeholder} ${clearLabel}`}
                onSelect={() => {
                  onChange("");
                  setOpen(false);
                }}
                data-testid="audit-actor-filter-option-any"
              >
                <span className="text-muted-foreground">{placeholder}</span>
              </CommandItem>
              {actors.map((u) => {
                const display =
                  (lang === "ar"
                    ? u.displayNameAr ?? u.displayNameEn
                    : u.displayNameEn ?? u.displayNameAr) ?? u.username;
                return (
                  <CommandItem
                    key={u.id}
                    value={`${display} ${u.username} @${u.username}`}
                    onSelect={() => {
                      onChange(u.id);
                      setOpen(false);
                    }}
                    data-testid={`audit-actor-filter-option-${u.id}`}
                  >
                    <div className="min-w-0 flex-1">
                      <div className="text-sm text-foreground truncate">
                        {display}
                      </div>
                      <div className="text-[11px] text-muted-foreground truncate">
                        @{u.username}
                      </div>
                    </div>
                  </CommandItem>
                );
              })}
            </CommandGroup>
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
  );
}

function AuditLogPanel() {
  const { t, i18n } = useTranslation();
  const lang = i18n.language;
  const [actionFilter, setActionFilter] = useState<string>("");
  const [forcedOnly, setForcedOnly] = useState<boolean>(false);
  const [fromInput, setFromInput] = useState<string>("");
  const [toInput, setToInput] = useState<string>("");
  const [appliedFrom, setAppliedFrom] = useState<string>("");
  const [appliedTo, setAppliedTo] = useState<string>("");
  const [pageLimit, setPageLimit] = useState<number>(50);
  const [exporting, setExporting] = useState<boolean>(false);
  const [exportError, setExportError] = useState<string | null>(null);
  // #197: actor filter — applies immediately like the History tabs do, since
  // picking a different person is the natural way to commit the choice.
  // Initialised from the URL hash so a deep link like
  // `/admin#section=audit-log&actorId=42` lands directly on Alice's audit
  // history, and so chip pivots survive reload / back-forward navigation.
  const [actorUserId, setActorUserId] = useState<number | "">(() => {
    const fromHash = parseAuditHashActor();
    return fromHash != null ? fromHash : "";
  });
  // Deep-link target filters. Initialised from the URL hash so a user who
  // pastes /admin#section=audit-log&targetType=group lands directly on a
  // pre-filtered view. Updated by chip clicks and the explicit clear button.
  const [targetTypeFilter, setTargetTypeFilter] = useState<string>(
    () => parseAuditHashTarget().targetType,
  );
  const [targetIdFilter, setTargetIdFilter] = useState<number | null>(
    () => parseAuditHashTarget().targetId,
  );

  const fromValid = !appliedFrom || DATE_RE.test(appliedFrom);
  const toValid = !appliedTo || DATE_RE.test(appliedTo);
  const orderValid =
    !appliedFrom || !appliedTo || appliedFrom <= appliedTo;
  const filtersValid = fromValid && toValid && orderValid;

  const params: ListAuditLogsParams = {
    limit: pageLimit,
    offset: 0,
    ...(forcedOnly
      ? { forcedOnly: true }
      : actionFilter
      ? { action: actionFilter }
      : {}),
    ...(appliedFrom ? { from: appliedFrom } : {}),
    ...(appliedTo ? { to: appliedTo } : {}),
    ...(targetTypeFilter ? { targetType: targetTypeFilter } : {}),
    ...(targetIdFilter != null ? { targetId: targetIdFilter } : {}),
    ...(actorUserId !== "" ? { actorUserId: actorUserId as number } : {}),
  };

  // #197: list of users for the actor dropdown. Reuses the existing admin
  // users query (already cached for the rest of the admin page).
  const { data: usersForActor } = useListUsers(undefined, {
    query: { queryKey: getListUsersQueryKey() },
  });
  const sortedActors = useMemo(() => {
    const list = (usersForActor ?? []).slice();
    list.sort((a, b) => {
      const aLabel =
        (lang === "ar"
          ? a.displayNameAr ?? a.displayNameEn
          : a.displayNameEn ?? a.displayNameAr) ?? a.username;
      const bLabel =
        (lang === "ar"
          ? b.displayNameAr ?? b.displayNameEn
          : b.displayNameEn ?? b.displayNameAr) ?? b.username;
      return aLabel.localeCompare(bLabel);
    });
    return list;
  }, [usersForActor, lang]);

  const queryKey = getListAuditLogsQueryKey(params);
  const { data, isLoading, isFetching } = useListAuditLogs(params, {
    query: { queryKey, enabled: filtersValid },
  });

  const inputErrors: string[] = [];
  if (!fromValid || !toValid) inputErrors.push(t("admin.audit.errors.invalidDate"));
  else if (!orderValid) inputErrors.push(t("admin.audit.errors.invertedDates"));

  const knownActions = data?.actions ?? [];
  const entries = data?.entries ?? [];
  const totalCount = data?.totalCount ?? 0;
  const showingCount = entries.length;
  const hasMore = data?.nextOffset != null;

  const applyFilters = () => {
    setAppliedFrom(fromInput.trim());
    setAppliedTo(toInput.trim());
    setPageLimit(50);
  };

  const resetFilters = () => {
    setActionFilter("");
    setForcedOnly(false);
    setFromInput("");
    setToInput("");
    setAppliedFrom("");
    setAppliedTo("");
    setPageLimit(50);
    setTargetTypeFilter("");
    setTargetIdFilter(null);
    setActorUserId("");
    syncAuditHashTarget({ targetType: "", targetId: null });
    syncAuditHashActor(null);
  };

  const toggleForcedOnly = () => {
    setForcedOnly((v) => {
      const next = !v;
      if (next) setActionFilter("");
      setPageLimit(50);
      return next;
    });
  };

  // Chip click on a forced-delete row: pre-filter the panel to the chosen
  // target_type (and optionally target_id). Resets pagination so the new
  // result set starts fresh, and updates the URL hash so the filter
  // survives reload / back-forward navigation.
  const pivotToTarget = (pivot: AuditTargetPivot) => {
    setTargetTypeFilter(pivot.targetType);
    setTargetIdFilter(pivot.targetId);
    setPageLimit(50);
    syncAuditHashTarget(pivot);
  };

  const clearTargetFilter = () => {
    setTargetTypeFilter("");
    setTargetIdFilter(null);
    setPageLimit(50);
    syncAuditHashTarget({ targetType: "", targetId: null });
  };

  // #197: actor name/avatar click on any audit row pivots the panel to that
  // actor's filtered view. Mirrors the dependency-chip → target pivot above
  // so admins can hop between "what was acted on" and "who acted" with one
  // click. Resets pagination so the new result set starts fresh and updates
  // the URL hash so the filter survives reload / back-forward navigation.
  const pivotToActor = (newActorUserId: number) => {
    setActorUserId(newActorUserId);
    setPageLimit(50);
    syncAuditHashActor(newActorUserId);
  };

  const clearActorFilter = () => {
    setActorUserId("");
    setPageLimit(50);
    syncAuditHashActor(null);
  };

  const loadMore = () => setPageLimit((n) => Math.min(n + 50, 200));

  const handleExportCsv = async () => {
    if (!filtersValid || exporting) return;
    setExportError(null);
    setExporting(true);
    try {
      const url = getExportAuditLogsCsvUrl({
        ...(forcedOnly
          ? { forcedOnly: true }
          : actionFilter
          ? { action: actionFilter }
          : {}),
        ...(appliedFrom ? { from: appliedFrom } : {}),
        ...(appliedTo ? { to: appliedTo } : {}),
        ...(targetTypeFilter ? { targetType: targetTypeFilter } : {}),
        ...(targetIdFilter != null ? { targetId: targetIdFilter } : {}),
        ...(actorUserId !== "" ? { actorUserId: actorUserId as number } : {}),
      });
      const res = await fetch(url, {
        method: "GET",
        credentials: "include",
        headers: { Accept: "text/csv" },
      });
      if (!res.ok) {
        throw new Error(`HTTP ${res.status}`);
      }
      const blob = await res.blob();
      const stamp = new Date().toISOString().slice(0, 10);
      const filename = `audit-log-${stamp}.csv`;
      const objectUrl = URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = objectUrl;
      a.download = filename;
      document.body.appendChild(a);
      a.click();
      a.remove();
      // Defer revoke so the browser can finish the download.
      setTimeout(() => URL.revokeObjectURL(objectUrl), 1000);
    } catch (err) {
      setExportError(
        err instanceof Error ? err.message : t("admin.audit.export.failed"),
      );
    } finally {
      setExporting(false);
    }
  };

  const activeTargetPillLabel = targetTypeFilter
    ? targetIdFilter != null
      ? t("admin.audit.filters.targetWithId", {
          type: targetTypeFilter,
          id: targetIdFilter,
        })
      : t("admin.audit.filters.targetType", { type: targetTypeFilter })
    : null;

  // #197: Resolve the currently selected actor so the picker's trigger and
  // the filter pill can render their name/username (rather than just an ID).
  const selectedActor =
    actorUserId !== ""
      ? sortedActors.find((u) => u.id === actorUserId) ?? null
      : null;
  const selectedActorLabel = selectedActor
    ? (lang === "ar"
        ? selectedActor.displayNameAr ?? selectedActor.displayNameEn
        : selectedActor.displayNameEn ?? selectedActor.displayNameAr) ??
      selectedActor.username
    : null;
  const activeActorPillLabel =
    actorUserId !== ""
      ? selectedActorLabel
        ? t("admin.audit.filters.actorWithName", { name: selectedActorLabel })
        : t("admin.audit.filters.actorWithId", { id: actorUserId })
      : null;

  return (
    <div className="space-y-3" data-testid="audit-log-panel">
      <div className="glass-panel rounded-2xl p-3 space-y-3">
        <div className="flex flex-wrap items-center gap-2">
          <button
            type="button"
            onClick={toggleForcedOnly}
            aria-pressed={forcedOnly}
            title={t("admin.audit.filters.forcedOnlyHint")}
            data-testid="audit-forced-only-chip"
            className={cn(
              "inline-flex items-center gap-1.5 text-xs px-3 py-1.5 rounded-full border transition-colors",
              forcedOnly
                ? "bg-rose-100 text-rose-800 border-rose-200"
                : "bg-white/70 text-foreground border-slate-200 hover:bg-slate-50",
            )}
          >
            <Trash2 size={12} />
            {t("admin.audit.filters.forcedOnly")}
          </button>
          {activeTargetPillLabel && (
            <span
              className="inline-flex items-center gap-1.5 text-xs px-3 py-1.5 rounded-full border bg-emerald-100 text-emerald-800 border-emerald-200"
              data-testid="audit-target-filter-pill"
            >
              <span className="truncate">{activeTargetPillLabel}</span>
              <button
                type="button"
                onClick={clearTargetFilter}
                aria-label={t("admin.audit.filters.clearTargetFilter")}
                title={t("admin.audit.filters.clearTargetFilter")}
                className="ms-0.5 inline-flex items-center justify-center w-4 h-4 rounded-full hover:bg-emerald-200/70 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-400"
                data-testid="audit-clear-target-filter"
              >
                ×
              </button>
            </span>
          )}
          {activeActorPillLabel && (
            <span
              className="inline-flex items-center gap-1.5 text-xs px-3 py-1.5 rounded-full border bg-sky-100 text-sky-800 border-sky-200"
              data-testid="audit-actor-filter-pill"
            >
              <span className="truncate">{activeActorPillLabel}</span>
              <button
                type="button"
                onClick={clearActorFilter}
                aria-label={t("admin.audit.filters.clearActorFilter")}
                title={t("admin.audit.filters.clearActorFilter")}
                className="ms-0.5 inline-flex items-center justify-center w-4 h-4 rounded-full hover:bg-sky-200/70 focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-400"
                data-testid="audit-clear-actor-filter"
              >
                ×
              </button>
            </span>
          )}
        </div>
        <div className="grid gap-2 sm:grid-cols-2 md:grid-cols-5">
          <div className="space-y-1">
            <Label className="text-xs">{t("admin.audit.filters.action")}</Label>
            <select
              value={actionFilter}
              onChange={(e) => setActionFilter(e.target.value)}
              disabled={forcedOnly}
              className={cn(
                "bg-white/70 border border-slate-200 rounded-lg px-3 py-2 text-sm w-full",
                forcedOnly && "opacity-60 cursor-not-allowed",
              )}
              data-testid="audit-action-filter"
            >
              <option value="">{t("admin.audit.filters.allActions")}</option>
              {knownActions.map((a) => (
                <option key={a} value={a}>
                  {a}
                </option>
              ))}
            </select>
          </div>
          <div className="space-y-1">
            <Label className="text-xs">{t("admin.audit.filters.actor")}</Label>
            <AuditActorPicker
              actors={sortedActors}
              lang={lang}
              actorUserId={actorUserId}
              onChange={(next) => {
                setActorUserId(next);
                setPageLimit(50);
                syncAuditHashActor(next === "" ? null : next);
              }}
              placeholder={t("admin.audit.filters.allActors")}
              searchPlaceholder={t("admin.audit.filters.actorSearch")}
              emptyMessage={t("admin.audit.filters.actorEmpty")}
              clearLabel={t("admin.audit.filters.clearActorFilter")}
            />
          </div>
          <div className="space-y-1">
            <Label className="text-xs">{t("admin.audit.filters.from")}</Label>
            <Input
              type="date"
              value={fromInput}
              onChange={(e) => setFromInput(e.target.value)}
              className="bg-white/70 border-slate-200"
              data-testid="audit-from-input"
            />
          </div>
          <div className="space-y-1">
            <Label className="text-xs">{t("admin.audit.filters.to")}</Label>
            <Input
              type="date"
              value={toInput}
              onChange={(e) => setToInput(e.target.value)}
              className="bg-white/70 border-slate-200"
              data-testid="audit-to-input"
            />
          </div>
          <div className="flex items-end gap-2">
            <Button
              size="sm"
              onClick={applyFilters}
              className="flex-1"
              data-testid="audit-apply-filters"
            >
              {t("admin.audit.filters.apply")}
            </Button>
            <Button
              size="sm"
              variant="outline"
              onClick={resetFilters}
              data-testid="audit-reset-filters"
            >
              {t("admin.audit.filters.reset")}
            </Button>
          </div>
        </div>
        <div className="flex items-center justify-end">
          <Button
            size="sm"
            variant="outline"
            onClick={handleExportCsv}
            disabled={!filtersValid || exporting}
            className="gap-1.5"
            data-testid="audit-export-csv"
          >
            {exporting ? (
              <Loader2 size={14} className="animate-spin" />
            ) : (
              <Download size={14} />
            )}
            {t("admin.audit.export.button")}
          </Button>
        </div>
        {inputErrors.map((msg, i) => (
          <p key={i} className="text-xs text-destructive">
            {msg}
          </p>
        ))}
        {exportError && (
          <p className="text-xs text-destructive" data-testid="audit-export-error">
            {t("admin.audit.export.failed")}
          </p>
        )}
        <div className="text-xs text-muted-foreground">
          {filtersValid
            ? t("admin.audit.showing", {
                shown: showingCount,
                total: totalCount,
              })
            : t("admin.audit.errors.fixFiltersFirst")}
        </div>
      </div>

      {isLoading ? (
        <div className="flex justify-center py-8 text-muted-foreground">
          <Loader2 size={18} className="animate-spin" />
        </div>
      ) : entries.length === 0 ? (
        <div className="glass-panel rounded-2xl p-6 text-center text-sm text-muted-foreground">
          {t("admin.audit.empty")}
        </div>
      ) : (
        <div className="space-y-2">
          {entries.map((entry) => (
            <AuditLogRow
              key={entry.id}
              entry={entry}
              lang={lang}
              onPivotToTarget={pivotToTarget}
              onPivotToActor={pivotToActor}
            />
          ))}
        </div>
      )}

      {hasMore && (
        <div className="flex justify-center pt-1">
          <Button
            size="sm"
            variant="outline"
            disabled={pageLimit >= 200 || isFetching}
            onClick={loadMore}
            data-testid="audit-load-more"
          >
            {isFetching ? (
              <Loader2 size={14} className="animate-spin" />
            ) : (
              t("admin.audit.loadMore")
            )}
          </Button>
        </div>
      )}
    </div>
  );
}