"use client"; // This MUST be the very first line of the file

import React, { useState, useEffect } from "react";
import "./LoginModal.scss"; // Adjust path based on your actual structure
import { clearAuthMessage } from "@/app/redux/auth/authSlice";

// Define the props interface for LoginModal
type LoginModalProps = {
  onLogin: (email: string, password: string) => Promise<boolean>;
  authMessage: string;
  clearAuthMessage: () => void;
};
// LoginModal component
export default function LoginModal({ onLogin }: LoginModalProps) {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [isLoading, setIsLoading] = useState(false);

  console.log("LoginModal rendered"); // Debugging log to check if the component renders

  // Effect to clear authentication messages when email or password inputs change
  useEffect(() => {
    clearAuthMessage();
  }, [email, password]); // Dependency array ensures effect runs when these change

  // Handler for form submission
  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault(); // Prevent default form submission behavior
    setIsLoading(true); // Set loading state to true
    await onLogin(email, password); // Call the passed onLogin function (now uncommented)
    setIsLoading(false); // Set loading state back to false after login attempt
  };
  return (
    // The content of the login modal, without the modal overlay/wrapper
    <form onSubmit={handleSubmit} className="login-form">
      {/* Email input field */}
      <div className="login-form__group">
        <label htmlFor="email" className="login-form__label">
          Email Address
        </label>
        <input
          type="email"
          id="email"
          className="login-form__input"
          placeholder="admin@example.com"
          value={email}
          onChange={e => setEmail(e.target.value)}
          required
          disabled={isLoading}
        />
      </div>

      {/* Password input field */}
      <div className="login-form__group">
        <label htmlFor="password" className="login-form__label">
          Password
        </label>
        <input
          type="password"
          id="password"
          className="login-form__input"
          placeholder="password123"
          value={password}
          onChange={e => setPassword(e.target.value)}
          required
          disabled={isLoading}
        />
      </div>

      <button
        type="submit"
        className="login-form__button"
        disabled={isLoading} // Disable button while loading
      >
        {isLoading ? (
          <svg
            className="login-form__spinner"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
          >
            {" "}
            {/* BEM class name */}
            <circle
              className="opacity-25"
              cx="12"
              cy="12"
              r="10"
              stroke="currentColor"
              strokeWidth="4"
            ></circle>
            <path
              className="opacity-75"
              fill="currentColor"
              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
            ></path>
          </svg>
        ) : (
          "Login" // Button text for normal state
        )}
      </button>
    </form>
  );
}