"use client";

import { useEffect, useRef, useState } from "react";
import { useRouter } from "next/navigation";
import { useLogin } from "@/hooks/useAuth";
import gsap from "gsap";
import Link from "next/link";

export default function LoginPage() {
    const [identifier, setIdentifier] = useState(""); // email or phone
    const [password, setPassword] = useState("");
    const [error, setError] = useState("");
    const [success, setSuccess] = useState("");
    const router = useRouter();
    const { mutate: login, isLoading } = useLogin();

    const formRef = useRef(null);

    useEffect(() => {
        gsap.fromTo(
            formRef.current,
            { opacity: 0, y: 40 },
            {
                opacity: 1,
                y: 0,
                duration: 1.2,
                ease: "power3.out",
            }
        );
    }, []);

    const handleSubmit = async (e) => {
        e.preventDefault();
        setError("");
        setSuccess("");

        login(
            { identifier, password },
            {
                onSuccess: (data) => {
                    setSuccess("Login successful! Redirecting...");
                    setTimeout(() => {
                        router.push(`/dashboard/${data.user.role}`);
                    }, 1000);
                },
                onError: (err) => {
                    setError(err.message);
                },
            }
        );
    };

    return (
        <section className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-blue-100 px-6 mt-6">
            <div
                ref={formRef}
                className="w-full max-w-md p-8 rounded-2xl bg-white/60 backdrop-blur-md shadow-2xl border border-blue-100"
            >
                <h2 className="text-3xl font-bold text-blue-900 mb-6 text-center">
                    Welcome Back
                </h2>
                {error && (
                    <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 my-3 rounded">
                        {error}
                    </div>
                )}
                {success && (
                    <div className="bg-green-100 border border-green-400 text-green-700 px-4 py-3 my-3 rounded">
                        {success}
                    </div>
                )}
                <form className="space-y-5 text-black" onSubmit={handleSubmit}>
                    <div>
                        <label className="block text-blue-800 mb-1 font-medium">
                            Email or Phone Number
                        </label>
                        <input
                            type="text"
                            className="w-full px-4 py-2 rounded-lg border border-blue-200 focus:ring-2 focus:ring-blue-400 focus:outline-none"
                            placeholder="you@example.com or +2348012345678"
                            required
                            value={identifier}
                            onChange={(e) => setIdentifier(e.target.value)}
                        />
                    </div>
                    <div>
                        <label className="block text-blue-800 mb-1 font-medium">
                            Password
                        </label>
                        <input
                            type="password"
                            className="w-full px-4 py-2 rounded-lg border border-blue-200 focus:ring-2 focus:ring-blue-400 focus:outline-none"
                            placeholder="••••••••"
                            required
                            value={password}
                            onChange={(e) => setPassword(e.target.value)}
                        />
                    </div>
                    <button
                        type="submit"
                        disabled={isLoading}
                        className={`w-full bg-blue-800 hover:bg-blue-900 text-white font-semibold py-2 rounded-lg transition-all duration-300 ${isLoading ? "opacity-50 cursor-not-allowed" : ""
                            }`}
                    >
                        {isLoading ? "Signing in..." : "Sign in"}
                    </button>
                </form>
                <p className="text-sm text-blue-800 mt-4 text-center">
                    Don’t have an account?{" "}
                    <Link href="/signup" className="underline hover:text-blue-600">
                        Sign up
                    </Link>
                </p>
                <p className="text-sm text-blue-800 mt-4 text-center">
                    Forgot Password?{" "}
                    <Link href="/forgot-password" className="underline hover:text-blue-600">
                        Click Here
                    </Link>
                </p>
            </div>
        </section>
    );
}
