"use client";

import React from "react";
import Navigation from "./Navigation";
import ModalSignUp from "@/sections/ModalSignUp/ModalSignUp";
import ModalSignIn from "@/sections/ModalSignIn/ModalSignIn";
import { logout } from "@/app/(auth)/actions";
import { useRouter } from "next/navigation";
import { getAuthCookie } from "@/app/(auth)/actions";
import { SourceModal } from "@/types";
import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
import pb from "@/lib/pocketbase";

interface HeaderProps {
  isUserLoggedIn: boolean;
}

function Header({ isUserLoggedIn }: HeaderProps) {
  return (
    <header className="absolute w-full z-30">
      <div className="max-w-5xl mx-auto px-4 sm:px-6 md:pt-6">
        <div className="flex items-center justify-between h-20">
          <Navigation isUserLoggedIn={isUserLoggedIn} />

          {/* Desktop navigation */}
          <nav className=" md:flex md:grow">
            {/* Desktop sign in links */}
            <div className="flex flex-row grow items-center pr-2">
              {!isUserLoggedIn ? (
                <>
                  <button
                    onClick={() =>
                      (async (router?: AppRouterInstance) => {
                        console.log("firing");
                        const authCookie = await getAuthCookie();
                        pb.authStore.loadFromCookie(authCookie || "");
                        if (!authCookie || !pb.authStore.isValid) {
                          console.log("firing");
                          document
                            .getElementById("sign-in-modal")
                            ?.setAttribute("name", "signIn");
                          document.getElementById("sign-in-modal")?.click();
                        } else {
                          router?.push("/account");
                        }
                      })()
                    }
                    className={`btn-sm cursor-pointer rounded py-5 w-24 text-primary hover:text-primary/70`}
                  >
                    Sign In
                  </button>
                  <button
                    onClick={() => {
                      document
                        .getElementById("sign-up-modal")
                        ?.setAttribute("name", SourceModal.SignUp);
                      document
                        .getElementById("sign-up-modal")
                        ?.removeAttribute("price_id");
                      document.getElementById("sign-up-modal")?.click();
                    }}
                    className={`btn-sm cursor-pointer py-5 w-24 text-primary-content ml-3 bg-primary hover:bg-primary/70`}
                  >
                    Sign Up
                  </button>
                </>
              ) : (
                <button
                  onClick={() => logout()}
                  className={`btn-sm cursor-pointer py-5 w-24 text-white ml-3 bg-error hover:bg-error/70`}
                >
                  Logout
                </button>
              )}
            </div>
          </nav>
        </div>
      </div>
      <ModalSignIn />
      <ModalSignUp />
    </header>
  );
}

export default Header;