peworkshop/app/(auth)/login/page.js

"use client"; // Mark as a Client Component
import { useState, useEffect } from "react";
import { signIn, useSession } from "next-auth/react";
import { useRouter, useSearchParams } from "next/navigation";
import Link from "next/link";

export default function Login() {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");
  const [isLoading, setIsLoading] = useState(false);
  const [isPasswordHovered, setIsPasswordHovered] = useState(false); // Add state for hover

  const router = useRouter();
  const { data: session, status } = useSession();
  const searchParams = useSearchParams();

  useEffect(() => {
    // Removed redirection for authenticated users; do not auto-navigate away from login.
    // Retain error handling from search params.
    const errorParam = searchParams.get("error");
    if (errorParam) {
      if (errorParam === "AuthError") {
        setError("Session expired. Please log in again.");
      } else {
        setError("Authentication failed. Please try again.");
      }
    }
  }, [searchParams]);

  const handleLogin = async (e) => {
    e.preventDefault();

    if (!username || !password) {
      setError("Username and password are required");
      return;
    }

    setIsLoading(true);
    setError("");

    try {
      const result = await signIn("credentials", {
        redirect: false,
        username,
        password,
        callbackUrl: searchParams.get("callbackUrl") || "/team-selection",
      });

      if (result?.error) {
        setError(result.error || "Login failed");
        setIsLoading(false);
      } else if (result?.url) {
        router.push(result.url);
      }
    } catch (error) {
      console.error("Login error:", error);
      setError("Connection error. Please try again.");
      setIsLoading(false);
    }
  };

  return (
    <div className="auth-page">
      {/* Decorative square with conditional background based on password hover */}
      <div
        className={`decorative-square ${isPasswordHovered ? "hovered" : ""}`}
      ></div>

      <div className="auth-container">
        <div className="auth-card">
          <h2>Login to Treasure Hunt</h2>
          <form onSubmit={handleLogin} className="loginForm">
            <div className="input-container">
              <input
                type="text"
                placeholder="Username"
                value={username}
                onChange={(e) => setUsername(e.target.value)}
                required
                className="auth-input"
              />
            </div>
            <div className="input-container">
              <input
                type="password"
                placeholder="Password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                onMouseEnter={() => setIsPasswordHovered(true)}
                onMouseLeave={() => setIsPasswordHovered(false)}
                required
                className="auth-input"
              />
            </div>
            {error && <div className="error-message">{error}</div>}
            <button type="submit" className="auth-button" disabled={isLoading}>
              {isLoading ? "Logging in..." : "Login"}
            </button>
          </form>

          {/* Reduced margin in the container */}
          <div className="register-button-container">
            <Link href="/register">
              <button className="auth-button register-button">Register</button>
            </Link>
          </div>
        </div>
      </div>

      {/* Update styles with hover effect */}
      <style jsx>{`
        .auth-card {
          background-color: #fff;
          padding: 20px;
          border-radius: 8px;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .loginForm {
          display: flex;
          flex-direction: column;
          width: 100%;
          margin-bottom: 2px; /* Reduced space after form */
        }
        .input-container {
          margin-bottom: 10px;
        }
        .register-button-container {
          margin-top: 2px; /* Reduced space before register button */
        }
        .auth-button {
          padding: 10px;
          border: none;
          border-radius: 4px;
          background-color: #68543c; /* Dark brown */
          color: white;
          font-size: 16px;
          cursor: pointer;
          transition: background-color 0.3s;
        }
        .auth-button:hover {
          background-color: #53402d; /* Darker brown on hover */
        }
        .auth-button:disabled {
          background-color: #cccccc;
          cursor: not-allowed;
        }
        .error-message {
          color: #e53935;
          margin-top: 10px;
          margin-bottom: 10px;
          font-size: 0.875rem;
        }
        .decorative-square {
          position: absolute;
          top: calc(50% - 16.5rem);
          left: calc(50% - 15.5rem);
          width: 150px;
          height: 150px;
          background-image: url("/images/parrot.svg");
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center;
          border-radius: 4px;
          z-index: 2;
        }
        .decorative-square.hovered {
          background-image: url("/images/parrot-hover.svg");
        }
        .auth-page {
          display: flex;
          flex-direction: column;
          min-height: 100vh;
          background-color: #f4e9dc;
          background-image: url("/images/decor.svg");
          background-size: auto 100%;
          background-repeat: repeat-x;
          background-position: center;
        }
      `}</style>
    </div>
  );
}