"use client";

import * as React from "react";
import { useRouter } from "next/navigation";
import {
  Users,
  UserPlus,
  Shield,
  ShieldAlert,
  LogOut,
  KeyRound,
  CheckCircle2,
  XCircle,
  MoreVertical,
  X,
  AlertTriangle,
  Copy,
  Check,
} from "lucide-react";
import { SUB_ADMIN_ROLES } from "@/lib/admin/permissions";
import { FloatingSelect } from "@/components/ui/floating-select";
import { fetchWithAdminCache, invalidateAdminCache } from "@/lib/admin/client-cache";

interface AdminUserRow {
  id: string;
  name: string;
  email: string;
  level: "MAIN_ADMIN" | "SUB_ADMIN";
  role: string;
  status: "ACTIVE" | "SUSPENDED" | "DISABLED";
  lastLoginAt: string | null;
  createdAt: string;
  activeSessionsCount: number;
}

export default function AdminsManagementPage() {
  const router = useRouter();

  const [users, setUsers] = React.useState<AdminUserRow[]>([]);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState<string | null>(null);

  // Modal states
  const [createOpen, setCreateOpen] = React.useState(false);
  const [roleModalUser, setRoleModalUser] = React.useState<AdminUserRow | null>(null);
  const [logoutModalUser, setLogoutModalUser] = React.useState<AdminUserRow | null>(null);
  const [resetModalUser, setResetModalUser] = React.useState<AdminUserRow | null>(null);
  const [statusModalUser, setStatusModalUser] = React.useState<AdminUserRow | null>(null);

  // New user form state
  const [newName, setNewName] = React.useState("");
  const [newEmail, setNewEmail] = React.useState("");
  const [newRole, setNewRole] = React.useState(SUB_ADMIN_ROLES[0].id);
  const [newStatus, setNewStatus] = React.useState<"ACTIVE" | "SUSPENDED">("ACTIVE");
  const [createLoading, setCreateLoading] = React.useState(false);
  const [createdSuccess, setCreatedSuccess] = React.useState<{
    user: { name: string; email: string };
    temporaryPassword: string;
    message: string;
  } | null>(null);

  // Action loading states
  const [actionLoading, setActionLoading] = React.useState(false);
  const [copiedKey, setCopiedKey] = React.useState(false);

  const fetchUsers = React.useCallback(async (forceFresh = false) => {
    try {
      setLoading(true);
      const data = await fetchWithAdminCache<{ users?: AdminUserRow[] }>("/api/admin/users", {
        tags: ["admins"],
        forceFresh,
      });
      setUsers(data.users || []);
    } catch (e: any) {
      if (e.message?.includes("403") || e.message?.includes("Denied")) {
        setError("Access Denied: You must be a Main Administrator to view Admin Management.");
      } else {
        setError(e.message || "Failed to load administrators");
      }
    } finally {
      setLoading(false);
    }
  }, []);

  React.useEffect(() => {
    fetchUsers();
  }, [fetchUsers]);

  // Handle Create Sub-Admin
  const handleCreateSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setCreateLoading(true);
    setError(null);

    try {
      const res = await fetch("/api/admin/users", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          name: newName,
          email: newEmail,
          role: newRole,
          status: newStatus,
        }),
      });

      const data = await res.json();
      if (!res.ok) throw new Error(data.error || "Failed to create sub-admin");

      setCreatedSuccess({
        user: data.user,
        temporaryPassword: data.temporaryPassword,
        message: data.message,
      });

      setNewName("");
      setNewEmail("");
      invalidateAdminCache("admins");
      fetchUsers(true);
    } catch (e) {
      setError((e as Error).message);
    } finally {
      setCreateLoading(false);
    }
  };

  // Handle Role Change
  const handleRoleChange = async (newSelectedRole: string) => {
    if (!roleModalUser) return;
    setActionLoading(true);
    try {
      const res = await fetch(`/api/admin/users/${roleModalUser.id}`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ role: newSelectedRole }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || "Failed to update role");
      setRoleModalUser(null);
      invalidateAdminCache("admins");
      fetchUsers(true);
    } catch (e) {
      alert((e as Error).message);
    } finally {
      setActionLoading(false);
    }
  };

  // Handle Status Toggle (Suspend / Reactivate)
  const handleStatusToggle = async () => {
    if (!statusModalUser) return;
    setActionLoading(true);
    const targetStatus = statusModalUser.status === "ACTIVE" ? "SUSPENDED" : "ACTIVE";
    try {
      const res = await fetch(`/api/admin/users/${statusModalUser.id}`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ status: targetStatus }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || "Failed to update status");
      setStatusModalUser(null);
      invalidateAdminCache("admins");
      fetchUsers(true);
    } catch (e) {
      alert((e as Error).message);
    } finally {
      setActionLoading(false);
    }
  };

  // Handle Force Logout
  const handleForceLogout = async () => {
    if (!logoutModalUser) return;
    setActionLoading(true);
    try {
      const res = await fetch(`/api/admin/users/${logoutModalUser.id}/force-logout`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          reason: "Manual force logout initiated by Main Administrator",
        }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || "Failed to force logout");
      alert(data.message);
      setLogoutModalUser(null);
      invalidateAdminCache("admins");
      fetchUsers(true);
    } catch (e) {
      alert((e as Error).message);
    } finally {
      setActionLoading(false);
    }
  };

  // Handle Password Reset
  const handleResetPassword = async () => {
    if (!resetModalUser) return;
    setActionLoading(true);
    try {
      const res = await fetch(`/api/admin/users/${resetModalUser.id}/reset-password`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || "Failed to reset password");

      alert(`${data.message}\nTemporary Access Key: ${data.temporaryPassword}`);
      setResetModalUser(null);
      invalidateAdminCache("admins");
      fetchUsers(true);
    } catch (e) {
      alert((e as Error).message);
    } finally {
      setActionLoading(false);
    }
  };

  const copyKey = (text: string) => {
    navigator.clipboard.writeText(text);
    setCopiedKey(true);
    setTimeout(() => setCopiedKey(false), 2000);
  };

  return (
    <div className="space-y-6">
      {/* Page Header */}
      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <h1 className="font-bold text-xl tracking-tight text-neutral-900 dark:text-white">
            Administrator Management
          </h1>
          <p className="mt-0.5 text-xs text-neutral-500">
            Main Admin authority center. Provision sub-admins, assign roles, enforce sessions, and manage credentials.
          </p>
        </div>

        <button
          type="button"
          onClick={() => {
            setCreatedSuccess(null);
            setCreateOpen(true);
          }}
          className="flex h-9 items-center justify-center gap-2 rounded-lg bg-neutral-900 px-3.5 text-xs font-semibold text-white shadow-xs transition hover:bg-neutral-800 dark:bg-white dark:text-neutral-900 dark:hover:bg-neutral-100"
        >
          <UserPlus className="h-3.5 w-3.5" />
          <span>Create Sub-admin</span>
        </button>
      </div>

      {error && (
        <div className="rounded-xl border border-red-200 bg-red-50 p-4 text-xs text-red-700 dark:border-red-900/50 dark:bg-red-950/50 dark:text-red-300">
          <div className="flex items-center gap-2 font-semibold">
            <AlertTriangle className="h-4 w-4" />
            <span>Authorization Error</span>
          </div>
          <p className="mt-1">{error}</p>
        </div>
      )}

      {/* Admins Table */}
      <div className="overflow-hidden rounded-xl border border-neutral-200 bg-white shadow-xs dark:border-neutral-800 dark:bg-neutral-900">
        <div className="overflow-x-auto">
          <table className="w-full text-left text-xs">
            <thead>
              <tr className="border-b border-neutral-200 bg-neutral-50/75 text-[11px] font-semibold text-neutral-500 uppercase dark:border-neutral-800 dark:bg-neutral-950/50">
                <th className="px-5 py-3">Administrator</th>
                <th className="px-5 py-3">Authority & Role</th>
                <th className="px-5 py-3">Status</th>
                <th className="px-5 py-3">Active Sessions</th>
                <th className="px-5 py-3">Last Login</th>
                <th className="px-5 py-3 text-right">Actions</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-neutral-200 dark:divide-neutral-800">
              {loading ? (
                <tr>
                  <td colSpan={6} className="px-5 py-8 text-center text-neutral-400">
                    Loading administrator directory...
                  </td>
                </tr>
              ) : users.length === 0 ? (
                <tr>
                  <td colSpan={6} className="px-5 py-8 text-center text-neutral-400">
                    No administrators found.
                  </td>
                </tr>
              ) : (
                users.map((u) => {
                  const isMain = u.level === "MAIN_ADMIN";
                  return (
                    <tr
                      key={u.id}
                      className="transition hover:bg-neutral-50/50 dark:hover:bg-neutral-800/30"
                    >
                      <td className="px-5 py-3.5">
                        <div className="font-semibold text-neutral-900 dark:text-white">
                          {u.name}
                        </div>
                        <div className="text-[11px] text-neutral-500">{u.email}</div>
                      </td>

                      <td className="px-5 py-3.5">
                        <div className="flex items-center gap-1.5">
                          <span
                            className={`rounded-full px-2 py-0.5 text-[10px] font-bold uppercase ${
                              isMain
                                ? "bg-neutral-900 text-white dark:bg-white dark:text-neutral-900"
                                : "bg-neutral-100 text-neutral-800 dark:bg-neutral-800 dark:text-neutral-200"
                            }`}
                          >
                            {isMain ? "MAIN ADMIN" : "SUB-ADMIN"}
                          </span>
                          {!isMain && (
                            <span className="text-[11px] text-neutral-500 font-medium">
                              ({(u.role || "ADMIN").replace(/_/g, " ")})
                            </span>
                          )}
                        </div>
                      </td>

                      <td className="px-5 py-3.5">
                        <span
                          className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-semibold ${
                            u.status === "ACTIVE"
                              ? "bg-emerald-50 text-emerald-700 dark:bg-emerald-950/60 dark:text-emerald-300"
                              : "bg-red-50 text-red-700 dark:bg-red-950/60 dark:text-red-300"
                          }`}
                        >
                          <span
                            className={`h-1.5 w-1.5 rounded-full ${
                              u.status === "ACTIVE" ? "bg-emerald-500" : "bg-red-500"
                            }`}
                          />
                          {u.status}
                        </span>
                      </td>

                      <td className="px-5 py-3.5 font-medium text-neutral-700 dark:text-neutral-300">
                        {u.activeSessionsCount} active
                      </td>

                      <td suppressHydrationWarning className="px-5 py-3.5 text-neutral-500">
                        {u.lastLoginAt
                          ? new Date(u.lastLoginAt).toLocaleString("en-US", {
                              dateStyle: "short",
                              timeStyle: "short",
                            })
                          : "Never"}
                      </td>

                      <td className="px-5 py-3.5 text-right">
                        {isMain ? (
                          <span className="rounded-md border border-neutral-200 bg-neutral-50 px-2 py-1 text-[10px] font-semibold text-neutral-500 dark:border-neutral-800 dark:bg-neutral-950">
                            Primary Account (Protected)
                          </span>
                        ) : (
                          <div className="flex items-center justify-end gap-1.5">
                            <button
                              type="button"
                              onClick={() => setRoleModalUser(u)}
                              className="rounded-md border border-neutral-200 px-2 py-1 text-[11px] font-medium text-neutral-700 hover:bg-neutral-100 dark:border-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-800"
                            >
                              Role
                            </button>

                            <button
                              type="button"
                              onClick={() => setStatusModalUser(u)}
                              className={`rounded-md border px-2 py-1 text-[11px] font-medium ${
                                u.status === "ACTIVE"
                                  ? "border-neutral-200 text-neutral-700 hover:bg-neutral-100 dark:border-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-800"
                                  : "border-emerald-200 text-emerald-700 hover:bg-emerald-50 dark:border-emerald-900 dark:text-emerald-300"
                              }`}
                            >
                              {u.status === "ACTIVE" ? "Suspend" : "Reactivate"}
                            </button>

                            <button
                              type="button"
                              onClick={() => setLogoutModalUser(u)}
                              disabled={u.activeSessionsCount === 0}
                              className="rounded-md border border-neutral-200 px-2 py-1 text-[11px] font-medium text-neutral-700 hover:bg-neutral-100 disabled:opacity-40 dark:border-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-800"
                              title="Force logout all sessions"
                            >
                              Force Logout
                            </button>

                            <button
                              type="button"
                              onClick={() => setResetModalUser(u)}
                              className="rounded-md border border-neutral-200 px-2 py-1 text-[11px] font-medium text-neutral-700 hover:bg-neutral-100 dark:border-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-800"
                              title="Reset credentials"
                            >
                              Reset
                            </button>
                          </div>
                        )}
                      </td>
                    </tr>
                  );
                })
              )}
            </tbody>
          </table>
        </div>
      </div>

      {/* CREATE SUB-ADMIN MODAL */}
      {createOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4 backdrop-blur-xs">
          <div className="w-full max-w-lg rounded-2xl border border-neutral-200 bg-white p-6 shadow-xl dark:border-neutral-800 dark:bg-neutral-900">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-2">
                <UserPlus className="h-4 w-4 text-neutral-900 dark:text-white" />
                <h2 className="font-bold text-sm text-neutral-900 dark:text-white">
                  Create Sub-administrator Account
                </h2>
              </div>
              <button
                type="button"
                onClick={() => setCreateOpen(false)}
                className="rounded-lg p-1 text-neutral-400 hover:bg-neutral-100 hover:text-neutral-900 dark:hover:bg-neutral-800 dark:hover:text-white"
              >
                <X className="h-4 w-4" />
              </button>
            </div>

            {createdSuccess ? (
              <div className="mt-4 space-y-4">
                <div className="rounded-xl border border-emerald-200 bg-emerald-50/50 p-4 text-xs text-emerald-800 dark:border-emerald-900/50 dark:bg-emerald-950/50 dark:text-emerald-200">
                  <div className="flex items-center gap-2 font-bold text-sm text-emerald-900 dark:text-emerald-100">
                    <CheckCircle2 className="h-4 w-4 text-emerald-600" />
                    <span>Sub-administrator Created Successfully</span>
                  </div>
                  <p className="mt-1">{createdSuccess.message}</p>
                </div>

                <div className="rounded-xl border border-neutral-200 bg-neutral-50 p-4 dark:border-neutral-800 dark:bg-neutral-950">
                  <span className="text-[10px] font-bold text-neutral-400 uppercase tracking-wider">
                    One-Time Temporary Access Key
                  </span>
                  <div className="mt-1.5 flex items-center justify-between gap-2">
                    <code className="rounded bg-white px-2.5 py-1.5 font-mono text-xs font-semibold text-neutral-900 dark:bg-neutral-900 dark:text-white">
                      {createdSuccess.temporaryPassword}
                    </code>
                    <button
                      type="button"
                      onClick={() => copyKey(createdSuccess.temporaryPassword)}
                      className="flex h-8 items-center gap-1 rounded-lg border border-neutral-200 px-2.5 text-xs font-medium text-neutral-700 hover:bg-neutral-100 dark:border-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-800"
                    >
                      {copiedKey ? <Check className="h-3 w-3 text-emerald-600" /> : <Copy className="h-3 w-3" />}
                      <span>{copiedKey ? "Copied" : "Copy"}</span>
                    </button>
                  </div>
                  <p className="mt-2 text-[11px] text-neutral-500">
                    The user will be required to establish a permanent password immediately upon their first login.
                  </p>
                </div>

                <div className="flex justify-end pt-2">
                  <button
                    type="button"
                    onClick={() => {
                      setCreateOpen(false);
                      setCreatedSuccess(null);
                    }}
                    className="h-9 rounded-lg bg-neutral-900 px-4 text-xs font-semibold text-white dark:bg-white dark:text-neutral-900"
                  >
                    Done
                  </button>
                </div>
              </div>
            ) : (
              <form onSubmit={handleCreateSubmit} className="mt-4 space-y-4">
                <div>
                  <label
                    htmlFor="create-name"
                    className="block text-xs font-semibold text-neutral-700 dark:text-neutral-300"
                  >
                    Full Name
                  </label>
                  <input
                    id="create-name"
                    type="text"
                    required
                    value={newName}
                    onChange={(e) => setNewName(e.target.value)}
                    placeholder="Jane Doe"
                    className="mt-1.5 h-10 w-full rounded-lg border border-neutral-300 bg-transparent px-3 text-xs text-neutral-900 placeholder:text-neutral-400 focus:border-neutral-900 focus:ring-1 focus:ring-neutral-900 focus:outline-none dark:border-neutral-700 dark:text-white dark:focus:border-white dark:focus:ring-white"
                  />
                </div>

                <div>
                  <label
                    htmlFor="create-email"
                    className="block text-xs font-semibold text-neutral-700 dark:text-neutral-300"
                  >
                    Email / Admin ID
                  </label>
                  <input
                    id="create-email"
                    type="email"
                    required
                    value={newEmail}
                    onChange={(e) => setNewEmail(e.target.value)}
                    placeholder="jane@qutoai.com"
                    className="mt-1.5 h-10 w-full rounded-lg border border-neutral-300 bg-transparent px-3 text-xs text-neutral-900 placeholder:text-neutral-400 focus:border-neutral-900 focus:ring-1 focus:ring-neutral-900 focus:outline-none dark:border-neutral-700 dark:text-white dark:focus:border-white dark:focus:ring-white"
                  />
                </div>

                <div>
                  <FloatingSelect
                    id="create-role"
                    label="Assigned Editorial Role"
                    value={newRole}
                    onValueChange={(val) => setNewRole(val as any)}
                    options={SUB_ADMIN_ROLES.map((r) => ({
                      value: r.id,
                      label: r.label,
                    }))}
                  />
                  <p className="mt-1 text-[11px] text-neutral-500 pl-1">
                    {SUB_ADMIN_ROLES.find((r) => r.id === newRole)?.description}
                  </p>
                </div>

                <div>
                  <FloatingSelect
                    id="create-status"
                    label="Initial Account Status"
                    value={newStatus}
                    onValueChange={(val) => setNewStatus(val as any)}
                    options={[
                      { value: "ACTIVE", label: "ACTIVE (Can log in with temporary credentials)" },
                      { value: "SUSPENDED", label: "SUSPENDED (Account disabled until activated)" },
                    ]}
                  />
                </div>

                <div className="flex items-center justify-end gap-2 pt-3 border-t border-neutral-100 dark:border-neutral-800">
                  <button
                    type="button"
                    onClick={() => setCreateOpen(false)}
                    className="h-9 rounded-lg border border-neutral-200 px-3.5 text-xs font-medium text-neutral-600 hover:bg-neutral-100 dark:border-neutral-800 dark:text-neutral-400 dark:hover:bg-neutral-800"
                  >
                    Cancel
                  </button>
                  <button
                    type="submit"
                    disabled={createLoading}
                    className="h-9 rounded-lg bg-neutral-900 px-4 text-xs font-semibold text-white hover:bg-neutral-800 disabled:opacity-50 dark:bg-white dark:text-neutral-900 dark:hover:bg-neutral-100"
                  >
                    {createLoading ? "Provisioning..." : "Create & Send Invitation"}
                  </button>
                </div>
              </form>
            )}
          </div>
        </div>
      )}

      {/* EDIT ROLE MODAL */}
      {roleModalUser && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4 backdrop-blur-xs">
          <div className="w-full max-w-md rounded-2xl border border-neutral-200 bg-white p-6 shadow-xl dark:border-neutral-800 dark:bg-neutral-900">
            <h3 className="font-bold text-sm text-neutral-900 dark:text-white">
              Change Role: {roleModalUser.name}
            </h3>
            <p className="mt-1 text-xs text-neutral-500">
              Updating this role modifies server-side permissions and will immediately revoke any active
              sessions to enforce re-authentication.
            </p>

            <div className="mt-4 space-y-2">
              {SUB_ADMIN_ROLES.map((r) => (
                <button
                  key={r.id}
                  type="button"
                  onClick={() => handleRoleChange(r.id)}
                  disabled={actionLoading}
                  className={`w-full rounded-xl border p-3 text-left transition ${
                    roleModalUser.role === r.id
                      ? "border-neutral-900 bg-neutral-50 dark:border-white dark:bg-neutral-800"
                      : "border-neutral-200 hover:bg-neutral-50 dark:border-neutral-800 dark:hover:bg-neutral-800/50"
                  }`}
                >
                  <div className="font-semibold text-xs text-neutral-900 dark:text-white">
                    {r.label}
                  </div>
                  <div className="mt-0.5 text-[11px] text-neutral-500">{r.description}</div>
                </button>
              ))}
            </div>

            <div className="mt-4 flex justify-end">
              <button
                type="button"
                onClick={() => setRoleModalUser(null)}
                className="h-8 rounded-lg border border-neutral-200 px-3 text-xs font-medium text-neutral-600 hover:bg-neutral-100 dark:border-neutral-800 dark:text-neutral-400 dark:hover:bg-neutral-800"
              >
                Cancel
              </button>
            </div>
          </div>
        </div>
      )}

      {/* SUSPEND / REACTIVATE MODAL */}
      {statusModalUser && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4 backdrop-blur-xs">
          <div className="w-full max-w-md rounded-2xl border border-neutral-200 bg-white p-6 shadow-xl dark:border-neutral-800 dark:bg-neutral-900">
            <h3 className="font-bold text-sm text-neutral-900 dark:text-white">
              {statusModalUser.status === "ACTIVE" ? "Suspend Account" : "Reactivate Account"}
            </h3>
            <p className="mt-2 text-xs leading-relaxed text-neutral-500">
              {statusModalUser.status === "ACTIVE"
                ? `Are you sure you want to suspend ${statusModalUser.name}? The user will immediately lose access and all active sessions will be terminated.`
                : `Are you sure you want to reactivate ${statusModalUser.name}? The account will become eligible for login again.`}
            </p>

            <div className="mt-5 flex justify-end gap-2">
              <button
                type="button"
                onClick={() => setStatusModalUser(null)}
                className="h-8 rounded-lg border border-neutral-200 px-3 text-xs font-medium text-neutral-600 hover:bg-neutral-100 dark:border-neutral-800 dark:text-neutral-400 dark:hover:bg-neutral-800"
              >
                Cancel
              </button>
              <button
                type="button"
                onClick={handleStatusToggle}
                disabled={actionLoading}
                className={`h-8 rounded-lg px-3.5 text-xs font-semibold text-white ${
                  statusModalUser.status === "ACTIVE"
                    ? "bg-red-600 hover:bg-red-700"
                    : "bg-emerald-600 hover:bg-emerald-700"
                }`}
              >
                {actionLoading
                  ? "Processing..."
                  : statusModalUser.status === "ACTIVE"
                  ? "Confirm Suspension"
                  : "Confirm Reactivation"}
              </button>
            </div>
          </div>
        </div>
      )}

      {/* FORCE LOGOUT MODAL */}
      {logoutModalUser && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4 backdrop-blur-xs">
          <div className="w-full max-w-md rounded-2xl border border-neutral-200 bg-white p-6 shadow-xl dark:border-neutral-800 dark:bg-neutral-900">
            <h3 className="font-bold text-sm text-neutral-900 dark:text-white">
              Force Logout: {logoutModalUser.name}
            </h3>
            <p className="mt-2 text-xs leading-relaxed text-neutral-500">
              Force logout this user? They will be signed out of all {logoutModalUser.activeSessionsCount} active
              admin sessions across all browsers and devices immediately.
            </p>

            <div className="mt-5 flex justify-end gap-2">
              <button
                type="button"
                onClick={() => setLogoutModalUser(null)}
                className="h-8 rounded-lg border border-neutral-200 px-3 text-xs font-medium text-neutral-600 hover:bg-neutral-100 dark:border-neutral-800 dark:text-neutral-400 dark:hover:bg-neutral-800"
              >
                Cancel
              </button>
              <button
                type="button"
                onClick={handleForceLogout}
                disabled={actionLoading}
                className="h-8 rounded-lg bg-neutral-900 px-3.5 text-xs font-semibold text-white hover:bg-neutral-800 dark:bg-white dark:text-neutral-900 dark:hover:bg-neutral-100"
              >
                {actionLoading ? "Revoking..." : "Force Logout All Sessions"}
              </button>
            </div>
          </div>
        </div>
      )}

      {/* PASSWORD RESET CONFIRMATION MODAL */}
      {resetModalUser && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4 backdrop-blur-xs">
          <div className="w-full max-w-md rounded-2xl border border-neutral-200 bg-white p-6 shadow-xl dark:border-neutral-800 dark:bg-neutral-900">
            <h3 className="font-bold text-sm text-neutral-900 dark:text-white">
              Reset Password: {resetModalUser.name}
            </h3>
            <p className="mt-2 text-xs leading-relaxed text-neutral-500">
              Reset password for {resetModalUser.name}? This will invalidate their active sessions,
              generate a fresh temporary credential, and deliver new login instructions to {resetModalUser.email}.
            </p>

            <div className="mt-5 flex justify-end gap-2">
              <button
                type="button"
                onClick={() => setResetModalUser(null)}
                className="h-8 rounded-lg border border-neutral-200 px-3 text-xs font-medium text-neutral-600 hover:bg-neutral-100 dark:border-neutral-800 dark:text-neutral-400 dark:hover:bg-neutral-800"
              >
                Cancel
              </button>
              <button
                type="button"
                onClick={handleResetPassword}
                disabled={actionLoading}
                className="h-8 rounded-lg bg-neutral-900 px-3.5 text-xs font-semibold text-white hover:bg-neutral-800 dark:bg-white dark:text-neutral-900 dark:hover:bg-neutral-100"
              >
                {actionLoading ? "Resetting..." : "Confirm & Send Reset Key"}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}