"use client";

import { useEffect, useState, useCallback } from "react";
import { useRouter } from "@/i18n/navigation";
import { useSession } from "next-auth/react";
import { useTranslations } from "next-intl";
import {
  Plus,
  Search,
  Pencil,
  Trash2,
  ChevronLeft,
  ChevronRight,
  Users,
  UserCheck,
  User,
  Code2,
  Loader2,
  Mail,
  Shield,
  VenetianMask,
} from "lucide-react";
import Button from "@/components/ui/Button";
import Input from "@/components/ui/Input";
import Badge from "@/components/ui/Badge";
import Modal from "@/components/ui/Modal";
import ConfirmModal from "@/components/ui/ConfirmModal";
import { readApiJson, toastPromise } from "@/lib/toast";
import { useDevMode } from "@/components/providers/DevModeProvider";
import { formatUserName, userInitial } from "@/lib/user-display";
import { HelpTooltip, LabelWithHint, Tooltip } from "@/components/ui/Tooltip";

interface User {
  id: string;
  firstName: string;
  lastName: string;
  username: string;
  email: string;
  isActive: boolean;
  createdAt: string;
  accountType?: string;
  role: { id: string; name: string } | null;
}

interface Role {
  id: string;
  name: string;
}

interface Props {
  canCreate: boolean;
  canUpdate: boolean;
  canDelete: boolean;
  canImpersonate: boolean;
  /** "employees" = SYSTEM+DEV users; "users" = regular USER accounts */
  mode?: "employees" | "users";
}

function UserAvatar({ user, email }: { user: Pick<User, "firstName" | "lastName">; email: string }) {
  const initial = userInitial(user) || email[0]?.toUpperCase() || "?";
  return (
    <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-[var(--accent)]/20 bg-[var(--accent-muted)] text-sm font-semibold text-[var(--accent)]">
      {initial}
    </div>
  );
}

function StatusDot({ active, label }: { active: boolean; label: string }) {
  return (
    <span className="inline-flex items-center gap-1.5 text-xs font-medium text-[var(--text-muted)]">
      <span
        className={`h-1.5 w-1.5 rounded-full ${active ? "bg-emerald-400" : "bg-red-400"}`}
        aria-hidden
      />
      {label}
    </span>
  );
}

function AccountTypeBadge({
  accountType,
  t,
}: {
  accountType?: string;
  t: ReturnType<typeof import("next-intl").useTranslations>;
}) {
  if (accountType === "DEV") {
    return (
      <span className="inline-flex items-center gap-1 rounded-full border border-emerald-500/25 bg-emerald-500/10 px-2 py-0.5 text-[10px] font-medium text-emerald-400">
        <Code2 className="h-2.5 w-2.5" />
        {t("typeDev")}
      </span>
    );
  }
  if (accountType === "USER") {
    return (
      <span className="inline-flex items-center gap-1 rounded-full border border-purple-500/25 bg-purple-500/10 px-2 py-0.5 text-[10px] font-medium text-purple-400">
        <User className="h-2.5 w-2.5" />
        {t("typeUser")}
      </span>
    );
  }
  if (accountType === "SYSTEM") {
    return (
      <span className="inline-flex items-center gap-1 rounded-full border border-amber-500/25 bg-amber-500/10 px-2 py-0.5 text-[10px] font-medium text-amber-400">
        <UserCheck className="h-2.5 w-2.5" />
        {t("typeEmployee")}
      </span>
    );
  }
  return null;
}

