// tweaks-panel.jsx — Role switcher context and floating pill

window.TweaksContext = React.createContext({ role: 'admin', setRole: () => {} });

window.TweaksProvider = function TweaksProvider({ children }) {
  const [role, setRole] = React.useState('admin');
  return (
    <window.TweaksContext.Provider value={{ role, setRole }}>
      {children}
    </window.TweaksContext.Provider>
  );
};

window.useTweaks = function () {
  return React.useContext(window.TweaksContext);
};

window.TweaksPanel = function TweaksPanel({ setScreen }) {
  const { role, setRole } = window.useTweaks();
  const [open, setOpen] = React.useState(false);

  const roles = ['admin', 'editor', 'member', 'viewer'];
  const roleColors = { admin: '#3a5ca8', editor: '#7c3aed', member: '#16a34a', viewer: '#6b7280' };

  function switchRole(r) {
    setRole(r);
    setOpen(false);
    if (r === 'viewer' && setScreen) setScreen('dashboard');
  }

  return (
    <div style={{ position: 'fixed', bottom: '1.5rem', right: '1.5rem', zIndex: 1000 }}>
      {open && (
        <>
          <div
            onClick={() => setOpen(false)}
            style={{ position: 'fixed', inset: 0, zIndex: 999 }}
          />
          <div style={{
            position: 'relative', zIndex: 1001,
            background: 'white', border: '1px solid #dde1e9',
            borderRadius: 10, boxShadow: '0 8px 24px rgba(0,0,0,0.15)',
            padding: '0.75rem', marginBottom: '0.5rem', minWidth: 160
          }}>
            <div style={{ fontSize: '0.7rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', color: '#6b7280', marginBottom: '0.4rem', padding: '0 0.25rem' }}>
              View as role
            </div>
            {roles.map(r => (
              <button key={r} onClick={() => switchRole(r)} style={{
                display: 'flex', alignItems: 'center', gap: '0.5rem',
                width: '100%', textAlign: 'left',
                padding: '0.4rem 0.5rem', border: 'none',
                background: role === r ? '#d0daf5' : 'transparent',
                color: role === r ? '#2e4a8a' : '#1a1d23',
                borderRadius: 6, cursor: 'pointer', fontSize: '0.875rem',
                fontWeight: role === r ? 600 : 400,
                textTransform: 'capitalize', marginBottom: 2
              }}>
                <span style={{ width: 8, height: 8, borderRadius: '50%', background: roleColors[r], display: 'inline-block', flexShrink: 0 }} />
                {r}
                {role === r && <span style={{ marginLeft: 'auto', fontSize: '0.75rem' }}>✓</span>}
              </button>
            ))}
          </div>
        </>
      )}
      <button onClick={() => setOpen(!open)} style={{
        display: 'flex', alignItems: 'center', gap: '0.45rem',
        padding: '0.5rem 1rem',
        background: '#1a1d23', color: 'white',
        border: 'none', borderRadius: 999,
        cursor: 'pointer', fontSize: '0.8rem', fontWeight: 500,
        boxShadow: '0 4px 12px rgba(0,0,0,0.25)',
        whiteSpace: 'nowrap'
      }}>
        <span style={{ width: 8, height: 8, borderRadius: '50%', background: roleColors[role], display: 'inline-block' }} />
        {role.charAt(0).toUpperCase() + role.slice(1)}
        <span style={{ fontSize: '0.65rem', opacity: 0.8 }}>{open ? '▲' : '▾'}</span>
      </button>
    </div>
  );
};