const searchParams = useSearchParams();
  const getAuthUrl = useSpotifyStore((state) => state.getAuthUrl);
  const handleAuthCode = useSpotifyStore((state) => state.handleAuthCode);
  const clearAuth = useSpotifyStore((state) => state.clearAuth);
  const accessToken = useSpotifyStore((state) => state.accessToken);
  const isLoading = useSpotifyStore((state) => state.isLoading);
  const displayName = useSpotifyStore((state) => state.displayName);

  const processedCode = useRef<string | null>(null);

  useEffect(() => {
    const code = searchParams.get("code");
    if (!code || processedCode.current === code) return;

    const handleAuth = async () => {
      try {
        processedCode.current = code;
        await handleAuthCode(code);

        // Clean up the URL
        const currentUrl = new URL(window.location.href);
        currentUrl.searchParams.delete("code");
        window.history.replaceState({}, "", currentUrl.toString());
      } catch (error) {
        console.error("Error during authentication:", error);
        clearAuth();
        processedCode.current = null;
      }
    };

    handleAuth();
  }, [searchParams, handleAuthCode, clearAuth]);

  const handleLogin = async () => {
    try {
      const authUrl = await getAuthUrl();
      window.location.href = authUrl;
    } catch (error) {
      console.error("Error starting auth flow:", error);
    }
  };