/**
 * <ZonaFicheiro> — largar um ficheiro, ou clicar para o escolher.
 *
 * Substitui o `<input type="file">` à vista, que o browser desenha na língua
 * do sistema — "Choose file / No file chosen" numa aplicação toda em português
 * — e que não aceita largar ficheiros em cima.
 *
 * O `<input>` continua lá e é ele que faz o trabalho (e o `ref` de quem usa
 * isto continua a apontar para ele, para o poder limpar depois de enviar). Só
 * deixa de se ver: `hidden` e não `sr-only`, porque o `sr-only` dentro de um
 * contentor com scroll alarga a página (docs/padroes-interface.md). Quem usa
 * o teclado chega à zona com Tab e abre a escolha com Enter ou Espaço.
 *
 * Não há componente de upload no Efferd — o catálogo é de estrutura de
 * página — e isto é pequeno o bastante para não pedir mais do que as nossas
 * primitivas.
 */
function ZonaFicheiro({ id, campoRef, desactivado, aEnviar, onFicheiro, onFicheiros, multiplo = false, aceita, dica }) {
  const [por, setPor] = React.useState(false); // um ficheiro a pairar por cima
  // Com `multiplo`, entram todos (24 Set): largar a pasta da marca é o gesto
  // natural. Sem ele, só o primeiro, como antes -- mas quem usa isto sabe.
  const entregar = (lista) => {
    if (!lista || !lista.length) return;
    if (multiplo && onFicheiros) onFicheiros([...lista]);
    else if (onFicheiro) onFicheiro(lista[0]);
  };

  const abrir = () => {
    if (!desactivado && campoRef && campoRef.current) campoRef.current.click();
  };

  return (
    <div>
      <input
        id={id}
        ref={campoRef}
        type="file"
        accept={aceita}
        multiple={multiplo}
        disabled={desactivado}
        className="hidden"
        onChange={(e) => entregar(e.target.files)}
      />
      <div
        role="button"
        tabIndex={desactivado ? -1 : 0}
        aria-disabled={!!desactivado}
        aria-describedby={dica ? `${id}-dica` : undefined}
        onClick={abrir}
        onKeyDown={(e) => {
          if (e.key === 'Enter' || e.key === ' ') {
            e.preventDefault();
            abrir();
          }
        }}
        onDragOver={(e) => {
          if (desactivado) return;
          e.preventDefault();
          setPor(true);
        }}
        onDragLeave={() => setPor(false)}
        onDrop={(e) => {
          e.preventDefault();
          setPor(false);
          if (desactivado) return;
          entregar(e.dataTransfer.files);
        }}
        className={`flex cursor-pointer flex-col items-center justify-center gap-1.5 border border-dashed px-4 py-6 text-center outline-none transition-colors focus-visible:border-accent ${
          por ? 'border-primary bg-[hsl(var(--primary)/0.08)]' : 'border-border bg-background hover:border-[rgba(245,242,237,0.3)]'
        } ${desactivado ? 'cursor-not-allowed opacity-50' : ''}`}
      >
        {aEnviar
          ? <ATrabalhar className="text-primary" />
          : <IconMais size={18} className={por ? 'text-primary' : 'text-muted-foreground'} />}
        {aEnviar ? (
          <p className="text-sm text-foreground" role="status">A carregar {aEnviar}…</p>
        ) : multiplo ? (
          <p className="text-sm text-foreground">
            Larga aqui os ficheiros, ou <span className="text-primary underline-offset-2 hover:underline">escolhe-os</span>
          </p>
        ) : (
          <p className="text-sm text-foreground">
            Larga aqui um ficheiro, ou <span className="text-primary underline-offset-2 hover:underline">escolhe-o</span>
          </p>
        )}
        {dica && (
          <p id={`${id}-dica`} className="max-w-prose text-xs text-muted-foreground">
            {dica}
          </p>
        )}
      </div>
    </div>
  );
}