// ============================================================
// ui.jsx — small shared pieces for every page (icons, width
// hooks, popover, show/hide footer). Styles: styles.css.
// ============================================================
function Icon({ name, size = 24 }) {
  return <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
    strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"
    dangerouslySetInnerHTML={{ __html: window.AreteIcons[name] || "" }} />;
}

// true on phone widths (< 768px, the design system's break)
function usePhone() {
  const q = "(max-width: 767px)";
  const [phone, setPhone] = React.useState(() => window.matchMedia(q).matches);
  React.useEffect(() => {
    const m = window.matchMedia(q);
    const on = () => setPhone(m.matches);
    m.addEventListener("change", on);
    return () => m.removeEventListener("change", on);
  }, []);
  return phone;
}

// the pixel width of an element, kept current (charts draw at this width)
function useWidth(ref, fallback = 880) {
  const [w, setW] = React.useState(fallback);
  React.useLayoutEffect(() => {
    if (!ref.current) return;
    const ro = new ResizeObserver(([e]) => setW(Math.max(300, Math.round(e.contentRect.width))));
    ro.observe(ref.current);
    return () => ro.disconnect();
  }, []);
  return w;
}

// a button that opens a small menu; closes on outside click / Escape
function Popover({ label, icon, children, pressed }) {
  const [open, setOpen] = React.useState(false);
  const box = React.useRef(null);
  const btn = React.useRef(null);
  // closing by a choice or Escape puts focus back on the button
  const refocus = React.useRef(false);
  const close = () => { refocus.current = true; setOpen(false); };
  React.useEffect(() => {
    if (!open && refocus.current) { refocus.current = false; if (btn.current) btn.current.focus(); }
  }, [open]);
  React.useEffect(() => {
    if (!open) return;
    const away = (e) => { if (box.current && !box.current.contains(e.target)) setOpen(false); };
    const esc = (e) => { if (e.key === "Escape") close(); };
    document.addEventListener("mousedown", away);
    document.addEventListener("keydown", esc);
    return () => { document.removeEventListener("mousedown", away); document.removeEventListener("keydown", esc); };
  }, [open]);
  return (
    <div ref={box} style={{ position: "relative" }}>
      <button ref={btn} className="iconbtn" aria-label={label} title={label} aria-haspopup="true" aria-expanded={open}
        aria-pressed={pressed ? "true" : "false"} onClick={() => setOpen((o) => !o)}>
        <Icon name={icon} size={18} />
      </button>
      {open && <div className="popover" role="group" aria-label={label}>{children(close)}</div>}
    </div>
  );
}

// "Show … ⌄" / "Hide … ⌃" footer toggle used under cards
function FootToggle({ open, onClick, show, hide }) {
  return (
    <div className="foot">
      <button className="showtable" onClick={onClick} aria-expanded={open}
        style={{ margin: 0, textDecoration: "none", display: "flex", alignItems: "center", gap: 6 }}>
        {open ? hide : show}
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
          <path d={open ? "m18 15-6-6-6 6" : "m6 9 6 6 6-6"} />
        </svg>
      </button>
    </div>
  );
}

Object.assign(window, { Icon, usePhone, useWidth, Popover, FootToggle });