import { Client, Account, ID } from "appwrite";
import { useEffect, useState } from "react";

export default function Home() {
  const client = new Client();

  //Initialize the SDK
  client
    .setEndpoint("<https://cloud.appwrite.io/v1>")
    .setProject("123abc"); // Replace "123abc" with your Project ID

  const account = new Account(client);

  const [isAuthenticated, setIsAuthenticated] = useState(false);   //State to track user authentication status
  const [currentUser, setCurrentUser] = useState("");   //State to track the current user

  //UseEffect to fetch the account data of authenticated user.
  useEffect(() => {
    getUser();
  }, []);

  //Function to get the current user.
  const getUser = () =>{
    const promise = account.get();
    promise
      .then(function (response) {
        // This function will execute if the user is authenticated.
        console.log(response);
        setCurrentUser(response.email);
        setIsAuthenticated(true);
      })
      .catch(function (error) {
        // This function will execute if the user is not authenticated.
        console.log(error);
      });
  }

  //Function to create a new account.
  const createAccount = () => {
    const email = "[email protected]";
    const password = "password";
    const name = "username";

    const promise = account.create(ID.unique(), email, password, name);

    promise.then(
      function (response) {
        console.log(response);
        // If the user account is created, create a session
        createSession(email, password);
      },
      function (error) {
        window.alert(error.message); 
      }
    );
  };

  //Function to create session for the user/ Log in the user.
  const createSession = (email, password) => {
    const promise = account.createEmailSession(email, password);

    promise.then(
      function (response) {
        console.log(response); 
        getUser();
      },
      function (error) {
        window.alert(error.message);
      }
    );
  };

  //Delete the session of the user/ Log out the user.
  const logoff = () => {
    const promise = account.deleteSession("current");

    promise.then(
      function (response) {
        console.log(response); 
        setIsAuthenticated(false);
      },
      function (error) {
        console.log(error);
      }
    );
  };

  return (
    <>
      <div className="flex items-center justify-center h-screen">
        {isAuthenticated ? (
          <div className="flex flex-col justify-center">
             <p>You are authenticated as <span className="font-medium">{currentUser}</span></p>
            <button className="p-3 bg-blue-300 my-3" onClick={logoff}>Logout</button>
          </div>
        ) : (
          <div className="flex flex-col justify-center">
            <p className="text-center">You are not authenticated</p>
            <button className="p-3 bg-blue-300 my-3"  onClick={createAccount}>
              Signup
            </button>
            <button className="p-3 bg-blue-300"  onClick={() => createSession("[email protected]", "password")}>
              Login
            </button>
          </div>
        )}
      </div>
    </>
  );
}