/* global React, Icon, Button, Drawer, FooterPager, fmtDatetime */
// ============================================================
// Componentes_Lista.jsx — os componentes de LISTA do redesenho do Marketplace (Lote A, 10/10/2026)
//
// TabelaDados — tabela com ordenação, cabeçalho fixo, 25/50/100 por página (na memória OU no servidor, com a
// contagem de lá), seleção + barra de ações em lote, mostrar/ocultar colunas, e Enter abre a linha
// PainelRegistro — o painel lateral de um registro, com as AÇÕES dentro (o Drawer, que cuida do foco)
// EstadoDados — carregando · vazio · erro · desatualizado · sucesso, com texto (nunca só cor)
// useConsultaTabela — página, linhas por página e ordem de uma tabela, guardadas na aba do navegador
//
// Os nomes são genéricos de propósito: nasceram para o Marketplace e servem a qualquer módulo. Tudo o que decide
// (ordenar, paginar, selecionar, guardar) mora em funções puras `td*`, que a PROVA_componentes-lista.js roda.
// ============================================================
const TD_POR_PAGINA = [25, 50, 100];
const TD_CHAVE_ESTADO = 'tm-td:'; // sessionStorage: página, linhas por página e ordem (voltam ao voltar à lista)
const TD_CHAVE_COLUNAS = 'tm-td-col:'; // localStorage: as colunas ocultas (são preferência, não estado)
// ── funções puras ───────────────────────────────────────────────────────────────────────────────────────────
// Ordena sem mexer na lista recebida. Vazio (null, undefined, '') vai SEMPRE para o fim, nos dois sentidos — "sem
// dado" não é o menor nem o maior valor. Número com número, data ISO com data, texto pelo português (sem acento).
function tdComparar(a, b) {
const va = a === '' ? null : a, vb = b === '' ? null : b;
if (va == null && vb == null) return 0;
if (va == null) return 1;
if (vb == null) return -1;
if (typeof va === 'number' && typeof vb === 'number') return va - vb;
if (typeof va === 'boolean' || typeof vb === 'boolean') return (va ? 1 : 0) - (vb ? 1 : 0);
return String(va).localeCompare(String(vb), 'pt-BR', { sensitivity: 'base', numeric: true });
}
function tdOrdenar(linhas, coluna, dir) {
const lista = Array.isArray(linhas) ? linhas.map((l, i) => ({ l, i })) : [];
if (!coluna || typeof coluna.valor !== 'function') return lista.map((x) => x.l);
const sinal = dir === 'desc' ? -1 : 1;
lista.sort((x, y) => {
const a = coluna.valor(x.l), b = coluna.valor(y.l);
const vazioA = a == null || a === '', vazioB = b == null || b === '';
if (vazioA !== vazioB) return vazioA ? 1 : -1; // vazio no fim, mesmo em ordem decrescente
return (sinal * tdComparar(a, b)) || (x.i - y.i); // empate: a ordem que veio (ordenação estável)
});
return lista.map((x) => x.l);
}
// A página pedida se ajusta ao que existe: filtrar até sobrarem poucas linhas não pode deixar a pessoa numa página
// vazia (a regra do FooterPager, CLAUDE.md § 7).
function tdPaginar(total, porPagina, pagina) {
const pp = TD_POR_PAGINA.includes(Number(porPagina)) ? Number(porPagina) : TD_POR_PAGINA[0];
const n = Math.max(0, Number(total) || 0);
const totalPaginas = Math.max(1, Math.ceil(n / pp));
const atual = Math.min(Math.max(Number(pagina) || 1, 1), totalPaginas);
return { porPagina: pp, totalPaginas, atual, inicio: (atual - 1) * pp, fim: Math.min(atual * pp, n), total: n };
}
// A próxima ordem ao clicar no cabeçalho: crescente → decrescente → crescente (coluna nova começa crescente).
function tdProximaOrdem(ordem, colId) {
if (!ordem || ordem.col !== colId) return { col: colId, dir: 'asc' };
return { col: colId, dir: ordem.dir === 'asc' ? 'desc' : 'asc' };
}
// Seleção: um conjunto de CHAVES. Marcar a página marca as chaves dela; desmarcar tira só as dela.
function tdAlternar(sel, chave) { const n = new Set(sel); if (n.has(chave)) n.delete(chave); else n.add(chave); return n; }
function tdMarcarPagina(sel, chavesDaPagina, marcar) {
const n = new Set(sel);
for (const k of chavesDaPagina) { if (marcar) n.add(k); else n.delete(k); }
return n;
}
function tdEstadoDaPagina(sel, chavesDaPagina) {
const marcadas = chavesDaPagina.filter((k) => sel.has(k)).length;
return marcadas === 0 ? 'nenhuma' : (marcadas === chavesDaPagina.length ? 'todas' : 'algumas');
}
// O estado guardado: lido com try/catch (aba anônima, armazenamento bloqueado), validado, com padrão silencioso.
function tdLerEstado(id, armazem) {
const vazio = { pagina: 1, porPagina: null, ordem: null };
if (!id) return vazio;
try {
const s = (armazem || window.sessionStorage).getItem(TD_CHAVE_ESTADO + id);
const o = s ? JSON.parse(s) : null;
if (!o || o.v !== 1) return vazio;
const ordem = o.ordem && typeof o.ordem.col === 'string' && (o.ordem.dir === 'asc' || o.ordem.dir === 'desc') ? { col: o.ordem.col, dir: o.ordem.dir } : null;
return { pagina: Math.max(1, parseInt(o.pagina, 10) || 1), porPagina: TD_POR_PAGINA.includes(o.porPagina) ? o.porPagina : null, ordem };
} catch (e) { return vazio; }
}
function tdGravarEstado(id, c, armazem) {
if (!id) return;
try { (armazem || window.sessionStorage).setItem(TD_CHAVE_ESTADO + id, JSON.stringify({ v: 1, pagina: c.pagina, porPagina: c.porPagina, ordem: c.ordem || null })); } catch (e) { /* sem armazenamento: só não volta igual */ }
}
function tdLerOcultas(id, colunas, armazem) {
const padrao = (colunas || []).filter((c) => c.oculta && !c.fixa).map((c) => c.id);
if (!id) return padrao;
try {
const s = (armazem || window.localStorage).getItem(TD_CHAVE_COLUNAS + id);
const o = s ? JSON.parse(s) : null;
if (!Array.isArray(o)) return padrao;
const ids = new Set((colunas || []).filter((c) => !c.fixa).map((c) => c.id));
return o.filter((x) => ids.has(x)); // coluna que saiu do código, ou que virou fixa, não fica escondida para sempre
} catch (e) { return padrao; }
}
function tdGravarOcultas(id, ocultas, armazem) {
if (!id) return;
try { (armazem || window.localStorage).setItem(TD_CHAVE_COLUNAS + id, JSON.stringify(ocultas)); } catch (e) { /* idem */ }
}
// ── o estado da consulta (página, linhas por página, ordem), guardado na aba ──────────────────────────────────
// Na lista paginada no SERVIDOR, quem busca é a tela: ela usa este hook, passa `consulta` e `onConsulta` à tabela, e
// depende de `consulta.pagina`, `consulta.porPagina` e `tdChaveOrdem(consulta.ordem)` (textos e números — nunca o
// objeto, que é novo a cada mudança).
function tdChaveOrdem(ordem) { return ordem ? ordem.col + ':' + ordem.dir : ''; }
function useConsultaTabela(idEstado, porPaginaPadrao) {
const [c, setC] = React.useState(() => {
const s = tdLerEstado(idEstado);
return { pagina: s.pagina, porPagina: s.porPagina || (TD_POR_PAGINA.includes(porPaginaPadrao) ? porPaginaPadrao : TD_POR_PAGINA[0]), ordem: s.ordem };
});
const definir = React.useCallback((n) => {
setC((a) => { const b = typeof n === 'function' ? n(a) : { ...a, ...n }; tdGravarEstado(idEstado, b); return b; });
}, [idEstado]);
return [c, definir];
}
// ── EstadoDados ─────────────────────────────────────────────────────────────────────────────────────────────
const ED_PADRAO = {
carregando: { icone: 'loader-2', titulo: 'Carregando…' },
vazio: { icone: 'inbox', titulo: 'Nada para mostrar' },
erro: { icone: 'alert-triangle', titulo: 'Não consegui carregar' },
desatualizado: { icone: 'clock', titulo: 'Estes dados podem estar desatualizados' },
sucesso: { icone: 'check-circle-2', titulo: 'Feito' },
};
function EstadoDados({ estado, titulo, mensagem, aoTentar, rotuloTentar, lidoEm, acao, compacto }) {
const p = ED_PADRAO[estado] || ED_PADRAO.vazio;
const tentar = aoTentar ? (
) : null;
return (
);
}
// ── PainelRegistro ──────────────────────────────────────────────────────────────────────────────────────────
// O registro de lado, com as ações DENTRO dele: a pessoa conclui a tarefa sem fechar o painel e procurar um ícone na
// lista (briefing § 6). A lista fica montada por baixo — fechar volta ao mesmo ponto, e o foco volta a quem abriu.
// `acoes`: [{ id, rotulo, onClick, pede, variante, icone, desabilitado, motivo }] — a última é a principal.
function PainelRegistro({ aberto, onFechar, titulo, subtitulo, eyebrow, acoes, estado, largura, children }) {
const lista = Array.isArray(acoes) ? acoes.filter(Boolean) : [];
const rodape = lista.length ? (