"use client";
import { LayoutDashboard, Settings, Shield, LogOut } from "lucide-react";
import React from "react";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { RootState, AppDispatch } from "@/store/store";
import { useSelector, useDispatch } from "react-redux";
import { logoutUser } from "@/store/slices/authSlice";

const HeaderNav = () => {

  const canChangeKeys = useSelector((state: RootState) => state.userConfig.can_change_keys);
  const user = useSelector((state: RootState) => state.auth.user);
  const dispatch = useDispatch<AppDispatch>();
  const router = useRouter();
  const pathname = usePathname();
  const isAdmin = user?.role === 'super_admin' || user?.role === 'client_admin';

  const handleLogout = async () => {
    await dispatch(logoutUser());
    router.push('/login');
  };

  return (
    <div className="flex items-center gap-2">

      <Link
        href="/dashboard"
        prefetch={false}
        className="flex items-center gap-2 px-3 py-2 text-white hover:bg-primary/80 rounded-md transition-colors outline-none"
        role="menuitem"
      >
        <LayoutDashboard className="w-5 h-5" />
        <span className="text-sm font-medium font-inter">
          Dashboard
        </span>
      </Link>
      {canChangeKeys && (
        <Link
          href="/settings"
          prefetch={false}
          className="flex items-center gap-2 px-3 py-2 text-white hover:bg-primary/80 rounded-md transition-colors outline-none"
          role="menuitem"
        >
          <Settings className="w-5 h-5" />
          <span className="text-sm font-medium font-inter">
            Settings
          </span>
        </Link>
      )}
      {isAdmin && (
        <Link
          href="/admin"
          prefetch={false}
          className="flex items-center gap-2 px-3 py-2 text-white hover:bg-primary/80 rounded-md transition-colors outline-none"
          role="menuitem"
        >
          <Shield className="w-5 h-5" />
          <span className="text-sm font-medium font-inter">
            Admin
          </span>
        </Link>
      )}

      <button
        onClick={handleLogout}
        className="flex items-center gap-2 px-3 py-2 text-white/70 hover:text-white hover:bg-primary/80 rounded-md transition-colors outline-none"
        role="menuitem"
      >
        <LogOut className="w-5 h-5" />
        <span className="text-sm font-medium font-inter">
          Sign out
        </span>
      </button>
    </div>
  );
};

export default HeaderNav;
