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

const LoginContainer = styled(Box)({
  height: '100vh',
  display: 'flex',
  flexDirection: 'column',
  backgroundColor: '#f5f7fa',
});

const TopBar = styled(Box)({
  height: '60px',
  backgroundColor: '#1a1a2e',
  display: 'flex',
  alignItems: 'center',
  padding: '0 20px',
});

const BrandLogo = styled(Box)({
  width: '40px',
  height: '40px',
  backgroundColor: '#fff',
  color: '#1a1a2e',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  borderRadius: '50%',
  fontWeight: 'bold',
  fontSize: '1.2rem',
});

const LoginMain = styled(Box)({
  flex: 1,
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
});

const LoginCard = styled(Box)({
  width: '400px',
  backgroundColor: '#fff',
  borderRadius: '8px',
  boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
  padding: '30px',
});

const ServiceName = styled(Typography)({
  fontSize: '0.75rem',
  color: '#666',
  marginBottom: '10px',
});

const LoginTitle = styled(Typography)({
  fontSize: '1.5rem',
  fontWeight: 'bold',
  marginBottom: '20px',
});

const LoginForm = styled('form')({
  display: 'flex',
  flexDirection: 'column',
  gap: '20px',
});

const RememberRow = styled(Box)({
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'space-between',
});

const ActionButtons = styled(Box)({
  display: 'flex',
  gap: '10px',
  marginTop: '10px',
});

const PrimaryButton = styled(Button)({
  backgroundColor: '#e20074',
  '&:hover': {
    backgroundColor: '#c10062',
  },
});

const SecondaryButton = styled(Button)({
  color: '#333',
  backgroundColor: '#f5f5f5',
  '&:hover': {
    backgroundColor: '#e0e0e0',
  },
});

const HelpSection = styled(Box)({
  marginTop: '20px',
  textAlign: 'center',
  fontSize: '0.875rem',
});

const SocialLogin = styled(Box)({
  display: 'flex',
  justifyContent: 'center',
  gap: '10px',
  marginTop: '15px',
});

const SocialButton = styled(Box)({
  width: '30px',
  height: '30px',
  borderRadius: '50%',
  backgroundColor: '#e0e0e0',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  cursor: 'pointer',
});

const Footer = styled(Box)({
  height: '50px',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'space-between',
  padding: '0 20px',
  borderTop: '1px solid #eee',
  fontSize: '0.75rem',
  color: '#666',
});

const LegalLinks = styled(Box)({
  display: 'flex',
  gap: '15px',
});

const Login = () => {
  const [username, setUsername] = useState('');
  const [rememberUser, setRememberUser] = useState(false);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [error, setError] = useState(false);
  const navigate = useNavigate();

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    
    if (!username.trim()) {
      setError(true);
      return;
    }
    
    setIsSubmitting(true);
    setError(false);
    
    // 模拟登录过程
    setTimeout(() => {
      navigate('/');
    }, 800);
  };

  const handleCancel = () => {
    navigate('/');
  };

  return (
    <LoginContainer>
      <TopBar>
        <BrandLogo>T</BrandLogo>
      </TopBar>
      
      <LoginMain>
        <LoginCard>
          <ServiceName>Servicename</ServiceName>
          <LoginTitle>
            Enter Login <br/> Username
          </LoginTitle>
          
          <LoginForm onSubmit={handleSubmit} noValidate>
            <TextField
              fullWidth
              id="username"
              name="username"
              placeholder="Username"
              autoComplete="username"
              value={username}
              onChange={(e) => setUsername(e.target.value)}
              error={error}
              required
            />
            
            <RememberRow>
              <FormControlLabel
                control={
                  <Checkbox 
                    checked={rememberUser}
                    onChange={(e) => setRememberUser(e.target.checked)}
                    id="rememberUser"
                  />
                }
                label="Remember username"
              />
              <Link href="#" variant="caption">
                Forgot your username or password?
              </Link>
            </RememberRow>
            
            <ActionButtons>
              <PrimaryButton 
                type="submit" 
                variant="contained" 
                fullWidth
                disabled={isSubmitting}
              >
                {isSubmitting ? 'Processing...' : 'Next'}
              </PrimaryButton>
              <SecondaryButton 
                type="button" 
                variant="contained" 
                fullWidth
                onClick={handleCancel}
              >
                Cancel
              </SecondaryButton>
            </ActionButtons>
          </LoginForm>
          
          <HelpSection>
            <Link href="#">Do you need help?</Link>
            <Box mt={1}>
              No account? <Link href="#">Sign up</Link> or log in with your social network account.
            </Box>
          </HelpSection>
          
          <SocialLogin>
            <SocialButton aria-label="Login with Facebook">
              <Link href="#" underline="none" color="inherit">f</Link>
            </SocialButton>
            <SocialButton aria-label="Login with Twitter">
              <Link href="#" underline="none" color="inherit">t</Link>
            </SocialButton>
          </SocialLogin>
        </LoginCard>
      </LoginMain>
      
      <Footer>
        <Box>© Deutsche Telekom AG</Box>
        <LegalLinks>
          <Link href="#" color="inherit">Imprint</Link>
          <Link href="#" color="inherit">Data privacy</Link>
        </LegalLinks>
      </Footer>
    </LoginContainer>
  );
};

export default Login;