const { useState, useEffect } = React;
const { Icon } = window;

/* Tweaks panel — host-driven. Controls density + hero variant + accent hue. */

function TweaksPanel({ density, setDensity, heroVariant, setHeroVariant, accentHue, setAccentHue, visible }) {
  if (!visible) return null;
  return (
    <div style={{
      position: 'fixed', bottom: 20, right: 20, zIndex: 1000,
      width: 280, padding: 18,
      background: 'color-mix(in oklab, var(--bg-card) 95%, transparent)',
      backdropFilter: 'blur(20px)',
      border: '1px solid var(--line-strong)',
      borderRadius: 16,
      boxShadow: '0 20px 50px -20px oklch(0 0 0 / 0.6)',
      fontSize: 12,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
        <span className="label">Tweaks</span>
        <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--accent)' }}></span>
      </div>

      <TweakRow label="Hero layout">
        <div style={{ display: 'flex', gap: 4, background: 'var(--bg-elev)', padding: 3, borderRadius: 8 }}>
          {['orb', 'dashboard', 'notifs'].map(v => (
            <button key={v} onClick={() => setHeroVariant(v)} data-cursor="hover"
              style={{
                padding: '6px 10px', borderRadius: 6, fontSize: 11,
                background: heroVariant === v ? 'var(--bg-card)' : 'transparent',
                color: heroVariant === v ? 'var(--ink)' : 'var(--ink-dim)',
                border: heroVariant === v ? '1px solid var(--line-strong)' : '1px solid transparent',
                textTransform: 'capitalize', flex: 1,
              }}>{v}</button>
          ))}
        </div>
      </TweakRow>

      <TweakRow label="Densité">
        <div style={{ display: 'flex', gap: 4, background: 'var(--bg-elev)', padding: 3, borderRadius: 8 }}>
          {['normal', 'compact'].map(v => (
            <button key={v} onClick={() => setDensity(v)} data-cursor="hover"
              style={{
                padding: '6px 10px', borderRadius: 6, fontSize: 11,
                background: density === v ? 'var(--bg-card)' : 'transparent',
                color: density === v ? 'var(--ink)' : 'var(--ink-dim)',
                border: density === v ? '1px solid var(--line-strong)' : '1px solid transparent',
                textTransform: 'capitalize', flex: 1,
              }}>{v}</button>
          ))}
        </div>
      </TweakRow>

      <TweakRow label={`Accent · hue ${accentHue}`}>
        <input type="range" min={100} max={200} value={accentHue}
          onChange={e => setAccentHue(+e.target.value)}
          data-cursor="hover"
          style={{ width: '100%', accentColor: 'var(--accent)' }} />
      </TweakRow>
    </div>
  );
}

function TweakRow({ label, children }) {
  return (
    <div style={{ marginBottom: 12 }}>
      <div className="label" style={{ fontSize: 10, marginBottom: 6 }}>{label}</div>
      {children}
    </div>
  );
}

Object.assign(window, { TweaksPanel });