import React, { useState } from 'react';

const AdvancedSettings = ({ 
  similarityTemperature, 
  onTemperatureChange, 
  difficultyWeight, 
  onWeightChange 
}) => {
  const [isExpanded, setIsExpanded] = useState(false);

  const presets = [
    { 
      name: 'Default', 
      temp: 0.2, 
      weight: 0.5, 
      description: 'Balanced settings (recommended)' 
    },
    { 
      name: 'Focused', 
      temp: 0.1, 
      weight: 0.3, 
      description: 'Deterministic, similarity-based' 
    },
    { 
      name: 'Varied', 
      temp: 0.7, 
      weight: 0.5, 
      description: 'More randomness and variety' 
    },
    { 
      name: 'Challenging', 
      temp: 0.5, 
      weight: 0.7, 
      description: 'Respects difficulty levels more' 
    }
  ];

  const applyPreset = (preset) => {
    onTemperatureChange(preset.temp);
    onWeightChange(preset.weight);
  };

  const getTemperatureDescription = (value) => {
    if (value <= 0.3) return 'Deterministic (top similar words)';
    if (value <= 0.6) return 'Balanced (good variety)';
    if (value <= 1.0) return 'Random (surprising choices)';
    return 'Very random (unpredictable)';
  };

  const getWeightDescription = (value) => {
    if (value <= 0.2) return 'Similarity-focused';
    if (value <= 0.4) return 'Slightly similarity-focused';
    if (value <= 0.6) return 'Balanced';
    if (value <= 0.8) return 'Slightly frequency-focused';
    return 'Frequency-focused';
  };

  return (
    <div className="advanced-settings">
      <div 
        className="advanced-settings-header" 
        onClick={() => setIsExpanded(!isExpanded)}
      >
        <span className="settings-icon">⚙️</span>
        <span className="settings-title">Advanced Settings</span>
        <span className="expand-icon">{isExpanded ? '▼' : '▶'}</span>
      </div>
      
      {isExpanded && (
        <div className="advanced-settings-content">
          <div className="setting-group">
            <label className="setting-label">
              Word Selection Randomness
              <span className="setting-value">{similarityTemperature.toFixed(1)}</span>
            </label>
            <div className="slider-container">
              <input
                type="range"
                min="0.1"
                max="2.0"
                step="0.1"
                value={similarityTemperature}
                onChange={(e) => onTemperatureChange(parseFloat(e.target.value))}
                className="slider"
              />
              <div className="slider-labels">
                <span>More focused</span>
                <span>More variety</span>
              </div>
            </div>
            <div className="setting-description">
              {getTemperatureDescription(similarityTemperature)}
            </div>
          </div>

          <div className="setting-group">
            <label className="setting-label">
              Difficulty Balance
              <span className="setting-value">{difficultyWeight.toFixed(1)}</span>
            </label>
            <div className="slider-container">
              <input
                type="range"
                min="0.0"
                max="1.0"
                step="0.1"
                value={difficultyWeight}
                onChange={(e) => onWeightChange(parseFloat(e.target.value))}
                className="slider"
              />
              <div className="slider-labels">
                <span>Similarity</span>
                <span>Frequency</span>
              </div>
            </div>
            <div className="setting-description">
              {getWeightDescription(difficultyWeight)}
            </div>
          </div>

          <div className="presets-section">
            <div className="presets-label">Quick Presets:</div>
            <div className="presets-container">
              {presets.map((preset, index) => (
                <button
                  key={index}
                  onClick={() => applyPreset(preset)}
                  className={`preset-button ${
                    similarityTemperature === preset.temp && difficultyWeight === preset.weight
                      ? 'active'
                      : ''
                  }`}
                  title={preset.description}
                >
                  {preset.name}
                </button>
              ))}
            </div>
          </div>

          <div className="settings-info">
            <div className="info-item">
              <strong>Temperature:</strong> Controls how random word selection is. Lower values pick the most similar words, higher values add variety.
            </div>
            <div className="info-item">
              <strong>Weight:</strong> Balances similarity vs word frequency. Lower focuses on semantic similarity, higher respects difficulty levels.
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default AdvancedSettings;