"use client";

import { useEffect, useMemo, useState } from "react";
import { createPortal } from "react-dom";
import { getSupabaseClient } from "@/lib/supabase";
import { getCompanyContext } from "@/lib/company-context";
import { lerAjustesArmazenados, type AjustesValidos } from "@/lib/ajustes-de-permissao";
import { CATALOGO } from "@/lib/catalogo-permissoes";
import PainelPermissoes from "./painel-permissoes";
import { PageHeader } from "@/components/ui/page-header";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { CustomSelect } from "@/components/ui/custom-select";
import { Check, Mail, MoreVertical, X } from "lucide-react";
import Image from "next/image";

type CompanyUserRow = {
  id: string;
  user_id: string;
  email: string;
  role: CompanyRole;
  permissions: unknown;
  active: boolean;
  created_at: string;
};

const passthroughLoader = ({ src }: { src: string }) => src;

/* Assistentes e apps está sendo liberado empresa por empresa. Enquanto a
   empresa não tem o recurso, a permissão dele não aparece no painel. */
const SEM_OCULTAS: readonly string[] = [];
const SO_DOS_ASSISTENTES: readonly string[] = ["company.assistants.manage"];
/* Produtos digitais também abre empresa por empresa: o módulo inteiro some
   do painel enquanto a empresa não tem a área. */
const DOS_DIGITAIS: readonly string[] = CATALOGO.filter((modulo) => modulo.chave === "digital").flatMap((modulo) =>
  modulo.acoes.map((acao) => acao.chave)
);

type CompanyRole =
  | "owner"
  | "admin"
  | "manager"
  | "financial"
  | "production"
  | "sales"
  | "viewer";

type Toast = { type: "success" | "error"; text: string } | null;
/* Acoes marcadas (booleano) e niveis de modulo (texto) moram no mesmo objeto. */
type PermissionOverrides = AjustesValidos;
type EmployeeProfileSummary = { full_name: string | null; avatar_url: string | null };

const roleOptions: { value: Exclude<CompanyRole, "owner">; label: string }[] = [
  { value: "viewer", label: "Visualizador" },
  { value: "sales", label: "Vendas" },
  { value: "production", label: "Produção" },
  { value: "financial", label: "Financeiro" },
  { value: "manager", label: "Gerente" },
  { value: "admin", label: "Admin" },
];

function roleLabel(role: CompanyRole) {
  if (role === "owner") return "Dono";
  return roleOptions.find((r) => r.value === role)?.label ?? role;
}

function formatDateTimeBr(value: string) {
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return value;
  return new Intl.DateTimeFormat("pt-BR", {
    day: "2-digit",
    month: "2-digit",
    year: "numeric",
    hour: "2-digit",
    minute: "2-digit",
  }).format(date);
}

function initialsFromName(value: string) {
  const parts = value
    .trim()
    .split(/\s+/)
    .filter(Boolean);
  if (parts.length === 0) return "?";
  const first = parts[0]?.[0] ?? "";
  const last = parts.length > 1 ? parts[parts.length - 1]?.[0] ?? "" : "";
  const result = `${first}${last}`.trim().toUpperCase();
  return result || "?";
}

