import React from "react";
import { Form, Input, Button, Divider, message } from "antd";
import { GoogleOutlined } from "@ant-design/icons";
import { Link, useNavigate } from "react-router-dom";
import { useAuth } from "@/contexts/AuthContext";

const Login = () => {
  const navigate = useNavigate();
  const { login, signInWithGoogle, loading } = useAuth();
  const [form] = Form.useForm();

  const handleLogin = async (values) => {
    try {
      await login(values.email, values.password);
      message.success("登录成功！");
      navigate("/");
    } catch (error) {
      console.error("Login error:", error);
    }
  };

  const handleGoogleLogin = async () => {
    try {
      await signInWithGoogle();
    } catch (error) {
      console.error("Google login error:", error);
    }
  };

  return (
    <div className="min-h-screen  flex bg-gradient-to-br from-[#f5f7fa] to-[#c3cfe2]">
      <div className="w-full max-w-[1200px] mx-auto flex p-8 gap-16">
        <div className="flex-1 bg-white p-12 rounded-[20px] shadow-[0_10px_30px_rgba(0,0,0,0.1)]">
          <div className="mb-8 text-center">
            <h1 className="text-3xl font-bold mb-2 bg-gradient-to-r from-primary-500 to-[#36cff0] bg-clip-text text-transparent">
              Uppeta
            </h1>
            <p className="text-gray-500">欢迎回来！请登录您的账户。</p>
          </div>

          <Form
            form={form}
            name="login"
            onFinish={handleLogin}
            layout="vertical"
            size="large"
          >
            <Form.Item
              name="email"
              rules={[
                { required: true, message: "请输入邮箱！" },
                { type: "email", message: "请输入有效的邮箱地址！" },
              ]}
            >
              <Input placeholder="邮箱" />
            </Form.Item>

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

            <div className="flex justify-between items-center mb-6">
              <Form.Item name="remember" valuePropName="checked" noStyle>
                <Link
                  to="/forgot-password"
                  className="text-primary-500 hover:text-primary-600"
                >
                  忘记密码？
                </Link>
              </Form.Item>
            </div>

            <Form.Item>
              <Button type="primary" htmlType="submit" block>
                登录
              </Button>
            </Form.Item>

            <Divider>或</Divider>

            <Button
              icon={<GoogleOutlined />}
              block
              onClick={handleGoogleLogin}
              className="mb-6"
              loading={loading}
            >
              使用 Google 账号登录
            </Button>
          </Form>
        </div>

        <div className="flex-1 hidden md:block rounded-[20px] bg-[url('https://uppeta.com/img/svg/main.svg')] bg-center bg-contain bg-no-repeat" />
      </div>
    </div>
  );
};

export default Login;
