/*
Project: ChatGPT Web Interface
Developer: Molla Samser
Email: help@rskworld.in
Phone: +91 93305 39277
Address: Nutanhat, Mongolkote, Purba Burdwan, West Bengal, India, 713147
Website: https://rskworld.in/
Year: 2026
*/

import React from 'react';

function SettingsPanel({ isOpen, onClose, settings, onSettingsChange, theme, onThemeChange }) {
  if (!isOpen) return null;

  return (
    <div className="settings-overlay" onClick={onClose}>
      <div className="settings-panel" onClick={(e) => e.stopPropagation()}>
        <div className="settings-header">
          <h2>Settings</h2>
          <button className="settings-close" onClick={onClose}>
            <i className="fas fa-times"></i>
          </button>
        </div>
        <div className="settings-content">
          <div className="setting-group">
            <label>Theme</label>
            <div className="theme-toggle">
              <button
                className={`theme-btn ${theme === 'light' ? 'active' : ''}`}
                onClick={() => onThemeChange('light')}
              >
                <i className="fas fa-sun"></i> Light
              </button>
              <button
                className={`theme-btn ${theme === 'dark' ? 'active' : ''}`}
                onClick={() => onThemeChange('dark')}
              >
                <i className="fas fa-moon"></i> Dark
              </button>
            </div>
          </div>

          <div className="setting-group">
            <label htmlFor="model-select">Model</label>
            <select
              id="model-select"
              value={settings.model}
              onChange={(e) => onSettingsChange({ ...settings, model: e.target.value })}
              className="setting-select"
            >
              <option value="gpt-3.5-turbo">GPT-3.5 Turbo</option>
              <option value="gpt-4">GPT-4</option>
              <option value="gpt-4-turbo-preview">GPT-4 Turbo</option>
            </select>
          </div>

          <div className="setting-group">
            <label htmlFor="temperature">Temperature: {settings.temperature}</label>
            <input
              id="temperature"
              type="range"
              min="0"
              max="2"
              step="0.1"
              value={settings.temperature}
              onChange={(e) => onSettingsChange({ ...settings, temperature: parseFloat(e.target.value) })}
              className="setting-slider"
            />
            <div className="setting-hint">Higher values make output more random</div>
          </div>

          <div className="setting-group">
            <label htmlFor="max-tokens">Max Tokens: {settings.maxTokens}</label>
            <input
              id="max-tokens"
              type="range"
              min="100"
              max="4000"
              step="100"
              value={settings.maxTokens}
              onChange={(e) => onSettingsChange({ ...settings, maxTokens: parseInt(e.target.value) })}
              className="setting-slider"
            />
          </div>

          <div className="setting-group">
            <label>
              <input
                type="checkbox"
                checked={settings.useStreaming || false}
                onChange={(e) => onSettingsChange({ ...settings, useStreaming: e.target.checked })}
                style={{ marginRight: '8px' }}
              />
              Enable Streaming Responses
            </label>
            <div className="setting-hint">Stream responses in real-time (beta)</div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default SettingsPanel;