import React, { useState, useEffect, useRef } from 'react';
import { useTranslation } from 'react-i18next';
import {
  ChartBarIcon,
  LightBulbIcon,
  SparklesIcon,
  ClockIcon,
  TrophyIcon,
  ChatBubbleBottomCenterTextIcon,
} from '@heroicons/react/24/outline';

interface TodaySettingsDropdownProps {
  isOpen: boolean;
  onClose: () => void;
  settings: {
    showMetrics: boolean;
    showProductivity: boolean;
    showIntelligence: boolean;
    showDueToday: boolean;
    showCompleted: boolean;
    showProgressBar: boolean;
    showDailyQuote: boolean;
  };
  onSettingsChange: (settings: any) => void;
}

const TodaySettingsDropdown: React.FC<TodaySettingsDropdownProps> = ({
  isOpen,
  onClose,
  settings,
  onSettingsChange,
}) => {
  const { t } = useTranslation();
  const [localSettings, setLocalSettings] = useState(settings);
  const [isSaving, setIsSaving] = useState(false);
  const dropdownRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    setLocalSettings(settings);
  }, [settings]);

  // Close dropdown when clicking outside
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
        onClose();
      }
    };

    if (isOpen) {
      document.addEventListener('mousedown', handleClickOutside);
    }

    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [isOpen, onClose]);

  const handleToggle = (key: keyof typeof localSettings) => {
    const newSettings = {
      ...localSettings,
      [key]: !localSettings[key]
    };
    setLocalSettings(newSettings);
    
    // Auto-save on change
    saveSettings(newSettings);
  };

  const saveSettings = async (settingsToSave: typeof localSettings) => {
    setIsSaving(true);
    try {
      const response = await fetch('/api/profile/today-settings', {
        method: 'PUT',
        credentials: 'include',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(settingsToSave),
      });

      if (response.ok) {
        onSettingsChange(settingsToSave);
      } else {
        console.error('Failed to save settings');
      }
    } catch (error) {
      console.error('Error saving settings:', error);
    } finally {
      setIsSaving(false);
    }
  };

  if (!isOpen) return null;

  const settingsOptions: Array<{key: keyof typeof localSettings, label: string, icon: React.ElementType, disabled?: boolean}> = [
    { key: 'showDailyQuote', label: t('settings.showDailyQuote', 'Show Daily Quote'), icon: ChatBubbleBottomCenterTextIcon },
    { key: 'showMetrics', label: t('settings.showMetrics', 'Show Metrics'), icon: ChartBarIcon },
    { key: 'showProductivity', label: t('settings.showProductivity', 'Show Productivity Insights'), icon: LightBulbIcon },
    { key: 'showIntelligence', label: t('settings.showIntelligence', 'Show Intelligence Suggestions'), icon: SparklesIcon },
    { key: 'showDueToday', label: t('settings.showDueToday', 'Show Due Today Tasks'), icon: ClockIcon },
    { key: 'showCompleted', label: t('settings.showCompleted', 'Show Completed Tasks'), icon: TrophyIcon },
  ];

  return (
    <div 
      ref={dropdownRef}
      className="absolute right-0 top-full mt-2 w-72 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 z-50"
    >
      <div className="p-4">
        <h3 className="text-sm font-medium text-gray-900 dark:text-gray-100 mb-3">
          {t('settings.todayPageSettings', 'Today Page Settings')}
        </h3>
        
        <div className="space-y-3">
          {settingsOptions.map((option) => {
            const IconComponent = option.icon;
            const isDisabled = option.disabled || isSaving;
            
            return (
              <div key={option.key} className={`flex items-center justify-between ${isDisabled ? 'opacity-60' : ''}`}>
                <div className="flex items-center flex-1">
                  <IconComponent className="h-4 w-4 text-gray-500 dark:text-gray-400 mr-3" />
                  <label className={`text-sm text-gray-700 dark:text-gray-300 ${!isDisabled ? 'cursor-pointer' : 'cursor-not-allowed'} flex-1`}>
                    {option.label}
                  </label>
                </div>
                <button
                  onClick={() => !isDisabled && handleToggle(option.key)}
                  disabled={isDisabled}
                  className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors disabled:opacity-50 disabled:cursor-not-allowed ${
                    localSettings[option.key]
                      ? 'bg-blue-600'
                      : 'bg-gray-200 dark:bg-gray-700'
                  }`}
                >
                  <span
                    className={`inline-block h-3 w-3 transform rounded-full bg-white transition-transform ${
                      localSettings[option.key] ? 'translate-x-5' : 'translate-x-1'
                    }`}
                  />
                </button>
              </div>
            );
          })}
        </div>
        
        {isSaving && (
          <div className="mt-3 text-xs text-gray-500 dark:text-gray-400">
            {t('common.saving', 'Saving...')}
          </div>
        )}
      </div>
    </div>
  );
};

export default TodaySettingsDropdown;