// Tweaks panel — host protocol + in-design UI
const { useState: useStateT, useEffect: useEffectT } = React;

function TweaksPanel({ tweaks, setTweaks }) {
  const [active, setActive] = useStateT(false);

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

  const update = (patch) => {
    const next = { ...tweaks, ...patch };
    setTweaks(next);
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: patch }, '*');
  };

  if (!active) return null;

  return (
    <div style={{
      position: 'fixed',
      bottom: 20, right: 20,
      zIndex: 200,
      width: 300,
      background: 'rgba(15, 15, 15, 0.95)',
      backdropFilter: 'blur(12px)',
      WebkitBackdropFilter: 'blur(12px)',
      border: '1px solid var(--line-strong)',
      borderRadius: 2,
      fontFamily: 'var(--font-display)',
      color: 'var(--fg)',
      boxShadow: '0 20px 60px -20px rgba(0,0,0,0.8)',
      animation: 'slideIn 240ms ease',
    }}>
      <div style={{
        padding: '12px 16px',
        borderBottom: '1px solid var(--line)',
        fontFamily: 'var(--font-mono)',
        fontSize: 10,
        letterSpacing: '0.22em',
        textTransform: 'uppercase',
        color: 'var(--fg-dim)',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      }}>
        <span>Tweaks</span>
        <span className="hb" style={{ width: 5, height: 5, borderRadius: '50%', background: 'var(--accent)' }} />
      </div>

      <div style={{ padding: '18px 16px', display: 'flex', flexDirection: 'column', gap: 20 }}>
        {/* Headline */}
        <Group label="Headline">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
            {HEADLINES.map((h, i) => (
              <button key={i}
                onClick={() => update({ headlineIndex: i })}
                style={{
                  ...chipStyle(tweaks.headlineIndex === i),
                  textAlign: 'left',
                  padding: '8px 10px',
                  fontSize: 11,
                  whiteSpace: 'normal',
                  lineHeight: 1.3,
                }}
              >
                <span style={{ color: 'var(--fg-dim)', marginRight: 6 }}>{String(i + 1).padStart(2, '0')}</span>
                {h.h1.split('\n')[0].slice(0, 48)}{h.h1.length > 48 ? '…' : ''}
              </button>
            ))}
          </div>
        </Group>

        {/* Accent hue */}
        <Group label={`Accent hue · ${tweaks.accentHue}°`}>
          <input
            type="range"
            min={0} max={360} step={1}
            value={tweaks.accentHue}
            onChange={(e) => update({ accentHue: +e.target.value })}
            style={{ width: '100%', accentColor: 'var(--accent)' }}
          />
        </Group>

        {/* Motion */}
        <Group label="Motion">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 4 }}>
            {['off', 'subtle', 'full'].map((m) => (
              <button key={m}
                onClick={() => update({ motionIntensity: m })}
                style={chipStyle(tweaks.motionIntensity === m)}
              >
                {m}
              </button>
            ))}
          </div>
        </Group>
      </div>

      <style>{`
        @keyframes slideIn {
          from { opacity: 0; transform: translateY(10px); }
          to { opacity: 1; transform: translateY(0); }
        }
      `}</style>
    </div>
  );
}

function Group({ label, children }) {
  return (
    <div>
      <div style={{
        fontFamily: 'var(--font-mono)',
        fontSize: 10,
        letterSpacing: '0.2em',
        textTransform: 'uppercase',
        color: 'var(--fg-dim)',
        marginBottom: 8,
      }}>{label}</div>
      {children}
    </div>
  );
}

function chipStyle(active) {
  return {
    padding: '8px 10px',
    background: active ? 'var(--accent)' : 'transparent',
    color: active ? '#0A0A0A' : 'var(--fg-mute)',
    border: '1px solid ' + (active ? 'var(--accent)' : 'var(--line-strong)'),
    fontFamily: 'var(--font-mono)',
    fontSize: 10,
    letterSpacing: '0.12em',
    textTransform: 'uppercase',
    cursor: 'pointer',
    transition: 'all 140ms ease',
    borderRadius: 2,
  };
}

window.TweaksPanel = TweaksPanel;