import { LockOutlined, MobileOutlined, UserOutlined } from '@ant-design/icons';
import {
    LoginFormPage,
    ProFormCaptcha,
    ProFormCheckbox,
    ProFormText,
} from '@ant-design/pro-components';
import { useNavigate } from '@umijs/max';
import { message, Tabs, theme } from 'antd';
import React, { useState } from 'react';

type LoginType = 'account' | 'mobile';

const LoginPage: React.FC = () => {
    const [loginType, setLoginType] = useState<LoginType>('account');
    const navigate = useNavigate();
    const { token } = theme.useToken();

    const handleSubmit = async (values: any) => {
        try {
            message.loading({ content: '正在验证身份...', key: 'login' });
            // 模拟登录请求
            await new Promise((resolve) => setTimeout(resolve, 1500));

            if (values.username === 'admin' && values.password === 'ant.design') {
                message.success({ content: '登录成功，欢迎回来！', key: 'login' });
                navigate('/');
                return;
            }
            message.error({ content: '账号或密码错误 (admin/ant.design)', key: 'login' });
        } catch (error) {
            message.error({ content: '服务响应异常，请稍后再试', key: 'login' });
        }
    };

    return (
        <div
            style={{
                height: '100vh',
                background: 'linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab)',
                backgroundSize: '400% 400%',
                animation: 'gradient 15s ease infinite',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
            }}
        >
            <style>{`
        @keyframes gradient {
          0% { background-position: 0% 50%; }
          50% { background-position: 100% 50%; }
          100% { background-position: 0% 50%; }
        }
        .ant-pro-form-login-page-container {
          background: rgba(255, 255, 255, 0.2) !important;
          backdrop-filter: blur(25px) saturate(180%) !important;
          -webkit-backdrop-filter: blur(25px) saturate(180%) !important;
          border: 1px solid rgba(255, 255, 255, 0.3) !important;
          border-radius: 24px !important;
          box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37) !important;
        }
        .ant-pro-form-login-page-main {
           width: 400px !important;
           background: transparent !important;
        }
      `}</style>
            <LoginFormPage
                logo="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
                title="Agent-MD Admin"
                subTitle="极致体验的企业级 AI 管理平台"
                containerStyle={{
                    padding: '40px',
                }}
                actions={
                    <div
                        style={{
                            display: 'flex',
                            justifyContent: 'center',
                            alignItems: 'center',
                            flexDirection: 'column',
                        }}
                    >
                        <div style={{ color: token.colorTextDescription, fontSize: 12 }}>
                            其他登录方式
                        </div>
                    </div>
                }
                onFinish={handleSubmit}
                initialValues={{
                    autoLogin: true,
                }}
            >
                <Tabs
                    activeKey={loginType}
                    onChange={(activeKey) => setLoginType(activeKey as LoginType)}
                    centered
                    items={[
                        {
                            key: 'account',
                            label: '账号密码登录',
                        },
                        {
                            key: 'mobile',
                            label: '手机号登录',
                        },
                    ]}
                    style={{ marginBottom: 24 }}
                />

                {loginType === 'account' && (
                    <>
                        <ProFormText
                            name="username"
                            fieldProps={{
                                size: 'large',
                                prefix: <UserOutlined style={{ color: token.colorPrimary }} />,
                            }}
                            placeholder="用户名: admin"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入用户名!',
                                },
                            ]}
                        />
                        <ProFormText.Password
                            name="password"
                            fieldProps={{
                                size: 'large',
                                prefix: <LockOutlined style={{ color: token.colorPrimary }} />,
                            }}
                            placeholder="密码: ant.design"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入密码!',
                                },
                            ]}
                        />
                    </>
                )}

                {loginType === 'mobile' && (
                    <>
                        <ProFormText
                            fieldProps={{
                                size: 'large',
                                prefix: <MobileOutlined style={{ color: token.colorPrimary }} />,
                            }}
                            name="mobile"
                            placeholder="手机号"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入手机号！',
                                },
                                {
                                    pattern: /^1\d{10}$/,
                                    message: '手机号格式错误！',
                                },
                            ]}
                        />
                        <ProFormCaptcha
                            fieldProps={{
                                size: 'large',
                                prefix: <LockOutlined style={{ color: token.colorPrimary }} />,
                            }}
                            captchaProps={{
                                size: 'large',
                            }}
                            placeholder="请输入验证码"
                            captchaTextRender={(timing, count) => {
                                if (timing) {
                                    return `${count} 秒后重新获取`;
                                }
                                return '获取验证码';
                            }}
                            name="captcha"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入验证码！',
                                },
                            ]}
                            onGetCaptcha={async () => {
                                message.success('验证码已发送至您的手机：1234');
                            }}
                        />
                    </>
                )}
                <div
                    style={{
                        marginBlockEnd: 24,
                        display: 'flex',
                        justifyContent: 'space-between',
                    }}
                >
                    <ProFormCheckbox noStyle name="autoLogin">
                        自动登录
                    </ProFormCheckbox>
                    <a
                        style={{
                            color: token.colorPrimary,
                        }}
                    >
                        忘记密码?
                    </a>
                </div>
            </LoginFormPage>
        </div>
    );
};

export default LoginPage;
