examjam-frontend/components/Header.tsx

"use client";

import React from "react";
import { useRouter } from "next/navigation";
import { BadgeCheck, ChevronLeft, Layers } from "lucide-react";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { useModal } from "@/context/ModalContext";
import { useAuthStore } from "@/stores/authStore";
import { useTimerStore } from "@/stores/timerStore";
import { useExamStore } from "@/stores/examStore";

interface HeaderProps {
  displayUser?: boolean;
  displaySubject?: string;
  displayTabTitle?: string;
}

const Header = ({
  displayUser,
  displaySubject,
  displayTabTitle,
}: HeaderProps) => {
  const router = useRouter();
  const { open } = useModal();
  const { cancelExam } = useExamStore();
  const { stopTimer, timeRemaining } = useTimerStore();
  const { user } = useAuthStore();

  const showExitDialog = () => {
    const confirmed = window.confirm("Are you sure you want to quit the exam?");
    if (confirmed) {
      stopTimer();
      cancelExam();
      router.replace("/categories");
    }
  };

  const handleBackClick = () => {
    router.back();
  };

  // format time from context
  const hours = Math.floor(timeRemaining / 3600);
  const minutes = Math.floor((timeRemaining % 3600) / 60);
  const seconds = timeRemaining % 60;

  return (
    <header className="bg-[#113768] h-[100px] w-full pt-7 px-6 flex items-center justify-between sticky top-0 z-50">
      {displayUser && (
        <div className="flex items-center gap-3">
          <Avatar className="bg-gray-200 w-10 h-10">
            <AvatarFallback className="flex items-center justify-center h-10 text-lg">
              {user?.username ? (
                user.username.charAt(0).toUpperCase()
              ) : (
                <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-500"></div>
              )}
            </AvatarFallback>
          </Avatar>
          <span className="text-md font-bold text-white flex items-center gap-2">
            Hello, {user?.username ? user.username.split(" ")[0] : "User"}{" "}
            <BadgeCheck size={20} color="white" />
          </span>
        </div>
      )}

      {displayTabTitle && (
        <div className="flex items-center gap-3">
          <button onClick={handleBackClick} className="bg-none border-none p-1">
            <ChevronLeft size={24} color="white" />
          </button>
          <span className="text-md font-bold text-white">
            {displayTabTitle}
          </span>
        </div>
      )}

      {displaySubject && (
        <div className="flex items-center gap-3">
          <span className="text-md font-bold text-white">{displaySubject}</span>
        </div>
      )}

      {/* Exam timer header */}
      {timeRemaining > 0 && (
        <div className="flex justify-between w-full items-center">
          <button
            onClick={showExitDialog}
            className="bg-none border-none cursor-pointer p-1 flex items-center justify-center"
          >
            <ChevronLeft size={30} color="white" />
          </button>

          <div className="w-40 h-14 bg-white flex justify-around items-center rounded-2xl ">
            <div className="flex flex-col items-center w-full">
              <span className="font-medium text-md text-[#082E5E]">
                {String(hours).padStart(2, "0")}
              </span>
              <span className="font-medium text-[12px] text-[#082E5E]">
                Hrs
              </span>
            </div>
            <div className="flex flex-col items-center w-full">
              <span className="font-medium text-md text-[#082E5E]">
                {String(minutes).padStart(2, "0")}
              </span>
              <span className="font-medium text-[12px] text-[#082E5E]">
                Mins
              </span>
            </div>
            <div
              className="flex flex-col items-center w-full"
              style={{ borderRight: "none" }}
            >
              <span className="font-medium text-md text-[#082E5E]">
                {String(seconds).padStart(2, "0")}
              </span>
              <span className="font-medium text-[12px] text-[#082E5E]">
                Secs
              </span>
            </div>
          </div>

          <button
            onClick={open}
            className="bg-none border-none cursor-pointer p-1 flex items-center justify-center"
          >
            <Layers size={30} color="white" />
          </button>
        </div>
      )}
    </header>
  );
};

export default Header;