// AtomForge Labs — Tweaks app
const { useState, useEffect, useRef } = React;

const UC_CARDS = [
  { id: 'hydrogen', label: 'Use case 01 — Hydrogen' },
  { id: 'ammonia',  label: 'Use case 02 — Ammonia' },
  { id: 'co2',      label: 'Use case 03 — CO₂' },
];

function applyUcImage(id, dataUrl) {
  const el = document.querySelector(`.vis[data-uc-id="${id}"]`);
  if (!el) return;
  if (dataUrl) {
    el.style.backgroundImage = `url("${dataUrl}")`;
    el.dataset.hasImage = '1';
  } else {
    el.style.backgroundImage = '';
    delete el.dataset.hasImage;
  }
}

function loadStoredImage(id) {
  try { return localStorage.getItem(`atl-uc-image:${id}`) || ''; }
  catch { return ''; }
}
function saveStoredImage(id, dataUrl) {
  try {
    if (dataUrl) localStorage.setItem(`atl-uc-image:${id}`, dataUrl);
    else localStorage.removeItem(`atl-uc-image:${id}`);
  } catch (e) { console.warn('Image too large to persist', e); }
}

// Apply any previously-uploaded images on first paint, before React mounts.
UC_CARDS.forEach(c => applyUcImage(c.id, loadStoredImage(c.id)));

function UCImageRow({ id, label }) {
  const [src, setSrc] = useState(() => loadStoredImage(id));
  const inputRef = useRef(null);

  const onPick = (file) => {
    if (!file) return;
    const reader = new FileReader();
    reader.onload = () => {
      const url = reader.result;
      setSrc(url);
      saveStoredImage(id, url);
      applyUcImage(id, url);
    };
    reader.readAsDataURL(file);
  };

  const clear = () => {
    setSrc('');
    saveStoredImage(id, '');
    applyUcImage(id, '');
    if (inputRef.current) inputRef.current.value = '';
  };

  return (
    <div className="twk-row">
      <div className="twk-lbl">
        <span>{label}</span>
        {src ? <span className="twk-val">uploaded</span> : <span className="twk-val">none</span>}
      </div>
      <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
        <div
          onClick={() => inputRef.current && inputRef.current.click()}
          style={{
            flex: 1, height: 56, borderRadius: 8,
            border: '1px dashed rgba(255,255,255,0.18)',
            background: src ? `center/cover no-repeat url("${src}")` : 'rgba(255,255,255,0.03)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: 'rgba(255,255,255,0.55)', fontSize: 11, letterSpacing: '0.06em',
            textTransform: 'uppercase', cursor: 'pointer',
          }}
        >
          {!src && 'Click to upload'}
        </div>
        {src && (
          <button type="button" className="twk-btn secondary"
                  style={{ flex: '0 0 auto', padding: '0 10px', height: 28, fontSize: 11 }}
                  onClick={clear}>Remove</button>
        )}
      </div>
      <input ref={inputRef} type="file" accept="image/*" hidden
             onChange={(e) => onPick(e.target.files && e.target.files[0])} />
    </div>
  );
}

function AtomForgeApp() {
  const [t, setTweak] = useTweaks(window.__TWEAK_DEFAULTS);

  useEffect(() => {
    setTheme(t.theme);
    setAccent(t.accent);
    document.body.dataset.heroLayout = t.heroLayout;
    document.body.dataset.ucLayout = t.ucLayout;
    setHeadlineVariant(t.headlineVariant);
    if (window.AtomForgeLattice) window.AtomForgeLattice.setIntensity(t.animationIntensity);
  }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Color">
        <TweakRadio label="Theme" value={t.theme} onChange={(v)=>setTweak('theme',v)}
          options={[{value:'light',label:'Light'},{value:'dark',label:'Dark'}]} />
        <TweakColor label="Accent" value={t.accent} onChange={(v)=>setTweak('accent',v)} />
      </TweakSection>
      <TweakSection title="Hero">
        <TweakSelect label="Layout" value={t.heroLayout} onChange={(v)=>setTweak('heroLayout',v)} options={[
          {value:'default', label:'Centered-left, full-bleed'},
          {value:'split',   label:'Split — text + animation'},
          {value:'centered',label:'Centered — text behind'},
        ]} />
        <TweakSelect label="Headline" value={t.headlineVariant} onChange={(v)=>setTweak('headlineVariant',v)} options={[
          {value:'v1', label:'Discover better materials…'},
          {value:'v2', label:'Better materials. Sooner.'},
          {value:'v3', label:'Find materials your process needs.'},
        ]} />
        <TweakSlider label="Animation intensity" min={0.2} max={1.4} step={0.05}
          value={t.animationIntensity} onChange={(v)=>setTweak('animationIntensity',v)}
          format={(v)=>v.toFixed(2)+'×'} />
      </TweakSection>
      <TweakSection title="Use cases">
        <TweakRadio label="Layout" value={t.ucLayout} onChange={(v)=>setTweak('ucLayout',v)}
          options={[
            {value:'grid',  label:'2×2'},
            {value:'three', label:'3 cols'},
            {value:'stack', label:'Stack'},
          ]} />
      </TweakSection>
      <TweakSection title="Use case images">
        {UC_CARDS.map(c => (
          <UCImageRow key={c.id} id={c.id} label={c.label} />
        ))}
      </TweakSection>
    </TweaksPanel>
  );
}

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