"use client";

import { useQuery, useQueryClient } from "@tanstack/react-query";
import { useEffect } from "react";
import { AuthAPI } from "@/lib/auth/auth-api";

export function useUser() {
  const queryClient = useQueryClient();

  const hasToken =
    typeof window !== "undefined" &&
    !!localStorage.getItem("auth_token");

  const query = useQuery({
    queryKey: ["auth", "user"],
    queryFn: AuthAPI.getUser,
    enabled: hasToken,
    refetchOnWindowFocus: true,
    retry: false,
  });

  //  1. Sync across tabs (MOST IMPORTANT)
  useEffect(() => {
    const handleStorage = (event: StorageEvent) => {
      if (event.key === "auth_token") {
        queryClient.invalidateQueries({ queryKey: ["auth", "user"] });
      }
    };

    window.addEventListener("storage", handleStorage);

    return () => {
      window.removeEventListener("storage", handleStorage);
    };
  }, [queryClient]);

  //  2. OPTIONAL: Sync when tab becomes active
  useEffect(() => {
    const handleFocus = () => {
      queryClient.invalidateQueries({ queryKey: ["auth", "user"] });
    };

    window.addEventListener("focus", handleFocus);

    return () => {
      window.removeEventListener("focus", handleFocus);
    };
  }, [queryClient]);

  return {
    user: query.data ?? null,
    isLoading: hasToken && query.isLoading,
    isAuthenticated: !!query.data,
    isFetching: query.isFetching,
  };
}