tremor-tracker/src/components/AuthModal.tsx

// tells React if you're using its "server-side rendering" features. this component runs only on the client-side (browser)
"use client";
// importing React hooks or utilities that enhance functionality inside the component
import { useState, FormEvent, useRef, MouseEvent, useEffect } from "react";
/*
  useState: Used to manage state (data that changes over time).
  FormEvent: TypeScript definition for form-related events like submission.
  useRef: Used to access the DOM (the web page elements) directly.
  MouseEvent: TypeScript definition for mouse-related events like clicks.
  useEffect: Hook for running side effects (e.g., code that runs when something changes)
*/

// defining a type for the props (inputs) that AuthModal expects
interface AuthModalProps {
  isOpen: boolean; // bool for if the modal should be visible
  onClose: () => void; //A function that will be executed to close the modal
}
// creates a React functional component
export default function AuthModal({ isOpen, onClose }: AuthModalProps) { //AuthModalProps ensures TypeScript validates the props to match the type definition above
  const [isLogin, setIsLogin] = useState<boolean>(true);
  const modalRef = useRef<HTMLDivElement>(null);
  const [isFailed, setIsFailed] = useState<boolean>(false);
/*
    useState is a React Hook that declares state variables in a functional component. It returns a two-element array
    The state variable (isLogin) : Represents the current state value (e.g., true initially). This is the value you can use in your component.
    The state updater function (setIsLogin) : A function that allows you to update the state variable. React takes care of re-rendering the component when the state is updated
*/
/*
  modalRef allows direct access to the modal DOM element (the container div for the modal). This is useful for detecting if the user clicks outside of the modal
*/

// useEffect runs code after the component renders or when a dependency changes (in this case, isOpen as seen in the end [])
  useEffect(() => {
    if (isOpen) setIsLogin(true); // runs when isOpen changes, if it is true, the login is shown
  }, [isOpen]);

  if (!isOpen) return null; // if is open is false, the model isnt shown

  // this is an arrow function. e: is used to specify that an event object is expected 
  const handleOverlayClick = (e: MouseEvent<HTMLDivElement>) => {
    if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
      onClose();
    }
  };

  /*
    .current gives a reference to the actual DOM element (the inner modal container)
    e.target refers to the specific element the mouse click event occurred on
    .contains(e.target) checks if the clicked element (e.target) is inside the modal (modalRef.current)
    as Node specifies e.target is a Node type to TypeScript
    ? what is a node
    /!... means we get true if the click is outside the modal
    Logic : if modalRef.current exists and the click target (e.target) is not inside the modal , then the condition is true
      This means the user clicked outside the modal
  */
 
// LS - The following bit contains the more important code for what I'm focused on
/*
  Note : handleSubmit is typically used as a event handler for submitting a form in react.
  For example:
    <form onSubmit={handleSubmit}>
      <input type="text" name="example" />
      <button type="submit">Submit</button>
    </form>
*/
/*
  e is the parameter passsed into the function
  async indicates the function runs asyncronously, meaning it performs tasks which take time.
  an example of this would be API calls
*/
  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault(); // stops page from refreshing
    setIsFailed(false)
    const formData = new FormData(e.currentTarget); // new variable of class FormData is created. This is part of the standard Web API included in modern web browsers
    const email = formData.get("email") as string; // gets email from form response
    const password = formData.get("password") as string; // gets password from form response
    const name = isLogin ? undefined : (formData.get("name") as string);// if the form is in login mode, the name is undefine, otherwise the name is a value obtained from the response

    let endpoint = isLogin ? "/api/login" : "/api/signup"; // sets endpoint for backend code (either sign up or login)
    const body = isLogin ? { email, password } : { name: name!, email, password };// creates a json body for the backend
    

    try {
      console.log("Sending data to API");
      const res = await fetch(endpoint, { // sends a request to the server at the end point
        method: "POST", // Post is used since the form submission modifies the server side state
        headers: { "Content-Type": "application/json" }, //indicates it expects a json object returned
        body: JSON.stringify(body), // converts the body to a JSON string to be sent
      });
      if (res.ok) { //res.ok checks if the response is between 200-299
        console.log("Success!");
        onClose(); // closes UI
      } else if (res.status === 401){
        console.log("Incorrect details provided")
        setIsFailed(true)
      } else{
        console.error("Error:", await res.text()); // logs error with error message sent to console
      }
    } catch (error) {// catches any errors (e.g. Not connected to network)
      console.error("Request failed:", error instanceof Error ? error.message : String(error));
    }
  };

  return (
    <div className="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50" onClick={handleOverlayClick}>
      <div ref={modalRef} className="bg-white rounded-lg shadow-lg p-6 w-full max-w-md relative">
        <button onClick={onClose} className="absolute text-xl top-0 right-2 text-gray-500 hover:text-gray-700" aria-label="Close modal">
          ×
        </button>
        <h2 className="text-2xl font-bold text-center mb-4">{isLogin ? "Login" : "Sign Up"}</h2>

        {/* Form */}
        <form onSubmit={handleSubmit} className="space-y-4">
          {!isLogin && (
            <div>
              <label className="block text-sm font-medium text-gray-700">Full Name</label>
              <input
                type="text"
                name="name"
                className="mt-1 w-full p-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                required={!isLogin}
              />
            </div>
          )}
          <div>
            <label className="block text-sm font-medium text-gray-700">Email</label>
            <input
              type="email"
              name="email"
              className="mt-1 w-full p-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
              required
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700">Password</label>
            <input
              type="password"
              name="password"
              className="mt-1 w-full p-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
              required
            />
          </div>
          <div>
            { isFailed && (
              <div>
                <label className="block text-sm font-medium text-red-700">Incorrect email or password</label>
              </div>
            )
            }
          </div>
          <button type="submit" className="w-full bg-blue-600 text-white p-2 rounded-md hover:bg-blue-700 transition">
            {isLogin ? "Login" : "Sign Up"}
          </button>
        </form>

        <p className="mt-4 text-center text-sm">
          {isLogin ? "Need an account?" : "Already have an account?"}{" "}
          <button onClick={() => setIsLogin(!isLogin)} className="text-blue-600 hover:underline">
            {isLogin ? "Sign Up" : "Login"}
          </button>
        </p>
      </div>
    </div>
  );
}