import { useState } from 'react';
import { 
  Box, 
  Typography, 
  Paper, 
  Switch, 
  FormGroup, 
  FormControlLabel, 
  Slider, 
  TextField, 
  InputAdornment,
  Select,
  MenuItem,
  FormControl,
  InputLabel,
  Button,
  Divider
} from '@mui/material';
import { 
  DarkMode as DarkModeIcon, 
  Notifications as NotificationsIcon,
  Language as LanguageIcon,
  Save as SaveIcon
} from '@mui/icons-material';

export default function SettingsPage() {
  const [darkMode, setDarkMode] = useState(false);
  const [notifications, setNotifications] = useState(true);
  const [fontSize, setFontSize] = useState(16);
  const [language, setLanguage] = useState('zh');
  const [username, setUsername] = useState('');

  const handleDarkModeChange = () => {
    setDarkMode(!darkMode);
  };

  const handleNotificationsChange = () => {
    setNotifications(!notifications);
  };

  const handleFontSizeChange = (event, newValue) => {
    setFontSize(newValue);
  };

  const handleLanguageChange = (event) => {
    setLanguage(event.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Settings saved:', { darkMode, notifications, fontSize, language, username });
    // 这里可以调用Tauri API保存设置
  };

  return (
    <Box sx={{ width: '100%' }}>
      <Paper 
        elevation={3} 
        sx={{ p: 3, mb: 4, borderRadius: 2, bgcolor: 'background.paper' }}
      >
        <Typography variant="h4" gutterBottom sx={{ textAlign: 'center', fontWeight: 'bold', color: '#2a384d' }}>
          应用设置
        </Typography>
        
        <Box component="form" onSubmit={handleSubmit} sx={{ mt: 4 }}>
          <Typography variant="h6" gutterBottom color="primary" sx={{ display: 'flex', alignItems: 'center' }}>
            <DarkModeIcon sx={{ mr: 1 }} /> 外观
          </Typography>
          
          <FormGroup sx={{ mb: 4, ml: 2 }}>
            <FormControlLabel 
              control={<Switch checked={darkMode} onChange={handleDarkModeChange} />} 
              label="深色模式" 
            />
            
            <Box sx={{ mt: 2 }}>
              <Typography id="font-size-slider" gutterBottom>
                字体大小: {fontSize}px
              </Typography>
              <Slider
                value={fontSize}
                onChange={handleFontSizeChange}
                aria-labelledby="font-size-slider"
                valueLabelDisplay="auto"
                min={12}
                max={24}
                sx={{ maxWidth: 400 }}
              />
            </Box>
          </FormGroup>
          
          <Divider sx={{ my: 3 }} />
          
          <Typography variant="h6" gutterBottom color="primary" sx={{ display: 'flex', alignItems: 'center', mt: 3 }}>
            <NotificationsIcon sx={{ mr: 1 }} /> 通知
          </Typography>
          
          <FormGroup sx={{ mb: 4, ml: 2 }}>
            <FormControlLabel 
              control={<Switch checked={notifications} onChange={handleNotificationsChange} />} 
              label="启用通知" 
            />
          </FormGroup>
          
          <Divider sx={{ my: 3 }} />
          
          <Typography variant="h6" gutterBottom color="primary" sx={{ display: 'flex', alignItems: 'center', mt: 3 }}>
            <LanguageIcon sx={{ mr: 1 }} /> 语言和个人资料
          </Typography>
          
          <Box sx={{ mb: 4, ml: 2 }}>
            <FormControl sx={{ m: 1, minWidth: 200 }}>
              <InputLabel id="language-select-label">语言</InputLabel>
              <Select
                labelId="language-select-label"
                id="language-select"
                value={language}
                label="语言"
                onChange={handleLanguageChange}
              >
                <MenuItem value="zh">中文</MenuItem>
                <MenuItem value="en">English</MenuItem>
                <MenuItem value="ja">日本語</MenuItem>
                <MenuItem value="ko">한국어</MenuItem>
              </Select>
            </FormControl>
            
            <TextField
              margin="normal"
              fullWidth
              id="username"
              label="用户名"
              name="username"
              value={username}
              onChange={(e) => setUsername(e.target.value)}
              sx={{ maxWidth: 400 }}
            />
          </Box>
          
          <Box sx={{ mt: 4, textAlign: 'center' }}>
            <Button 
              type="submit" 
              variant="contained" 
              color="primary"
              size="large"
              startIcon={<SaveIcon />}
              sx={{ borderRadius: 2, py: 1.5, px: 4 }}
            >
              保存设置
            </Button>
          </Box>
        </Box>
      </Paper>
    </Box>
  );
}