const { useState: useStateT, useEffect: useEffectT } = React;

function Tweaks({ defaults }) {
  const [visible, setVisible] = useStateT(false);
  const [palette, setPalette] = useStateT(defaults.palette);
  const [type, setType] = useStateT(defaults.type);
  const [hero, setHero] = useStateT(defaults.hero);
  const [anim, setAnim] = useStateT(defaults.anim);

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

  useEffectT(() => {
    document.documentElement.dataset.palette = palette;
    document.documentElement.dataset.type = type;
    document.documentElement.dataset.hero = hero;
    document.documentElement.dataset.anim = anim;
  }, [palette, type, hero, anim]);

  const set = (k, v, s) => {
    s(v);
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*');
  };

  const palettes = [
    { id: 'terracotta', color: '#c9572d', bg: '#f3ead0' },
    { id: 'cocoa', color: '#f0e4a8', bg: '#2a1509' },
    { id: 'sage', color: '#5c7248', bg: '#eae6d3' },
    { id: 'ochre', color: '#b8842a', bg: '#f5e6b8' }
  ];

  return (
    <div className={`tweaks ${visible ? 'visible' : ''}`}>
      <h5>Tweaks <span style={{ fontFamily: 'var(--font-body)', fontSize: 11, opacity: 0.5, letterSpacing: '0.1em', textTransform: 'uppercase' }}>Solstice</span></h5>

      <div className="tweak-group">
        <div className="tweak-label">Paleta</div>
        <div className="tweak-swatches">
          {palettes.map(p => (
            <div key={p.id}
              className={`tweak-swatch ${palette === p.id ? 'active' : ''}`}
              onClick={() => set('palette', p.id, setPalette)}
              style={{ background: `linear-gradient(135deg, ${p.color} 50%, ${p.bg} 50%)` }}
              title={p.id}></div>
          ))}
        </div>
      </div>

      <div className="tweak-group">
        <div className="tweak-label">Tipografía</div>
        <div className="tweak-options">
          {['warm', 'editorial', 'handcraft', 'modern'].map(t => (
            <button key={t}
              className={`tweak-chip ${type === t ? 'active' : ''}`}
              onClick={() => set('type', t, setType)}>{t}</button>
          ))}
        </div>
      </div>

      <div className="tweak-group">
        <div className="tweak-label">Hero layout</div>
        <div className="tweak-options">
          {['vessel', 'editorial', 'bigtype'].map(h => (
            <button key={h}
              className={`tweak-chip ${hero === h ? 'active' : ''}`}
              onClick={() => set('hero', h, setHero)}>{h}</button>
          ))}
        </div>
      </div>

      <div className="tweak-group">
        <div className="tweak-label">Animación</div>
        <div className="tweak-options">
          {['subtle', 'moderate', 'rich'].map(a => (
            <button key={a}
              className={`tweak-chip ${anim === a ? 'active' : ''}`}
              onClick={() => set('anim', a, setAnim)}>{a}</button>
          ))}
        </div>
      </div>
    </div>
  );
}

function HeroLayoutStyles() {
  // Alternative hero layouts applied via CSS based on data-hero attribute
  return (
    <style>{`
      [data-hero="editorial"] .hero-grid { grid-template-columns: 2fr 1fr; }
      [data-hero="editorial"] .hero-title { font-size: clamp(60px, 11vw, 170px); }
      [data-hero="editorial"] .vessel-label { width: 120px; height: 120px; font-size: 18px; }
      [data-hero="bigtype"] .hero-grid { grid-template-columns: 1fr; text-align: center; }
      [data-hero="bigtype"] .hero-title { font-size: clamp(90px, 18vw, 280px); text-align: center; }
      [data-hero="bigtype"] .hero-right { display: none; }
      [data-hero="bigtype"] .hero-sub { margin-left: auto; margin-right: auto; text-align: center; }
      [data-hero="bigtype"] .hero-footer { justify-content: center; }
    `}</style>
  );
}

Object.assign(window, { Tweaks, HeroLayoutStyles });