// Main welcome UI — resolve globals at render time (Babel src scripts load async).
// Use React.* hooks (no top-level destructuring) to avoid global redeclare errors.
(function () {
window.CustexHome = window.CustexHome || {};
window.CustexHome.components = window.CustexHome.components || {};

function cxConstants() {
  return (window.CustexHome && window.CustexHome.constants) || {};
}

function cxHooks() {
  return (window.CustexHome && window.CustexHome.hooks) || {};
}

function cxTweakUi() {
  return {
    TweaksPanel: window.TweaksPanel,
    TweakSection: window.TweakSection,
    TweakSelect: window.TweakSelect,
    TweakRadio: window.TweakRadio,
    TweakSlider: window.TweakSlider,
    TweakToggle: window.TweakToggle,
    TweakColor: window.TweakColor,
    TweakButton: window.TweakButton,
  };
}

function Welcome() {
  return (
    <>
      <div className="welcome">
        <div className="welcome-fade">
          <h1>
            Everyone Can <i>Design.</i><br />
            Everywhere Can <i>Manufacture.</i>
          </h1>
        </div>
      </div>

      <div className="scroll-cue">
        <span>scroll to unfurl</span>
        <span className="line" />
      </div>
    </>
  );
}

function CursorFollower({ cursorColor, active }) {
  const needleRef = React.useRef(null);
  const Needle = window.NeedleCursor;

  React.useEffect(() => {
    const onMove = (e) => {
      const x = e.clientX;
      const y = e.clientY;
      if (needleRef.current) {
        needleRef.current.style.transform = `translate3d(${x}px, ${y}px, 0)`;
      }
    };
    document.addEventListener('pointermove', onMove);
    return () => document.removeEventListener('pointermove', onMove);
  }, [active]);

  if (!Needle) return null;

  return (
    <div ref={needleRef} className="needle-cursor">
      <Needle color={cursorColor} />
    </div>
  );
}

function AppTweaks({ t, setTweak, setClearKey }) {
  const {
    TweaksPanel, TweakSection, TweakSelect, TweakRadio, TweakSlider,
    TweakToggle, TweakColor, TweakButton,
  } = cxTweakUi();
  const { SHAPES, TONES } = cxConstants();

  if (!TweaksPanel) return null;

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Fabric" />
      <TweakSelect label="Cut shape" value={t.shape}
                   options={Object.keys(SHAPES).map(k => ({ value: k, label: SHAPES[k].label }))}
                   onChange={(v) => setTweak('shape', v)} />
      <TweakSelect label="Satin tone" value={t.tone}
                   options={Object.keys(TONES).map(k => ({ value: k, label: TONES[k].label }))}
                   onChange={(v) => setTweak('tone', v)} />

      <TweakSection label="Pattern" />
      <TweakSelect label="Motif" value={t.motif}
                   options={[
                     { value: 'peony', label: 'Peony bouquet' },
                     { value: 'chrysanthemum', label: 'Chrysanthemum' },
                     { value: 'botanical', label: 'Botanical line-art' },
                     { value: 'lotus', label: 'Lotus & wave' },
                     { value: 'damask', label: 'Damask repeat' },
                   ]}
                   onChange={(v) => setTweak('motif', v)} />
      <TweakRadio label="Density" value={t.density}
                  options={['sparse', 'medium', 'rich']}
                  onChange={(v) => setTweak('density', v)} />

      <TweakSection label="Surface" />
      <TweakSlider label="Wave height" value={t.displacement}
                   min={0} max={0.9} step={0.01}
                   onChange={(v) => setTweak('displacement', v)} />
      <TweakSlider label="Ripple speed" value={t.ripple}
                   min={0} max={2.5} step={0.05}
                   onChange={(v) => setTweak('ripple', v)} />
      <TweakSlider label="Opacity" value={t.opacity}
                   min={0.1} max={1} step={0.02}
                   onChange={(v) => setTweak('opacity', v)} />
      <TweakSlider label="Transmission" value={t.transmission}
                   min={0} max={1} step={0.02}
                   onChange={(v) => setTweak('transmission', v)} />
      <TweakSlider label="Stitch relief" value={t.bumpScale}
                   min={0} max={0.25} step={0.005}
                   onChange={(v) => setTweak('bumpScale', v)} />
      <TweakSlider label="Trail fade" value={t.fadeRate}
                   min={0} max={0.5} step={0.01}
                   onChange={(v) => setTweak('fadeRate', v)} />
      <TweakSlider label="Gloss" value={t.gloss}
                   min={0} max={1} step={0.02}
                   onChange={(v) => setTweak('gloss', v)} />
      <TweakToggle label="Auto-rotate when idle" value={t.autoSpin}
                   onChange={(v) => setTweak('autoSpin', v)} />

      <TweakSection label="Needle" />
      <TweakColor label="Tip glow" value={t.cursor}
                  options={['#f4c97a', '#e8a87c', '#d68a5e', '#c4a063', '#f0d9a8']}
                  onChange={(v) => setTweak('cursor', v)} />
      <TweakSlider label="Reveal brush" value={t.brush} min={30} max={140} unit="px"
                   onChange={(v) => setTweak('brush', v)} />

      <TweakSection label="Stage" />
      <TweakToggle label="Drifting silk ambient" value={t.ambient}
                   onChange={(v) => setTweak('ambient', v)} />
      <TweakToggle label="Show UI chrome" value={t.showChrome}
                   onChange={(v) => setTweak('showChrome', v)} />
      <TweakToggle label="First-time hint" value={t.showHint}
                   onChange={(v) => setTweak('showHint', v)} />
      <TweakButton label="Clear stitches" secondary
                   onClick={() => setClearKey(k => k + 1)} />
    </TweaksPanel>
  );
}

function App() {
  const { PALETTES, TONES, SHAPES, TEX_W, TEX_H } = cxConstants();
  const {
    useScrollProgress, useFabricGpuActive,
  } = cxHooks();
  const useTweaksFn = window.useTweaks;
  const Fabric3D = window.Fabric3D;

  const overrides = (typeof window !== 'undefined' && window.__CUSTEX_THEME__) || {};
  const [t, setTweak] = useTweaksFn({ ...PALETTES, ...overrides });
  const isLight = overrides.theme === 'light';

  React.useEffect(() => {
    if (!isLight) return;
    document.body.classList.add('palette-cream');
    return () => document.body.classList.remove('palette-cream');
  }, [isLight]);

  const [active, setActive] = React.useState(false);
  const [clearKey, setClearKey] = React.useState(0);
  useScrollProgress();
  const gpuActive = useFabricGpuActive();

  const tone = TONES[t.tone] || TONES.champagne;
  const palette = React.useMemo(() => ({
    ...tone.thread,
    satin: tone.satin,
  }), [tone]);

  const shapePath = React.useMemo(() => {
    const fn = (SHAPES[t.tone === '_' ? 'cut' : t.shape] || SHAPES.cut).path;
    return fn(TEX_W, TEX_H, 11);
  }, [t.shape]);

  const key = `${t.tone}-${t.density}-${t.motif}-${clearKey}`;

  return (
    <>
      <section className="fabric-stage">
        <div className="stage-wrap">
          <div className="stage">
            {t.ambient && <div className="silk-waves" />}
            <div className="silk-vignette" />
            <div className="stage-fade" aria-hidden="true" />
          </div>

          <div className="intro-cta-wrap">
            <a className="home-cta" href="/studio" aria-label="Open Custex node workflow studio">
              Begin <b>Custex</b>
            </a>
          </div>

          <div className="stage-center">
            <div className="fabric-slot">
              <div className="fabric-scale">
                {gpuActive && Fabric3D ? (
                  <Fabric3D
                    key={key}
                    theme={isLight ? 'light' : 'dark'}
                    palette={palette}
                    density={t.density}
                    brushSize={t.brush}
                    shape={t.shape}
                    shapePath={shapePath}
                    motif={t.motif}
                    displacement={t.displacement}
                    ripple={t.ripple}
                    opacity={t.opacity}
                    transmission={t.transmission}
                    bumpScale={t.bumpScale}
                    fadeRate={t.fadeRate}
                    gloss={t.gloss}
                    autoSpin={t.autoSpin}
                    onActiveChange={setActive}
                  />
                ) : null}
              </div>
            </div>
            <p className="tagline tagline-below">
              An <i>AI</i> & algorithm-driven, node-based <i>textile design</i> platform.
            </p>
          </div>

          <Welcome />
        </div>
      </section>

      <CursorFollower cursorColor={t.cursor} active={active} />
      <AppTweaks t={t} setTweak={setTweak} setClearKey={setClearKey} />
    </>
  );
}

window.CustexHome.components.App = App;
window.CustexHome.components.Welcome = Welcome;
window.CustexHome.components.CursorFollower = CursorFollower;
window.CustexHome.components.AppTweaks = AppTweaks;
})();