/* Echo · Tweaks panel — controls accent, echoes, glass, mascot, density, font, dark mode */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#2aa39a",
  "echoIntensity": 40,
  "glassStrength": 90,
  "showMascot": true,
  "density": "loose",
  "fontPair": "jakarta-fraunces",
  "darkMode": false
}/*EDITMODE-END*/;

const FONT_PAIRS = {
  "jakarta-fraunces": {
    ui: "'Plus Jakarta Sans', system-ui, sans-serif",
    display: "'Fraunces', Georgia, serif",
    label: "Jakarta + Fraunces"
  },
  "dm-instrument": {
    ui: "'DM Sans', system-ui, sans-serif",
    display: "'Instrument Serif', Georgia, serif",
    label: "DM Sans + Instrument"
  },
  "outfit-fraunces": {
    ui: "'Outfit', system-ui, sans-serif",
    display: "'Fraunces', Georgia, serif",
    label: "Outfit + Fraunces"
  }
};

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

  React.useEffect(() => {
    const root = document.documentElement;
    const body = document.body;

    // Accent color — also derive softer / brighter variants
    root.style.setProperty('--accent', t.accent);
    // simple lighten via percentage blend in HSL — keep contrast safe
    root.style.setProperty('--accent-2', mix(t.accent, '#ffffff', 0.35));
    root.style.setProperty('--accent-soft', mix(t.accent, '#ffffff', 0.78));

    // Echoes intensity: 0..100 → opacity 0..1.1
    const op = Math.max(0, Math.min(1.1, t.echoIntensity / 90));
    root.style.setProperty('--echoes', op);

    // Glass strength: 0..100 → blur & background opacity
    const gs = t.glassStrength / 100;
    const blur = Math.round(4 + gs * 26);          // 4..30 px
    const bg1  = (0.10 + gs * 0.45).toFixed(2);     // 0.10..0.55
    const bg2  = (0.05 + gs * 0.30).toFixed(2);     // 0.05..0.35
    const brd  = (0.30 + gs * 0.55).toFixed(2);     // 0.30..0.85
    if (body.classList.contains('dark')) {
      root.style.setProperty('--glass-bg',  `rgba(255,255,255,${(gs*0.12).toFixed(2)})`);
      root.style.setProperty('--glass-bg-2',`rgba(255,255,255,${(gs*0.07).toFixed(2)})`);
      root.style.setProperty('--glass-border', `rgba(255,255,255,${(0.12 + gs*0.22).toFixed(2)})`);
    } else {
      root.style.setProperty('--glass-bg',   `rgba(255,255,255,${bg1})`);
      root.style.setProperty('--glass-bg-2', `rgba(255,255,255,${bg2})`);
      root.style.setProperty('--glass-border',`rgba(255,255,255,${brd})`);
    }
    root.style.setProperty('--glass-blur', `${blur}px`);

    // Density
    body.classList.toggle('dense', t.density === 'dense');
    body.classList.toggle('loose', t.density === 'loose');

    // Mascot
    const stage = document.getElementById('dolphin-stage');
    if (stage) stage.classList.toggle('hidden', !t.showMascot);

    // Fonts
    const fp = FONT_PAIRS[t.fontPair] || FONT_PAIRS["jakarta-fraunces"];
    root.style.setProperty('--f-ui', fp.ui);
    root.style.setProperty('--f-display', fp.display);

    // Dark mode
    body.classList.toggle('dark', !!t.darkMode);
  }, [t]);

  return (
    <window.TweaksPanel title="Tweaks" defaultOpen={false}>
      <window.TweakSection title="Modo">
        <window.TweakToggle
          label="Modo oscuro"
          value={t.darkMode}
          onChange={v => setTweak('darkMode', v)}
        />
      </window.TweakSection>

      <window.TweakSection title="Color de acento">
        <window.TweakColor
          value={t.accent}
          onChange={v => setTweak('accent', v)}
          options={['#2aa39a', '#3b82f6', '#b48cff', '#e07a5f', '#10b981']}
        />
      </window.TweakSection>

      <window.TweakSection title="Fondo animado">
        <window.TweakSlider
          label="Intensidad de ecos"
          value={t.echoIntensity}
          onChange={v => setTweak('echoIntensity', v)}
          min={0} max={100} step={5}
        />
      </window.TweakSection>

      <window.TweakSection title="Vidrio">
        <window.TweakSlider
          label="Fuerza del glass"
          value={t.glassStrength}
          onChange={v => setTweak('glassStrength', v)}
          min={0} max={100} step={5}
        />
      </window.TweakSection>

      <window.TweakSection title="Mascota">
        <window.TweakToggle
          label="Mostrar delfín grande en hero"
          value={t.showMascot}
          onChange={v => setTweak('showMascot', v)}
        />
      </window.TweakSection>

      <window.TweakSection title="Densidad">
        <window.TweakRadio
          value={t.density}
          onChange={v => setTweak('density', v)}
          options={[
            { value: 'loose', label: 'Suelta' },
            { value: 'dense', label: 'Densa' },
          ]}
        />
      </window.TweakSection>

      <window.TweakSection title="Tipografía">
        <window.TweakSelect
          value={t.fontPair}
          onChange={v => setTweak('fontPair', v)}
          options={Object.entries(FONT_PAIRS).map(([k, v]) => ({ value: k, label: v.label }))}
        />
      </window.TweakSection>
    </window.TweaksPanel>
  );
}

// Hex mix helper — returns a hex string mixing a→b by t (0..1)
function mix(a, b, t) {
  const pa = parseHex(a), pb = parseHex(b);
  const r = Math.round(pa.r + (pb.r - pa.r) * t);
  const g = Math.round(pa.g + (pb.g - pa.g) * t);
  const bl = Math.round(pa.b + (pb.b - pa.b) * t);
  return '#' + [r, g, bl].map(n => n.toString(16).padStart(2, '0')).join('');
}
function parseHex(h) {
  const s = h.replace('#', '');
  return { r: parseInt(s.slice(0, 2), 16), g: parseInt(s.slice(2, 4), 16), b: parseInt(s.slice(4, 6), 16) };
}

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