// Mounts the Tweaks panel for ACLEAP site
// Reads window.TWEAK_DEFAULTS and persists changes via host protocol.

function ACLEAPTweaks() {
  const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS);

  // Apply tweaks to <body> data attributes & CSS vars
  React.useEffect(() => {
    document.body.dataset.dark = String(!!t.dark);
    document.body.dataset.density = t.density || 'regular';
    document.body.dataset.header = t.header || 'default';

    // Apply primary color override
    const root = document.documentElement;
    if (t.primaryColor) {
      root.style.setProperty('--primary', t.primaryColor);
      // derive deeper shade by reducing lightness ~10%
      root.style.setProperty('--primary-deep', shade(t.primaryColor, -14));
      root.style.setProperty('--primary-tint', tint(t.primaryColor, 0.85));
    }
  }, [t]);

  return (
    <TweaksPanel>
      <TweakSection label="Identidade visual" />
      <TweakColor
        label="Cor primária"
        value={t.primaryColor}
        options={['#FFAA00', '#F2C94C', '#E26B0A', '#1E88E5', '#2E7D32', '#C62828']}
        onChange={(v) => setTweak('primaryColor', v)}
      />
      <TweakToggle
        label="Modo escuro"
        value={t.dark}
        onChange={(v) => setTweak('dark', v)}
      />

      <TweakSection label="Layout" />
      <TweakRadio
        label="Densidade"
        value={t.density}
        options={['compact', 'regular', 'comfy']}
        onChange={(v) => setTweak('density', v)}
      />
      <TweakRadio
        label="Cabeçalho"
        value={t.header}
        options={['default', 'centered', 'split']}
        onChange={(v) => setTweak('header', v)}
      />
    </TweaksPanel>
  );
}

// Helpers: shade/tint a hex color
function shade(hex, percent) {
  const c = hexToRgb(hex);
  if (!c) return hex;
  const f = 1 + percent / 100;
  const r = clamp(Math.round(c.r * f), 0, 255);
  const g = clamp(Math.round(c.g * f), 0, 255);
  const b = clamp(Math.round(c.b * f), 0, 255);
  return rgbToHex(r, g, b);
}
function tint(hex, amount) {
  const c = hexToRgb(hex);
  if (!c) return hex;
  const r = clamp(Math.round(c.r + (255 - c.r) * amount), 0, 255);
  const g = clamp(Math.round(c.g + (255 - c.g) * amount), 0, 255);
  const b = clamp(Math.round(c.b + (255 - c.b) * amount), 0, 255);
  return rgbToHex(r, g, b);
}
function hexToRgb(h) {
  if (!h) return null;
  const m = h.replace('#','');
  if (m.length !== 6) return null;
  return { r: parseInt(m.slice(0,2),16), g: parseInt(m.slice(2,4),16), b: parseInt(m.slice(4,6),16) };
}
function rgbToHex(r,g,b){return '#'+[r,g,b].map(x=>x.toString(16).padStart(2,'0')).join('')}
function clamp(v,a,b){return Math.max(a,Math.min(b,v))}

// Mount
const __tweakMount = document.createElement('div');
document.body.appendChild(__tweakMount);
ReactDOM.createRoot(__tweakMount).render(<ACLEAPTweaks />);
