const Tweaks = ({ accent, setAccent, heroVariant, setHeroVariant, cardStyle, setCardStyle }) => {
  const [active, setActive] = React.useState(false);

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

  const persist = (edits) => {
    window.parent.postMessage({ type: "__edit_mode_set_keys", edits }, "*");
  };

  if (!active) return null;

  const Opt = ({ label, value, current, onPick }) => (
    <button className={"tweak-chip " + (current === value ? "active" : "")}
            onClick={() => onPick(value)}>
      {label}
    </button>
  );

  return (
    <div className="tweaks-panel">
      <h6>Tweaks</h6>
      <div className="sub">設計變體</div>

      <div className="tweak-row">
        <label>主色調 · Accent</label>
        <div className="tweak-options">
          <Opt label="玫瑰粉" value="rose" current={accent} onPick={(v)=>{setAccent(v); persist({accent:v});}} />
          <Opt label="香檳金" value="champagne" current={accent} onPick={(v)=>{setAccent(v); persist({accent:v});}} />
          <Opt label="深咖啡" value="espresso" current={accent} onPick={(v)=>{setAccent(v); persist({accent:v});}} />
        </div>
      </div>

      <div className="tweak-row">
        <label>Hero 版型</label>
        <div className="tweak-options">
          <Opt label="人像主視覺" value="portrait" current={heroVariant} onPick={(v)=>{setHeroVariant(v); persist({heroVariant:v});}} />
          <Opt label="全幅視覺" value="full" current={heroVariant} onPick={(v)=>{setHeroVariant(v); persist({heroVariant:v});}} />
        </div>
      </div>

      <div className="tweak-row">
        <label>卡片風格</label>
        <div className="tweak-options">
          <Opt label="柔軟圓角" value="soft" current={cardStyle} onPick={(v)=>{setCardStyle(v); persist({cardStyle:v});}} />
          <Opt label="直線銳利" value="sharp" current={cardStyle} onPick={(v)=>{setCardStyle(v); persist({cardStyle:v});}} />
        </div>
      </div>
    </div>
  );
};

window.Tweaks = Tweaks;