import { Form, Input, Button, Card, Checkbox, Typography } from "antd";
import { motion } from "framer-motion";
import { Award, Mail, Lock } from "lucide-react";
import { useNavigate } from "react-router-dom";

const { Title, Paragraph, Link } = Typography;

export default function StudentLogin() {
  const navigate = useNavigate();

  const onFinish = (values: unknown) => {
    console.log("Login values:", values);
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-indigo-100 via-purple-100 to-pink-100 flex items-center justify-center p-4">
      <motion.div
        initial={{ opacity: 0, scale: 0.9 }}
        animate={{ opacity: 1, scale: 1 }}
        transition={{ duration: 0.5 }}
        className="w-full max-w-md"
      >
        <div className="text-center mb-8">
          <motion.div
            initial={{ y: -20 }}
            animate={{ y: 0 }}
            className="flex items-center justify-center space-x-2 mb-4"
          >
            {/* <Award size={40} className="text-indigo-600" /> */}
            <span className="text-3xl font-bold bg-gradient-to-r from-indigo-600 to-pink-600 bg-clip-text text-transparent">
              ExamInfra
            </span>
          </motion.div>
          <Title level={2} className="mb-2">
            Student Login
          </Title>
          <Paragraph className="text-gray-600">
            Welcome back! Continue your learning journey
          </Paragraph>
        </div>

        <Card
          className="rounded-3xl shadow-2xl border-0"
          style={{ overflow: "hidden" }}
        >
          <div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-indigo-400 to-purple-400 rounded-full opacity-10 -mr-16 -mt-16" />
          <div className="absolute bottom-0 left-0 w-24 h-24 bg-gradient-to-tr from-pink-400 to-red-400 rounded-full opacity-10 -ml-12 -mb-12" />

          <Form
            layout="vertical"
            onFinish={onFinish}
            size="large"
            requiredMark={false}
          >
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.1 }}
            >
              <Form.Item
                label={
                  <span className="text-gray-700 font-medium">
                    Email Address
                  </span>
                }
                name="email"
                rules={[
                  { required: true, message: "Please enter your email" },
                  { type: "email", message: "Please enter a valid email" },
                ]}
              >
                <Input
                  prefix={<Mail size={18} className="text-gray-400" />}
                  placeholder="john@mail.com"
                  className="rounded-xl"
                  style={{ height: "48px" }}
                />
              </Form.Item>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.2 }}
            >
              <Form.Item
                label={
                  <span className="text-gray-700 font-medium">Password</span>
                }
                name="password"
                rules={[
                  { required: true, message: "Please enter your password" },
                ]}
              >
                <Input.Password
                  prefix={<Lock size={18} className="text-gray-400" />}
                  placeholder="Enter your password"
                  className="rounded-xl"
                  style={{ height: "48px" }}
                />
              </Form.Item>
            </motion.div>

            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ delay: 0.3 }}
              className="flex justify-between items-center mb-6"
            >
              <Form.Item name="remember" valuePropName="checked" noStyle>
                <Checkbox>Remember me</Checkbox>
              </Form.Item>
              <Link className="text-indigo-600 hover:text-indigo-800">
                Forgot password?
              </Link>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.4 }}
            >
              <Form.Item>
                <motion.div
                  whileHover={{ scale: 1.02 }}
                  whileTap={{ scale: 0.98 }}
                >
                  <Button
                    type="primary"
                    htmlType="submit"
                    block
                    size="large"
                    className="rounded-xl font-semibold"
                    style={{
                      background:
                        "linear-gradient(135deg, #635BFF 0%, #9B59B6 100%)",
                      border: "none",
                      height: "52px",
                    }}
                  >
                    Sign In
                  </Button>
                </motion.div>
              </Form.Item>
            </motion.div>
          </Form>

          <div className="text-center mt-6">
            <Paragraph className="text-gray-600">
              Don't have an account?{" "}
              <Link
                className="text-indigo-600 hover:text-indigo-800 font-semibold"
                onClick={() => navigate("/student-register")}
              >
                Register as Student
              </Link>
            </Paragraph>
          </div>
        </Card>

        <div className="text-center mt-6">
          <Link
            className="text-gray-600 hover:text-gray-800"
            onClick={() => navigate("/")}
          >
            ← Back to Home
          </Link>
        </div>
      </motion.div>
    </div>
  );
}