import { useEffect, useState } from 'react';
import { useMsalLogin } from '../../auth/Hooks/use-msal-login';
import { useUserInfo } from '../../auth/Hooks/use-user-info';
import { useNavigate } from 'react-router-dom'; // Use useNavigate instead of useHistory

function RegisterOrganisation() {
  const { login, isLoggingIn, error } = useMsalLogin();
  const user = useUserInfo();
  console.log(user);
  const navigate = useNavigate(); // Initialize useNavigate hook

  const [userName, setUserName] = useState("");
  const [userEmail, setUserEmail] = useState("");
  const [userAzureID, setUserAzureID] = useState("");
  const [tenantID, setTenantID] = useState("");

  const [organisationName, setOrganisationName] = useState("");
  const [userPosition, setUserPosition] = useState("");
  const [organisationSize, setOrganisationSize] = useState("");
  const [country, setCountry] = useState("");
  const [phoneNumber, setPhoneNumber] = useState("");

  useEffect(() => {
    if (user?.name) {setUserName(user.name);}
    if (user?.email) {setUserEmail(user.email);}
    if (user?.oid) {setUserAzureID(user.oid);}
    if (user?.tenantId) {setTenantID(user.tenantId);}
  }, [user]);
  
  const handleRedirectToPricingSetup = () => {
    // Use navigate to redirect to the pricing setup page
    navigate('/register-pricing', {
      state: {
        user: {
          userName,
          userEmail,
          userAzureID,
          userPosition,
          phoneNumber
        },
        organisation: {
          organisationName,
          organisationSize,
          country,
          tenantID,
        }
      }
    });
  };

  return (
    <div className="register-form">
      <h1>Register Your Organisation</h1>
      {!user?.name && (
        <div className="login-section">
          <p>Great! Please log in with MSAL:</p>
          <button onClick={login} disabled={isLoggingIn} className="login-button">
            {isLoggingIn ? "Logging in..." : "Login with Microsoft"}
          </button>
          {error && <p style={{ color: "red" }}>Login error: {error}</p>}
        </div>
      )}

      {user?.name && (
        <div className="user-info-section">
          <p>Hello {user.name}</p>
          <p>These are your information:</p>
          <ul>
            <li>Name: {user.name}</li>
            <li>Email: {user.email}</li>
            <li>Azure ID: {user.oid}</li>
            <li>Tenant ID: {user.tenantId}</li>
          </ul>
          <p>Now, please enter your organisation's information:</p>

          <form className="organisation-form">
            <div className="form-group">
              <label htmlFor="organisationName">Organisation Name:</label>
              <input
                type="text"
                id="organisationName"
                value={organisationName}
                onChange={(e) => setOrganisationName(e.target.value)}
                placeholder="Enter your organisation's name"
                required
              />
            </div>

            <div className="form-group">
              <label htmlFor="userPosition">Your Position:</label>
              <input
                type="text"
                id="userPosition"
                value={userPosition}
                onChange={(e) => setUserPosition(e.target.value)}
                placeholder="Enter your position"
                required
              />
            </div>

            <div className="form-group">
              <label htmlFor="organisationSize">Organisation Size:</label>
              <input
                type="text"
                id="organisationSize"
                value={organisationSize}
                onChange={(e) => setOrganisationSize(e.target.value)}
                placeholder="Enter your organisation's size"
                required
              />
            </div>

            <div className="form-group">
              <label htmlFor="country">Country:</label>
              <input
                type="text"
                id="country"
                value={country}
                onChange={(e) => setCountry(e.target.value)}
                placeholder="Enter your country"
                required
              />
            </div>

            <div className="form-group">
              <label htmlFor="phoneNumber">Phone Number:</label>
              <input
                type="tel"
                id="phoneNumber"
                value={phoneNumber}
                onChange={(e) => setPhoneNumber(e.target.value)}
                placeholder="Enter your phone number"
                required
              />
            </div>

            {/* Button to navigate to pricing setup page */}
            <button
              type="button"
              onClick={handleRedirectToPricingSetup}
              className="redirect-button"
            >
              Go to Pricing Setup
            </button>
          </form>
        </div>
      )}
    </div>
  );
}

export default RegisterOrganisation;