/* eslint-disable */
// Tweaks panel — exposes state preview override (data / loading / empty / error)

(function () {
const { TweaksPanel, useTweaks, TweakSection, TweakRadio } = window;
const { useEffect } = React;

function TweaksApp() {
  const defaults = JSON.parse(
    document.getElementById("tweak-defaults").textContent
      .replace(/\/\*EDITMODE-BEGIN\*\//, "")
      .replace(/\/\*EDITMODE-END\*\//, "")
  );
  const [tweaks, setTweak] = useTweaks(defaults);

  // Broadcast changes to the rest of the app
  useEffect(() => {
    window.postMessage({ type: "__local_tweak_change", value: tweaks.stateOverride }, "*");
  }, [tweaks.stateOverride]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Table state">
        <TweakRadio
          value={tweaks.stateOverride}
          onChange={v => setTweak("stateOverride", v)}
          options={[
            { value: "data", label: "Data" },
            { value: "loading", label: "Loading" },
            { value: "empty", label: "Empty" },
            { value: "error", label: "Error" },
          ]}
        />
        <div style={{ fontSize: 12, color: "var(--neutral-60)", marginTop: 8, lineHeight: 1.5 }}>
          Switches the report page body between live data, the skeleton loader, the empty-state message, and the timeout error.
        </div>
      </TweakSection>
    </TweaksPanel>
  );
}

const tweakRoot = document.createElement("div");
tweakRoot.id = "tweaks-root";
document.body.appendChild(tweakRoot);
ReactDOM.createRoot(tweakRoot).render(<TweaksApp />);
})();