import { useState, useEffect } from 'react';
import { Globe, Server, Save } from 'lucide-react';

export function SystemSettings() {
  const [language, setLanguage] = useState(localStorage.getItem('language') || 'English');
  const [theme, setTheme] = useState(localStorage.getItem('theme') || 'Light');
  const [debugMode, setDebugMode] = useState(true);

  const handleSave = () => {
    localStorage.setItem('language', language);
    localStorage.setItem('theme', theme);

    // Apply theme
    if (theme === 'Dark') {
      document.documentElement.classList.add('dark');
    } else {
      document.documentElement.classList.remove('dark');
    }

    // In a real app, you would dispatch a language change event or context update here
    alert(`Settings saved!\nLanguage: ${language}\nTheme: ${theme}`);
  };

  // Initialize theme on mount if needed
  useEffect(() => {
    if (theme === 'Dark') {
      document.documentElement.classList.add('dark');
    } else {
      document.documentElement.classList.remove('dark');
    }
  }, [theme]);

  return (
    <div className="max-w-4xl mx-auto">
      <div className="mb-6">
        <h3 className="text-xl font-semibold text-slate-800">System Settings</h3>
        <p className="text-sm text-slate-500 mt-1">Global platform configurations.</p>
      </div>

      <div className="space-y-6">
        <div className="bg-white border border-slate-200 rounded-xl shadow-sm p-6">
          <h4 className="text-sm font-semibold text-slate-800 mb-4 flex items-center">
            <Globe size={16} className="mr-2 text-slate-500" />
            General
          </h4>
          <div className="space-y-4 max-w-md">
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">System Language</label>
              <select
                value={language}
                onChange={(e) => setLanguage(e.target.value)}
                className="w-full bg-slate-50 border border-slate-200 text-sm rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all"
              >
                <option value="English">English</option>
                <option value="简体中文">简体中文</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Theme</label>
              <select
                value={theme}
                onChange={(e) => setTheme(e.target.value)}
                className="w-full bg-slate-50 border border-slate-200 text-sm rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all"
              >
                <option value="Light">Light</option>
                <option value="Dark">Dark</option>
                <option value="System Default">System Default</option>
              </select>
            </div>
          </div>
        </div>

        <div className="bg-white border border-slate-200 rounded-xl shadow-sm p-6">
          <h4 className="text-sm font-semibold text-slate-800 mb-4 flex items-center">
            <Server size={16} className="mr-2 text-slate-500" />
            Cluster & Runtime
          </h4>
          <div className="space-y-4 max-w-md">
             <div className="flex items-center mt-4">
              <input
                type="checkbox"
                id="debug_mode"
                checked={debugMode}
                onChange={(e) => setDebugMode(e.target.checked)}
                className="w-4 h-4 text-blue-600 border-slate-300 rounded focus:ring-blue-500"
              />
              <label htmlFor="debug_mode" className="ml-2 block text-sm text-slate-700">
                Enable debug logging
              </label>
            </div>
          </div>
        </div>

        <div className="flex justify-end">
          <button
            onClick={handleSave}
            className="flex items-center px-6 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm font-medium transition-colors shadow-sm cursor-pointer"
          >
            <Save size={16} className="mr-2" />
            Save Changes
          </button>
        </div>
      </div>
    </div>
  );
}