"use client";

import { usePermissoes } from "@/lib/permissoes-do-usuario";

/**
 * Um valor em dinheiro que some para quem não pode vê-lo.
 *
 * O caso que ela resolve: o vendedor precisa abrir Contas a receber para saber
 * se o cliente está em dia, e não precisa saber quanto a empresa tem a receber
 * no total. Antes era tudo ou nada — ou ele via a tela inteira, ou não entrava.
 *
 * Borrado, e não escondido, de propósito: a linha continua lá, ele continua
 * vendo que existem cinco contas vencendo hoje e continua trabalhando. Sumir
 * com a coluna faria a tela parecer quebrada.
 *
 * HONESTIDADE SOBRE O QUE ISTO É: borrão é da tela, não do dado. O número
 * chega ao navegador e quem abrir o inspetor vai lê-lo. Para dado que não pode
 * nem chegar ali, o caminho é fechar a tela inteira — é por isso que cada tela
 * do Financeiro tem a própria chave de acesso, e não só esta.
 */
export function Valor({ children, className = "" }: { children: React.ReactNode; className?: string }) {
  const { pode } = usePermissoes();
  if (pode("financial.amounts.see")) return <>{children}</>;

  return (
    <span className={`ks-valor-oculto ${className}`.trim()} title="Você não tem permissão para ver valores">
      <span className="ks-valor-oculto-texto">{children}</span>
      <span className="ks-valor-oculto-cadeado" aria-hidden="true">
        <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="2.2"
             strokeLinecap="round" strokeLinejoin="round">
          <rect x="4" y="10" width="16" height="11" rx="2" />
          <path d="M8 10V7a4 4 0 0 1 8 0v3" />
        </svg>
      </span>
      <span className="ks-apenas-leitor">valor oculto</span>
    </span>
  );
}

/**
 * A mesma pergunta, para quem precisa decidir antes de montar a tela — um
 * gráfico com eixo em reais, por exemplo, que não dá para borrar por fora.
 */
export function usePodeVerValores() {
  const { pode } = usePermissoes();
  return pode("financial.amounts.see");
}