// Adan-IA · Tweaks
// Controls: red intensity, density, bot variant

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "redPalette": "firebrick",
  "density": "comfy",
  "botVariant": "floating"
}/*EDITMODE-END*/;

const RED_PALETTES = {
  firebrick: {
    primary: '#B22222',
    deep:    '#7A1818',
    mid:     '#9B1C1C',
    coral:   '#D45D5D',
    light:   '#F0A0A0',
  },
  coral: {
    primary: '#D14848',
    deep:    '#8E2626',
    mid:     '#B53535',
    coral:   '#E58282',
    light:   '#F5BABA',
  },
  soft: {
    primary: '#C77272',
    deep:    '#8A4444',
    mid:     '#A55555',
    coral:   '#E0A1A1',
    light:   '#F0C5C5',
  },
};

const DENSITY_SCALE = {
  compact: 0.78,
  comfy:   1,
  airy:    1.22,
};

function applyTweaks(t) {
  const root = document.documentElement;
  const palette = RED_PALETTES[t.redPalette] || RED_PALETTES.firebrick;
  root.style.setProperty('--color-primary', palette.primary);
  root.style.setProperty('--color-primary-deep', palette.deep);
  root.style.setProperty('--color-primary-mid', palette.mid);
  root.style.setProperty('--color-coral', palette.coral);
  root.style.setProperty('--color-coral-light', palette.light);

  const scale = DENSITY_SCALE[t.density] || 1;
  root.style.setProperty('--density-scale', scale);

  // Bot variant
  const panel = document.getElementById('bot-panel');
  if (panel) {
    panel.classList.remove('floating', 'bar', 'lateral');
    panel.classList.add(t.botVariant);
  }
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

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

  return (
    <TweaksPanel title="Tweaks · Adan-IA">
      <TweakSection label="Intensidad del rojo" />
      <TweakColor
        label="Paleta"
        value={RED_PALETTES[t.redPalette].primary}
        options={[
          RED_PALETTES.firebrick.primary,
          RED_PALETTES.coral.primary,
          RED_PALETTES.soft.primary,
        ]}
        onChange={(v) => {
          const key = Object.keys(RED_PALETTES).find((k) => RED_PALETTES[k].primary === v);
          if (key) setTweak('redPalette', key);
        }}
      />
      <TweakRadio
        label="Tono"
        value={t.redPalette}
        options={['firebrick', 'coral', 'soft']}
        onChange={(v) => setTweak('redPalette', v)}
      />

      <TweakSection label="Densidad visual" />
      <TweakRadio
        label="Espaciado"
        value={t.density}
        options={['compact', 'comfy', 'airy']}
        onChange={(v) => setTweak('density', v)}
      />

      <TweakSection label="Widget Adan-IA" />
      <TweakSelect
        label="Variante"
        value={t.botVariant}
        options={[
          { value: 'floating', label: 'Flotante (esquina)' },
          { value: 'bar',      label: 'Barra inferior' },
          { value: 'lateral',  label: 'Panel lateral' },
        ]}
        onChange={(v) => setTweak('botVariant', v)}
      />
      <TweakButton
        label="Abrir widget"
        onClick={() => {
          document.getElementById('bot-fab')?.click();
        }}
      >
        Mostrar Adan-IA
      </TweakButton>
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById('tweaks-root')).render(<App />);