"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 DestructibleAlert from "@/components/DestructibleAlert";
import { LoginForm } from "@/types/auth";
import { CircleAlert } from "lucide-react";
import { useAuthStore } from "@/stores/authStore";

const LoginPage = () => {
  const router = useRouter();
  const { login } = useAuthStore();

  const [form, setForm] = useState<LoginForm>({
    identifier: "",
    password: "",
  });

  const [error, setError] = useState<string | null>(null);
  const [isLoading, setIsLoading] = useState(false);

  const loginUser = async () => {
    try {
      setIsLoading(true);
      setError(null);
      await login(form);
      router.replace("/home");
    } catch (err: unknown) {
      console.error(err);

      if (
        typeof err === "object" &&
        err !== null &&
        "message" in err &&
        typeof err.message === "string"
      ) {
        setError(err.message);
      } else {
        setError("An unexpected error occurred.");
      }
    } 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 \ Username"
                  value={form.identifier}
                  placeholder="Enter your email address..."
                  handleChangeText={(value) =>
                    setForm({ ...form, identifier: value })
                  }
                />
                <FormField
                  title="Password"
                  value={form.password}
                  placeholder="Enter a password"
                  handleChangeText={(value) =>
                    setForm({ ...form, password: value })
                  }
                />
              </div>
              {error && <DestructibleAlert text={error} />}

              <h1 className="flex justify-center items-center gap-2 bg-green-200 p-4 rounded-full">
                <CircleAlert size={20} />
                Your login details will be remembered.
              </h1>

              <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&apos;t have an account?{" "}
              <Link href="/register" className="text-[#276ac0] hover:underline">
                Register here.
              </Link>
            </p>
          </div>
        </div>
      </div>
    </BackgroundWrapper>
  );
};

export default LoginPage;