"use client";
import React, { useEffect, useState } from "react";
import Link from "next/link";
import { API, logoutAndClearSession } from "@/app/_lib/api";
import { useBearStore } from "@/app/_lib/store";
import { useRouter } from "next/navigation";

export default function PhoenixTopBar() {
  const [lastName, setLastName] = useState<string | null>(null);
  const [profile,  setProfile]  = useState({ image: "" });
  const count  = useBearStore((state) => state.count);
  const router = useRouter();

  useEffect(() => {
    setLastName(sessionStorage.getItem("last_name"));
  }, []);

  useEffect(() => {
    const token = sessionStorage.getItem("token");
    if (!token) return;
    const fetchProfile = async () => {
      try {
        const { data } = await API.get("auth/api/profile-image-settings/");
        sessionStorage.setItem("profile", data.image);
        setProfile(data);
      } catch (err) {
        console.error("Error fetching profile:", err);
      }
    };
    fetchProfile();
  }, [count]);

  const logout = async () => {
    // FIX: use logoutAndClearSession() so the refresh token is blacklisted
    // on the backend before clearing local state.
    // Old code: clearSession() — left the refresh token valid server-side.
    await logoutAndClearSession();
    router.push("/log-out");
  };

  return (
    <nav className="navbar navbar-top fixed-top navbar-expand" id="navbarDefault">
      <div className="collapse navbar-collapse justify-content-between">
        <div className="navbar-logo">
          <button
            className="btn navbar-toggler navbar-toggler-humburger-icon hover-bg-transparent"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarVerticalCollapse"
            aria-controls="navbarVerticalCollapse"
            aria-expanded="false"
            aria-label="Toggle Navigation"
          >
            <span className="navbar-toggle-icon"><span className="toggle-line" /></span>
          </button>
          <div className="d-flex align-items-center navbar-vertical-toggle">
            <img src={"/Logo.png"} alt="phoenix" width={40} />
          </div>
          <a className="navbar-brand me-1 me-sm-3" href="/private" style={{ marginLeft: "-0.6rem" }}>
            <p className="logo-text ms-2 d-none d-sm-block" style={{ fontSize: "1.53625rem" }}>uclear Software</p>
          </a>
        </div>
        <ul className="navbar-nav navbar-nav-icons flex-row">
          <li className="nav-item dropdown">
            {/* <div className="theme-control-toggle fa-icon-wait px-2">
              <input className="form-check-input ms-0 theme-control-toggle-input" type="checkbox" data-theme-control="phoenixTheme" defaultValue="dark" id="themeControlToggle" />
              <label className="mb-0 theme-control-toggle-label theme-control-toggle-light" htmlFor="themeControlToggle" data-bs-toggle="tooltip" data-bs-placement="left" title="Switch theme">
                <i className="fa-solid fa-moon"></i>
              </label>
              <label className="mb-0 theme-control-toggle-label theme-control-toggle-dark" htmlFor="themeControlToggle" data-bs-toggle="tooltip" data-bs-placement="left" title="Switch theme">
                <i className="fa-solid fa-sun"></i>
              </label>
            </div> */}
          </li>
          <li className="nav-item dropdown">
            <a className="nav-link lh-1 pe-0" id="navbarDropdownUser" href="#!" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false">
              <div className="avatar avatar-l">
                <img className="rounded-circle" src={profile.image || "avatar.png"} alt="" />
              </div>
            </a>
            <div className="dropdown-menu dropdown-menu-end navbar-dropdown-caret py-0 dropdown-profile shadow border" aria-labelledby="navbarDropdownUser">
              <div className="card position-relative border-0">
                <div className="card-body p-0">
                  <div className="text-center pt-4 pb-3">
                    <div className="avatar">
                      <img className="rounded-circle" src={profile.image || "avatar.png"} alt="" />
                    </div>
                    <h4 className="mt-2 text-body-emphasis">{lastName}</h4>
                  </div>
                </div>
                <div className="overflow-auto scrollbar" style={{ height: "10rem" }}>
                  <ul className="nav d-flex flex-column mb-2 pb-1">
                    <li className="nav-item">
                      <Link href="/private/profile" className="dropdown-item">
                        <span className="far fa-user-circle" /> Account Settings
                      </Link>
                    </li>
                  </ul>
                </div>
                <div className="card-footer p-0 border-top border-translucent">
                  <div className="px-3">
                    <button type="button" className="btn btn-phoenix-secondary d-flex flex-center w-100" onClick={logout}>
                      Sign out
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </nav>
  );
}