/* Hero tint tuner — local-only dev panel.
   Drives CSS custom properties on :root so .hero-video and .hero-video-tint
   update live. Independent of the host-protocol TweaksPanel. */

function HeroTintTuner() {
  const [v, setV] = React.useState({
    sat: 100, opacity: 100, mid: 55, edge: 100, top: 25, bottom: 70, inner: 60,
  });
  const [open, setOpen] = React.useState(true);

  React.useEffect(() => {
    const s = document.documentElement.style;
    s.setProperty('--hero-sat', String(v.sat / 100));
    s.setProperty('--tint-opacity', String(v.opacity / 100));
    s.setProperty('--tint-mid', v.mid + '%');
    s.setProperty('--tint-edge', v.edge + '%');
    s.setProperty('--tint-top', v.top + '%');
    s.setProperty('--tint-bottom', v.bottom + '%');
    s.setProperty('--tint-inner', v.inner + '%');
  }, [v]);

  const set = (k) => (e) => setV((p) => ({ ...p, [k]: Number(e.target.value) }));

  const reset = () => setV({ sat: 100, opacity: 100, mid: 55, edge: 100, top: 25, bottom: 70, inner: 60 });

  if (!open) {
    return (
      <button
        onClick={() => setOpen(true)}
        style={{
          position: 'fixed', left: 16, top: 16, zIndex: 2147483645,
          padding: '6px 10px', borderRadius: 8,
          border: '.5px solid rgba(0,0,0,.15)', background: 'rgba(255,255,255,.92)',
          font: '500 11px/1 ui-sans-serif,system-ui,sans-serif', cursor: 'pointer',
        }}>
        Tint tuner
      </button>
    );
  }

  const row = (key, label, min, max) => (
    <label key={key} style={{ display: 'block', marginBottom: 8 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', color: 'rgba(41,38,27,.72)' }}>
        <span style={{ fontWeight: 500 }}>{label}</span>
        <span style={{ color: 'rgba(41,38,27,.5)', fontVariantNumeric: 'tabular-nums' }}>{v[key]}%</span>
      </div>
      <input type="range" min={min} max={max} value={v[key]} onChange={set(key)}
             style={{ width: '100%', marginTop: 4 }} />
    </label>
  );

  return (
    <div style={{
      position: 'fixed', left: 16, top: 16, zIndex: 2147483645, width: 240,
      background: 'rgba(250,249,247,.92)',
      backdropFilter: 'blur(20px) saturate(160%)',
      WebkitBackdropFilter: 'blur(20px) saturate(160%)',
      border: '.5px solid rgba(0,0,0,.1)', borderRadius: 12,
      boxShadow: '0 8px 30px rgba(0,0,0,.18)',
      padding: '10px 12px 12px',
      font: '11px/1.4 ui-sans-serif,system-ui,sans-serif',
      color: '#29261b',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
        <b style={{ fontSize: 11.5, letterSpacing: '.02em' }}>Hero tint tuner</b>
        <button onClick={() => setOpen(false)}
                style={{ border: 0, background: 'transparent', fontSize: 14,
                         cursor: 'pointer', color: 'rgba(41,38,27,.55)', padding: '0 4px' }}>×</button>
      </div>
      {row('sat', 'Video saturatie', 0, 200)}
      {row('opacity', 'Tint sterkte (master)', 0, 100)}
      {row('mid', 'Mid cream', 0, 100)}
      {row('edge', 'Hoek cream', 0, 100)}
      {row('inner', 'Spotlight grootte', 20, 90)}
      {row('top', 'Top wash', 0, 100)}
      {row('bottom', 'Bodem wash', 0, 100)}
      <div style={{ display: 'flex', gap: 6, marginTop: 4 }}>
        <button onClick={() => {
          const out = JSON.stringify(v, null, 2);
          console.log('hero tint values:\n' + out);
          if (navigator.clipboard) navigator.clipboard.writeText(out);
        }}
                style={{ flex: 1, padding: '6px 8px', borderRadius: 7, border: 0,
                         background: '#29261b', color: '#fff',
                         font: 'inherit', fontWeight: 500, cursor: 'pointer' }}>
          Kopieer
        </button>
        <button onClick={reset}
                style={{ padding: '6px 10px', borderRadius: 7, border: 0,
                         background: 'rgba(0,0,0,.06)', color: '#29261b',
                         font: 'inherit', fontWeight: 500, cursor: 'pointer' }}>
          Reset
        </button>
      </div>
    </div>
  );
}

Object.assign(window, { HeroTintTuner });