import { Client, Account, ID } from "appwrite";
import { useSearchParams } from "next/navigation";

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 it with your ProjectID

  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

  const urlParams = new URLSearchParams(window.location.search);

  useEffect(() => {
    // If "userId" parameter is present in the URL, it can be concluded that the user was redirected here from the verfication mail.
    // In this case, create a session for the user. 
    if(urlParams.get("userId")){
      const userId = urlParams.get("userId");
      const secret = urlParams.get("secret");
      const promise = account.updateMagicURLSession(userId, secret);

      promise.then(function (response) {
          console.log(response); 
          getUser();
      }, function (error) {
          console.log(error); // Failure
      });
    }else{
      // Else get the current user.
      getUser();
    }

  }, [urlParams]);

  //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 magic url session.
  const createMagicURLSession = () => {
    const email = "[email protected]";
    
    const promise = account.createMagicURLSession(ID.unique(), email, "<http://localhost:3000>");

    promise.then(
      function (response) {
        console.log(response);
        window.alert("Verification email sent");
        //Update the user to check their inbox and click on the verification link to login.
      },
      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 w-100"  onClick={createMagicURLSession}>
              Login with Magic Url
            </button>
          </div>
        )}
      </div>
    </>
  );
}