/* Tweaks panel */

function TweaksPanel({ state, setState, visible, setVisible }) {
  const [collapsed, setCollapsed] = React.useState(false);

  const set = (k, v) => {
    const next = { ...state, [k]: v };
    setState(next);
    try {
      window.parent.postMessage({ type: "__edit_mode_set_keys", edits: { [k]: v } }, "*");
    } catch(e) {}
  };

  if (!visible) return null;

  return (
    <div className="tweaks-panel">
      <div className="tweaks-header" onClick={() => setCollapsed(c => !c)} style={{ cursor: "pointer" }}>
        <span>▸ Tweaks</span>
        <span style={{ color: "var(--ink-dim)", fontSize: 16 }}>{collapsed ? "＋" : "－"}</span>
      </div>
      {!collapsed && (
        <div className="tweaks-body">
          <div className="tweak-row">
            <label>프로젝트 스타일 변경</label>
            <div className="tweak-options">
              {[
                ["term", "Terminal"],
                ["crt",  "CRT"],
                ["mag",  "Magazine"],
              ].map(([v, label]) => (
                <button
                  key={v}
                  className={"tweak-opt" + (state.cardStyle === v ? " active" : "")}
                  onClick={() => set("cardStyle", v)}
                >{label}</button>
              ))}
            </div>
          </div>
          <div className="tweak-row">
            <label>애니메이션 효과 재부팅</label>
            <div className="tweak-options">
              <button
                className="tweak-opt"
                onClick={() => {
                  try { sessionStorage.removeItem("jkc_booted"); } catch(e) {}
                  location.reload();
                }}
              >▸ Reboot portfolio</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

window.TweaksPanel = TweaksPanel;