// AudioFlow — Tweaks Panel
// Minimal style controls — accent color only (Hostinger-clean look).

const AF_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#1a1d2b"
}/*EDITMODE-END*/;

const ACCENT_OPTIONS = [
  "#1a1d2b",  // ink (default, full monochrome like Hostinger)
  "#6c8388",  // slate-teal (matches logo)
  "#3b5b6b",  // navy-teal
  "#5e7d6e"   // sage
];

function deriveAccentTokens(hex) {
  const h = hex.replace('#', '');
  const r = parseInt(h.slice(0, 2), 16);
  const g = parseInt(h.slice(2, 4), 16);
  const b = parseInt(h.slice(4, 6), 16);
  const darken = (p) => {
    const f = 1 - p;
    const dr = Math.max(0, Math.round(r * f));
    const dg = Math.max(0, Math.round(g * f));
    const db = Math.max(0, Math.round(b * f));
    return `#${dr.toString(16).padStart(2, '0')}${dg.toString(16).padStart(2, '0')}${db.toString(16).padStart(2, '0')}`;
  };
  return {
    accent: hex,
    deep: darken(0.22),
    soft: `rgba(${r},${g},${b},0.10)`,
    glow: `rgba(${r},${g},${b},0.20)`
  };
}

function applyTweaks(t) {
  const root = document.documentElement;
  const a = deriveAccentTokens(t.accent);
  root.style.setProperty('--accent', a.accent);
  root.style.setProperty('--accent-deep', a.deep);
  root.style.setProperty('--accent-soft', a.soft);
  root.style.setProperty('--accent-glow', a.glow);
}

function AFTweaks() {
  const [t, setTweak] = useTweaks(AF_DEFAULTS);
  React.useEffect(() => { applyTweaks(t); }, [t]);

  return (
    <TweaksPanel title="Style">
      <TweakSection label="Akzent" />
      <TweakColor
        label="Farbe"
        value={t.accent}
        options={ACCENT_OPTIONS}
        onChange={(v) => setTweak('accent', v)}
      />
    </TweaksPanel>
  );
}

const __afRoot = document.createElement('div');
document.body.appendChild(__afRoot);
ReactDOM.createRoot(__afRoot).render(<AFTweaks />);
applyTweaks(AF_DEFAULTS);