// Tweaks panel — host-protocol compliant, self-contained
const { useState: useStateT, useEffect: useEffectT } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#12c4a8",
  "accentDeep": "#0e9e88",
  "auroraIntensity": 1.0,
  "auroraSpeed": 1.0,
  "showStars": true,
  "italicHeadings": true,
  "bodyScale": 1.0,
  "cardGlow": true
}/*EDITMODE-END*/;

function useTweaks(defaults) {
  const [t, setT] = useStateT(defaults);
  const set = (k, v) => {
    setT((prev) => {
      const next = { ...prev, [k]: v };
      try { window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*'); } catch (e) {}
      return next;
    });
  };
  return [t, set];
}

function TweaksPanel({ tweaks, setTweak }) {
  const [open, setOpen] = useStateT(false);

  useEffectT(() => {
    const onMsg = (e) => {
      if (!e.data) return;
      if (e.data.type === '__activate_edit_mode') setOpen(true);
      if (e.data.type === '__deactivate_edit_mode') setOpen(false);
    };
    window.addEventListener('message', onMsg);
    try { window.parent.postMessage({ type: '__edit_mode_available' }, '*'); } catch (e) {}
    return () => window.removeEventListener('message', onMsg);
  }, []);

  const close = () => {
    setOpen(false);
    try { window.parent.postMessage({ type: '__edit_mode_dismissed' }, '*'); } catch (e) {}
  };

  if (!open) return null;

  const row = { display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 14 };
  const label = { fontSize: 10, fontWeight: 500, color: 'var(--text-muted)', letterSpacing: '0.16em', textTransform: 'uppercase' };

  return (
    <div style={{
      position: 'fixed', right: 20, bottom: 20, zIndex: 1000, width: 300,
      maxHeight: 'calc(100vh - 40px)', overflow: 'auto',
      background: 'rgba(8, 18, 26, 0.92)', color: '#f0f4f8',
      border: '1px solid rgba(14,158,136,0.35)', borderRadius: 12,
      backdropFilter: 'blur(20px) saturate(160%)', WebkitBackdropFilter: 'blur(20px) saturate(160%)',
      boxShadow: '0 24px 60px rgba(0,0,0,0.5), 0 0 32px rgba(14,158,136,0.2)',
      fontFamily: 'IBM Plex Sans, sans-serif',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '16px 18px', borderBottom: '1px solid rgba(255,255,255,0.08)' }}>
        <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#12c4a8' }}>Tweaks</div>
        <button onClick={close} style={{ background: 'none', border: 'none', color: '#8fa8b8', cursor: 'pointer', fontSize: 16, padding: 4 }}>×</button>
      </div>
      <div style={{ padding: 18 }}>
        <div style={{ fontSize: 10, fontWeight: 500, color: '#12c4a8', letterSpacing: '0.2em', textTransform: 'uppercase', marginBottom: 14 }}>Aurora</div>

        <div style={row}>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <span style={label}>Intensity</span>
            <span style={{ fontSize: 11, color: '#b8c8d4', fontVariantNumeric: 'tabular-nums' }}>{tweaks.auroraIntensity.toFixed(2)}</span>
          </div>
          <input type="range" min="0.2" max="1.5" step="0.05" value={tweaks.auroraIntensity}
            onChange={(e) => setTweak('auroraIntensity', parseFloat(e.target.value))}
            style={{ width: '100%', accentColor: '#12c4a8' }} />
        </div>

        <div style={row}>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <span style={label}>Flow speed</span>
            <span style={{ fontSize: 11, color: '#b8c8d4', fontVariantNumeric: 'tabular-nums' }}>{tweaks.auroraSpeed.toFixed(2)}×</span>
          </div>
          <input type="range" min="0.2" max="2.5" step="0.05" value={tweaks.auroraSpeed}
            onChange={(e) => setTweak('auroraSpeed', parseFloat(e.target.value))}
            style={{ width: '100%', accentColor: '#12c4a8' }} />
        </div>

        <div style={{ ...row, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
          <span style={label}>Stars</span>
          <button onClick={() => setTweak('showStars', !tweaks.showStars)} style={{
            width: 36, height: 20, borderRadius: 999, border: 'none', cursor: 'pointer',
            background: tweaks.showStars ? '#12c4a8' : '#2a3d4c', position: 'relative', transition: 'background 0.2s',
          }}>
            <span style={{
              position: 'absolute', top: 2, left: tweaks.showStars ? 18 : 2,
              width: 16, height: 16, borderRadius: '50%', background: '#fff', transition: 'left 0.2s',
            }} />
          </button>
        </div>

        <div style={{ fontSize: 10, fontWeight: 500, color: '#12c4a8', letterSpacing: '0.2em', textTransform: 'uppercase', margin: '22px 0 14px' }}>Brand</div>

        <div style={row}>
          <span style={label}>Accent (bright)</span>
          <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
            <input type="color" value={tweaks.accent} onChange={(e) => setTweak('accent', e.target.value)}
              style={{ width: 32, height: 32, border: '1px solid rgba(255,255,255,0.12)', borderRadius: 6, background: 'transparent', cursor: 'pointer' }} />
            <span style={{ fontSize: 12, color: '#b8c8d4', fontFamily: 'ui-monospace, monospace' }}>{tweaks.accent}</span>
          </div>
        </div>

        <div style={row}>
          <span style={label}>Accent (deep)</span>
          <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
            <input type="color" value={tweaks.accentDeep} onChange={(e) => setTweak('accentDeep', e.target.value)}
              style={{ width: 32, height: 32, border: '1px solid rgba(255,255,255,0.12)', borderRadius: 6, background: 'transparent', cursor: 'pointer' }} />
            <span style={{ fontSize: 12, color: '#b8c8d4', fontFamily: 'ui-monospace, monospace' }}>{tweaks.accentDeep}</span>
          </div>
        </div>

        <div style={{ fontSize: 10, fontWeight: 500, color: '#12c4a8', letterSpacing: '0.2em', textTransform: 'uppercase', margin: '22px 0 14px' }}>Typography</div>

        <div style={{ ...row, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
          <span style={label}>Italic accents</span>
          <button onClick={() => setTweak('italicHeadings', !tweaks.italicHeadings)} style={{
            width: 36, height: 20, borderRadius: 999, border: 'none', cursor: 'pointer',
            background: tweaks.italicHeadings ? '#12c4a8' : '#2a3d4c', position: 'relative', transition: 'background 0.2s',
          }}>
            <span style={{
              position: 'absolute', top: 2, left: tweaks.italicHeadings ? 18 : 2,
              width: 16, height: 16, borderRadius: '50%', background: '#fff', transition: 'left 0.2s',
            }} />
          </button>
        </div>

        <div style={row}>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <span style={label}>Body scale</span>
            <span style={{ fontSize: 11, color: '#b8c8d4', fontVariantNumeric: 'tabular-nums' }}>{tweaks.bodyScale.toFixed(2)}×</span>
          </div>
          <input type="range" min="0.85" max="1.25" step="0.05" value={tweaks.bodyScale}
            onChange={(e) => setTweak('bodyScale', parseFloat(e.target.value))}
            style={{ width: '100%', accentColor: '#12c4a8' }} />
        </div>

        <div style={{ fontSize: 10, fontWeight: 500, color: '#12c4a8', letterSpacing: '0.2em', textTransform: 'uppercase', margin: '22px 0 14px' }}>Cards</div>

        <div style={{ ...row, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
          <span style={label}>Teal glow on hover</span>
          <button onClick={() => setTweak('cardGlow', !tweaks.cardGlow)} style={{
            width: 36, height: 20, borderRadius: 999, border: 'none', cursor: 'pointer',
            background: tweaks.cardGlow ? '#12c4a8' : '#2a3d4c', position: 'relative', transition: 'background 0.2s',
          }}>
            <span style={{
              position: 'absolute', top: 2, left: tweaks.cardGlow ? 18 : 2,
              width: 16, height: 16, borderRadius: '50%', background: '#fff', transition: 'left 0.2s',
            }} />
          </button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { TweaksPanel, useTweaks, TWEAK_DEFAULTS });