import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Form, Input, Button, Card, Space, Typography, Alert, Checkbox, Divider } from 'antd';
import { UserOutlined, LockOutlined, CheckSquareOutlined } from '@ant-design/icons';
import { api } from '../api/axios';

const { Title, Text, Link } = Typography;

function Login() {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const navigate = useNavigate();

  const onFinish = async (values: any) => {
    setLoading(true);
    setError(null);
    try {
      const response = await api.post('/auth/login', {
        username: values.username,
        password: values.password,
      });
      localStorage.setItem('token', response.data.token);
      localStorage.setItem('username', values.username);
      navigate('/');
    } catch (err: any) {
      const errorMessage = err.response?.data?.message || '登录失败，请检查用户名或密码。';
      setError(errorMessage);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="flex items-center justify-center min-h-screen bg-gray-100" style={{ background: '#f0f2f5',height: '100vh',display: 'flex',alignItems: 'center',justifyContent: 'center' }}>
      <Card
        className="w-full max-w-sm"
        variant="borderless"
        style={{
          boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
          padding: '40px 24px 24px',
          textAlign: 'center',
          width: '500px',
          margin: '0 auto 200px',
        }}
      >
        <Space direction="vertical" size="large" style={{ width: '100%' }}>
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginBottom: 24 }}>
            <CheckSquareOutlined style={{ fontSize: '48px', color: '#1890ff' }} />
            <Title level={2} style={{ margin: '8px 0 0' }}>Todo List</Title>
            <Text type="secondary">轻松管理您的任务</Text>
          </div>

          {error && (
            <Alert
              message="账户或密码错误"
              description={error}
              type="error"
              showIcon
              closable
              onClose={() => setError(null)}
              style={{ marginBottom: 24 }}
            />
          )}

          <Form
            name="login"
            initialValues={{ remember: true }}
            onFinish={onFinish}
            autoComplete="off"
            layout="vertical"
            style={{ width: '100%' }}
          >
            <Form.Item
              name="username"
              rules={[{ required: true, message: '请输入用户名!' }]}
            >
              <Input
                prefix={<UserOutlined className="site-form-item-icon" />}
                placeholder="账户"
                size="large"
              />
            </Form.Item>

            <Form.Item
              name="password"
              rules={[{ required: true, message: '请输入密码!' }]}
            >
              <Input.Password
                prefix={<LockOutlined className="site-form-item-icon" />}
                placeholder="密码"
                size="large"
              />
            </Form.Item>

            <Form.Item>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <Checkbox>自动登录</Checkbox>
                <Space>
                  <Link href="/forgot-password">忘记密码</Link>
                  <Link href="/register">注册新账号</Link>
                </Space>
              </div>
            </Form.Item>

            <Form.Item>
              <Button type="primary" htmlType="submit" className="w-full" size="large" loading={loading} style={{width: '100%',}}>
                登录
              </Button>
            </Form.Item>
          </Form>
        </Space>
      </Card>
    </div>
  );
}

export default Login;