"use client";

import { OPERATIONS_SIDEBAR_ITEMS, ADMIN_SIDEBAR_ITEMS } from "@/constants/sidebarConstant";
import SidebarItem from "./sideBarItem";
import { ShieldCheck, Activity, ChevronDown, ChevronsLeft } from "lucide-react";
import { useSession, signOut } from "next-auth/react";
import { useNav } from "./context/navContext";


export default function Sidebar() {
  const { data: session } = useSession();
  const { mode, setMode } = useNav();

  const currentItems = mode === "operations" ? OPERATIONS_SIDEBAR_ITEMS : ADMIN_SIDEBAR_ITEMS;

  return (
    <aside className="fixed  bg-[#071321] text-white 
    h-screen w-64 overflow-y-auto [scrollbar-color:#1b2a40_#071321] 
    [scrollbar-width:thin]">
      {/* App Logo */}
      <div className="flex items-center gap-2 px-4 pt-3 pb-3">
        <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-[#3de0c4] font-bold text-[#05111d] text-sm">
          K
        </div>
        <span className="text-sm font-bold tracking-tight text-white">
          KA<span className="text-[#3de0c4]">FM</span>
        </span>
      </div>

      <hr className="border-[#142538]" />

      {/* Mode Switcher Buttons */}
      <div className="mx-4 my-4 flex rounded-xl bg-[#091624] p-1 border border-[#142538]">
        <button
          onClick={() => setMode("operations")}
          className={`flex flex-1 items-center justify-center gap-1 rounded-lg py-1.5 text-xs font-bold transition-all ${
            mode === "operations"
              ? "bg-[#3de0c4] text-black shadow-sm"
              : "text-slate-400 hover:text-white"
          }`}
        >
          <Activity size={14} />
          Operations
        </button>

        <button
          onClick={() => setMode("admin")}
          className={`flex flex-1 items-center justify-center gap-1 rounded-lg py-1.5 text-xs font-bold transition-all ${
            mode === "admin"
              ? "bg-[#3de0c4] text-black shadow-sm"
              : "text-slate-400 hover:text-white"
          }`}
        >
          <ShieldCheck size={14} />
          Admin
        </button>
      </div>

      <p className="px-4 text-[10px] font-semibold uppercase tracking-wider text-slate-500">
        {mode === "operations" ? "Tenant Runtime" : "System Platform"}
      </p>

      {/* Dynamic Navigation Items */}
      <div className="py-1">
        {currentItems.map((item) => (
          <SidebarItem key={item.title} item={item} />
        ))}
      </div>
<div  className="mt-auto sticky top-200 bottom-5">


      <div className="m-2 border border-[#0f1f30] rounded-xl px-4 py-2">
        <button className="flex w-full items-center gap-2 
          text-sm text-slate-400 hover:bg-[#091624] hover:text-white transition-colors">
          <ChevronsLeft size={16} />
          Minimise menu
        </button>
      </div>

      {/* Profile Card */}
      <div className="px-2 m-2 rounded-xl border border-[#142538] bg-[#071321] p-2.5">
        <div className="flex items-center justify-between">
          <div className="flex gap-2.5 items-center">
            <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-cyan-600/50 bg-[#0d2430] text-cyan-400 text-xs font-bold">
              DT
            </div>
            <div className="min-w-0 leading-tight">
              <h4 className="font-semibold text-xs text-white truncate">{session?.user?.name || "User"}</h4>
              <p className="text-[11px] text-slate-500 truncate">
                {session?.user?.email || "user@example.com"}
              </p>
            </div>
          </div>
          <ChevronDown
            className="-rotate-90 text-slate-500 shrink-0 cursor-pointer"
            size={14}
            onClick={() => signOut({ callbackUrl: "/login" })}
          />
        </div>
      </div>
      </div>
    </aside>
  );
}