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

"use client";
import { useState } from "react";
import { signIn } from "next-auth/react";
import { useRouter } 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 router = useRouter();

  const handleLogin = async (e) => {
    e.preventDefault();
    setIsLoading(true);
    setError("");

    try {
      console.log("Attempting to sign in with:", username);

      // First try using the NextAuth signIn method
      try {
        const result = await signIn("credentials", {
          redirect: false,
          username,
          password,
          callbackUrl: "/team-selection",
        });

        if (result?.error) {
          throw new Error(result.error);
        }

        // If the user has a team, redirect directly to the team page
        if (result?.url) {
          // Extract the teamId from the URL or session data if available
          // This part depends on how your auth system returns the result
          router.push(`/${session?.user?.teamId || ""}`);
        } else {
          // Otherwise go to team selection
          router.push("/team-selection");
        }
        return;
      } catch (signInError) {
        console.error("Error with signIn method:", signInError);
        console.log("Falling back to direct API call");

        // Fall back to direct fetch approach with explicit JSON content-type
        const loginResponse = await fetch("/api/auth/callback/credentials", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            username,
            password,
            callbackUrl: "/team-selection",
          }),
          credentials: "include", // Important for cookie handling
        });

        if (!loginResponse.ok) {
          const errorData = await loginResponse
            .json()
            .catch(() => ({ error: "Failed to parse error response" }));
          throw new Error(
            errorData.error ||
              `Login failed with status ${loginResponse.status}`
          );
        }

        // On successful login
        const userData = await loginResponse
          .json()
          .catch(() => ({ url: "/team-selection" }));

        // Allow time for cookie to be set
        setTimeout(() => {
          router.push(userData.url || "/team-selection");
        }, 100);
      }
    } catch (err) {
      setError(err.message || "An unexpected error occurred");
      console.error("Login error:", err);
      setIsLoading(false);
    }
  };

  return (
    <div className="auth-page">
      <div className="page-header">
        <div className="back-button">←</div>
        <div className="page-title">Login</div>
        <div className="placeholder"></div>
      </div>

      <div className="auth-container">
        <div className="auth-card">
          <form onSubmit={handleLogin}>
            <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)}
                required
                className="auth-input"
              />
            </div>
            {error && <div className="error-message">{error}</div>}
            <button type="submit" className="auth-button" disabled={isLoading}>
              {isLoading ? "Logging in..." : "Log In"}
            </button>
          </form>
          <Link href="/register">
            <button className="auth-button">Register</button>
          </Link>
        </div>
      </div>

      <div className="nav-bar">
        <div className="nav-item">
          <div className="nav-icon">🏠</div>
        </div>
        <div className="nav-item">
          <div className="nav-icon">📊</div>
        </div>
        <div className="nav-item">
          <div className="nav-icon">🏆</div>
        </div>
        <div className="nav-item">
          <div className="nav-icon">👤</div>
        </div>
      </div>

      <style jsx>{`
        .auth-page {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          height: 100vh;
          overflow: hidden;
        }
        .auth-container {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 100%;
          max-width: 400px;
          padding: 20px;
          box-sizing: border-box;
        }
        .auth-card {
          width: 100%;
          padding: 20px;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
          border-radius: 8px;
          background-color: #fff;
        }
        .input-container {
          margin-bottom: 10px;
        }
        .auth-input {
          width: 100%;
          padding: 10px;
          border: 1px solid #ccc;
          border-radius: 4px;
        }
        .auth-button {
          width: 100%;
          padding: 10px;
          margin-top: 10px;
          background-color: #68543c; /* Updated brown color */
          color: white;
          border: none;
          border-radius: 4px;
          cursor: pointer;
          text-align: center;
        }
        .error-message {
          color: red;
          margin-top: 10px;
        }
        .nav-bar {
          position: fixed;
          bottom: 0;
          width: 100%;
          background-color: #fff;
          border-top: 1px solid #ccc;
          padding: 10px 0;
          text-align: center;
        }
        .nav-item {
          display: inline-block;
          margin: 0 10px;
        }
        .nav-icon {
          font-size: 24px;
        }
      `}</style>
    </div>
  );
}