/* SkyOps — Pagination: usePaged(rows, key) + <Pager/>. Page size persists per list; page resets when the result set changes. */

function usePaged(rows, key, def = 25) {
  const [size, setSize] = React.useState(() => +(localStorage.getItem("skyops_pg_" + key) || def));
  const [page, setPage] = React.useState(1);
  const n = rows.length, pages = Math.max(1, Math.ceil(n / size));
  const sig = n + ":" + (rows[0] && (rows[0].id || rows[0].i?.id || rows[0].m?.id || "")) ;
  React.useEffect(() => { setPage(1); }, [sig, size]);
  const p = Math.min(page, pages);
  return { rows: rows.slice((p - 1) * size, p * size), page: p, pages, size, n, setPage, setSize: (s) => { localStorage.setItem("skyops_pg_" + key, s); setSize(s); } };
}

function Pager({ pg, label = "rows", sizes = [10, 25, 50, 100] }) {
  if (!pg || pg.n <= Math.min(...sizes)) return null;
  const { page, pages, size, n, setPage, setSize } = pg;
  const from = (page - 1) * size + 1, to = Math.min(n, page * size);
  const nums = []; for (let i = 1; i <= pages; i++) if (i === 1 || i === pages || Math.abs(i - page) <= 1) nums.push(i); else if (nums[nums.length - 1] !== "…") nums.push("…");
  return <div className="pg" role="navigation" aria-label="Pagination">
    <span className="pg-info mono">{from}–{to} <span className="sec">of</span> {n.toLocaleString()} <span className="sec">{label}</span></span>
    <span className="pg-grow"/>
    <label className="pg-size"><span className="sec">Per page</span><select className="sel" value={size} onChange={e => setSize(+e.target.value)}>{sizes.map(s => <option key={s} value={s}>{s}</option>)}</select></label>
    <div className="pg-nav">
      <button className="pg-btn" disabled={page === 1} onClick={() => setPage(page - 1)} aria-label="Previous page"><Icon name="chevron_left" size={12}/></button>
      {nums.map((x, i) => x === "…" ? <span key={"e" + i} className="pg-gap">…</span> : <button key={x} className={`pg-btn ${x === page ? "on" : ""}`} aria-current={x === page ? "page" : undefined} onClick={() => setPage(x)}>{x}</button>)}
      <button className="pg-btn" disabled={page === pages} onClick={() => setPage(page + 1)} aria-label="Next page"><Icon name="chevron_right" size={12}/></button>
    </div>
  </div>;
}

Object.assign(window, { usePaged, Pager });