import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router';
import { Button, Form, Input, message } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { authService } from '../services/auth';
import type { LoginRequest } from '@/types/user';
import './LoginPage.css';

export default function LoginPage() {
    const navigate = useNavigate();
    const [loading, setLoading] = useState(false);

    // 如果已登录，重定向到首页
    useEffect(() => {
        if (authService.isAuthenticated()) {
            navigate('/', { replace: true });
        }
    }, [navigate]);

    const onFinish = async (values: LoginRequest) => {
        setLoading(true);
        try {
            await authService.login(values);
            message.success('登录成功');
            navigate('/', { replace: true });
        } catch (error: any) {
            message.error(error.message || '登录失败，请检查用户名和密码');
        } finally {
            setLoading(false);
        }
    };

    return (
        <div className="login-container">
            <div className="login-box">
                <div className="login-header">
                    <h1>投小记</h1>
                    <p>投资决策与复盘工具</p>
                </div>

                <Form
                    name="login"
                    onFinish={onFinish}
                    autoComplete="off"
                    size="large"
                    className="login-form"
                >
                    <Form.Item
                        name="usernameOrEmail"
                        rules={[
                            {
                                required: true,
                                message: '请输入用户名或邮箱',
                            },
                            {
                                min: 3,
                                message: '用户名或邮箱至少3个字符',
                            },
                        ]}
                    >
                        <Input prefix={<UserOutlined />} placeholder="用户名或邮箱" />
                    </Form.Item>

                    <Form.Item
                        name="password"
                        rules={[
                            {
                                required: true,
                                message: '请输入密码',
                            },
                            {
                                min: 6,
                                message: '密码至少6个字符',
                            },
                        ]}
                    >
                        <Input.Password prefix={<LockOutlined />} placeholder="密码" />
                    </Form.Item>

                    <Form.Item>
                        <Button
                            type="primary"
                            htmlType="submit"
                            loading={loading}
                            block
                            className="login-button"
                        >
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    );
}