// tweaks-app.jsx — Caston Tweaks panel
// Wires the TweaksPanel form controls to the scene's applyTweaks() and
// rewrites copy in the DOM.

const { useEffect } = React;

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

  // Push every change into the WebGL scene
  useEffect(() => {
    if (!window.__CASTON_APPLY) return;
    window.__CASTON_APPLY({
      autoRotate: t.autoRotate,
      parallax: t.parallax,
      particles: t.particles,
      scrollFactor: t.scrollFactor,
      iridescence: t.iridescence,
      showParticles: t.showParticles,
      wordmark: t.wordmark,
      letterSpacing: t.letterSpacing,
      depth: t.depth,
      paletteHot:  t.palette[0],
      paletteMid:  t.palette[1],
      paletteCold: t.palette[2],
    });
  }, [t]);

  // Update headline copy / subhead live (without breaking the gradient span)
  useEffect(() => {
    const h = document.querySelector(".headline");
    const s = document.querySelector(".sub");
    if (h && t.headlineKo){
      const lines = t.headlineKo.split("\n");
      // Whole second line becomes the gradient span (convention: split so the
      // brand phrase lives on the second line).
      const l1 = lines[0] || "";
      const l2 = lines[1] || "";
      h.innerHTML = `${escape(l1)}<br/><span class="g">${escape(l2)}</span>`;
    }
    if (s && t.subheadKo){ s.textContent = t.subheadKo; }
  }, [t.headlineKo, t.subheadKo]);

  // also update the CSS gradient driving brand text + button bg
  useEffect(() => {
    const g = `linear-gradient(92deg,${t.palette[0]} 0%,${t.palette[1]} 48%,${t.palette[2]} 100%)`;
    document.documentElement.style.setProperty("--grad", g);
    document.documentElement.style.setProperty("--pink", t.palette[0]);
    document.documentElement.style.setProperty("--rose", t.palette[1]);
    document.documentElement.style.setProperty("--orange", t.palette[2]);
  }, [t.palette]);

  return (
    <TweaksPanel title="Tweaks · 캐스트온">
      <TweakSection label="Wordmark" />
      <TweakText   label="Text"            value={t.wordmark}
                   onChange={(v)=>setTweak('wordmark', v)} />
      <TweakSlider label="Letter spacing"  value={t.letterSpacing} min={-0.05} max={0.4} step={0.01}
                   onChange={(v)=>setTweak('letterSpacing', v)} />
      <TweakSlider label="Depth"           value={t.depth}         min={0.15} max={1.0} step={0.05}
                   onChange={(v)=>setTweak('depth', v)} />

      <TweakSection label="Scene" />
      <TweakSlider label="Auto-rotate"    value={t.autoRotate}   min={0}   max={0.8} step={0.02} unit=" rad/s"
                   onChange={(v)=>setTweak('autoRotate', v)} />
      <TweakSlider label="Parallax tilt"  value={t.parallax}     min={0}   max={20}  step={1}   unit="°"
                   onChange={(v)=>setTweak('parallax', v)} />
      <TweakSlider label="Iridescence"    value={t.iridescence}  min={0}   max={1.5} step={0.05}
                   onChange={(v)=>setTweak('iridescence', v)} />
      <TweakSlider label="Explode × scroll" value={t.scrollFactor} min={0} max={2} step={0.05}
                   onChange={(v)=>setTweak('scrollFactor', v)} />

      <TweakSection label="Particles" />
      <TweakToggle  label="Show particles" value={t.showParticles}
                    onChange={(v)=>setTweak('showParticles', v)} />
      <TweakSlider  label="Count" value={t.particles} min={0} max={500} step={10}
                    onChange={(v)=>setTweak('particles', v)} />

      <TweakSection label="Brand palette" />
      <TweakColor label="Gradient" value={t.palette}
        options={[
          ["#EC4899","#F43F5E","#FB923C"],   // pink → rose → orange (default)
          ["#F472B6","#FB7185","#FCD34D"],   // peach pop
          ["#A78BFA","#F472B6","#FB923C"],   // dusk
          ["#22D3EE","#818CF8","#F472B6"],   // off-brand cool (compare)
          ["#FDE68A","#FB7185","#EC4899"],   // sunrise
        ]}
        onChange={(v)=>setTweak('palette', v)} />

      <TweakSection label="Copy" />
      <TweakText label="Headline (use \n)" value={t.headlineKo}
                 onChange={(v)=>setTweak('headlineKo', v)} />
      <TweakText label="Subhead" value={t.subheadKo}
                 onChange={(v)=>setTweak('subheadKo', v)} />
    </TweaksPanel>
  );
}

function escape(s){ return String(s).replace(/[&<>]/g, c => ({"&":"&amp;","<":"&lt;",">":"&gt;"}[c])); }

const root = document.createElement("div");
document.body.appendChild(root);
ReactDOM.createRoot(root).render(<CastonTweaks />);