import React, {useEffect, useState} from 'react';
import {Form, Input, Button, message, Select} from 'antd';
import {useNavigate} from 'react-router-dom';
import {useDispatch} from 'react-redux';
import {login, getTenantList} from './service';
import {setToken, setUserInfo} from '../../store/userSlice';
import styles from './index.module.css';

const Login: React.FC = () => {
    const navigate = useNavigate();
    const dispatch = useDispatch();
    const [form] = Form.useForm();
    const [loading, setLoading] = useState(false);
    const [tenants, setTenants] = useState([]);

    useEffect(() => {
        const fetchTenants = async () => {
            try {
                const data = await getTenantList();
                setTenants(data);
            } catch (error) {
                console.error('获取租户列表失败:', error);
            }
        };

        fetchTenants();
    }, []);

    const onFinish = async (values) => {
        try {
            setLoading(true);
            const result = await login(values);
            dispatch(setToken(result.token));
            dispatch(setUserInfo(result));
            message.success('登录成功');
            navigate('/dashboard', {replace: true});
        } catch (error) {
            console.error('登录失败:', error);
        } finally {
            setLoading(false);
        }
    };

    return (
        <div className={styles.loginContainer}>
            <div className={styles.loginBox}>
                <div className={styles.logo}>
                    <img src="/logo.png" alt="QC-NAS" />
                    <h1>QC-NAS</h1>
                </div>
                <Form
                    form={form}
                    name="login"
                    onFinish={onFinish}
                    autoComplete="off"
                    size="large"
                >
                    <Form.Item
                        name="tenantId"
                        rules={[{required: true, message: '请选择租户!'}]}
                    >
                        <Select
                            placeholder="请选择租户"
                            options={tenants.map(tenant => ({
                                label: tenant.name,
                                value: tenant.code
                            }))}
                            className={styles.input}
                        />
                    </Form.Item>

                    <Form.Item
                        name="username"
                        rules={[{required: true, message: '请输入用户名!'}]}
                    >
                        <Input 
                            placeholder="用户名" 
                            className={styles.input}
                        />
                    </Form.Item>

                    <Form.Item
                        name="password"
                        rules={[{required: true, message: '请输入密码!'}]}
                    >
                        <Input.Password 
                            placeholder="密码" 
                            className={styles.input}
                        />
                    </Form.Item>

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

export default Login;