/**
 * KRA - Login Page
 * Modern login page with gradient background and card design
 */
import React, { useState, useEffect, useCallback } from 'react';
import { Form, Input, Button, App } from 'antd';
import { UserOutlined, LockOutlined, SafetyOutlined } from '@ant-design/icons';
import { history, Helmet, useModel } from '@umijs/max';
import { flushSync } from 'react-dom';
import { login, captcha } from '@/services/kratos/user';
import { checkDB } from '@/services/kratos/initdb';
import { useUserStore } from '@/models/user';
import { convertToMenuData } from '@/utils/dynamicRouter';
import Logo from '@/components/Logo/Logo';
import BottomInfo from '@/components/BottomInfo/BottomInfo';
import { createStyles, keyframes } from 'antd-style';
import Settings from '../../../../config/defaultSettings';

interface LoginFormData {
  username: string;
  password: string;
  captcha: string;
}

interface CaptchaData {
  captchaId: string;
  picPath: string;
  captchaLength: number;
  openCaptcha: boolean;
}

// 浮动动画
const float = keyframes`
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(5deg); }
`;

const float2 = keyframes`
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(-5deg); }
`;

const pulse = keyframes`
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.05); }
`;

const useStyles = createStyles(({ token }) => ({
  container: {
    width: '100%',
    minHeight: '100vh',
    display: 'flex',
    position: 'relative',
    overflow: 'hidden',
  },
  // 左侧品牌区域 - 深色渐变背景
  leftSection: {
    flex: 1,
    display: 'none',
    alignItems: 'center',
    justifyContent: 'center',
    background: 'linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%)',
    position: 'relative',
    overflow: 'hidden',
    '@media (min-width: 992px)': {
      display: 'flex',
    },
  },
  // 浮动装饰圆圈
  floatingCircle1: {
    position: 'absolute',
    width: '300px',
    height: '300px',
    borderRadius: '50%',
    background: 'linear-gradient(135deg, rgba(99, 102, 241, 0.3) 0%, rgba(139, 92, 246, 0.1) 100%)',
    top: '-50px',
    left: '-50px',
    animation: `${float} 8s ease-in-out infinite`,
  },
  floatingCircle2: {
    position: 'absolute',
    width: '200px',
    height: '200px',
    borderRadius: '50%',
    background: 'linear-gradient(135deg, rgba(59, 130, 246, 0.25) 0%, rgba(99, 102, 241, 0.1) 100%)',
    bottom: '100px',
    left: '20%',
    animation: `${float2} 10s ease-in-out infinite`,
  },
  floatingCircle3: {
    position: 'absolute',
    width: '150px',
    height: '150px',
    borderRadius: '50%',
    background: 'linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(59, 130, 246, 0.1) 100%)',
    top: '30%',
    right: '10%',
    animation: `${pulse} 6s ease-in-out infinite`,
  },
  floatingCircle4: {
    position: 'absolute',
    width: '100px',
    height: '100px',
    borderRadius: '50%',
    background: 'linear-gradient(135deg, rgba(59, 130, 246, 0.3) 0%, rgba(99, 102, 241, 0.15) 100%)',
    bottom: '-20px',
    right: '25%',
    animation: `${float} 12s ease-in-out infinite`,
  },
  // 品牌内容
  brandContent: {
    position: 'relative',
    zIndex: 10,
    textAlign: 'center' as const,
    color: '#fff',
    padding: '0 48px',
  },
  brandTitle: {
    fontSize: '42px',
    fontWeight: 700,
    marginBottom: '16px',
    background: 'linear-gradient(135deg, #fff 0%, #a5b4fc 100%)',
    WebkitBackgroundClip: 'text',
    WebkitTextFillColor: 'transparent',
    backgroundClip: 'text',
  },
  brandSubtitle: {
    fontSize: '16px',
    color: 'rgba(255, 255, 255, 0.7)',
    lineHeight: 1.6,
    maxWidth: '400px',
    margin: '0 auto',
  },
  // 右侧表单区域
  rightSection: {
    width: '100%',
    minHeight: '100vh',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    background: '#f8fafc',
    padding: '24px',
    '@media (min-width: 992px)': {
      width: '480px',
      minWidth: '480px',
    },
  },
  // 登录卡片
  loginCard: {
    width: '100%',
    maxWidth: '400px',
    background: '#fff',
    borderRadius: '16px',
    padding: '40px 32px',
    boxShadow: '0 4px 24px rgba(0, 0, 0, 0.08)',
  },
  logoWrapper: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: '24px',
  },
  title: {
    textAlign: 'center' as const,
    fontSize: '28px',
    fontWeight: 700,
    marginBottom: '8px',
    color: token.colorText,
  },
  subtitle: {
    textAlign: 'center' as const,
    fontSize: '14px',
    color: token.colorTextSecondary,
    marginBottom: '32px',
  },
  // 表单样式
  formItem: {
    marginBottom: '20px',
  },
  inputWrapper: {
    '& .ant-input-affix-wrapper': {
      borderRadius: '8px',
      padding: '12px 16px',
      border: '1px solid #e2e8f0',
      transition: 'all 0.3s ease',
      '&:hover': {
        borderColor: '#6366f1',
      },
      '&:focus, &.ant-input-affix-wrapper-focused': {
        borderColor: '#6366f1',
        boxShadow: '0 0 0 3px rgba(99, 102, 241, 0.1)',
      },
    },
    '& .ant-input': {
      fontSize: '15px',
    },
  },
  captchaWrapper: {
    display: 'flex',
    gap: '12px',
  },
  captchaInput: {
    flex: 1,
  },
  captchaImage: {
    width: '120px',
    height: '48px',
    borderRadius: '8px',
    cursor: 'pointer',
    background: 'linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%)',
    transition: 'transform 0.2s ease',
    '&:hover': {
      transform: 'scale(1.02)',
    },
  },
  submitBtn: {
    width: '100%',
    height: '48px',
    fontSize: '16px',
    fontWeight: 600,
    borderRadius: '8px',
    background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
    border: 'none',
    transition: 'all 0.3s ease',
    '&:hover': {
      background: 'linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%)',
      transform: 'translateY(-1px)',
      boxShadow: '0 4px 12px rgba(99, 102, 241, 0.4)',
    },
  },
  initBtn: {
    width: '100%',
    height: '48px',
    fontSize: '16px',
    fontWeight: 500,
    borderRadius: '8px',
    marginTop: '12px',
    border: '1px solid #e2e8f0',
    color: token.colorTextSecondary,
    transition: 'all 0.3s ease',
    '&:hover': {
      borderColor: '#6366f1',
      color: '#6366f1',
    },
  },
  bottomInfo: {
    position: 'absolute' as const,
    bottom: '24px',
    left: 0,
    right: 0,
    zIndex: 20,
  },
  links: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    gap: '16px',
  },
  linkIcon: {
    width: '36px',
    height: '36px',
    cursor: 'pointer',
    transition: 'all 0.3s ease',
    opacity: 0.8,
    '&:hover': {
      transform: 'scale(1.15)',
      opacity: 1,
    },
  },
}));


