import { useEffect, useState } from 'react';

export function BrowserModeToggle() {
  const [mode, setMode] = useState<'headed' | 'headless'>('headed');
  const [isDevelopment, setIsDevelopment] = useState(false);

  useEffect(() => {
    window.electronAPI.getBrowserMode().then(({ mode, isDevelopment }) => {
      setMode(mode);
      setIsDevelopment(isDevelopment);
    });
  }, []);

  if (!isDevelopment) return null;

  const handleToggle = async () => {
    const newMode = mode === 'headed' ? 'headless' : 'headed';
    const result = await window.electronAPI.setBrowserMode(newMode);
    if (result.success) {
      setMode(newMode);
    }
  };

  return (
    <div style={{ padding: '10px', borderTop: '1px solid #333' }}>
      <label style={{ color: '#aaa', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '8px' }}>
        <input
          type="checkbox"
          checked={mode === 'headless'}
          onChange={handleToggle}
          style={{ cursor: 'pointer' }}
        />
        Headless Browser Mode
      </label>
      <div style={{ fontSize: '0.85rem', color: '#666', marginTop: '4px', marginLeft: '24px' }}>
        {mode === 'headless' ? 'Browser runs in background' : 'Browser window visible'}
      </div>
    </div>
  );
}