/* global React */
function Tweaks({ open, values, setValue, presets }) {
  if (!open) return null;

  return (
    <div style={{
      position: 'fixed', bottom: 80, left: 20, zIndex: 30,
      padding: 18,
      width: 260,
      borderRadius: 12,
      background: 'rgba(10,13,31,0.9)',
      backdropFilter: 'blur(14px)',
      border: '1px solid rgba(180,200,255,0.12)',
      fontFamily: 'Inter, sans-serif',
      color: 'var(--ink-0)',
      boxShadow: '0 20px 40px rgba(0,0,0,0.5)'
    }}>
      <div style={{
        fontFamily: 'JetBrains Mono, monospace',
        fontSize: 10, letterSpacing: '0.22em',
        color: 'var(--ink-2)', textTransform: 'uppercase',
        marginBottom: 14
      }}>
        Tweaks
      </div>

      <TweakRow label="Accent">
        <div style={{ display: 'flex', gap: 8 }}>
          {presets.map(p => (
            <button key={p.name}
              onClick={() => setValue('accentColor', p.color)}
              style={{
                width: 24, height: 24, borderRadius: '50%',
                background: p.color,
                border: values.accentColor === p.color
                  ? '2px solid #fff' : '2px solid transparent',
                cursor: 'pointer', padding: 0,
                boxShadow: `0 0 10px ${p.color}`
              }}
              aria-label={p.name}
            />
          ))}
        </div>
      </TweakRow>

      <TweakRow label="Globe style">
        <div style={{ display: 'flex', gap: 6 }}>
          <ToggleBtn active={values.globeStyle === 'hex'} onClick={() => setValue('globeStyle', 'hex')}>Dots</ToggleBtn>
          <ToggleBtn active={values.globeStyle === 'solid'} onClick={() => setValue('globeStyle', 'solid')}>Solid</ToggleBtn>
        </div>
      </TweakRow>

      <TweakRow label="Auto-rotate">
        <Switch on={values.autoRotate} onClick={() => setValue('autoRotate', !values.autoRotate)} />
      </TweakRow>

      <TweakRow label="Atmosphere">
        <Switch on={values.atmosphere} onClick={() => setValue('atmosphere', !values.atmosphere)} />
      </TweakRow>

      <TweakRow label="Starfield">
        <Switch on={values.starfield} onClick={() => setValue('starfield', !values.starfield)} />
      </TweakRow>
    </div>
  );
}

function TweakRow({ label, children }) {
  return (
    <div style={{
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      padding: '8px 0', borderTop: '1px solid rgba(180,200,255,0.06)'
    }}>
      <span style={{ fontSize: 12, color: 'var(--ink-1)' }}>{label}</span>
      {children}
    </div>
  );
}

function ToggleBtn({ active, onClick, children }) {
  return (
    <button onClick={onClick} style={{
      padding: '4px 10px', fontSize: 11,
      background: active ? 'rgba(180,200,255,0.14)' : 'transparent',
      color: active ? '#fff' : 'var(--ink-2)',
      border: '1px solid rgba(180,200,255,0.15)',
      borderRadius: 6, cursor: 'pointer',
      fontFamily: 'inherit'
    }}>{children}</button>
  );
}

function Switch({ on, onClick }) {
  return (
    <button onClick={onClick} style={{
      width: 36, height: 20, borderRadius: 12, position: 'relative',
      background: on ? 'rgba(126,200,255,0.25)' : 'rgba(180,200,255,0.1)',
      border: `1px solid ${on ? '#7ec8ff' : 'rgba(180,200,255,0.15)'}`,
      cursor: 'pointer', padding: 0, transition: 'all 0.2s'
    }}>
      <span style={{
        position: 'absolute', top: 1, left: on ? 17 : 1,
        width: 16, height: 16, borderRadius: '50%',
        background: on ? '#7ec8ff' : 'var(--ink-2)',
        transition: 'left 0.2s',
        boxShadow: on ? '0 0 8px #7ec8ff' : 'none'
      }} />
    </button>
  );
}

window.Tweaks = Tweaks;