interstellar_ai/app/components/Login.tsx

import React, { useState } 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(''); // Set the account name
  const [newAccountEmail, setNewAccountEmail] = useState('');
  const [newAccountPassword, setNewAccountPassword] = useState('');
  const [newAccountName, setNewAccountName] = useState('');

  // Fixed credentials
  const fixedEmail = '';
  const fixedPassword = '';
  const fixedAccount = '';

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

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

  // Function to handle login
  const handleLogin = () => {
    if ((email === fixedEmail || accountName === fixedAccount) && password === fixedPassword) {
      setIsLoggedIn(true); // Successful login
      setShowLoginPopup(false); // Close the login popup
    } else {
      alert('Incorrect credentials');
    }
  };

  // Function to handle account creation
  const handleCreateAccount = () => {
    console.log('New Account Created:', newAccountEmail, 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 ? '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}
                onChange={(e) => setEmail(e.target.value)}
              />
            </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) => setAccountName(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;