echoes/frontend/app/dashboard/login.tsx

import "./styles/login.css";
import { Template } from "interface/template";
import { Container, Heading, Text, Box, Flex, Button } from "@radix-ui/themes";
import { PersonIcon, LockClosedIcon } from "@radix-ui/react-icons";
import { useEffect, useRef, useState, useMemo } from "react";
import { gsap } from "gsap";
import { AnimatedBackground } from 'hooks/Background';
import { useThemeMode, ThemeModeToggle } from 'hooks/ThemeMode';
import { useNotification } from 'hooks/Notification';

export default new Template({}, ({ http, args }) => {
  const containerRef = useRef<HTMLDivElement>(null);
  const [isVisible, setIsVisible] = useState(false);
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [isLoading, setIsLoading] = useState(false);
  const { mode } = useThemeMode();
  const [hasBackgroundError, setHasBackgroundError] = useState(false);
  const notification = useNotification();

  useEffect(() => {
    setIsVisible(true);

    const ctx = gsap.context(() => {
      // 登录框动画
      gsap.from(".login-box", {
        y: 30,
        opacity: 0,
        duration: 1,
        ease: "power3.out",
      });

      // 表单元素动画
      gsap.from(".form-element", {
        x: -20,
        opacity: 0,
        duration: 0.8,
        stagger: 0.1,
        ease: "power2.out",
        delay: 0.3,
      });

      // 按钮动画
      gsap.from(".login-button", {
        scale: 0.9,
        opacity: 0,
        duration: 0.5,
        ease: "back.out(1.7)",
        delay: 0.8,
      });
    }, containerRef);

    return () => ctx.revert();
  }, []);

  const handleLogin = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsLoading(true);

    try {
      // 这里添加登录逻辑
      await new Promise(resolve => setTimeout(resolve, 1500)); // 模拟API请求
      
      // 登录成功的通知
      notification.success('登录成功', '欢迎回来！');
      
      // 登录成功后的处理
      console.log("Login successful");
    } catch (error) {
      // 登录失败的通知
      notification.error('登录失败', '用户名或密码错误');
      console.error("Login failed:", error);
    } finally {
      setIsLoading(false);
    }
  };

  const handleBackgroundError = () => {
    console.log('Background failed to load, switching to fallback');
    setHasBackgroundError(true);
  };

  // 使用 useMemo 包裹背景组件
  const backgroundComponent = useMemo(() => (
    !hasBackgroundError && <AnimatedBackground onError={handleBackgroundError} />
  ), [hasBackgroundError]);

  return (
    <div className="relative min-h-screen">
      {backgroundComponent}
      
      <Box 
        className="fixed top-4 right-4 z-20 w-10 h-10 flex items-center justify-center [&_button]:w-10 [&_button]:h-10 [&_svg]:w-6 [&_svg]:h-6"
        style={{
          '--button-color': 'var(--gray-12)',
          '--button-hover-color': 'var(--accent-9)'
        } as React.CSSProperties}
      >
        <ThemeModeToggle />
      </Box>
      
      <Container
        ref={containerRef}
        className={`relative z-10 h-screen w-full flex items-center justify-center transition-all duration-300 ${
          isVisible ? "opacity-100" : "opacity-0"
        }`}
      >
        <Box className="w-full max-w-md mx-auto px-4">
          <Box 
            className="login-box backdrop-blur-sm rounded-lg shadow-lg p-8 border transition-colors duration-300"
            style={{
              backgroundColor: mode === 'dark' ? 'var(--gray-2-alpha-80)' : 'var(--white-alpha-80)',
              borderColor: 'var(--gray-6)'
            }}
          >
            {/* Logo */}
            <Flex direction="column" align="center" className="mb-8">
              <Heading size="6" className="text-center mb-2">
                后台
              </Heading>

            </Flex>

            {/* 登录表单 */}
            <form onSubmit={handleLogin}>
              <Flex direction="column" gap="4">
                {/* 用户名输入框 */}
                <Box className="form-element input-box relative">
                  <input
                    className="login-input"
                    type="text"
                    value={username}
                    onChange={(e) => setUsername(e.target.value)}
                    required
                  />
                  <label>用户名</label>
                </Box>

                {/* 密码输入框 */}
                <Box className="form-element input-box relative">
                  <input
                    className="login-input"
                    type="password"
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    required
                  />
                  <label>密码</label>
                </Box>

                {/* 登录按钮 */}
                <Button
                  className="login-button w-full h-10 transition-colors duration-300 hover:bg-[--hover-bg]"
                  style={{
                    backgroundColor: 'var(--accent-9)',
                    color: 'white',
                    '--hover-bg': 'var(--accent-10)'
                  } as React.CSSProperties}
                  size="3"
                  type="submit"
                  disabled={isLoading}
                >
                  {isLoading ? "登录中..." : "登录"}
                </Button>

                {/* 其他选项 */}
                <Flex justify="center" className="form-element">
                  <Text 
                    size="2" 
                    className="cursor-pointer transition-colors duration-300 hover:text-[--hover-color]"
                    style={{
                      color: 'var(--gray-11)',
                      '--hover-color': 'var(--accent-9)'
                    } as React.CSSProperties}
                  >
                    忘记密码？
                  </Text>
                </Flex>
              </Flex>
            </form>
          </Box>
        </Box>
      </Container>
    </div>
  );
});