export default function UsersClient({
  canCreate,
  canUpdate,
  canDelete,
  canImpersonate,
  mode,
}: Props) {
  const t = useTranslations("users");
  const tc = useTranslations("common");
  const ta = useTranslations("auth");
  const router = useRouter();
  const { data: session, update } = useSession();
  const devMode = useDevMode();
  const actorId = (session?.user as { actorId?: string; id?: string } | undefined)?.actorId
    ?? session?.user?.id;
  const fixedFilter = mode === "employees" ? "SYSTEM" : mode === "users" ? "USER" : "";
  const [users, setUsers] = useState<User[]>([]);
  const [total, setTotal] = useState(0);
  const [page, setPage] = useState(1);
  const [search, setSearch] = useState("");
  const [accountTypeFilter, setAccountTypeFilter] = useState<"" | "SYSTEM" | "USER">(fixedFilter);
  const [loading, setLoading] = useState(true);
  const [roles, setRoles] = useState<Role[]>([]);
  const roleName = (session?.user as { role?: { name?: string } } | undefined)?.role?.name;
  const accountType = (session?.user as { accountType?: string } | undefined)?.accountType;
  const canAssignSuperAdmin = roleName === "SUPER_ADMIN" || accountType === "DEV";
  const canAssignRoles = canCreate || canUpdate;
  const assignableRoles = roles.filter(
    (role) => role.name !== "SUPER_ADMIN" || canAssignSuperAdmin
  );
  const [showModal, setShowModal] = useState(false);
  const [editUser, setEditUser] = useState<User | null>(null);
  const [form, setForm] = useState({
    firstName: "",
    lastName: "",
    username: "",
    email: "",
    password: "",
    roleId: "",
    isActive: true,
    accountType: "SYSTEM" as "SYSTEM" | "USER" | "DEV",
  });
  const [saving, setSaving] = useState(false);
  const [deleteTarget, setDeleteTarget] = useState<User | null>(null);
  const [deleting, setDeleting] = useState(false);
  const [impersonatingId, setImpersonatingId] = useState<string | null>(null);

  const canImpersonateUser = useCallback(
    (user: User) =>
      canImpersonate &&
      user.isActive &&
      user.id !== actorId &&
      user.role?.name !== "SUPER_ADMIN",
    [canImpersonate, actorId]
  );

  async function startImpersonation(user: User) {
    setImpersonatingId(user.id);
    try {
      const payload = await toastPromise(
        readApiJson(
          await fetch("/api/impersonate", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ userId: user.id }),
          }),
          tc("somethingWrong")
        ),
        {
          loading: t("startingImpersonation"),
          success: t("impersonationStarted"),
        }
      );
      await update({ impersonate: payload });
      router.push("/dashboard/profile");
      router.refresh();
    } catch {
      // toast
    } finally {
      setImpersonatingId(null);
    }
  }

  const limit = 10;

  const fetchUsers = useCallback(async () => {
    setLoading(true);
    try {
      const params = new URLSearchParams({ page: String(page), limit: String(limit), search });
      if (accountTypeFilter) params.set("accountType", accountTypeFilter);
      const res = await fetch(`/api/users?${params}`);
      if (!res.ok) {
        setUsers([]);
        setTotal(0);
        return;
      }
      const text = await res.text();
      if (!text) {
        setUsers([]);
        setTotal(0);
        return;
      }
      const data = JSON.parse(text);
      setUsers(data.users ?? []);
      setTotal(data.total ?? 0);
    } catch {
      setUsers([]);
      setTotal(0);
    } finally {
      setLoading(false);
    }
  }, [page, search, accountTypeFilter]);

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

  useEffect(() => {
    if (!canAssignRoles) {
      return;
    }

    fetch("/api/users/roles")
      .then(async (response) => {
        if (!response.ok) return [];
        const data: unknown = await response.json();
        return Array.isArray(data) ? data : [];
      })
      .then((data) => setRoles(data))
      .catch(() => setRoles([]));
  }, [canAssignRoles]);

  function openCreate() {
    setEditUser(null);
    setForm({
      firstName: "",
      lastName: "",
      username: "",
      email: "",
      password: "",
      roleId: assignableRoles[0]?.id ?? "",
      isActive: true,
      accountType: mode === "users" ? "USER" : "SYSTEM",
    });
    setShowModal(true);
  }

  function openEdit(user: User) {
    setEditUser(user);
    setForm({
      firstName: user.firstName,
      lastName: user.lastName,
      username: user.username,
      email: user.email,
      password: "",
      roleId: user.role?.id ?? "",
      isActive: user.isActive,
      accountType: (user.accountType as "SYSTEM" | "USER" | "DEV") ?? "SYSTEM",
    });
    setShowModal(true);
  }

  async function handleSave(e: React.FormEvent) {
    e.preventDefault();
    setSaving(true);

    const body: Record<string, unknown> = {
      firstName: form.firstName,
      lastName: form.lastName,
      username: form.username,
      email: form.email,
      roleId: form.roleId || null,
      isActive: form.isActive,
      accountType: form.accountType,
    };
    if (form.password) body.password = form.password;

    const url = editUser ? `/api/users/${editUser.id}` : "/api/users";
    const method = editUser ? "PATCH" : "POST";
    if (!editUser) body.password = form.password;

    try {
      await toastPromise(
        readApiJson(
          await fetch(url, {
            method,
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(body),
          }),
          tc("somethingWrong")
        ),
        {
          loading: tc("saving"),
          success: editUser ? tc("updatedSuccess") : tc("createdSuccess"),
        }
      );
      setShowModal(false);
      fetchUsers();
    } catch {
      // surfaced via toast
    } finally {
      setSaving(false);
    }
  }

  async function handleDelete() {
    if (!deleteTarget) return;
    setDeleting(true);

    try {
      await toastPromise(
        readApiJson(
          await fetch(`/api/users/${deleteTarget.id}`, { method: "DELETE" }),
          tc("somethingWrong")
        ),
        {
          loading: tc("loading"),
          success: tc("deletedSuccess"),
        }
      );
      setDeleteTarget(null);
      fetchUsers();
    } catch {
      // surfaced via toast
    } finally {
      setDeleting(false);
    }
  }

  const totalPages = Math.max(1, Math.ceil(total / limit));
  const showActions = canUpdate || canDelete || canImpersonate;

  return (
    <div className="w-full space-y-5 sm:space-y-6">
      <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
        <div>
          <h1 className="text-xl font-semibold tracking-tight sm:text-2xl">
            {mode === "employees" ? t("titleEmployees") : mode === "users" ? t("titleUsers") : t("title")}
          </h1>
          <p className="mt-1 text-sm text-[var(--text-muted)]">
            {mode === "employees"
              ? t("totalEmployees", { count: total })
              : mode === "users"
                ? t("totalUsers", { count: total })
                : t("total", { count: total })}
          </p>
        </div>
        {canCreate && (
          <Button onClick={openCreate} className="w-full sm:w-auto">
            <Plus className="h-4 w-4" />
            {mode === "employees" ? t("addEmployee") : mode === "users" ? t("addUser") : t("addUser")}
          </Button>
        )}
      </div>

      <div className="overflow-hidden rounded-2xl border border-[var(--border)] bg-[var(--bg-elevated)]">
        {/* Filter tabs — only shown on the combined "all" view (no fixed mode) */}
        {!mode && (
          <div className="flex gap-0.5 border-b border-[var(--border)] px-4 pt-3 sm:px-5">
            {([
              { key: "", label: t("filterAll") },
              { key: "SYSTEM", label: t("filterEmployees") },
              { key: "USER", label: t("filterUsers") },
            ] as const).map(({ key, label }) => (
              <button
                key={key}
                type="button"
                onClick={() => { setAccountTypeFilter(key); setPage(1); }}
                className={`cursor-pointer rounded-t-lg px-3.5 pb-2.5 pt-2 text-xs font-medium transition-colors ${
                  accountTypeFilter === key
                    ? "border-b-2 border-[var(--accent)] text-[var(--text)]"
                    : "text-[var(--text-muted)] hover:text-[var(--text)]"
                }`}
              >
                {label}
              </button>
            ))}
          </div>
        )}

        <div className="flex flex-col gap-3 border-b border-[var(--border)] p-4 sm:flex-row sm:items-center sm:justify-between sm:px-5">
          <div className="relative w-full sm:max-w-xs">
            <Search className="pointer-events-none absolute start-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[var(--text-faint)]" />
            <input
              type="search"
              placeholder={t("searchPlaceholder")}
              value={search}
              onChange={(e) => {
                setSearch(e.target.value);
                setPage(1);
              }}
              className="w-full rounded-lg border border-[var(--border)] bg-[var(--bg)] py-2.5 pe-3.5 ps-10 text-sm text-[var(--text)] placeholder:text-[var(--text-faint)] transition focus:border-[var(--accent)]/60 focus:outline-none focus:ring-2 focus:ring-[var(--accent)]/40"
            />
          </div>
          <p className="hidden text-xs text-[var(--text-faint)] sm:block">
            {tc("page")} {page} {tc("of")} {totalPages}
          </p>
        </div>

        {/* Mobile cards */}
        <div className="divide-y divide-[var(--border-subtle)] md:hidden">
          {loading ? (
            Array.from({ length: 4 }).map((_, i) => (
              <div key={i} className="p-4">
                <div className="h-20 skeleton rounded-xl" />
              </div>
            ))
          ) : users.length === 0 ? (
            <div className="flex flex-col items-center gap-2 px-6 py-14 text-center">
              <div className="mb-1 flex h-12 w-12 items-center justify-center rounded-full bg-[var(--bg-hover)] text-[var(--text-faint)]">
                <Users className="h-5 w-5" />
              </div>
              <p className="text-sm font-medium text-[var(--text)]">{t("noUsers")}</p>
              <p className="text-xs text-[var(--text-faint)]">{t("noUsersHint")}</p>
            </div>
          ) : (
            users.map((user) => (
              <div key={user.id} className="space-y-3 p-4">
                <div className="flex items-start justify-between gap-3">
                  <div className="flex min-w-0 items-center gap-3">
                    <UserAvatar user={user} email={user.email} />
                    <div className="min-w-0">
                      <p className="truncate font-medium text-[var(--text)]">
                        {formatUserName(user)}
                      </p>
                      <p className="mt-0.5 truncate text-xs text-[var(--text-faint)]">
                        @{user.username} · {user.email}
                      </p>
                      {devMode && (
                        <p className="mt-0.5 font-mono text-[10px] text-emerald-400 select-all truncate">
                          {user.id}
                        </p>
                      )}
                    </div>
                  </div>
                  {showActions && (
                    <div className="flex shrink-0 items-center gap-1">
                      {canImpersonateUser(user) && (
                        <Tooltip content={t("impersonateHint")} label={t("impersonate")} placement="top">
                          <span className="inline-flex">
                            <Button
                              variant="ghost"
                              size="sm"
                              onClick={() => startImpersonation(user)}
                              disabled={impersonatingId === user.id}
                              aria-label={t("impersonate")}
                              className="text-amber-400 hover:bg-amber-500/10 hover:text-amber-300"
                            >
                              {impersonatingId === user.id ? (
                                <Loader2 className="h-3.5 w-3.5 animate-spin" />
                              ) : (
                                <VenetianMask className="h-3.5 w-3.5" />
                              )}
                            </Button>
                          </span>
                        </Tooltip>
                      )}
                      {canUpdate && (
                        <Button variant="ghost" size="sm" onClick={() => openEdit(user)} aria-label={tc("edit")}>
                          <Pencil className="h-3.5 w-3.5" />
                        </Button>
                      )}
                      {canDelete && (
                        <Button
                          variant="ghost"
                          size="sm"
                          onClick={() => setDeleteTarget(user)}
                          aria-label={tc("delete")}
                          className="text-red-400 hover:bg-red-500/10 hover:text-red-300"
                        >
                          <Trash2 className="h-3.5 w-3.5" />
                        </Button>
                      )}
                    </div>
                  )}
                </div>
                <div className="flex flex-wrap items-center gap-2.5">
                  <AccountTypeBadge accountType={user.accountType} t={t} />
                  {user.role ? (
                    <Badge variant="role" role={user.role.name}>
                      {user.role.name}
                    </Badge>
                  ) : (
                    <span className="text-xs text-[var(--text-faint)]">{tc("noRole")}</span>
                  )}
                  <StatusDot
                    active={user.isActive}
                    label={user.isActive ? tc("active") : tc("inactive")}
                  />
                  <span className="text-xs text-[var(--text-faint)]">
                    {new Date(user.createdAt).toLocaleDateString()}
                  </span>
                </div>
              </div>
            ))
          )}
        </div>

        {/* Desktop table */}
        <div className="hidden overflow-x-auto md:block">
          <table className="w-full text-sm">
            <thead>
              <tr className="border-b border-[var(--border)] bg-[var(--bg)]/50">
                <th className="px-5 py-3 text-start text-[11px] font-semibold uppercase tracking-wider text-[var(--text-faint)]">
                  {t("user")}
                </th>
                {devMode && (
                  <th className="px-5 py-3 text-start text-[11px] font-semibold uppercase tracking-wider text-emerald-400">
                    User ID
                  </th>
                )}
                <th className="px-5 py-3 text-start text-[11px] font-semibold uppercase tracking-wider text-[var(--text-faint)]">
                  {t("role")}
                </th>
                <th className="px-5 py-3 text-start text-[11px] font-semibold uppercase tracking-wider text-[var(--text-faint)]">
                  {tc("status")}
                </th>
                <th className="px-5 py-3 text-start text-[11px] font-semibold uppercase tracking-wider text-[var(--text-faint)]">
                  {t("joined")}
                </th>
                {showActions && (
                  <th className="px-5 py-3 text-end text-[11px] font-semibold uppercase tracking-wider text-[var(--text-faint)]">
                    {tc("actions")}
                  </th>
                )}
              </tr>
            </thead>
            <tbody>
              {loading ? (
                Array.from({ length: 5 }).map((_, i) => (
                  <tr key={i} className="border-b border-[var(--border-subtle)]">
                    <td colSpan={(showActions ? 5 : 4) + (devMode ? 1 : 0)} className="px-5 py-4">
                      <div className="h-10 skeleton rounded-lg" />
                    </td>
                  </tr>
                ))
              ) : users.length === 0 ? (
                <tr>
                  <td colSpan={(showActions ? 5 : 4) + (devMode ? 1 : 0)} className="px-6 py-16">
                    <div className="flex flex-col items-center gap-2 text-center">
                      <div className="mb-1 flex h-12 w-12 items-center justify-center rounded-full bg-[var(--bg-hover)] text-[var(--text-faint)]">
                        <Users className="h-5 w-5" />
                      </div>
                      <p className="text-sm font-medium text-[var(--text)]">{t("noUsers")}</p>
                      <p className="text-xs text-[var(--text-faint)]">{t("noUsersHint")}</p>
                    </div>
                  </td>
                </tr>
              ) : (
                users.map((user) => (
                  <tr
                    key={user.id}
                    className="border-b border-[var(--border-subtle)] transition-colors last:border-b-0 hover:bg-[var(--bg-hover)]/40"
                  >
                    <td className="px-5 py-3.5">
                      <div className="flex items-center gap-3">
                        <UserAvatar user={user} email={user.email} />
                        <div className="min-w-0">
                          <p className="truncate font-medium text-[var(--text)]">
                            {formatUserName(user)}
                          </p>
                          <p className="mt-0.5 truncate text-xs text-[var(--text-faint)]">
                            @{user.username} · {user.email}
                          </p>
                        </div>
                      </div>
                    </td>
                    {devMode && (
                      <td className="px-5 py-3.5">
                        <p className="font-mono text-[11px] text-emerald-400 select-all">{user.id}</p>
                      </td>
                    )}
                    <td className="px-5 py-3.5">
                      <div className="flex flex-wrap items-center gap-1.5">
                        <AccountTypeBadge accountType={user.accountType} t={t} />
                        {user.role ? (
                          <Badge variant="role" role={user.role.name}>
                            {user.role.name}
                          </Badge>
                        ) : (
                          <span className="text-xs text-[var(--text-faint)]">{tc("noRole")}</span>
                        )}
                      </div>
                    </td>
                    <td className="px-5 py-3.5">
                      <StatusDot
                        active={user.isActive}
                        label={user.isActive ? tc("active") : tc("inactive")}
                      />
                    </td>
                    <td className="px-5 py-3.5 text-xs text-[var(--text-muted)]">
                      {new Date(user.createdAt).toLocaleDateString()}
                    </td>
                    {showActions && (
                      <td className="px-5 py-3.5">
                        <div className="flex items-center justify-end gap-1 opacity-70 transition-opacity hover:opacity-100">
                          {canImpersonateUser(user) && (
                            <Tooltip content={t("impersonateHint")} label={t("impersonate")} placement="top">
                              <span className="inline-flex">
                                <Button
                                  variant="ghost"
                                  size="sm"
                                  onClick={() => startImpersonation(user)}
                                  disabled={impersonatingId === user.id}
                                  aria-label={t("impersonate")}
                                  className="text-amber-400 hover:bg-amber-500/10 hover:text-amber-300"
                                >
                                  {impersonatingId === user.id ? (
                                    <Loader2 className="h-3.5 w-3.5 animate-spin" />
                                  ) : (
                                    <VenetianMask className="h-3.5 w-3.5" />
                                  )}
                                </Button>
                              </span>
                            </Tooltip>
                          )}
                          {canUpdate && (
                            <Button
                              variant="ghost"
                              size="sm"
                              onClick={() => openEdit(user)}
                              aria-label={tc("edit")}
                            >
                              <Pencil className="h-3.5 w-3.5" />
                            </Button>
                          )}
                          {canDelete && (
                            <Button
                              variant="ghost"
                              size="sm"
                              onClick={() => setDeleteTarget(user)}
                              aria-label={tc("delete")}
                              className="text-red-400 hover:bg-red-500/10 hover:text-red-300"
                            >
                              <Trash2 className="h-3.5 w-3.5" />
                            </Button>
                          )}
                        </div>
                      </td>
                    )}
                  </tr>
                ))
              )}
            </tbody>
          </table>
        </div>

        {total > limit && (
          <div className="flex flex-col gap-3 border-t border-[var(--border)] px-4 py-3.5 sm:flex-row sm:items-center sm:justify-between sm:px-5">
            <span className="text-xs text-[var(--text-faint)]">
              {tc("page")} {page} {tc("of")} {totalPages}
            </span>
            <div className="flex gap-1.5">
              <Button
                variant="secondary"
                size="sm"
                onClick={() => setPage((p) => Math.max(1, p - 1))}
                disabled={page === 1}
              >
                <ChevronLeft className="h-4 w-4" />
                {tc("previous")}
              </Button>
              <Button
                variant="secondary"
                size="sm"
                onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
                disabled={page === totalPages}
              >
                {tc("next")}
                <ChevronRight className="h-4 w-4" />
              </Button>
            </div>
          </div>
        )}
      </div>

      {showModal && (
        <Modal
          title={editUser ? t("editUser") : t("addUser")}
          description={editUser ? editUser.email : t("total", { count: total })}
          onClose={() => setShowModal(false)}
        >
          <form onSubmit={handleSave} className="flex min-h-0 flex-1 flex-col overflow-hidden">
            <div className="min-h-0 flex-1 space-y-5 overflow-y-auto px-5 py-5 sm:px-6">
              <section className="space-y-3">
                <div className="flex items-center gap-2 text-[var(--text-faint)]">
                  <Mail className="h-3.5 w-3.5" />
                  <p className="text-[10px] font-semibold uppercase tracking-widest">
                    {t("accountDetails")}
                  </p>
                </div>
                <div className="space-y-3.5">
                  <div className="grid gap-3.5 sm:grid-cols-2">
                    <Input
                      label={ta("firstName")}
                      value={form.firstName}
                      onChange={(e) => setForm({ ...form, firstName: e.target.value })}
                      required
                    />
                    <Input
                      label={ta("lastName")}
                      value={form.lastName}
                      onChange={(e) => setForm({ ...form, lastName: e.target.value })}
                      required
                    />
                  </div>
                  <div className="space-y-1.5">
                    <Input
                      label={ta("username")}
                      hint={ta("usernameHint")}
                      hintLabel={tc("helpLabel")}
                      value={form.username}
                      onChange={(e) => setForm({ ...form, username: e.target.value.toLowerCase() })}
                      required
                    />
                  </div>
                  <Input
                    label={ta("email")}
                    type="email"
                    value={form.email}
                    onChange={(e) => setForm({ ...form, email: e.target.value })}
                    required
                  />
                  <Input
                    label={editUser ? t("newPasswordOptional") : ta("password")}
                    hint={editUser ? t("newPasswordHint") : undefined}
                    hintLabel={tc("helpLabel")}
                    type="password"
                    value={form.password}
                    onChange={(e) => setForm({ ...form, password: e.target.value })}
                    required={!editUser}
                    placeholder={ta("passwordMinPlaceholder")}
                  />
                </div>
              </section>

              <section className="space-y-3 border-t border-[var(--border)] pt-5">
                <div className="flex items-center gap-2 text-[var(--text-faint)]">
                  <Shield className="h-3.5 w-3.5" />
                  <p className="text-[10px] font-semibold uppercase tracking-widest">
                    {t("accessSettings")}
                  </p>
                </div>
                <div className="space-y-3.5">
                  {/* Account type selector — hidden when mode fixes the type */}
                  {mode !== "users" && (
                    <div className="space-y-1.5">
                      <label className="text-[11px] font-semibold uppercase tracking-widest text-[var(--text-faint)]">
                        {t("accountType")}
                      </label>
                      <div className={`grid gap-2 ${mode === "employees" ? "grid-cols-2" : "grid-cols-3"}`}>
                        {(mode === "employees"
                          ? (["SYSTEM", "DEV"] as const)
                          : (["SYSTEM", "USER", "DEV"] as const)
                        ).map((type) => (
                          <button
                            key={type}
                            type="button"
                            onClick={() => setForm({ ...form, accountType: type })}
                            className={`cursor-pointer rounded-lg border px-3 py-2 text-xs font-medium transition-colors ${
                              form.accountType === type
                                ? type === "SYSTEM"
                                  ? "border-amber-500/40 bg-amber-500/10 text-amber-400"
                                  : type === "USER"
                                    ? "border-purple-500/40 bg-purple-500/10 text-purple-400"
                                    : "border-emerald-500/40 bg-emerald-500/10 text-emerald-400"
                                : "border-[var(--border)] bg-[var(--bg)] text-[var(--text-muted)] hover:border-[var(--accent)]/30"
                            }`}
                          >
                            {type === "SYSTEM" ? t("typeEmployee") : type === "USER" ? t("typeUser") : t("typeDev")}
                          </button>
                        ))}
                      </div>
                    </div>
                  )}

                  <div className="space-y-1.5">
                    <LabelWithHint
                      label={t("role")}
                      hint={t("roleHint")}
                      hintLabel={tc("helpLabel")}
                      htmlFor="user-role-select"
                    />
                    <select
                      id="user-role-select"
                      value={form.roleId}
                      onChange={(e) => setForm({ ...form, roleId: e.target.value })}
                      className="w-full cursor-pointer rounded-lg border border-[var(--border)] bg-[var(--bg)] px-3.5 py-2.5 text-sm text-[var(--text)] focus:border-[var(--accent)]/60 focus:outline-none focus:ring-2 focus:ring-[var(--accent)]/40"
                    >
                      <option value="">{tc("noRole")}</option>
                      {assignableRoles.map((r) => (
                        <option key={r.id} value={r.id}>
                          {r.name}
                        </option>
                      ))}
                    </select>
                  </div>

                  <label className="flex cursor-pointer items-start gap-3 rounded-xl border border-[var(--border)] bg-[var(--bg)]/60 p-3.5 transition-colors hover:border-[var(--accent)]/30">
                    <input
                      type="checkbox"
                      checked={form.isActive}
                      onChange={(e) => setForm({ ...form, isActive: e.target.checked })}
                      className="mt-0.5 h-4 w-4 cursor-pointer rounded accent-[var(--accent)]"
                    />
                    <span className="min-w-0 flex-1">
                      <span className="flex items-center gap-1.5">
                        <span className="text-sm font-medium text-[var(--text)]">
                          {t("activeAccount")}
                        </span>
                        <HelpTooltip content={t("activeAccountHint")} label={tc("helpLabel")} />
                      </span>
                    </span>
                  </label>
                </div>
              </section>
            </div>

            <div className="flex shrink-0 items-center justify-end gap-2.5 border-t border-[var(--border)] bg-[var(--bg)]/40 px-5 py-4 sm:px-6">
              <Button
                type="button"
                variant="secondary"
                onClick={() => setShowModal(false)}
                disabled={saving}
                className="min-w-[96px]"
              >
                {tc("cancel")}
              </Button>
              <Button type="submit" disabled={saving} className="min-w-[110px]">
                {saving ? (
                  <>
                    <Loader2 className="h-4 w-4 animate-spin" />
                    {tc("saving")}
                  </>
                ) : editUser ? (
                  tc("update")
                ) : (
                  tc("create")
                )}
              </Button>
            </div>
          </form>
        </Modal>
      )}

      <ConfirmModal
        open={Boolean(deleteTarget)}
        title={tc("confirmTitle")}
        description={
          deleteTarget
            ? `${t("deleteConfirm")} (${formatUserName(deleteTarget)} @${deleteTarget.username})`
            : t("deleteConfirm")
        }
        loading={deleting}
        onConfirm={handleDelete}
        onCancel={() => {
          if (!deleting) setDeleteTarget(null);
        }}
      />
    </div>
  );
}