/* ---------- KPI bar (collapsible, global preference) ---------- */
const KPI_KEY = "verp-show-kpis";
const kpiRead = () => { try { return localStorage.getItem(KPI_KEY) !== "0"; } catch (e) { return true; } };
function useKpiShow() {
  const { useState, useEffect } = React;
  const [show, setShow] = useState(kpiRead);
  useEffect(() => {
    const sync = () => setShow(kpiRead());
    window.addEventListener("verp-kpis", sync);
    return () => window.removeEventListener("verp-kpis", sync);
  }, []);
  const toggle = () => {
    const next = !kpiRead();
    try { localStorage.setItem(KPI_KEY, next ? "1" : "0"); } catch (e) {}
    setShow(next);
    window.dispatchEvent(new Event("verp-kpis"));
  };
  return [show, toggle];
}

function KpiBar({ children }) {
  const [show] = useKpiShow();
  if (!show) return null;
  return <div className="kpibar"><div className="kpi-grid">{children}</div></div>;
}

// Lives in the topbar beside the page title.
function KpiToggle() {
  const [show, toggle] = useKpiShow();
  return (
    <button className="kpi-pintoggle" onClick={toggle}
      title={show ? T("kpi.hideEverywhere") : T("kpi.showEverywhere")}>
      <Icon name="chevD" size={12} style={{ transform: show ? "rotate(180deg)" : "none" }} />
      {show ? T("kpi.hide") : T("kpi.show")}
    </button>
  );
}


Object.assign(window, { KPI_KEY, kpiRead, useKpiShow, KpiBar, KpiToggle });