export default function CompanyUsersPage() {
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [toast, setToast] = useState<Toast>(null);
  const [users, setUsers] = useState<CompanyUserRow[]>([]);
  const [employeeProfiles, setEmployeeProfiles] = useState<Record<string, EmployeeProfileSummary>>({});
  const [ownerLogoUrl, setOwnerLogoUrl] = useState<string>("");
  const [meUserId, setMeUserId] = useState<string | null>(null);
  const [canManage, setCanManage] = useState(false);
  const [temAssistentes, setTemAssistentes] = useState(false);
  const [temDigitais, setTemDigitais] = useState(false);
  const ocultas = useMemo(
    () => [...(temAssistentes ? SEM_OCULTAS : SO_DOS_ASSISTENTES), ...(temDigitais ? SEM_OCULTAS : DOS_DIGITAIS)],
    [temAssistentes, temDigitais]
  );
  const [permissionsUser, setPermissionsUser] = useState<CompanyUserRow | null>(null);
  const [permissionsDraft, setPermissionsDraft] = useState<PermissionOverrides>({});
  const [permissionsSaving, setPermissionsSaving] = useState(false);

  const [newEmail, setNewEmail] = useState("");
  const [newRole, setNewRole] = useState<Exclude<CompanyRole, "owner">>("viewer");
  const [isAddOpen, setIsAddOpen] = useState(false);
  const [openMenu, setOpenMenu] = useState<{ userId: string; rect: DOMRect } | null>(null);

  const activeCount = useMemo(
    () => users.filter((u) => u.active).length,
    [users]
  );

  async function refresh() {
    setLoading(true);
    setToast(null);
    try {
      const supabase = getSupabaseClient();
      const {
        data: { user },
      } = await supabase.auth.getUser();

      if (!user) {
        setToast({ type: "error", text: "Usuário não autenticado." });
        setUsers([]);
        setEmployeeProfiles({});
        setOwnerLogoUrl("");
        return;
      }

      setMeUserId(user.id);
      const ownerProfile = await supabase
        .from("profiles")
        .select("logo_url")
        .eq("id", user.id)
        .maybeSingle();
      if (!ownerProfile.error && ownerProfile.data && typeof (ownerProfile.data as { logo_url?: unknown }).logo_url === "string") {
        setOwnerLogoUrl(String((ownerProfile.data as { logo_url?: unknown }).logo_url || "").trim());
      } else {
        setOwnerLogoUrl("");
      }

      const ctx = await getCompanyContext(supabase, user);
      const isOwner = ctx.ownerId === user.id;
      const isAdmin = ctx.membership?.role === "admin" || ctx.membership?.role === "owner";
      setCanManage(isOwner || isAdmin);

      const res = await fetch("/api/company/users", { method: "GET" });
      const json = (await res.json().catch(() => null)) as
        | { users?: CompanyUserRow[]; error?: string; recursos?: { assistentes?: boolean; digitais?: boolean } }
        | null;
      setTemAssistentes(json?.recursos?.assistentes === true);
      setTemDigitais(json?.recursos?.digitais === true);

      if (!res.ok) {
        setUsers([]);
        setEmployeeProfiles({});
        setToast({ type: "error", text: json?.error || "Falha ao carregar funcionários." });
        return;
      }

      const nextUsers = (json?.users ?? []) as CompanyUserRow[];
      setUsers(nextUsers);

      const ids = Array.from(new Set(nextUsers.map((u) => u.user_id).filter(Boolean)));
      if (ids.length === 0) {
        setEmployeeProfiles({});
      } else {
        const profilesRes = await supabase
          .from("employee_profiles")
          .select("user_id,full_name,avatar_url")
          .in("user_id", ids);

        if (profilesRes.error || !profilesRes.data) {
          setEmployeeProfiles({});
        } else {
          const map: Record<string, EmployeeProfileSummary> = {};
          for (const row of profilesRes.data as Array<{
            user_id: string;
            full_name: string | null;
            avatar_url: string | null;
          }>) {
            if (!row?.user_id) continue;
            map[row.user_id] = { full_name: row.full_name ?? null, avatar_url: row.avatar_url ?? null };
          }
          setEmployeeProfiles(map);
        }
      }
    } finally {
      setLoading(false);
    }
  }

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

  useEffect(() => {
    if (!permissionsUser) {
      setPermissionsDraft({});
      setPermissionsSaving(false);
      return;
    }
    setPermissionsDraft(lerAjustesArmazenados(permissionsUser.permissions));
  }, [permissionsUser]);

  async function handleCreate() {
    if (!canManage) return;

    const email = newEmail.trim().toLowerCase();
    if (!email) {
      setToast({ type: "error", text: "Informe um email." });
      return;
    }

    setSaving(true);
    setToast(null);
    try {
      const res = await fetch("/api/company/users", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ email, role: newRole }),
      });
      const json = (await res.json().catch(() => null)) as { error?: string } | null;
      if (!res.ok) {
        setToast({ type: "error", text: json?.error || "Falha ao criar funcionário." });
        return;
      }

      setNewEmail("");
      setNewRole("viewer");
      setToast({
        type: "success",
        text: "Funcionário criado. Enviamos o email de redefinição de senha.",
      });
      setIsAddOpen(false);
      await refresh();
    } finally {
      setSaving(false);
    }
  }

  async function handleToggleActive(row: CompanyUserRow) {
    if (!canManage) return;
    if (row.user_id === meUserId) return;

    const next = !row.active;
    setSaving(true);
    setToast(null);
    try {
      const res = await fetch("/api/company/users", {
        method: "PATCH",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ id: row.id, active: next }),
      });
      const json = (await res.json().catch(() => null)) as { error?: string } | null;
      if (!res.ok) {
        setToast({ type: "error", text: json?.error || "Falha ao atualizar funcionário." });
        return;
      }

      setUsers((prev) => prev.map((u) => (u.id === row.id ? { ...u, active: next } : u)));
      setToast({ type: "success", text: next ? "Funcionário ativado." : "Funcionário desativado." });
    } finally {
      setSaving(false);
    }
  }

  async function handleChangeRole(row: CompanyUserRow, role: Exclude<CompanyRole, "owner">) {
    if (!canManage) return;
    if (row.user_id === meUserId) return;

    setSaving(true);
    setToast(null);
    try {
      const res = await fetch("/api/company/users", {
        method: "PATCH",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ id: row.id, role }),
      });
      const json = (await res.json().catch(() => null)) as { error?: string } | null;
      if (!res.ok) {
        setToast({ type: "error", text: json?.error || "Falha ao atualizar função." });
        return;
      }

      setUsers((prev) => prev.map((u) => (u.id === row.id ? { ...u, role } : u)));
      setToast({ type: "success", text: "Função atualizada." });
    } finally {
      setSaving(false);
    }
  }

  async function handleRemove(row: CompanyUserRow) {
    if (!canManage) return;
    if (row.user_id === meUserId) return;
    if (!confirm(`Remover ${row.email} da empresa?`)) return;

    setSaving(true);
    setToast(null);
    try {
      const res = await fetch("/api/company/users", {
        method: "DELETE",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ id: row.id }),
      });
      const json = (await res.json().catch(() => null)) as { error?: string } | null;
      if (!res.ok) {
        setToast({ type: "error", text: json?.error || "Falha ao remover funcionário." });
        return;
      }

      setUsers((prev) => prev.filter((u) => u.id !== row.id));
      setToast({ type: "success", text: "Funcionário removido." });
    } finally {
      setSaving(false);
    }
  }

  useEffect(() => {
    if (!openMenu) return;

    const handle = () => setOpenMenu(null);
    window.addEventListener("scroll", handle, true);
    window.addEventListener("resize", handle);
    return () => {
      window.removeEventListener("scroll", handle, true);
      window.removeEventListener("resize", handle);
    };
  }, [openMenu]);

  async function handleSavePermissions() {
    if (!permissionsUser) return;
    if (!canManage) return;
    if (permissionsUser.user_id === meUserId) return;
    if (permissionsUser.role === "owner") return;
    if (permissionsSaving) return;

    setPermissionsSaving(true);
    setToast(null);
    try {
      /* A validacao de verdade e na API; aqui so nao ha o que filtrar, porque
         o painel so produz chave e valor que o catalogo conhece. */
      const payload = permissionsDraft;

      const res = await fetch("/api/company/users", {
        method: "PATCH",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ id: permissionsUser.id, permissions: payload }),
      });
      const json = (await res.json().catch(() => null)) as { error?: string } | null;
      if (!res.ok) {
        setToast({ type: "error", text: json?.error || "Falha ao salvar permissões." });
        return;
      }

      setUsers((prev) =>
        prev.map((u) => (u.id === permissionsUser.id ? { ...u, permissions: payload } : u))
      );
      setPermissionsUser((prev) => (prev ? { ...prev, permissions: payload } : prev));
      setToast({ type: "success", text: "Permissões atualizadas." });
    } finally {
      setPermissionsSaving(false);
    }
  }

  const menuNode =
    openMenu && typeof document !== "undefined"
      ? createPortal(
          <div
            className="fixed inset-0 z-[100] bg-transparent"
            onMouseDown={() => setOpenMenu(null)}
          >
            <div
              className="absolute w-64 rounded-xl border border-zinc-200 bg-white shadow-xl p-2"
              style={{
                left: Math.min(openMenu.rect.left, window.innerWidth - 280),
                top: Math.min(openMenu.rect.bottom + 8, window.innerHeight - 320),
              }}
              onMouseDown={(e) => e.stopPropagation()}
            >
              {(() => {
                const row = users.find((u) => u.user_id === openMenu.userId);
                if (!row) return null;
                const profile = employeeProfiles[row.user_id];
                const displayName = (profile?.full_name ?? "").trim() || row.email;

                const isMe = row.user_id === meUserId;
                const isOwnerRole = row.role === "owner";
                const canEdit = canManage && !saving && !isMe && !isOwnerRole;

                return (
                  <div className="space-y-2">
                    <div className="px-2 pt-1 pb-2 border-b border-zinc-100">
                      <div className="text-xs text-zinc-500">Funcionário</div>
                      <div className="text-sm font-semibold text-zinc-900 truncate">{displayName}</div>
                      {displayName !== row.email ? (
                        <div className="text-xs text-zinc-500 truncate">{row.email}</div>
                      ) : null}
                    </div>

                    <button
                      type="button"
                      onClick={() => {
                        setOpenMenu(null);
                        setPermissionsUser(row);
                      }}
                      className="w-full text-left px-3 py-2 rounded-lg text-sm transition-colors hover:bg-zinc-50 text-zinc-700"
                    >
                      Ver permissões
                    </button>

                    <div className="px-2">
                      <div className="text-xs text-zinc-500 mb-1">Função</div>
                      <div className="space-y-1">
                        {roleOptions.map((opt) => (
                          <button
                            key={opt.value}
                            type="button"
                            disabled={!canEdit}
                            onClick={async () => {
                              setOpenMenu(null);
                              await handleChangeRole(row, opt.value);
                            }}
                            className={[
                              "w-full flex items-center justify-between px-2 py-2 rounded-lg text-sm transition-colors",
                              row.role === opt.value
                                ? "bg-[rgba(10,192,214,0.08)] text-[var(--ks-color-primary-strong)]"
                                : "text-zinc-700 hover:bg-zinc-50",
                              !canEdit ? "opacity-60 cursor-not-allowed hover:bg-transparent" : "",
                            ].join(" ")}
                          >
                            <span className="truncate">{opt.label}</span>
                            {row.role === opt.value ? <Check size={14} /> : null}
                          </button>
                        ))}
                      </div>
                    </div>

                    <div className="border-t border-zinc-100 pt-2">
                      <button
                        type="button"
                        disabled={!canEdit}
                        onClick={async () => {
                          setOpenMenu(null);
                          await handleToggleActive(row);
                        }}
                        className={[
                          "w-full text-left px-3 py-2 rounded-lg text-sm transition-colors",
                          "hover:bg-zinc-50 text-zinc-700",
                          !canEdit ? "opacity-60 cursor-not-allowed hover:bg-transparent" : "",
                        ].join(" ")}
                      >
                        {row.active ? "Desativar" : "Ativar"}
                      </button>
                      <button
                        type="button"
                        disabled={!canEdit}
                        onClick={async () => {
                          setOpenMenu(null);
                          await handleRemove(row);
                        }}
                        className={[
                          "w-full text-left px-3 py-2 rounded-lg text-sm transition-colors",
                          "hover:bg-red-50 text-red-600",
                          !canEdit ? "opacity-60 cursor-not-allowed hover:bg-transparent" : "",
                        ].join(" ")}
                      >
                        Remover
                      </button>
                    </div>
                  </div>
                );
              })()}
            </div>
          </div>,
          document.body
        )
      : null;

  return (
    <div className="space-y-6">
      <PageHeader
        eyebrow="Empresa"
        title="Funcionários"
        subtitle={`Gerencie quem acessa sua empresa. Ativos: ${activeCount}`}
        actions={
          <Button
            type="button"
            icon={<Mail size={16} />}
            onClick={() => setIsAddOpen(true)}
            disabled={loading || saving}
          >
            Adicionar
          </Button>
        }
      />

      <div className="ks-surface p-6 space-y-4">
        <div className="text-sm text-[var(--ks-color-text-muted)]">
          O funcionário recebe acesso pela empresa e define a senha via email de recuperação.
        </div>

        {toast ? (
          <div
            className={[
              "p-3 rounded-xl border text-sm flex items-center gap-2",
              toast.type === "success"
                ? "bg-[color:rgba(18,185,129,0.08)] border-[rgba(18,185,129,0.2)] text-[var(--ks-color-status-success)]"
                : "bg-red-50 border-red-100 text-red-600",
            ].join(" ")}
          >
            <div
              className={[
                "h-1.5 w-1.5 rounded-full",
                toast.type === "success" ? "bg-[var(--ks-color-status-success)]" : "bg-red-500",
              ].join(" ")}
            />
            {toast.text}
          </div>
        ) : null}

        {!canManage ? (
          <div className="text-xs text-[var(--ks-color-text-muted)]">
            Você não tem permissão para gerenciar funcionários.
          </div>
        ) : null}
      </div>

      {loading ? (
        <div className="ks-surface flex items-center justify-center py-16 text-sm text-zinc-500">
          Carregando funcionários...
        </div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
          {users.length === 0 ? (
            <div className="ks-surface p-10 text-center text-sm text-zinc-500 md:col-span-2 xl:col-span-3">
              Nenhum funcionário cadastrado.
            </div>
          ) : (
            users.map((row) => {
              const isMe = row.user_id === meUserId;
              const isOwnerRole = row.role === "owner";
              const profile = employeeProfiles[row.user_id];
              const displayName = (profile?.full_name ?? "").trim() || row.email;
              const avatarUrl =
                (isOwnerRole && isMe ? ownerLogoUrl : "") ||
                (profile?.avatar_url ?? "").trim() ||
                "";
              const fallbackInitials = initialsFromName(displayName === row.email ? row.email.split("@")[0] ?? row.email : displayName);
              return (
                <div key={row.id} className="ks-surface p-5 rounded-2xl">
                  <div className="flex items-start justify-between gap-3">
                    <div className="min-w-0">
                      <div className="flex items-center gap-3">
                        {/* Mesmo motivo do título: no tema escuro a inicial
                            ficava roxo-escuro sobre roxo-escuro e sumia. */}
                        <div className="h-11 w-11 rounded-full bg-[var(--ks-color-primary-soft)] text-[var(--ks-color-primary-strong)] flex items-center justify-center overflow-hidden flex-shrink-0">
                          {avatarUrl ? (
                            <Image
                              src={avatarUrl}
                              alt={displayName}
                              className="h-full w-full object-cover"
                              width={44}
                              height={44}
                              loader={passthroughLoader}
                            />
                          ) : (
                            <span className="text-sm font-bold">{fallbackInitials}</span>
                          )}
                        </div>
                        <div className="min-w-0">
                          <div className="text-sm font-semibold text-zinc-900 truncate">{displayName}</div>
                          {displayName !== row.email ? (
                            <div className="text-xs text-zinc-500 truncate">{row.email}</div>
                          ) : null}
                        </div>
                      </div>
                      <div className="mt-1 flex items-center gap-2">
                        <span className="text-xs px-2 py-1 rounded-full bg-[rgba(10,192,214,0.08)] text-[var(--ks-color-primary-strong)] font-semibold">
                          {roleLabel(row.role)}
                        </span>
                        <span
                          className={[
                            "text-xs px-2 py-1 rounded-full border font-semibold inline-flex items-center gap-1.5",
                            row.active
                              ? "bg-[color:rgba(18,185,129,0.08)] border-[rgba(18,185,129,0.2)] text-[var(--ks-color-status-success)]"
                              : "bg-zinc-50 border-zinc-200 text-zinc-600",
                          ].join(" ")}
                        >
                          {row.active ? <Check size={12} /> : null}
                          {row.active ? "Ativo" : "Inativo"}
                        </span>
                        {isMe ? (
                          <span className="text-xs px-2 py-1 rounded-full bg-zinc-100 text-zinc-600 font-semibold">
                            Você
                          </span>
                        ) : null}
                      </div>
                    </div>

                    <button
                      type="button"
                      onClick={(e) => {
                        const rect = (e.currentTarget as HTMLButtonElement).getBoundingClientRect();
                        setOpenMenu({ userId: row.user_id, rect });
                      }}
                      className="h-9 w-9 inline-flex items-center justify-center rounded-full border border-zinc-200 bg-white hover:bg-zinc-50 transition"
                      disabled={saving}
                      aria-label="Abrir opções"
                    >
                      <MoreVertical size={16} className="text-zinc-600" />
                    </button>
                  </div>

                  <div className="mt-4 text-xs text-zinc-500">
                    Criado em <span className="font-medium text-zinc-700">{formatDateTimeBr(row.created_at)}</span>
                  </div>

                  {isOwnerRole ? (
                    <div className="mt-3 text-xs text-zinc-500">Este usuário é o dono da empresa.</div>
                  ) : !canManage ? (
                    <div className="mt-3 text-xs text-zinc-500">Sem permissão para editar.</div>
                  ) : isMe ? (
                    <div className="mt-3 text-xs text-zinc-500">Você não pode alterar seu próprio acesso.</div>
                  ) : null}
                </div>
              );
            })
          )}
        </div>
      )}

      {isAddOpen ? (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm p-4">
          <div className="w-full max-w-md bg-white rounded-2xl shadow-xl overflow-visible">
            <div className="flex items-center justify-between p-4 border-b border-zinc-100">
              <div>
                <div className="text-sm font-semibold text-zinc-900">Adicionar funcionário</div>
                <div className="text-xs text-zinc-500">Enviaremos um email para definir a senha.</div>
              </div>
              <button
                type="button"
                onClick={() => setIsAddOpen(false)}
                className="h-9 w-9 inline-flex items-center justify-center rounded-full hover:bg-zinc-100"
              >
                <X size={18} className="text-zinc-500" />
              </button>
            </div>

            <form
              onSubmit={(e) => {
                e.preventDefault();
                handleCreate();
              }}
              className="p-5 space-y-4"
            >
              <Input
                id="new-user-email"
                label="Email"
                value={newEmail}
                onChange={(e) => setNewEmail(e.target.value)}
                placeholder="funcionario@empresa.com"
                icon={<Mail size={16} />}
                disabled={!canManage || saving}
              />

              <div className="space-y-1">
                <label className="ks-input-label">Função</label>
                <CustomSelect
                  options={roleOptions}
                  value={newRole}
                  onChange={(value) => setNewRole(value as Exclude<CompanyRole, "owner">)}
                  disabled={!canManage || saving}
                />
              </div>

              <div className="flex gap-3 pt-2">
                <Button
                  type="button"
                  variant="secondary"
                  onClick={() => setIsAddOpen(false)}
                  disabled={saving}
                  className="flex-1"
                >
                  Cancelar
                </Button>
                <Button type="submit" disabled={!canManage || saving} className="flex-1">
                  Adicionar
                </Button>
              </div>
            </form>
          </div>
        </div>
      ) : null}

      {permissionsUser ? (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm p-4">
          <div className="w-full max-w-4xl bg-[var(--ks-color-bg-elevated)] rounded-[var(--ks-radius-lg)] shadow-[var(--ks-shadow-soft)] overflow-hidden max-h-[85vh] flex flex-col border border-[var(--ks-color-border-subtle)]">
            <div className="flex items-center justify-between p-4 border-b border-[var(--ks-color-border-subtle)]">
              <div className="min-w-0">
                {/* `brand-dark` é quase a cor do fundo no tema escuro: o título
                    sumia. Título é texto, então usa o token de texto. */}
                <div className="text-base font-semibold text-[var(--ks-color-text-primary)] truncate">Permissões</div>
                <div className="text-xs text-[var(--ks-color-text-muted)] truncate">
                  {permissionsUser.email} · {roleLabel(permissionsUser.role)}
                </div>
              </div>
              <button
                type="button"
                onClick={() => setPermissionsUser(null)}
                className="h-9 w-9 inline-flex items-center justify-center rounded-full hover:bg-[rgba(10,192,214,0.08)]"
              >
                <X size={18} className="text-[var(--ks-color-text-muted)]" />
              </button>
            </div>

            <div className="flex-1 min-h-0 p-5 space-y-4 overflow-y-auto">
              {(() => {
                const isMe = permissionsUser.user_id === meUserId;
                const isOwnerRole = permissionsUser.role === "owner";
                const canEdit = canManage && !isMe && !isOwnerRole;
                const quantosAjustes = Object.keys(permissionsDraft).length;

                return (
                  <>
                    <div className="sticky top-0 z-10 bg-[var(--ks-color-bg-elevated)] border-b border-[var(--ks-color-border-subtle)] pb-4">
                      <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
                        <div className="text-xs text-[var(--ks-color-text-soft)]">
                          {isMe
                            ? "Você não pode alterar as próprias permissões."
                            : isOwnerRole
                              ? "O dono da empresa tem acesso a tudo."
                              : quantosAjustes === 0
                                ? `Sem nenhum ajuste: vale o padrão da função ${roleLabel(permissionsUser.role)}.`
                                : `${quantosAjustes} ${quantosAjustes === 1 ? "ajuste" : "ajustes"} sobre o padrão da função ${roleLabel(permissionsUser.role)}.`}
                        </div>
                        <div className="flex items-center gap-2">
                          <Button
                            type="button"
                            size="sm"
                            variant="secondary"
                            onClick={() => setPermissionsDraft(lerAjustesArmazenados(permissionsUser.permissions))}
                            disabled={!canEdit || permissionsSaving}
                          >
                            Desfazer
                          </Button>
                          <Button
                            type="button"
                            size="sm"
                            onClick={handleSavePermissions}
                            disabled={!canEdit || permissionsSaving}
                          >
                            Salvar
                          </Button>
                        </div>
                      </div>
                    </div>

                    <div className="pt-4">
                      <PainelPermissoes
                        papel={permissionsUser.role}
                        ajustes={permissionsDraft}
                        aoMudar={setPermissionsDraft}
                        podeEditar={canEdit}
                        ocultas={ocultas}
                      />
                    </div>
                  </>
                );
              })()}
            </div>
          </div>
        </div>
      ) : null}

      {menuNode}
    </div>
  );
}