// Tweaks.jsx — in-page design tweak panel
const { useState: useStateT, useEffect: useEffectT } = React;

function Tweaks({ active, state, setState }) {
  if (!active) return null;

  const setK = (k, v) => setState(s => ({ ...s, [k]: v }));

  return (
    <div style={{
      position: 'fixed',
      right: 20, bottom: 20,
      zIndex: 100,
      width: 300,
      background: 'rgba(0,0,0,0.92)',
      backdropFilter: 'blur(20px)',
      border: '1px solid var(--border-sig)',
      borderRadius: 'var(--r-1)',
      boxShadow: 'var(--shadow-sig)',
      fontFamily: 'var(--font-body)',
      color: 'var(--white)',
      overflow: 'hidden',
    }}>
      <div style={{
        padding: '14px 18px', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        borderBottom: '1px solid var(--border)',
        background: 'var(--bg3)',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ width: 7, height: 7, background: 'var(--signal)', boxShadow: '0 0 10px var(--signal)' }} />
          <span style={{ fontFamily: 'var(--display-stack)', fontWeight: 900, textTransform: 'uppercase', letterSpacing: '0.1em', fontSize: '0.78rem' }}>Tweaks</span>
        </div>
        <span className="q-micro" style={{ color: 'var(--t3)' }}>ao vivo</span>
      </div>

      <div style={{ padding: '16px 18px', display: 'grid', gap: 18 }}>

        <Group label="Tipografia display">
          <Segmented
            value={state.font}
            options={[
              { v: 'grotesk', l: 'Grotesk' },
              { v: 'geo',     l: 'Geo' },
              { v: 'serif',   l: 'Serif' },
            ]}
            onChange={v => setK('font', v)}
          />
        </Group>

        <Group label="Densidade">
          <Segmented
            value={state.density}
            options={[
              { v: 'tight',   l: 'Compacto' },
              { v: 'default', l: 'Padrão' },
              { v: 'airy',    l: 'Mais ar' },
            ]}
            onChange={v => setK('density', v)}
          />
        </Group>

        <Group label="Estilo do Hero">
          <Segmented
            value={state.hero}
            options={[
              { v: 'embed',     l: 'Diagnóstico' },
              { v: 'manifesto', l: 'Manifesto' },
              { v: 'ticker',    l: 'Ticker' },
            ]}
            onChange={v => setK('hero', v)}
          />
        </Group>

        <Group label="Cor de sinal">
          <div style={{ display: 'flex', gap: 8 }}>
            {[
              { v: '#FF5A1F', name: 'Laranja BC' },
              { v: '#FF3D00', name: 'Laranja forte' },
              { v: '#F04E23', name: 'Terracota' },
              { v: '#0000FF', name: 'Azul Querubim' },
            ].map(c => (
              <button key={c.v} onClick={() => setK('signal', c.v)} title={c.name}
                style={{
                  flex: 1, height: 32,
                  background: c.v,
                  border: state.signal === c.v ? '2px solid var(--white)' : '1px solid var(--border2)',
                  borderRadius: 1,
                }} />
            ))}
          </div>
        </Group>
      </div>
    </div>
  );
}

function Group({ label, children }) {
  return (
    <div>
      <div className="q-micro" style={{ color: 'var(--t3)', marginBottom: 8 }}>{label}</div>
      {children}
    </div>
  );
}

function Segmented({ value, options, onChange }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: `repeat(${options.length}, 1fr)`, gap: 4 }}>
      {options.map(o => {
        const active = value === o.v;
        return (
          <button key={o.v} onClick={() => onChange(o.v)}
            style={{
              padding: '9px 6px',
              background: active ? 'var(--signal)' : 'var(--bg4)',
              color: active ? 'var(--black)' : 'var(--t2)',
              border: '1px solid ' + (active ? 'var(--signal)' : 'var(--border)'),
              fontFamily: 'var(--font-mono)',
              fontSize: '0.68rem',
              letterSpacing: '0.1em',
              textTransform: 'uppercase',
              fontWeight: active ? 700 : 400,
              transition: 'all .15s',
            }}>
            {o.l}
          </button>
        );
      })}
    </div>
  );
}

window.Tweaks = Tweaks;