"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import useNavigate from "@/hooks/useNavigate";
import { useProfile } from "@/context/ProfileContext";
import { assetPath } from "@/utils/assetPath";
import { useGeneralSettings } from "@/context/GeneralSettingsContext";
import { API_BASE_IMAGE_URL } from "config";
import { useState } from "react";

function isActivePath(pathname, href, exact = false) {
  return exact
    ? pathname === href
    : pathname === href || pathname?.startsWith(`${href}/`);
}

export default function Sidebar() {
  const { settings, loading } = useGeneralSettings();
  const pathname = usePathname();
  const navigate = useNavigate();
  const { profile } = useProfile();
  const [aluOpen, setAluOpen] = useState(false);

  const logout = () => {
    window.localStorage.clear();
    navigate("/", { replace: true });
  };

  const logoSrc = settings?.logo
    ? API_BASE_IMAGE_URL + settings.fav_icon
    : assetPath("/assets/images/jury_intel_logo.png");

  const toggleAlu = () => {
    const isMobile = window.innerWidth <= 991;
    const bodyClass = isMobile ? "opensdebar" : "deskopen";
    if (aluOpen) {
      document.body.classList.remove(bodyClass);
    } else {
      document.body.classList.add(bodyClass);
    }
    setAluOpen((prev) => !prev);
  };

  return (
    <div className="sidebar">
      <div className="sdebarlgo">
        {!aluOpen ? (
          <div className="d-flex align-items-center gap-3">
            <Link href="/dashboard">
              <img
                src={assetPath("/assets/images/sidebarlgo.png")}
                alt="Jury Intel"
              />
            </Link>
            <button className="toggle-nav" onClick={toggleAlu}>
              <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g id="Menu / Menu_Alt_02">
                  <path id="Vector" d="M11 17H19M5 12H19M11 7H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                </g>
              </svg>
            </button>
          </div>
        ) : (
          <div className="d-flex sidebar-lg">
            <Link href="/dashboard">
              <img
                src={assetPath("/assets/images/sidebar-logo-icon.png")}
                alt="Jury Intel"
              />
            </Link>
            <button className="toggle-nav" onClick={toggleAlu}>
              <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M12.2929 4.29289C12.6834 3.90237 13.3166 3.90237 13.7071 4.29289L20.7071 11.2929C21.0976 11.6834 21.0976 12.3166 20.7071 12.7071L13.7071 19.7071C13.3166 20.0976 12.6834 20.0976 12.2929 19.7071C11.9024 19.3166 11.9024 18.6834 12.2929 18.2929L17.5858 13H4C3.44772 13 3 12.5523 3 12C3 11.4477 3.44772 11 4 11H17.5858L12.2929 5.70711C11.9024 5.31658 11.9024 4.68342 12.2929 4.29289Z" fill="currentColor" />
              </svg>
            </button>
          </div>
        )}
      </div>

      <div className="sidebaritem">
        <ul>
          <li
            className={
              isActivePath(pathname, "/dashboard", true) ? "activeitm" : ""
            }
          >
            <Link href="/dashboard">
              <i>
                <img
                  src={assetPath("/assets/images/sidebaritem_icon1.png")}
                  alt=""
                />
              </i>
              <span>Dashboard</span>
            </Link>
          </li>

          <li
            className={isActivePath(pathname, "/case-list") ? "activeitm" : ""}
          >
            <Link href="/case-list">
              <i>
                <img
                  src={assetPath("/assets/images/sidebaritem_icon2.png")}
                  alt=""
                />
              </i>
              <span>All Cases</span>
            </Link>
          </li>

          <li className={isActivePath(pathname, '/juror-management') ? 'activeitm' : ''}>
            <Link href="/juror-management">
              <i><img src={assetPath('/assets/images/sidebaritem_icon2.png')} alt="" /></i>
              <span>Juror Management</span>
            </Link>
          </li>

          {profile?.roles?.includes(5) && (
            <li className={isActivePath(pathname, '/comprehensive-report') ? 'activeitm' : ''}>
              <Link href="/comprehensive-report">
                <i><img src={assetPath('/assets/images/sidebaritem_icon2.png')} alt="" /></i>
                <span>Comprehensive Report</span>
              </Link>
            </li>
          )}

          {/* {profile?.roles?.includes(5) && (
            <li className={isActivePath(pathname, '/user-management', true) ? 'activeitm' : ''}>
              <Link href="/user-management">
                <i><img src={assetPath('/assets/images/sidebaritem_icon3.png')} alt="" /></i>
                User Managements
              </Link>
            </li>
          )} */}

          {profile?.roles?.includes(5) && (
            <li
              className={
                isActivePath(pathname, "/user-management", true)
                  ? "activeitm"
                  : ""
              }
            >
              <Link href="/user-management">
                <i>
                  <img
                    src={assetPath("/assets/images/sidebaritem_icon3.png")}
                    alt=""
                  />
                </i>
                <span>User Managements</span>
              </Link>
            </li>
          )}

          <li
            className={
              isActivePath(pathname, "/profile-setting", true)
                ? "activeitm"
                : ""
            }
          >
            <Link href="/profile-setting">
              <i>
                <img
                  src={assetPath("/assets/images/sidebaritem_icon4.png")}
                  alt=""
                />
              </i>
              <span>Settings</span>
            </Link>
          </li>

          <li>
            <Link
              href="#"
              className="sidebarLogout"
              onClick={(e) => {
                e.preventDefault();
                logout();
              }}
            >
              <i>
                <img
                  src={assetPath("/assets/images/sidebaritem_icon5.png")}
                  alt=""
                />
              </i>
              <span>Logout</span>
            </Link>
          </li>
        </ul>
      </div>

      <div className="userprofle">
        <div className="media">
          <figure>
            <img
              src={
                profile?.details?.user_image ||
                assetPath("/assets/images/userimge.png")
              }
              alt={profile?.details?.full_name || "User"}
            />
          </figure>

          <div className="media-object">
            <h3>{profile?.details?.full_name}</h3>
            <p>
              Logged in as{" "}
              {profile?.role_details?.map((role) => role.name).join(", ")}
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}