const Login: React.FC = () => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [captchaData, setCaptchaData] = useState<CaptchaData>({
    captchaId: '',
    picPath: '',
    captchaLength: 6,
    openCaptcha: false,
  });
  const { styles } = useStyles();
  const { message: messageApi } = App.useApp();
  const { initialState, setInitialState } = useModel('@@initialState');
  const { setToken, setUserInfo } = useUserStore();

  // 获取验证码
  const fetchCaptcha = useCallback(async () => {
    try {
      const res = await captcha();
      if (res.code === 0 && res.data) {
        setCaptchaData({
          captchaId: res.data.captchaId || '',
          picPath: res.data.picPath || '',
          captchaLength: res.data.captchaLength || 6,
          openCaptcha: res.data.openCaptcha || false,
        });
      }
    } catch (error) {
      console.error('获取验证码失败:', error);
    }
  }, []);

  useEffect(() => {
    fetchCaptcha();
  }, [fetchCaptcha]);

  // 提交登录 - 参考 GVA 的 LoginIn 逻辑
  const handleSubmit = async (values: LoginFormData) => {
    setLoading(true);
    try {
      const res = await login({
        username: values.username,
        password: values.password,
        captcha: values.captcha || '',
        captchaId: captchaData.captchaId,
      });

      if (res.code === 0 && res.data) {
        const { token, user } = res.data;
        
        setToken(token);
        setUserInfo(user);

        const [userInfo, menus] = await Promise.all([
          initialState?.fetchUserInfo?.(),
          initialState?.fetchMenus?.(),
        ]);

        const menuData = menus ? convertToMenuData(menus) : [];

        flushSync(() => {
          setInitialState((state) => ({
            ...state,
            currentUser: userInfo,
            menus,
            menuData,
          }));
        });

        messageApi.success('登录成功！');

        const urlParams = new URL(window.location.href).searchParams;
        const redirect = urlParams.get('redirect');
        
        if (redirect) {
          history.push(redirect);
        } else {
          const defaultRouter = user?.authority?.defaultRouter || 'dashboard';
          history.push(`/${defaultRouter}`);
        }
      } else {
        messageApi.error(res.msg || '登录失败，请重试');
        fetchCaptcha();
      }
    } catch (error: any) {
      messageApi.error(error?.message || '登录失败，请重试');
      fetchCaptcha();
    } finally {
      setLoading(false);
    }
  };

  // 跳转初始化页面
  const handleCheckInit = async () => {
    try {
      const res = await checkDB();
      if (res.code === 0 && res.data) {
        const checkResult = res.data as { needInit?: boolean };
        if (checkResult.needInit) {
          history.push('/init');
        } else {
          messageApi.info('已配置数据库信息，无法初始化');
        }
      }
    } catch (error) {
      console.error('检查初始化状态失败:', error);
    }
  };

  return (
    <div className={styles.container}>
      <Helmet>
        <title>登录 - {Settings.title || 'Kratos Admin'}</title>
      </Helmet>

      {/* 左侧品牌区域 */}
      <div className={styles.leftSection}>
        <div className={styles.floatingCircle1} />
        <div className={styles.floatingCircle2} />
        <div className={styles.floatingCircle3} />
        <div className={styles.floatingCircle4} />
        
        <div className={styles.brandContent}>
          <h1 className={styles.brandTitle}>Kratos Admin</h1>
          <p className={styles.brandSubtitle}>
            基于 React 19 + Go Kratos 微服务框架构建的现代化全栈管理平台，
            提供高效、安全、可扩展的企业级解决方案
          </p>
        </div>
      </div>

      {/* 右侧登录表单 */}
      <div className={styles.rightSection}>
        <div className={styles.loginCard}>
          <div className={styles.logoWrapper}>
            <Logo size="large" />
          </div>
          
          <h2 className={styles.title}>欢迎回来</h2>
          <p className={styles.subtitle}>请输入您的账号信息登录系统</p>

          <Form
            form={form}
            onFinish={handleSubmit}
            initialValues={{ username: 'admin', password: '' }}
            size="large"
          >
            <Form.Item
              name="username"
              className={`${styles.formItem} ${styles.inputWrapper}`}
              rules={[
                { required: true, message: '请输入用户名' },
                { min: 5, message: '用户名至少5个字符' },
              ]}
            >
              <Input
                prefix={<UserOutlined style={{ color: '#94a3b8' }} />}
                placeholder="请输入用户名"
              />
            </Form.Item>

            <Form.Item
              name="password"
              className={`${styles.formItem} ${styles.inputWrapper}`}
              rules={[
                { required: true, message: '请输入密码' },
                { min: 6, message: '密码至少6个字符' },
              ]}
            >
              <Input.Password
                prefix={<LockOutlined style={{ color: '#94a3b8' }} />}
                placeholder="请输入密码"
              />
            </Form.Item>

            {captchaData.openCaptcha && (
              <Form.Item
                name="captcha"
                className={styles.formItem}
                rules={[
                  { required: true, message: '请输入验证码' },
                  { pattern: /^\d+$/, message: '验证码须为数字' },
                  { min: captchaData.captchaLength, message: `请输入${captchaData.captchaLength}位验证码` },
                ]}
              >
                <div className={styles.captchaWrapper}>
                  <Input
                    prefix={<SafetyOutlined style={{ color: '#94a3b8' }} />}
                    placeholder="请输入验证码"
                    className={`${styles.captchaInput} ${styles.inputWrapper}`}
                  />
                  {captchaData.picPath && (
                    <img
                      src={captchaData.picPath}
                      alt="验证码"
                      className={styles.captchaImage}
                      onClick={fetchCaptcha}
                      title="点击刷新验证码"
                    />
                  )}
                </div>
              </Form.Item>
            )}

            <Form.Item style={{ marginBottom: '12px' }}>
              <Button
                type="primary"
                htmlType="submit"
                loading={loading}
                className={styles.submitBtn}
              >
                登 录
              </Button>
            </Form.Item>

            <Form.Item style={{ marginBottom: 0 }}>
              <Button
                type="default"
                onClick={handleCheckInit}
                className={styles.initBtn}
              >
                前往初始化
              </Button>
            </Form.Item>
          </Form>
        </div>
      </div>

      {/* 底部信息 */}
      <div className={styles.bottomInfo}>
        <BottomInfo>
          <div className={styles.links}>
            <a href="https://go-kratos.dev/" target="_blank" rel="noopener noreferrer">
              <img src="/docs.png" className={styles.linkIcon} alt="文档" />
            </a>
            <a href="https://github.com/go-kratos/kratos" target="_blank" rel="noopener noreferrer">
              <img src="/github.png" className={styles.linkIcon} alt="GitHub" />
            </a>
          </div>
        </BottomInfo>
      </div>
    </div>
  );
};

export default Login;
