import React, { useState } from 'react';
import { 
  BookOpen, 
  Sparkles, 
  Type, 
  Volume2, 
  VolumeX, 
  Settings, 
  X,
  Zap,
  GraduationCap,
  Eye,
  Lightbulb
} from 'lucide-react';
import { ReadingPreferences } from '../types';

interface Props {
  preferences: ReadingPreferences;
  onPreferencesChange: (preferences: ReadingPreferences) => void;
  compact?: boolean;
}

const ReadingToolbar: React.FC<Props> = ({ 
  preferences, 
  onPreferencesChange,
  compact = false 
}) => {
  const [showPanel, setShowPanel] = useState(false);

  const togglePreference = (key: keyof ReadingPreferences) => {
    if (typeof preferences[key] === 'boolean') {
      onPreferencesChange({
        ...preferences,
        [key]: !preferences[key]
      });
    }
  };

  const handleSpeedChange = (speed: number) => {
    onPreferencesChange({
      ...preferences,
      ttsSpeed: speed
    });
  };

  if (compact) {
    return (
      <div className="flex items-center gap-1">
        {/* ELI5 Toggle */}
        <button
          onClick={() => togglePreference('eli5Mode')}
          className={`
            p-2 rounded-lg transition-all duration-200
            ${preferences.eli5Mode 
              ? 'bg-amber-100 dark:bg-amber-900/30 text-amber-600 dark:text-amber-400 ring-2 ring-amber-500/30' 
              : 'bg-gray-100 dark:bg-gray-800 text-gray-500 hover:bg-gray-200 dark:hover:bg-gray-700'
            }
          `}
          title={preferences.eli5Mode ? 'Switch to Academic mode' : 'Switch to Simple mode'}
        >
          {preferences.eli5Mode ? <Lightbulb size={18} /> : <GraduationCap size={18} />}
        </button>

        {/* Bionic Reading Toggle */}
        <button
          onClick={() => togglePreference('bionicReading')}
          className={`
            p-2 rounded-lg transition-all duration-200
            ${preferences.bionicReading 
              ? 'bg-emerald-100 dark:bg-emerald-900/30 text-emerald-600 dark:text-emerald-400 ring-2 ring-emerald-500/30' 
              : 'bg-gray-100 dark:bg-gray-800 text-gray-500 hover:bg-gray-200 dark:hover:bg-gray-700'
            }
          `}
          title={preferences.bionicReading ? 'Disable Bionic Reading' : 'Enable Bionic Reading'}
        >
          <Type size={18} />
        </button>

        {/* TTS Toggle */}
        <button
          onClick={() => togglePreference('ttsEnabled')}
          className={`
            p-2 rounded-lg transition-all duration-200
            ${preferences.ttsEnabled 
              ? 'bg-brand-100 dark:bg-brand-900/30 text-brand-600 dark:text-brand-400 ring-2 ring-brand-500/30' 
              : 'bg-gray-100 dark:bg-gray-800 text-gray-500 hover:bg-gray-200 dark:hover:bg-gray-700'
            }
          `}
          title={preferences.ttsEnabled ? 'Hide audio controls' : 'Show audio controls'}
        >
          {preferences.ttsEnabled ? <Volume2 size={18} /> : <VolumeX size={18} />}
        </button>

        {/* Settings */}
        <button
          onClick={() => setShowPanel(!showPanel)}
          className={`
            p-2 rounded-lg transition-all duration-200
            ${showPanel 
              ? 'bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400' 
              : 'bg-gray-100 dark:bg-gray-800 text-gray-500 hover:bg-gray-200 dark:hover:bg-gray-700'
            }
          `}
        >
          <Settings size={18} />
        </button>
      </div>
    );
  }

  return (
    <div className="relative">
      {/* Main Toolbar */}
      <div className="flex items-center gap-3 p-3 rounded-2xl bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-lg">
        <div className="flex items-center gap-2 pr-3 border-r border-gray-200 dark:border-gray-700">
          <Eye size={16} className="text-gray-400" />
          <span className="text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">
            Reading Mode
          </span>
        </div>

        {/* ELI5 Toggle Button */}
        <button
          onClick={() => togglePreference('eli5Mode')}
          className={`
            flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-medium transition-all duration-300
            ${preferences.eli5Mode 
              ? 'bg-gradient-to-r from-amber-500 to-orange-500 text-white shadow-lg shadow-amber-500/30' 
              : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
            }
          `}
        >
          {preferences.eli5Mode ? (
            <>
              <Lightbulb size={16} />
              <span>Simple</span>
            </>
          ) : (
            <>
              <GraduationCap size={16} />
              <span>Academic</span>
            </>
          )}
        </button>

        {/* Bionic Reading Toggle */}
        <button
          onClick={() => togglePreference('bionicReading')}
          className={`
            flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-medium transition-all duration-300
            ${preferences.bionicReading 
              ? 'bg-gradient-to-r from-emerald-500 to-teal-500 text-white shadow-lg shadow-emerald-500/30' 
              : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
            }
          `}
        >
          <Type size={16} />
          <span className={preferences.bionicReading ? '' : 'hidden sm:inline'}>
            {preferences.bionicReading ? 'Bio**nic** On' : 'Bionic'}
          </span>
        </button>

        {/* Key Terms Highlight Toggle */}
        <button
          onClick={() => togglePreference('highlightKeyTerms')}
          className={`
            flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-medium transition-all duration-300
            ${preferences.highlightKeyTerms 
              ? 'bg-gradient-to-r from-purple-500 to-indigo-500 text-white shadow-lg shadow-purple-500/30' 
              : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
            }
          `}
        >
          <Sparkles size={16} />
          <span className="hidden sm:inline">Highlight</span>
        </button>

        {/* TTS Toggle */}
        <button
          onClick={() => togglePreference('ttsEnabled')}
          className={`
            flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-medium transition-all duration-300
            ${preferences.ttsEnabled 
              ? 'bg-gradient-to-r from-brand-500 to-blue-500 text-white shadow-lg shadow-brand-500/30' 
              : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
            }
          `}
        >
          {preferences.ttsEnabled ? <Volume2 size={16} /> : <VolumeX size={16} />}
          <span className="hidden sm:inline">Audio</span>
        </button>

        {/* Settings */}
        <button
          onClick={() => setShowPanel(!showPanel)}
          className={`
            p-2 rounded-xl transition-all duration-200 ml-auto
            ${showPanel 
              ? 'bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-200' 
              : 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
            }
          `}
        >
          <Settings size={18} />
        </button>
      </div>

      {/* Settings Panel */}
      {showPanel && (
        <div className="absolute top-full left-0 right-0 mt-2 p-4 rounded-2xl bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-xl z-50 animate-in fade-in slide-in-from-top-2 duration-200">
          <div className="flex items-center justify-between mb-4">
            <h4 className="text-sm font-bold text-gray-900 dark:text-white">Reading Preferences</h4>
            <button
              onClick={() => setShowPanel(false)}
              className="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700"
            >
              <X size={14} />
            </button>
          </div>

          <div className="space-y-6">
            {/* Language Mode Section */}
            <div>
              <label className="text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-3 block">
                Language Complexity
              </label>
              <div className="grid grid-cols-2 gap-2">
                <button
                  onClick={() => onPreferencesChange({ ...preferences, eli5Mode: true })}
                  className={`
                    p-3 rounded-xl border-2 transition-all
                    ${preferences.eli5Mode 
                      ? 'border-amber-500 bg-amber-50 dark:bg-amber-900/20' 
                      : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
                    }
                  `}
                >
                  <div className="flex items-center gap-2 mb-1">
                    <Lightbulb size={16} className={preferences.eli5Mode ? 'text-amber-500' : 'text-gray-400'} />
                    <span className={`font-medium text-sm ${preferences.eli5Mode ? 'text-amber-700 dark:text-amber-300' : 'text-gray-600 dark:text-gray-400'}`}>
                      Simple
                    </span>
                  </div>
                  <p className="text-xs text-gray-500 dark:text-gray-400">
                    Everyday language with analogies
                  </p>
                </button>
                <button
                  onClick={() => onPreferencesChange({ ...preferences, eli5Mode: false })}
                  className={`
                    p-3 rounded-xl border-2 transition-all
                    ${!preferences.eli5Mode 
                      ? 'border-brand-500 bg-brand-50 dark:bg-brand-900/20' 
                      : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
                    }
                  `}
                >
                  <div className="flex items-center gap-2 mb-1">
                    <GraduationCap size={16} className={!preferences.eli5Mode ? 'text-brand-500' : 'text-gray-400'} />
                    <span className={`font-medium text-sm ${!preferences.eli5Mode ? 'text-brand-700 dark:text-brand-300' : 'text-gray-600 dark:text-gray-400'}`}>
                      Academic
                    </span>
                  </div>
                  <p className="text-xs text-gray-500 dark:text-gray-400">
                    Technical terminology
                  </p>
                </button>
              </div>
            </div>

            {/* Typography Section */}
            <div>
              <label className="text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-3 block">
                Typography Aids
              </label>
              <div className="space-y-2">
                <label className="flex items-center justify-between p-3 rounded-xl bg-gray-50 dark:bg-gray-700/50 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700">
                  <div className="flex items-center gap-3">
                    <Type size={18} className={preferences.bionicReading ? 'text-emerald-500' : 'text-gray-400'} />
                    <div>
                      <span className="font-medium text-sm text-gray-700 dark:text-gray-300">Bionic Reading</span>
                      <p className="text-xs text-gray-500">Bo**ld** fi**rst** le**tters**</p>
                    </div>
                  </div>
                  <input
                    type="checkbox"
                    checked={preferences.bionicReading}
                    onChange={() => togglePreference('bionicReading')}
                    className="w-5 h-5 rounded border-gray-300 text-emerald-500 focus:ring-emerald-500"
                  />
                </label>
                
                <label className="flex items-center justify-between p-3 rounded-xl bg-gray-50 dark:bg-gray-700/50 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700">
                  <div className="flex items-center gap-3">
                    <Sparkles size={18} className={preferences.highlightKeyTerms ? 'text-purple-500' : 'text-gray-400'} />
                    <div>
                      <span className="font-medium text-sm text-gray-700 dark:text-gray-300">Highlight Key Terms</span>
                      <p className="text-xs text-gray-500">Color-code technical terms</p>
                    </div>
                  </div>
                  <input
                    type="checkbox"
                    checked={preferences.highlightKeyTerms}
                    onChange={() => togglePreference('highlightKeyTerms')}
                    className="w-5 h-5 rounded border-gray-300 text-purple-500 focus:ring-purple-500"
                  />
                </label>
              </div>
            </div>

            {/* Audio Section */}
            <div>
              <label className="text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-3 block">
                Audio Playback
              </label>
              <div className="space-y-3">
                <label className="flex items-center justify-between p-3 rounded-xl bg-gray-50 dark:bg-gray-700/50 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700">
                  <div className="flex items-center gap-3">
                    <Volume2 size={18} className={preferences.ttsEnabled ? 'text-brand-500' : 'text-gray-400'} />
                    <div>
                      <span className="font-medium text-sm text-gray-700 dark:text-gray-300">Text-to-Speech</span>
                      <p className="text-xs text-gray-500">Listen while reading</p>
                    </div>
                  </div>
                  <input
                    type="checkbox"
                    checked={preferences.ttsEnabled}
                    onChange={() => togglePreference('ttsEnabled')}
                    className="w-5 h-5 rounded border-gray-300 text-brand-500 focus:ring-brand-500"
                  />
                </label>

                {preferences.ttsEnabled && (
                  <div className="px-3">
                    <div className="flex items-center justify-between text-xs text-gray-500 mb-2">
                      <span>Speech Speed</span>
                      <span className="font-mono">{preferences.ttsSpeed.toFixed(1)}x</span>
                    </div>
                    <input
                      type="range"
                      min="0.5"
                      max="2"
                      step="0.1"
                      value={preferences.ttsSpeed}
                      onChange={(e) => handleSpeedChange(parseFloat(e.target.value))}
                      className="w-full h-2 bg-gray-200 dark:bg-gray-600 rounded-lg appearance-none cursor-pointer accent-brand-500"
                    />
                    <div className="flex justify-between text-[10px] text-gray-400 mt-1">
                      <span>Slow</span>
                      <span>Normal</span>
                      <span>Fast</span>
                    </div>
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default ReadingToolbar;
