// tweaks.jsx
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "green",
  "theme": "dark",
  "showCommunity": true
}/*EDITMODE-END*/;

const ACCENTS = {
  green: { c: 'oklch(0.80 0.18 142)', soft: 'oklch(0.80 0.18 142 / 0.14)', line: 'oklch(0.80 0.18 142 / 0.35)', ink: '#0b0b0e' },
  blue:  { c: 'oklch(0.72 0.17 250)', soft: 'oklch(0.72 0.17 250 / 0.14)', line: 'oklch(0.72 0.17 250 / 0.35)', ink: '#ffffff' },
  amber: { c: 'oklch(0.82 0.17 80)',  soft: 'oklch(0.82 0.17 80 / 0.14)',  line: 'oklch(0.82 0.17 80 / 0.35)',  ink: '#0b0b0e' },
  red:   { c: 'oklch(0.70 0.21 25)',  soft: 'oklch(0.70 0.21 25 / 0.14)',  line: 'oklch(0.70 0.21 25 / 0.35)',  ink: '#ffffff' },
  mono:  { c: '#F5F3EE', soft: 'rgba(245,243,238,0.14)', line: 'rgba(245,243,238,0.35)', ink: '#0b0b0e' }
};

function applyAccent(name) {
  const a = ACCENTS[name];
  if (!a) return;
  const r = document.documentElement;
  r.style.setProperty('--accent', a.c);
  r.style.setProperty('--accent-soft', a.soft);
  r.style.setProperty('--accent-line', a.line);
  r.style.setProperty('--accent-ink', a.ink);
}

function applyTheme(name) {
  document.documentElement.setAttribute('data-theme', name);
}

function Tweaks({ state, setState, visible }) {
  if (!visible) return null;
  return (
    <div className="tweaks-panel">
      <h5>Tweaks</h5>

      <div className="tweaks-row">
        <div className="l">Akzentfarbe</div>
        <div className="tweaks-swatches">
          {Object.entries(ACCENTS).map(([k, v]) => (
            <button
              key={k}
              className={`tw-sw ${state.accent === k ? 'active' : ''}`}
              style={{ background: v.c }}
              onClick={() => setState({ ...state, accent: k })}
              title={k}
            />
          ))}
        </div>
      </div>

      <div className="tweaks-row">
        <div className="l">Theme</div>
        <div className="tweaks-btns">
          <button className={`tweaks-btn ${state.theme === 'dark' ? 'active' : ''}`} onClick={() => setState({ ...state, theme: 'dark' })}>Dark</button>
          <button className={`tweaks-btn ${state.theme === 'light' ? 'active' : ''}`} onClick={() => setState({ ...state, theme: 'light' })}>Light</button>
        </div>
      </div>

      <div className="tweaks-row">
        <div className="l">Community-Section</div>
        <div className="tweaks-btns">
          <button className={`tweaks-btn ${state.showCommunity ? 'active' : ''}`} onClick={() => setState({ ...state, showCommunity: true })}>An</button>
          <button className={`tweaks-btn ${!state.showCommunity ? 'active' : ''}`} onClick={() => setState({ ...state, showCommunity: false })}>Aus</button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Tweaks, TWEAK_DEFAULTS, applyAccent, applyTheme });