"use client";

import React, { useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import Image from "next/image";
import BackgroundWrapper from "@/components/BackgroundWrapper";
import FormField from "@/components/FormField";
import { login } from "@/lib/auth";
import DestructibleAlert from "@/components/DestructibleAlert";
import { useAuth } from "@/context/AuthContext";

const page = () => {
  const router = useRouter();
  const { setToken } = useAuth();
  const [form, setForm] = useState({
    email: "",
    password: "",
  });
  const [error, setError] = useState(null);
  const [isLoading, setIsLoading] = useState(false);

  // For Rafeed
  // Function to login a user. I've kept it in a barebones form right now, but you can just call the login function from  /lib/auth.ts and pass on the form.
  const loginUser = async () => {
    try {
      setIsLoading(true);
      setError(null);
      await login(form, setToken); // Call the login function
      router.push("/home"); // Redirect on successful login
    } catch (error) {
      console.log(error);
      setError(error.message); // Handle error messages
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <BackgroundWrapper>
      <div className="flex-1 min-h-screen">
        <div className="min-h-screen overflow-y-auto">
          <div className="min-h-full flex flex-col justify-center gap-10 mt-7 mx-6 py-8">
            {/* Logo Container */}
            <div
              className="w-full self-center mt-7"
              style={{ aspectRatio: "368/89" }}
            >
              <Image
                src="/images/logo/logo.png"
                alt="Logo"
                width={368}
                height={89}
                className="w-full h-full object-contain"
                priority
              />
            </div>

            {/* Form Container */}
            <div className="flex flex-col justify-between gap-10">
              <div className="flex flex-col w-full gap-5">
                <FormField
                  title="Email Address"
                  value={form.email}
                  placeholder="Enter your email address..."
                  handleChangeText={(e) => setForm({ ...form, email: e })}
                />
                <FormField
                  title="Password"
                  value={form.password}
                  placeholder="Enter a password"
                  handleChangeText={(e) => setForm({ ...form, password: e })}
                />
              </div>

              {error && <DestructibleAlert text={error} extraStyles="" />}

              <button
                onClick={loginUser}
                disabled={isLoading}
                className="w-full h-14 flex justify-center items-center border border-[#113768] rounded-full bg-transparent hover:bg-[#113768] hover:text-white transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
              >
                <span
                  className="font-medium"
                  style={{ fontFamily: "Montserrat, sans-serif" }}
                >
                  {isLoading ? "Logging in..." : "Login"}
                </span>
              </button>
            </div>

            {/* Register Link */}
            <p
              className="text-center mb-[70px]"
              style={{ fontFamily: "Montserrat, sans-serif" }}
            >
              Don't have an account?{" "}
              <Link href="/register" className="text-[#276ac0] hover:underline">
                Register here.
              </Link>
            </p>
          </div>
        </div>
      </div>
    </BackgroundWrapper>
  );
};

export default page;