// 'use client'
// import { useProfile } from "@/context/ProfileContext";
// import { assetPath } from "../../utils/assetPath";

// import React from 'react';
// import useNavigate from '@/hooks/useNavigate';
// import Link from "next/link";

// export default function Header({ title }) {
//   const navigate = useNavigate();
//   const { profile } = useProfile();

//   return (
//     <div className="dashboardhder">
//       <div className="lefthder">
//         <button className="menuSdebar" onClick={() => { document.body.classList.toggle('opensdebar') }}><img src={assetPath("/assets/images/menus.png")} alt="menu" /></button>
//         <h1>{title}</h1>
//       </div>
//       <div className="dashboardhderrght">
//         {/* <div className="hdercrch">
//           <input type="text" placeholder="Search cases...." />
//           <input type="submit" value="" />
//         </div>
//         <button className="serchcrcle" onClick={() => { document.body.classList.toggle('srchopen') }}><img src={assetPath("/assets/images/searchicn.png")} alt="" /></button> */}
//         {profile?.roles?.includes(5) && <button className="adduser" onClick={() => navigate('/add-new-user')}><i><img src={assetPath("/assets/images/plus_icn.png")} alt="+" /></i>Add Team Member</button>}
//         {profile?.roles?.includes(5) && <button className="cretecse" onClick={() => navigate('/create-new-case')}><i><img src={assetPath("/assets/images/plus_icn.png")} alt="+" /></i>Create Case</button>}
//         <div className="notifiction">
//           <div className="dropdown">
//             <button className="dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
//               <img src={assetPath("/assets/images/notifiction_icn.png")} alt="notif" />
//             </button>
//             <ul className="dropdown-menu">
//               <li><Link className="dropdown-item" href="#">Aviable</Link></li>
//               <li><Link className="dropdown-item" href="#">Busy</Link></li>
//             </ul>
//           </div>
//         </div>

//       </div>
//     </div>
//   )
// }

"use client";
import { useProfile } from "@/context/ProfileContext";
import { assetPath } from "../../utils/assetPath";

import React from "react";
import useNavigate from "@/hooks/useNavigate";
import { updateProfile } from "@/services/profileService";
import { toast } from "react-toastify";
import Link from "next/link";

export default function Header({ title }) {
  const navigate = useNavigate();
  const { profile, refreshProfile } = useProfile();

  const currentStatus = profile?.details?.status || "available";

  const handleStatusChange = async (status) => {
    if (status === currentStatus) return;
    try {
      const { user_image, ...restDetails } = profile.details || {};

      const payload = {
        username: profile.username,
        email: profile.email,
        details: {
          ...restDetails,
          status,
        },
      };

      await updateProfile(payload);
      toast.success("Status updated successfully!");
      refreshProfile();
    } catch (err) {
      console.error(err);
      toast.error("Failed to update status");
    }
  };

  const handleLogout = () => {
    // Clear auth (adjust based on your project)
    localStorage.clear(); // or remove specific token
    // sessionStorage.clear();

    toast.success("Logged out successfully");

    // redirect to login page
    navigate("/login");
  };

  return (
    <div className="dashboardhder">
      <div className="lefthder">
        <button
          className="menuSdebar"
          onClick={() => {
            document.body.classList.toggle("opensdebar");
          }}
        >
          <img src={assetPath("/assets/images/menus.png")} alt="menu" />
        </button>
        <h1>{title}</h1>
      </div>
      <div className="dashboardhderrght">
        {profile?.roles?.includes(5) && (
          <button className="adduser" onClick={() => navigate("/add-new-user")}>
            <i>
              <img src={assetPath("/assets/images/plus_icn.png")} alt="+" />
            </i>
            Add Team Member
          </button>
        )}
        {profile?.roles?.includes(5) && (
          <button
            className="cretecse"
            onClick={() => navigate("/create-new-case")}
          >
            <i>
              <img src={assetPath("/assets/images/plus_icn.png")} alt="+" />
            </i>
            Create Case
          </button>
        )}
        <div className="notifiction">
          <div className="dropdown">
            <button
              className={`dropdown-toggle ${currentStatus === "available" ? "avaiable" : "notavaiable"}`}
              type="button"
              data-bs-toggle="dropdown"
              aria-expanded="false"
            >
              <img
                src={
                  profile?.details?.user_image
                    ? profile.details.user_image
                    : assetPath("/assets/images/userimge.png")
                }
                alt="notif"
              />
              <span className={`status-dot ${currentStatus}`}></span>
            </button>
            <ul className="dropdown-menu">
              <li>
                <button
                  type="button"
                  className={`dropdown-item available ${currentStatus === "available" ? "active-status" : ""}`}
                  onClick={() => handleStatusChange("available")}
                >
                  Available
                </button>
              </li>
              <li>
                <button
                  type="button"
                  className={`dropdown-item busy ${currentStatus === "busy" ? "active-status" : ""}`}
                  onClick={() => handleStatusChange("busy")}
                >
                  Busy
                </button>
              </li>
              <li>
                <button
                  type="button"
                  className="dropdown-item d-flex align-items-center gap-2 logout"
                  onClick={handleLogout}
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    fill="currentColor"
                    class="bi bi-box-arrow-right"
                    viewBox="0 0 16 16"
                  >
                    <path
                      fill-rule="evenodd"
                      d="M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0z"
                    />
                    <path
                      fill-rule="evenodd"
                      d="M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708z"
                    />
                  </svg>
                  Logout
                </button>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
}
