const { Icon: TIcon } = window;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "accent": "lime"
}/*EDITMODE-END*/;

const ACCENTS = {
  lime:    { bg: '#C6F24E', ink: '#0A0A0A' },
  violet:  { bg: '#A78BFA', ink: '#0A0A0A' },
  orange:  { bg: '#FB923C', ink: '#0A0A0A' },
  cyan:    { bg: '#67E8F9', ink: '#0A0A0A' },
  pink:    { bg: '#F9A8D4', ink: '#0A0A0A' },
  mono:    { bg: '#E5E5E0', ink: '#0A0A0A' },
};

function applyTweaks(t) {
  document.documentElement.setAttribute('data-theme', t.theme);
  const a = ACCENTS[t.accent] || ACCENTS.lime;
  document.documentElement.style.setProperty('--accent', a.bg);
  document.documentElement.style.setProperty('--accent-ink', a.ink);
}

function Tweaks() {
  const [open, setOpen] = React.useState(false);
  const [editMode, setEditMode] = React.useState(false);
  const [state, setState] = React.useState(TWEAK_DEFAULTS);

  React.useEffect(() => { applyTweaks(state); }, [state]);

  React.useEffect(() => {
    const onMsg = (e) => {
      if (e.data?.type === '__activate_edit_mode') setEditMode(true);
      if (e.data?.type === '__deactivate_edit_mode') { setEditMode(false); setOpen(false); }
    };
    window.addEventListener('message', onMsg);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', onMsg);
  }, []);

  const update = (patch) => {
    const next = { ...state, ...patch };
    setState(next);
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: patch }, '*');
  };

  if (!editMode) return null;

  return (
    <>
      <button className="tweaks-fab" onClick={() => setOpen(o => !o)} title="Tweaks">
        <TIcon name="settings" />
      </button>
      {open && (
        <div className="tweaks-panel">
          <div className="tweak-row">
            <h4>模式</h4>
            <div className="theme-toggle">
              <button
                className={state.theme === 'light' ? 'active' : ''}
                onClick={() => update({ theme: 'light' })}
              >
                <TIcon name="sun" /> 浅色
              </button>
              <button
                className={state.theme === 'dark' ? 'active' : ''}
                onClick={() => update({ theme: 'dark' })}
              >
                <TIcon name="moon" /> 深色
              </button>
            </div>
          </div>
          <div className="tweak-row">
            <h4>主题色</h4>
            <div className="swatch-row">
              {Object.entries(ACCENTS).map(([k, v]) => (
                <button
                  key={k}
                  className={`swatch ${state.accent === k ? 'active' : ''}`}
                  style={{ background: v.bg }}
                  onClick={() => update({ accent: k })}
                  title={k}
                />
              ))}
            </div>
          </div>
        </div>
      )}
    </>
  );
}

// Apply defaults immediately on load (before editmode UI shows)
applyTweaks(TWEAK_DEFAULTS);

window.Tweaks = Tweaks;