// App.jsx
const { useState, useEffect } = React;

function App() {
  const [tweaks, setTweaksState] = useState(window.TWEAK_DEFAULTS);
  const [target, setTarget] = useState(null);
  const [filter, setFilter] = useState(null);
  const [customerOnly, setCustomerOnly] = useState(false);
  const [cardType, setCardType] = useState(null);
  const [tweaksVisible, setTweaksVisible] = useState(false);

  useEffect(() => {
    const a = TOKENS.accents[tweaks.accent] || TOKENS.accents["reason-teal"];
    document.documentElement.style.setProperty("--accent", a.css);
    document.documentElement.style.setProperty("--accent-soft", a.soft);
  }, [tweaks.accent]);

  const setTweaks = (next) => {
    setTweaksState(next);
    const edits = {};
    Object.keys(next).forEach(k => { if (next[k] !== tweaks[k]) edits[k] = next[k]; });
    if (Object.keys(edits).length) window.parent.postMessage({ type: "__edit_mode_set_keys", edits }, "*");
  };

  useEffect(() => {
    const applyHash = () => {
      const m = /(stage|doc|role|status|cycle|principle|domain)=([a-z0-9-]+)/i.exec(window.location.hash);
      if (m) setTarget({ type: m[1].toLowerCase(), id: m[2] });
    };
    applyHash();
    window.addEventListener("hashchange", applyHash);
    return () => window.removeEventListener("hashchange", applyHash);
  }, []);

  const openTarget = (t) => {
    setTarget(t);
    if (t) history.replaceState(null, "", `#${t.type}=${t.id}`);
    else if (window.location.hash) history.replaceState(null, "", window.location.pathname + window.location.search);
  };
  const closeTarget = () => {
    setTarget(null);
    if (window.location.hash) history.replaceState(null, "", window.location.pathname + window.location.search);
  };

  useEffect(() => {
    const onMsg = (e) => {
      if (!e.data || typeof e.data !== "object") return;
      if (e.data.type === "__activate_edit_mode") setTweaksVisible(true);
      if (e.data.type === "__deactivate_edit_mode") setTweaksVisible(false);
    };
    window.addEventListener("message", onMsg);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", onMsg);
  }, []);

  return (
    <div className="min-h-screen">
      <div id="intro"><Header /></div>
      <SystemExplainer onOpen={openTarget} />
      <DomainIntro onOpen={openTarget} />
      <FilterBar filter={filter} setFilter={setFilter}
        customerOnly={customerOnly} setCustomerOnly={setCustomerOnly} />
      <Board filter={filter} customerOnly={customerOnly} cardType={cardType} onOpen={openTarget} />
      <Library onOpen={openTarget} />
      <RolesReference onOpen={openTarget} filter={filter} />
      <div id="principles"><RulesFooter onOpen={openTarget} /></div>
      <Drawer target={target} onClose={closeTarget} onOpen={openTarget} />
      <TweaksPanel visible={tweaksVisible} tweaks={tweaks} setTweaks={setTweaks} />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);