SBCanvas.panel.register({
  fields: [
    { key: 'speed', type: 'slider', label: 'Animation Speed', min: 1, max: 10, step: 1, default: 5 },
    { key: 'theme', type: 'dropdown', label: 'Theme', options: ['dark', 'light', 'neon'], default: 'dark' },
    { key: 'title', type: 'text', label: 'Widget Title', placeholder: 'Enter title...', maxLength: 50 },
    { key: 'alertCount', type: 'number', label: 'Max Alerts', min: 1, max: 100, default: 10 },
    { key: 'sounds', type: 'toggle', label: 'Enable Sounds', default: true },
    { key: 'accentColor', type: 'color', label: 'Accent Color', default: '#8B5CF6' }
  ]
});

SBCanvas.on('panel:field_change', ({ key, value }) => {
  if (key === 'speed') {
    updateAnimationSpeed(value);
  }
  if (key === 'theme') {
    document.body.className = value;
  }
  if (key === 'sounds') {
    SBCanvas.vars.set('soundsEnabled', value);
  }
});

SBCanvas.panel.register({
  fields: [
    { key: 'mode', type: 'dropdown', label: 'Mode', options: ['simple', 'advanced'] },
    { key: 'speed', type: 'slider', label: 'Speed', min: 1, max: 10,
      conditions: { mode: 'advanced' } },
    { key: 'particles', type: 'toggle', label: 'Particles',
      conditions: { mode: 'advanced' } }
  ]
});

SBCanvas.panel.register({
  fields: [
    { key: 'title', type: 'text', label: 'Title', group: 'Content' },
    { key: 'subtitle', type: 'text', label: 'Subtitle', group: 'Content' },
    { key: 'bgColor', type: 'color', label: 'Background', group: 'Appearance' },
    { key: 'fontSize', type: 'slider', label: 'Font Size', min: 12, max: 48, group: 'Appearance' }
  ]
});

SBCanvas.ready(() => {
  SBCanvas.panel.register({
    fields: [
      { key: 'duration', type: 'slider', label: 'Alert Duration (s)', min: 3, max: 15, default: 5 },
      { key: 'sound', type: 'toggle', label: 'Play Sound', default: true },
      { key: 'volume', type: 'slider', label: 'Volume', min: 0, max: 100, step: 10, default: 80,
        conditions: { sound: true } },
      { key: 'position', type: 'dropdown', label: 'Position', options: ['top', 'center', 'bottom'], default: 'top' }
    ]
  });

  let config = { duration: 5, sound: true, volume: 80, position: 'top' };

  SBCanvas.on('panel:field_change', ({ key, value }) => {
    config[key] = value;
  });

  SBCanvas.activities.on('follow', (activity) => {
    showAlert(activity.username, config);
  });
});