// Tweaks panel — confetti toggle, drifting suits toggle, trigger confetti on demand

const { useState: useStateT, useEffect: useEffectT } = React;

function TweaksPanel({ tweaks, setTweaks, onFireConfetti }) {
  const [visible, setVisible] = useStateT(false);

  useEffectT(() => {
    function onMsg(e) {
      if (!e.data) return;
      if (e.data.type === "__activate_edit_mode") setVisible(true);
      if (e.data.type === "__deactivate_edit_mode") setVisible(false);
    }
    window.addEventListener("message", onMsg);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", onMsg);
  }, []);

  function set(k, v) {
    const next = { ...tweaks, [k]: v };
    setTweaks(next);
    window.parent.postMessage({ type: "__edit_mode_set_keys", edits: { [k]: v } }, "*");
  }

  if (!visible) return null;
  return (
    <div className="tweaks-panel">
      <div className="th">تعديلات</div>
      <label>
        <span>قصاصات الاحتفال</span>
        <input type="checkbox" checked={!!tweaks.confetti} onChange={e => set("confetti", e.target.checked)} />
      </label>
      <label>
        <span>رموز طائرة ♠♥♦♣</span>
        <input type="checkbox" checked={!!tweaks.suits} onChange={e => set("suits", e.target.checked)} />
      </label>
      <button className="row-btn" onClick={onFireConfetti}>🎉 فجّر القصاصات</button>
    </div>
  );
}

Object.assign(window, { TweaksPanel });