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

const Login: React.FC = () => {
  // State to handle popup visibility
  const [showPopup, setShowPopup] = useState(false);
  const [showSignInPopup, setShowSignInPopup] = 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('Pluto'); // Set the account name

  // Function to toggle the popup
  const togglePopup = () => setShowPopup(!showPopup);

  // Function to toggle the sign-in popup
  const toggleSignInPopup = () => {
    setShowSignInPopup(!showSignInPopup);
    setShowPopup(false); // Hide login popup when opening the sign-in popup
  };

  // Function to handle login
  const handleLogin = () => {
    if ((email === 'pluto@imareal.planet' || accountName === 'Pluto') && password === 'fuckTheSun1234') {
      setIsLoggedIn(true); // Successful login
      setShowSignInPopup(false); // Close the sign-in popup
    } else {
      alert('Incorrect credentials');
    }
  };

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

  return (
    <div>
      {/* Login or Settings Button */}
      <div className="login-button">
        <button onClick={isLoggedIn ? toggleSettingsPopup : togglePopup}>
          {isLoggedIn ? 'Settings' : 'Register'}
        </button>
      </div>

      {/* Conditional rendering of the initial Popup */}
      {showPopup && (
        <div className="popup-overlay">
          <div className="popup-content">
            <h2>Register</h2>

            {/* Name or Email Input */}
            <div>
              <input
                type="text"
                placeholder="Name or Email"
                onChange={(e) => setEmail(e.target.value)}
              />
            </div>

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

            {/* Create Account and Sign In buttons */}
            <div className="popup-footer">
              <button onClick={() => alert('Create Account clicked')}>
                Create Account
              </button>
              <p>
                Already have an account? Sign in {' '}
                <span
                  style={{ color: 'blue', cursor: 'pointer' }}
                  onClick={toggleSignInPopup}
                >
                  here
                </span>
              </p>
            </div>

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

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

            {/* Name or Email Input */}
            <div>
              <input
                type="text"
                placeholder="Name or Email"
                onChange={(e) => setEmail(e.target.value)}
              />
            </div>

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

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

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

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

export default Login;