import { useAuth, useNavigate } from "@tailor-platform/app-shell";
import { LogOut, User } from "lucide-react";
import { useQuery } from "urql";
import { graphql } from "@/graphql";

const MeQuery = graphql(`
  query MeProfile {
    me {
      id
      name
      email
    }
  }
`);

export const UserProfileMenu = () => {
  const { logout } = useAuth();
  const navigate = useNavigate();
  const [{ data }] = useQuery({ query: MeQuery });

  const user = data?.me;

  return (
    <div className="border-sidebar-border border-t p-3 in-data-[collapsible=icon]:p-2">
      <div className="flex items-center gap-3 in-data-[collapsible=icon]:justify-center in-data-[collapsible=icon]:gap-0">
        <button
          type="button"
          onClick={() => void navigate("/user-management/profile")}
          className="flex flex-1 items-center gap-3 overflow-hidden rounded-md p-1 transition-colors hover:bg-sidebar-accent in-data-[collapsible=icon]:flex-none in-data-[collapsible=icon]:overflow-visible in-data-[collapsible=icon]:p-0"
          title="View profile"
        >
          <div className="bg-sidebar-primary text-sidebar-primary-foreground flex size-8 shrink-0 items-center justify-center rounded-full">
            <User className="size-4" />
          </div>
          <div className="flex flex-1 flex-col items-start overflow-hidden in-data-[collapsible=icon]:hidden">
            <span className="text-sidebar-foreground truncate text-sm font-medium">
              {user?.name ?? "..."}
            </span>
            <span className="text-sidebar-foreground/60 truncate text-xs">{user?.email ?? ""}</span>
          </div>
        </button>
        <button
          type="button"
          onClick={() => void logout()}
          className="text-sidebar-foreground/60 hover:text-sidebar-foreground shrink-0 rounded p-1 transition-colors in-data-[collapsible=icon]:hidden"
          title="Sign out"
        >
          <LogOut className="size-4" />
        </button>
      </div>
    </div>
  );
};