import { Link, useNavigate } from "@tanstack/react-router";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { api } from "../../api/client";

export function NavBar() {
  const navigate = useNavigate();
  const queryClient = useQueryClient();

  const { data: user } = useQuery({
    queryKey: ["me"],
    queryFn: api.me.get,
    retry: false,
  });

  const logout = useMutation({
    mutationFn: api.auth.logout,
    onSuccess: () => {
      queryClient.clear();
      navigate({ to: "/login" });
    },
  });

  return (
    <nav className="sticky top-0 z-50 h-12 bg-[rgba(255,255,255,0.85)] backdrop-blur-xl border-b border-black/[0.06] flex items-center px-6 gap-6">
      <Link to="/" className="font-semibold text-[15px] text-[#1d1d1f] tracking-tight flex items-center gap-1.5">
        <span className="text-[#0071e3]">◆</span>
        pijulab
      </Link>

      <div className="flex-1" />

      {user ? (
        <div className="flex items-center gap-3">
          <Link
            to="/new"
            className="text-[13px] text-[#0071e3] hover:underline"
          >
            New repo
          </Link>
          <div className="w-px h-4 bg-black/[0.12]" />
          <Link
            to="/"
            className="text-[13px] font-medium text-[#1d1d1f] hover:text-[#0071e3] transition-colors"
          >
            {user.username}
          </Link>
          <button
            onClick={() => logout.mutate()}
            className="text-[13px] text-[#6e6e73] hover:text-[#1d1d1f] transition-colors"
          >
            Sign out
          </button>
        </div>
      ) : (
        <div className="flex items-center gap-3">
          <Link
            to="/login"
            className="text-[13px] text-[#1d1d1f] hover:text-[#0071e3] transition-colors"
          >
            Sign in
          </Link>
          <Link
            to="/signup"
            className="text-[13px] font-medium bg-[#0071e3] text-white px-3 h-7 rounded-[8px] inline-flex items-center hover:bg-[#0077ed] transition-colors"
          >
            Sign up
          </Link>
        </div>
      )}
    </nav>
  );
}