const { Icon, IconButton } = window.ACRFlowDesignSystem_ba1e9c;

/** Paginação no padrão GLPI: N linhas por página, ajustável de 5 em 5,
 *  com navegação primeira / anterior / páginas / próxima / última.
 *  A escolha de cada tela é lembrada no navegador. */
function usePaginacao(linhas, chave, padrao = 15) {
  const guardado = Number(window.localStorage.getItem("acr.porPagina." + chave));
  const [porPagina, setPorPaginaBruto] = React.useState(guardado >= 5 ? guardado : padrao);
  const [pagina, setPagina] = React.useState(1);
  const total = linhas.length;
  const paginas = Math.max(1, Math.ceil(total / porPagina));

  React.useEffect(() => { if (pagina > paginas) setPagina(paginas); }, [paginas, pagina]);
  React.useEffect(() => { setPagina(1); }, [total]);

  const setPorPagina = (n) => {
    const v = Math.max(5, Math.min(200, Math.round(n / 5) * 5));
    window.localStorage.setItem("acr.porPagina." + chave, String(v));
    setPorPaginaBruto(v);
    setPagina(1);
  };

  const ini = (pagina - 1) * porPagina;
  return { fatia: linhas.slice(ini, ini + porPagina), pagina, setPagina, paginas, porPagina, setPorPagina, total, de: total ? ini + 1 : 0, ate: Math.min(ini + porPagina, total) };
}

function Paginacao({ p }) {
  if (!p.total) return null;
  const botao = (nome, rotulo, alvo, desab) => (
    <IconButton size="sm" variant="ghost" label={rotulo} disabled={desab} icon={<Icon name={nome} size={15} />} onClick={() => p.setPagina(alvo)} />
  );
  // janela de no máximo 5 números em volta da página atual
  const ini = Math.max(1, Math.min(p.pagina - 2, p.paginas - 4));
  const nums = [];
  for (let i = ini; i < ini + 5 && i <= p.paginas; i++) nums.push(i);

  return (
    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 14, flexWrap: "wrap", padding: "12px 16px", borderTop: "1px solid var(--border-subtle)" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
        <IconButton size="sm" variant="ghost" label="Menos 5 por página" disabled={p.porPagina <= 5}
          icon={<Icon name="minus" size={15} />} onClick={() => p.setPorPagina(p.porPagina - 5)} />
        <input type="number" min="5" max="200" step="5" value={p.porPagina}
          onChange={(e) => p.setPorPagina(Number(e.target.value) || 5)}
          style={{ width: 68, textAlign: "center", font: "var(--type-body)", color: "var(--text-strong)", background: "var(--surface-input, var(--surface-raised))", border: "1px solid var(--border-strong)", borderRadius: "var(--radius-control, 8px)", padding: "6px 8px" }} />
        <IconButton size="sm" variant="ghost" label="Mais 5 por página" disabled={p.porPagina >= 200}
          icon={<Icon name="plus" size={15} />} onClick={() => p.setPorPagina(p.porPagina + 5)} />
        <span style={{ font: "var(--type-caption)", color: "var(--text-muted)" }}>linhas / página</span>
      </div>

      <span style={{ font: "var(--type-caption)", color: "var(--text-muted)" }}>
        Exibindo {p.de} a {p.ate} de {p.total} {p.total === 1 ? "demanda" : "demandas"}
      </span>

      <div style={{ display: "flex", alignItems: "center", gap: 2 }}>
        {botao("chevrons-left", "Primeira página", 1, p.pagina === 1)}
        {botao("chevron-left", "Página anterior", p.pagina - 1, p.pagina === 1)}
        {nums.map((n) => (
          <button key={n} onClick={() => p.setPagina(n)} aria-current={n === p.pagina ? "page" : undefined}
            style={{
              minWidth: 30, height: 30, borderRadius: "var(--radius-control, 8px)", cursor: "pointer",
              font: "var(--type-body-strong)", fontSize: "var(--text-xs)",
              color: n === p.pagina ? "#fff" : "var(--text-body)",
              background: n === p.pagina ? "var(--accent-primary)" : "transparent",
              border: n === p.pagina ? "1px solid var(--accent-primary)" : "1px solid var(--border-subtle)",
            }}>{n}</button>
        ))}
        {botao("chevron-right", "Próxima página", p.pagina + 1, p.pagina === p.paginas)}
        {botao("chevrons-right", "Última página", p.paginas, p.pagina === p.paginas)}
      </div>
    </div>
  );
}

Object.assign(window, { usePaginacao, Paginacao });