// Tweaks panel — allows user to customize look/behavior

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentColor": "violet",
  "subtitleSize": 36,
  "subtitlePosition": "bottom",
  "transition": "fade"
}/*EDITMODE-END*/;

const ACCENT_MAP = {
  violet: "oklch(68% 0.20 300)",
  teal:   "oklch(72% 0.18 200)",
  amber:  "oklch(78% 0.16 80)",
  rose:   "oklch(68% 0.20 10)",
  green:  "oklch(72% 0.18 145)",
};

function TweaksPanel({ tweaks, setTweaks }) {
  const apply = (key, val) => {
    const next = { ...tweaks, [key]: val };
    setTweaks(next);
    document.documentElement.style.setProperty("--accent", ACCENT_MAP[next.accentColor]);
    try {
      window.parent.postMessage({ type: "__edit_mode_set_keys", edits: { [key]: val } }, "*");
    } catch (e) {}
  };

  useEffect(() => {
    document.documentElement.style.setProperty("--accent", ACCENT_MAP[tweaks.accentColor] || ACCENT_MAP.violet);
  }, [tweaks.accentColor]);

  return (
    <div className="tweaks-panel">
      <h4>Tweaks</h4>
      <p>프로토타입 외형을 실시간으로 조정하세요.</p>

      <div className="tweak-row">
        <span className="label">액센트 색</span>
        <div className="swatch-row">
          {Object.keys(ACCENT_MAP).map(c => (
            <div key={c}
              className={`swatch ${tweaks.accentColor === c ? "active" : ""}`}
              onClick={() => apply("accentColor", c)}
              style={{background: ACCENT_MAP[c]}}
              title={c}
            />
          ))}
        </div>
      </div>

      <div className="tweak-row">
        <span className="label">자막 크기</span>
        <input type="range" min="24" max="56" value={tweaks.subtitleSize}
          onChange={e => apply("subtitleSize", +e.target.value)} style={{width: 120}}/>
      </div>

      <div className="tweak-row">
        <span className="label">자막 위치</span>
        <div className="seg">
          {["top","center","bottom"].map(p => (
            <button key={p} className={tweaks.subtitlePosition === p ? "active" : ""} onClick={() => apply("subtitlePosition", p)}>
              {p === "top" ? "상" : p === "center" ? "중" : "하"}
            </button>
          ))}
        </div>
      </div>

      <div className="tweak-row">
        <span className="label">장면 전환</span>
        <div className="seg">
          {["cut","fade","kenburns"].map(p => (
            <button key={p} className={tweaks.transition === p ? "active" : ""} onClick={() => apply("transition", p)}>
              {p === "cut" ? "컷" : p === "fade" ? "페이드" : "켄"}
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { TWEAK_DEFAULTS, TweaksPanel, ACCENT_MAP });