/**
 * Primitivas de painel — o `dashboard-card` do Efferd (bloco dashboard-11),
 * reescrito em JSX sem build.
 *
 * O que se aproveita do Efferd é a linguagem, e é ela que faz o ecrã parecer
 * desenhado em vez de empilhado:
 *
 *   - **As bordas passam dos cantos.** Cada cartão desenha as quatro bordas
 *     1,5 rem mais compridas do que ele (`--extended-border`), e onde dois
 *     cartões se tocam as linhas cruzam-se. Dá a grelha de planta técnica sem
 *     um único contorno a mais
 *   - **O título é pequeno e leva o ícone**; o número é que é grande
 *   - **A meta vai em baixo**, com a acção à direita
 *
 * Porque não se copia o ficheiro do Efferd: vem em TSX, importa `cn` de
 * `@/lib/utils` e usa a sintaxe do Tailwind 4 (`h-(--var)`), e aqui o Tailwind
 * é o 3 do CDN e não há build. Os nomes em português são para não colidirem
 * no escopo global com nada do que já existe.
 *
 * `--extended-border` define-se no contentor da página (ver AppShell).
 */

function PainelBordas() {
  const linha = 'absolute bg-[var(--border)]';
  return (
    <div className="ns-painel-bordas pointer-events-none absolute -inset-px" aria-hidden="true">
      <div className={`${linha} left-1/2 top-0 h-px w-[calc(100%+var(--extended-border,0px))] -translate-x-1/2`} />
      <div className={`${linha} bottom-0 left-1/2 h-px w-[calc(100%+var(--extended-border,0px))] -translate-x-1/2`} />
      <div className={`${linha} left-0 top-1/2 h-[calc(100%+var(--extended-border,0px))] w-px -translate-y-1/2`} />
      <div className={`${linha} right-0 top-1/2 h-[calc(100%+var(--extended-border,0px))] w-px -translate-y-1/2`} />
    </div>
  );
}

// Sem `...props` de propósito: o Babel do browser transforma o resto num
// `var _excluded` global, e o ficheiro seguinte que faça o mesmo pisa-o — ver
// scripts/verificar-jsx.js. Foi o que tirou a classe base a este cartão.
function Painel({ className = '', children, comBordas = true }) {
  return (
    // `ns-painel` e `ns-painel-bordas`: os ganchos do cartão da versão C (netscreen.css).
    <div className={`ns-painel relative flex h-full w-full flex-col ${className}`}>
      {children}
      {comBordas && <PainelBordas />}
    </div>
  );
}

function PainelTitulo({ Icone, children, className = '' }) {
  return (
    <span className={`flex items-center gap-1.5 text-xs font-medium text-muted-foreground ${className}`}>
      {Icone && <Icone size={16} className="shrink-0 text-foreground" />}
      {children}
    </span>
  );
}

function PainelConteudo({ className = '', children }) {
  return <div className={`relative z-[1] flex-1 px-4 py-4 lg:px-5 ${className}`}>{children}</div>;
}

function PainelMeta({ className = '', children }) {
  return (
    <div className={`relative z-[1] flex w-full items-center justify-between gap-3 px-4 py-4 lg:px-5 ${className}`}>
      {children}
    </div>
  );
}

/**
 * Uma barra de uso, como a do `plan-usage` do app-shell-11.
 *
 * `limite` a null é ilimitado: mostra-se o número e não a barra, porque uma
 * barra de "3 de infinito" está sempre vazia e não diz nada.
 */
function BarraUso({ rotulo, usado, limite, formatar = (n) => n }) {
  const ilimitado = limite === null || limite === undefined;
  const pct = ilimitado || !limite ? 0 : Math.min(100, Math.round((usado / limite) * 100));
  return (
    <div>
      <div className="flex items-baseline justify-between gap-3 text-xs">
        <span className="text-muted-foreground">{rotulo}</span>
        <span className="font-mono tabular-nums text-foreground">
          {formatar(usado)}
          {!ilimitado && <span className="text-muted-foreground"> / {formatar(limite)}</span>}
          {ilimitado && <span className="text-muted-foreground"> · sem limite</span>}
        </span>
      </div>
      {!ilimitado && (
        <div
          className="mt-2 h-1.5 w-full bg-secondary"
          role="progressbar"
          aria-label={rotulo}
          aria-valuemin={0}
          aria-valuemax={100}
          aria-valuenow={pct}
        >
          <div
            className={`h-full ${pct >= 90 ? 'bg-accent' : 'bg-primary'}`}
            style={{ width: `${Math.max(pct, usado > 0 ? 2 : 0)}%` }}
          />
        </div>
      )}
    </div>
  );
}

/**
 * O perfil Leitura vê, e não muda (becos de 9 Out, ponto 15): onde os botões se escondem, diz-se porquê
 * e a quem cabe, em vez de um sítio vazio. `accao` continua a frase: «carregar ficheiros».
 */
function SoQuemPode({ accao, className = '' }) {
  return (
    <p className={`text-xs text-muted-foreground ${className}`} role="note">
      {`Só o Responsável ou um Editor da conta pode ${accao}. Tens o perfil Leitura: vês tudo, sem alterar.`}
    </p>
  );
}