import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { 
  Box, 
  Button, 
  Checkbox, 
  Container, 
  FormControlLabel, 
  TextField, 
  Typography, 
  Link,
  AppBar,
  Toolbar,
  Card,
  CardContent
} from '@mui/material';

const Login = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [rememberEmail, setRememberEmail] = useState(false);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [emailError, setEmailError] = useState(false);
  const [passwordError, setPasswordError] = useState(false);
  const navigate = useNavigate();

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();

    const hasEmail = !!email.trim();
    const hasPassword = !!password.trim();
    setEmailError(!hasEmail);
    setPasswordError(!hasPassword);
    if (!hasEmail || !hasPassword) return;

    setIsSubmitting(true);
    // 模拟登录过程
    setTimeout(() => {
      navigate('/');
    }, 800);
  };

  return (
    <Box sx={{ minHeight: '100vh', width: '100vw', bgcolor: 'background.default', display: 'flex', flexDirection: 'column' }}>
      {/* 顶部栏使用主题主色 */}
      <AppBar position="static" color="primary" enableColorOnDark>
        <Toolbar sx={{ minHeight: 60 }}>
          <Box
            sx={{
              width: 40,
              height: 40,
              bgcolor: 'common.white',
              color: 'primary.main',
              borderRadius: '50%',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              fontWeight: 700,
              fontSize: '1.1rem',
            }}
            aria-label="Brand"
          >
            T
          </Box>
        </Toolbar>
      </AppBar>

      {/* 主体卡片 */}
      <Container maxWidth="sm" sx={{ flex: 1, display: 'flex', alignItems: 'center' }}>
        <Card sx={{ width: '100%' }}>
          <CardContent sx={{ p: 4 }}>
            <Typography variant="caption" color="text.secondary" sx={{ mb: 1, display: 'block' }}>
              Servicename
            </Typography>
            <Typography variant="h5" fontWeight={700} sx={{ mb: 2 }}>
              Enter Login
              <br /> Email & Password
            </Typography>

            <Box component="form" onSubmit={handleSubmit} noValidate>
              <TextField
                fullWidth
                id="email"
                name="email"
                type="email"
                placeholder="Email"
                autoComplete="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                error={emailError}
                required
                sx={{ mb: 2 }}
              />

              <TextField
                fullWidth
                id="password"
                name="password"
                type="password"
                placeholder="Password"
                autoComplete="current-password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                error={passwordError}
                required
                sx={{ mb: 2 }}
              />

              <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2 }}>
                <FormControlLabel
                  control={
                    <Checkbox
                      checked={rememberEmail}
                      onChange={(e) => setRememberEmail(e.target.checked)}
                      id="rememberEmail"
                    />
                  }
                  label="Remember email"
                />
                <Link href="#" variant="caption">
                  Forgot your username or password?
                </Link>
              </Box>

              <Button type="submit" variant="contained" fullWidth disabled={isSubmitting}>
                {isSubmitting ? 'Processing...' : 'Login'}
              </Button>
            </Box>

            <Box sx={{ mt: 2, textAlign: 'center' }}>
              <Link href="#">Do you need help?</Link>
              <Box mt={0.5}>
                {/* 保留说明文案，去掉社交登录 */}
                No account? <Link href="#">Sign up</Link>.
              </Box>
            </Box>
          </CardContent>
        </Card>
      </Container>

      {/* 页脚 */}
      <Box
        sx={{
          borderTop: '1px solid',
          borderColor: 'divider',
          height: 50,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          px: 2,
          color: 'text.secondary',
          bgcolor: 'background.paper',
        }}
      >
        <Box>© Deutsche Telekom AG</Box>
        <Box sx={{ display: 'flex', gap: 2 }}>
          <Link href="#" color="inherit">Imprint</Link>
          <Link href="#" color="inherit">Data privacy</Link>
        </Box>
      </Box>
    </Box>
  );
};

export default Login;