interstellar_ai/app/components/Login.tsx

import React, { useState, useEffect } from 'react';
import Settings from './Settings'; // Import the Settings component

const Login: React.FC = () => {
  
  // State to handle popup visibility
  const [showLoginPopup, setShowLoginPopup] = useState(false);
  const [showSignUpPopup, setShowSignUpPopup] = useState(false);
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [showSettingsPopup, setShowSettingsPopup] = useState(false);

  // Credentials state
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [accountName, setAccountName] = useState('');
  const [newAccountEmail, setNewAccountEmail] = useState('');
  const [newAccountPassword, setNewAccountPassword] = useState('');
  const [newAccountName, setNewAccountName] = useState('');

  // On component mount, check if there are credentials in localStorage
  useEffect(() => {
    const savedAccountName = localStorage.getItem('accountName');
    const savedAccountEmail = localStorage.getItem('accountEmail');
    const savedAccountPassword = localStorage.getItem('accountPassword');

    // If credentials are found in localStorage, log the user in
    if (savedAccountName && savedAccountEmail && savedAccountPassword) {
      setAccountName(savedAccountName);
      setEmail(savedAccountEmail);
      setPassword(savedAccountPassword);
      setIsLoggedIn(true); // Automatically log in
    }
  }, []);

  // Function to toggle the login popup
  const toggleLoginPopup = () => setShowLoginPopup(!showLoginPopup);

  // Function to toggle the sign-up popup
  const toggleSignUpPopup = () => {
    setShowSignUpPopup(!showSignUpPopup);
    setShowLoginPopup(false);
  };

  // Function to handle login
  const handleLogin = () => {
    const savedAccountEmail = localStorage.getItem('accountEmail');
    const savedAccountPassword = localStorage.getItem('accountPassword');
    const savedAccountName = localStorage.getItem('accountName');

    if (
      (email === savedAccountEmail || accountName === savedAccountName) &&
      password === savedAccountPassword
    ) {
      setIsLoggedIn(true); // Successful login
      setShowLoginPopup(false); // Close the login popup
      // Save credentials to localStorage (optional in case of changes)
      localStorage.setItem('accountName', savedAccountName || accountName);
      localStorage.setItem('accountEmail', savedAccountEmail || email);
      localStorage.setItem('accountPassword', savedAccountPassword || password);
    } else {
      alert('Incorrect credentials');
    }
  };

  // Function to handle account creation
  const handleCreateAccount = () => {
    localStorage.setItem('accountName', newAccountName);
    localStorage.setItem('accountEmail', newAccountEmail);
    localStorage.setItem('accountPassword', newAccountPassword);
    alert('Account created successfully! You can now log in.');
    toggleSignUpPopup(); // Close sign-up popup
  };

  // Function to toggle the settings popup
  const toggleSettingsPopup = () => setShowSettingsPopup(!showSettingsPopup);

  return (
    <div>
      {/* Login or Settings Button */}
      <button className='header-login-button' onClick={isLoggedIn ? toggleSettingsPopup : toggleLoginPopup}>
        {isLoggedIn ? <img src="" alt="Settings" /> : 'Log In'}
      </button>

      {/* Conditional rendering of the Login Popup */}
      {showLoginPopup && (
        <div className="popup-overlay">
          <div className="popup-content">
            <h2>Log In</h2>

            {/* Close Button */}
            <button className="close-popup" onClick={toggleLoginPopup} aria-label="Close popup">
              Close
            </button>

            {/* Name or Email Input */}
            <div>
              <input
                type="text"
                placeholder="Name or Email"
                value={email || accountName} // Display whichever is set
                onChange={(e) => {
                  const input = e.target.value;
                  setEmail(input); // Update both email and accountName states
                  setAccountName(input);
                }}
              />
            </div>

            {/* Password Input */}
            <div>
              <input
                type="password"
                placeholder="Password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
              />
            </div>

            {/* Log In Button */}
            <div>
              <button className="log-into-account" onClick={handleLogin}>Log In</button>
            </div>

            {/* Text for creating an account */}
            <p>
              Don't have an account yet? Create one{' '}
              <span
                style={{ color: 'blue', cursor: 'pointer' }}
                onClick={toggleSignUpPopup}
              >
                here
              </span>
            </p>
          </div>
        </div>
      )}

      {/* Conditional rendering of the Sign-Up Popup */}
      {showSignUpPopup && (
        <div className="popup-overlay">
          <div className="popup-content">
            <h2>Create Account</h2>

            {/* New Account Email Input */}
            <div>
              <input
                type="text"
                placeholder="Email"
                value={newAccountEmail}
                onChange={(e) => setNewAccountEmail(e.target.value)}
              />
            </div>

            {/* New Account Name Input */}
            <div>
              <input
                type="text"
                placeholder="Name"
                value={newAccountName}
                onChange={(e) => setNewAccountName(e.target.value)}
              />
            </div>

            {/* New Account Password Input */}
            <div>
              <input
                type="password"
                placeholder="Password"
                value={newAccountPassword}
                onChange={(e) => setNewAccountPassword(e.target.value)}
              />
            </div>

            {/* Create Account Button */}
            <div>
              <button className="create-account" onClick={handleCreateAccount}>Create Account</button>
            </div>

            {/* Close Button */}
            <button className="close-popup" onClick={toggleSignUpPopup} aria-label="Close popup">
              Close
            </button>
          </div>
        </div>
      )}

      {/* Conditional rendering of the Settings Popup */}
      {showSettingsPopup && <Settings closeSettings={toggleSettingsPopup} accountName={accountName} />}
    </div>
  );
};

export default Login;